Deepseek ArtifactsDeepseek Artifacts

Water Delivery App

4.0
en
Technology
water delivery
home delivery
app

Prompt

Water home delivery app. Customer order the water bottle in their current location.

Generated Result

import React from 'react';

const App = () => {
  return (
    <div className="App bg-gray-100 min-h-screen">
      <header className="bg-blue-600 text-white p-6">
        <h1 className="text-3xl font-bold">Water Home Delivery</h1>
      </header>
      <main className="p-6">
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Order Water Bottles</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <img src="https://placehold.co/300x300" alt="Water Bottle" className="mb-4 rounded-lg" />
              <h3 className="text-xl font-semibold mb-2">Natural Spring Water</h3>
              <p className="text-gray-700 mb-4">Pure and refreshing natural spring water.</p>
              <button className="bg-blue-600 text-white px-4 py-2 rounded-lg">Order Now</button>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <img src="https://placehold.co/300x300" alt="Water Bottle" className="mb-4 rounded-lg" />
              <h3 className="text-xl font-semibold mb-2">Mineral Water</h3>
              <p className="text-gray-700 mb-4">Rich in essential minerals for your health.</p>
              <button className="bg-blue-600 text-white px-4 py-2 rounded-lg">Order Now</button>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <img src="https://placehold.co/300x300" alt="Water Bottle" className="mb-4 rounded-lg" />
              <h3 className="text-xl font-semibold mb-2">Sparkling Water</h3>
              <p className="text-gray-700 mb-4">Effervescent and refreshing sparkling water.</p>
              <button className="bg-blue-600 text-white px-4 py-2 rounded-lg">Order Now</button>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">How It Works</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold mb-2">1. Choose Your Water</h3>
              <p className="text-gray-700">Select from our wide range of water options.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold mb-2">2. Enter Your Location</h3>
              <p className="text-gray-700">Provide your current location for delivery.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold mb-2">3. Get It Delivered</h3>
              <p className="text-gray-700">Enjoy your water delivered to your doorstep.</p>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Why Choose Us?</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold mb-2">Fast Delivery</h3>
              <p className="text-gray-700">We deliver your water quickly and efficiently.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold mb-2">High Quality</h3>
              <p className="text-gray-700">Our water is sourced from the best natural springs.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold mb-2">Eco-Friendly</h3>
              <p className="text-gray-700">We use sustainable practices to protect the environment.</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <h3 className="text-xl font-semibold mb-2">Customer Support</h3>
              <p className="text-gray-700">Our team is always here to help you.</p>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Customer Reviews</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div className="bg-white p-6 rounded-lg shadow-md">
              <p className="text-gray-700 mb-4">"The water is so refreshing and the delivery was super fast!"</p>
              <p className="text-gray-600">- John Doe</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <p className="text-gray-700 mb-4">"I love the eco-friendly packaging. Great service!"</p>
              <p className="text-gray-600">- Jane Smith</p>
            </div>
            <div className="bg-white p-6 rounded-lg shadow-md">
              <p className="text-gray-700 mb-4">"The mineral water is my favorite. Highly recommend!"</p>
              <p className="text-gray-600">- Mike Johnson</p>
            </div>
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Our Partners</h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            <img src="https://placehold.co/150x150" alt="Partner 1" className="rounded-lg" />
            <img src="https://placehold.co/150x150" alt="Partner 2" className="rounded-lg" />
            <img src="https://placehold.co/150x150" alt="Partner 3" className="rounded-lg" />
            <img src="https://placehold.co/150x150" alt="Partner 4" className="rounded-lg" />
          </div>
        </section>
        <section className="mb-8">
          <h2 className="text-2xl font-semibold mb-4">Contact Us</h2>
          <form className="bg-white p-6 rounded-lg shadow-md">
            <div className="mb-4">
              <label className="block text-gray-700 mb-2">Name</label>
              <input type="text" className="w-full px-4 py-2 border rounded-lg" />
            </div>
            <div className="mb-4">
              <label className="block text-gray-700 mb-2">Email</label>
              <input type="email" className="w-full px-4 py-2 border rounded-lg" />
            </div>
            <div className="mb-4">
              <label className="block text-gray-700 mb-2">Message</label>
              <textarea className="w-full px-4 py-2 border rounded-lg"></textarea>
            </div>
            <button type="submit" className="bg-blue-600 text-white px-4 py-2 rounded-lg">Send Message</button>
          </form>
        </section>
      </main>
      <footer className="bg-blue-600 text-white p-6">
        <p className="text-center">© 2025 Water Home Delivery. 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 ...