Deepseek ArtifactsDeepseek Artifacts

创建完整网站

4.0
en
技术开发
网站开发
后端
MindGuru

Prompt

create full website like https://q.mindguru.life/ar with backend

Generated Result

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="bg-blue-600 text-white p-4">
        <h1 className="text-3xl font-bold">MindGuru Life</h1>
      </header>
      <nav className="bg-blue-500 text-white p-2">
        <ul className="flex space-x-4">
          <li>Home</li>
          <li>About</li>
          <li>Services</li>
          <li>Contact</li>
        </ul>
      </nav>
      <main className="p-4">
        <section className="mb-8">
          <h2 className="text-2xl font-bold mb-4">Welcome to MindGuru Life</h2>
          <p className="text-gray-700">Discover your inner peace and improve your mental wellbeing with our expert guidance.</p>
        </section>
        <section className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
          <div className="bg-white p-4 shadow-lg rounded-lg">
            <img src="https://placehold.co/300x200" alt="Service 1" className="w-full h-48 object-cover rounded-md" />
            <h3 className="text-xl font-bold mt-2">Meditation</h3>
            <p className="text-gray-600">Learn meditation techniques to reduce stress and enhance mindfulness.</p>
          </div>
          <div className="bg-white p-4 shadow-lg rounded-lg">
            <img src="https://placehold.co/300x200" alt="Service 2" className="w-full h-48 object-cover rounded-md" />
            <h3 className="text-xl font-bold mt-2">Counseling</h3>
            <p className="text-gray-600">Professional counseling services tailored to your individual needs.</p>
          </div>
          <div className="bg-white p-4 shadow-lg rounded-lg">
            <img src="https://placehold.co/300x200" alt="Service 3" className="w-full h-48 object-cover rounded-md" />
            <h3 className="text-xl font-bold mt-2">Workshops</h3>
            <p className="text-gray-600">Join our workshops to explore various topics on mental health and wellbeing.</p>
          </div>
        </section>
        <section className="bg-blue-50 p-6 rounded-lg mb-8">
          <h2 className="text-2xl font-bold mb-4">About Us</h2>
          <p className="text-gray-700">MindGuru Life is dedicated to helping individuals achieve mental clarity and emotional balance through a variety of services and programs.</p>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-bold mb-4">Testimonials</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <p className="text-gray-600">"MindGuru Life has transformed my approach to mental health. Highly recommended!"</p>
              <p className="text-gray-500">- Jane Doe</p>
            </div>
            <div className="bg-white p-4 shadow-lg rounded-lg">
              <p className="text-gray-600">"Their workshops are insightful and very helpful for personal growth."</p>
              <p className="text-gray-500">- John Smith</p>
            </div>
          </div>
        </section>
        <section className="bg-blue-600 text-white p-6 rounded-lg mb-8">
          <h2 className="text-2xl font-bold mb-4">Contact Us</h2>
          <p className="mb-4">Get in touch with us to learn more about our services or to schedule a session.</p>
          <form className="space-y-4">
            <input type="text" placeholder="Your Name" className="w-full p-2 rounded text-black" />
            <input type="email" placeholder="Your Email" className="w-full p-2 rounded text-black" />
            <textarea placeholder="Your Message" className="w-full p-2 rounded text-black"></textarea>
            <button type="submit" className="bg-white text-blue-600 px-4 py-2 rounded">Send</button>
          </form>
        </section>
      </main>
      <footer className="bg-blue-800 text-white p-4">
        <p>© 2025 MindGuru Life. All rights reserved.</p>
      </footer>
    </div>
  );
}

export default App;

More Recommendations

View All

Build ChatGPT-Like Web Interface

4.0
Software Development
en
AI Integration
Full-Stack Development
ChatGPT
UI Design
Backend Orchestration
You are a professional full-stack developer AI with deep experience in building AI-integrated UIs, backend orchestration, and vector memory systems. I want you to build a **web-based ChatGPT-like int...

Flutter 产品列表页

4.0
编程开发
en
Flutter
Dart
产品列表
class ProductListPage extends StatefulWidget { final bool useArabic; const ProductListPage({super.key, this.useArabic = false}); @override State<ProductListPage> createState() => _ProductLis...

Flutter产品列表页

4.0
编程开发
en
Flutter
产品列表
Widget
class ProductListPage extends StatefulWidget { final bool useArabic; const ProductListPage({super.key, this.useArabic = false}); @override State<ProductListPage> createState() => _ProductLis...

Build XO App with AI

4.0
Programming
en
Tic Tac Toe
AI Game
JavaScript
create a complete XO (Tic Tac Toe) app with AI opponent: "Build a modern, fully-featured Tic Tac Toe (XO) app that includes: A clean, user-friendly interface optimized for mobile, tablet, and web. ...

Generate YouTube Subscribers

4.0
Technology
en
YouTube
Subscribers
App
Make an app let generate YouTube subscribers and and comments by enter your username after that the says how many subscribers and like do you want so you type the amount of likes and subscribers , so ...

YouTube Subscribers App

4.0
Technology
en
YouTube
Subscribers
App
Make an app let generate YouTube subscribers and and comments by enter your username after that the says how many subscribers and like do you want so you type the amount of likes and subscribers , so ...