Okay, let's start building the foundation for the Adonia Plant Nursery e-commerce web application using Next.js and Tailwind CSS. This initial setup will create the basic project structure, configure styling, and provide a simple homepage layout. { "name": "adonia-nursery-app", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "next": "14.2.4", "react": "^18", "react-dom": "^18" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", "eslint-config-next": "14.2.4", "postcss": "^8", "tailwindcss": "^3.4.1", "typescript": "^5" } } { "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": true, "noEmit": true, "esModuleInterop": true, "module": "esnext", "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, "jsx": "preserve", "incremental": true, "plugins": [ { "name": "next" } ], "paths": { "@/*": ["./src/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], "exclude": ["node_modules"] } /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, }; export default nextConfig; import type { Config } from "tailwindcss"; const config: Config = { content: [ "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/components/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}", // If using App Router ], theme: { extend: { backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", }, colors: { primary: { // Example primary color (adjust as needed) light: '#6EE7B7', // Lighter green DEFAULT: '#10B981', // Medium green dark: '#047857', // Darker green }, secondary: '#F59E0B', // Example secondary color (amber) } }, }, plugins: [], }; export default config; /** @type {import('postcss-load-config').Config} */ const config = { plugins: { tailwindcss: {}, autoprefixer: {}, }, }; export default config; @tailwind base; @tailwind components; @tailwind utilities; body { color: rgb(var(--foreground-rgb)); background: linear-gradient( to bottom, transparent, rgb(var(--background-end-rgb)) ) rgb(var(--background-start-rgb)); /* Basic background, can be customized later */ } @layer utilities { .text-balance { text-wrap: balance; } } import Link from 'next/link'; import React from 'react'; const Header: React.FC = () => { return (

); }; export default Header; import React from 'react'; const Footer: React.FC = () => { return ( ); }; export default Footer; import React, { ReactNode } from 'react'; import Header from './Header'; import Footer from './Footer'; interface LayoutProps { children: ReactNode; } const Layout: React.FC = ({ children }) => { return (

{children}

); }; export default Layout; import '@/styles/globals.css'; import type { AppProps } from 'next/app'; import Layout from '@/components/Layout'; export default function App({ Component, pageProps }: AppProps) { return ( ); } import Head from 'next/head'; export default function Home() { return ( <> Adonia Plant Nursery - Welcome {/* Add favicon later */}

{/* Hero Section */}

Welcome to Adonia Nursery

Bringing nature's beauty to your home.

{/* Add animation/slider component here later */}

{/* Featured Products Section */}

Featured Plants

{/* Placeholder Product Cards - Replace with actual data later */}

Placeholder Product 1

Placeholder Product 2

Placeholder Product 3

Placeholder Product 4

{/* Categories Section */}

Shop by Category

{/* Placeholder Category Links */}

Indoor Plants

Outdoor Plants

Flowering Plants

Pots & Tools

{/* Add New Arrivals / Best Sellers sections later */}

); } import Head from 'next/head'; import React from 'react'; const ProductsPage: React.FC = () => { return ( <> Our Plants - Adonia Plant Nursery

Our Plant Collection

{/* Add Filtering/Sorting Controls Here */}

Filters and Sorting Options will go here.

{/* Product Grid */}

{/* Placeholder Product Cards - Replace with actual data and ProductCard component later */}

Product 1

Product 2

Product 3

Product 4

Product 5

Product 6

{/* Add more placeholders or implement pagination */}

); }; export default ProductsPage; import Head from 'next/head'; import React from 'react'; const CartPage: React.FC = () => { // Placeholder cart items - replace with actual cart state later const cartItems = [ // { id: 1, name: 'Monstera Deliciosa', quantity: 1, price: 500 }, // { id: 2, name: 'Fiddle Leaf Fig', quantity: 1, price: 1200 }, ]; const subtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0); const whatsappNumber = "+919496622447"; // Adonia's WhatsApp number const generateWhatsAppMessage = () => { if (cartItems.length === 0) return "Your cart is empty!"; let message = "Hello Adonia Nursery, I'd like to inquire about these items from my cart:\n\n"; cartItems.forEach(item => { message += `- ${item.name} (Qty: ${item.quantity}) - ₹${item.price * item.quantity}\n`; }); message += `\nSubtotal: ₹${subtotal}`; return encodeURIComponent(message); }; const handleSendToWhatsApp = () => { if (cartItems.length > 0) { const message = generateWhatsAppMessage(); const whatsappUrl = `https://wa.me/${whatsappNumber}?text=${message}`; window.open(whatsappUrl, '_blank'); } else { alert("Your cart is empty. Add some items first!"); } }; return ( <> Shopping Cart - Adonia Plant Nursery

Your Shopping Cart

{cartItems.length === 0 ? (

Your cart is currently empty.

) : (

{/* Cart Item List */} {cartItems.map(item => (

{item.name}

Quantity: {item.quantity}

₹{item.price * item.quantity}

{/* Add remove/update quantity buttons later */}

))} {/* Cart Summary */}

Subtotal: ₹{subtotal}

{/* WhatsApp Button */} {/* Checkout Button (Add later) */} {/* */}

)}

); }; export default CartPage; import Head from 'next/head'; import React from 'react'; const AboutPage: React.FC = () => { return ( <> About Us - Adonia Plant Nursery

About Adonia Plant Nursery

Welcome to Adonia Plant Nursery, located in the heart of Kerala, India. We are passionate about plants and dedicated to providing the highest quality greenery for your homes, gardens, and businesses.

Our nursery boasts an extensive collection of over 2000 unique plant varieties, ranging from vibrant indoor foliage and exotic flowering species to hardy outdoor shrubs and essential gardening tools.

Our mission is to inspire a love for gardening and make the joy of plants accessible to everyone. We strive to offer expert advice and exceptional customer service to help you find the perfect plants for your space and needs.

Thank you for choosing Adonia Plant Nursery. We look forward to helping you grow your green oasis!

); }; export default AboutPage; import Head from 'next/head'; import React from 'react'; const ContactPage: React.FC = () => { return ( <> Contact Us - Adonia Plant Nursery

Contact Us

Have questions or need assistance? We're here to help!

Phone / WhatsApp: +91 94966 22447

Email: info@adonianursery.com (Example email)

Address: Adonia Plant Nursery, [Your Full Address], Kerala, India (Please add the full address)

You can also reach out via WhatsApp for quick inquiries or to discuss your order.

{/* Optional: Add a contact form later */}

); }; export default ContactPage; # Adonia Plant Nursery - E-commerce Web App This project is the foundation for the Adonia Plant Nursery e-commerce website, built with Next.js and Tailwind CSS. ## Getting Started 1. **Install Dependencies:** bash npm install # or yarn install 2. **Run the Development Server:** ```bash npm run dev # or yarn dev ``` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. ## Project Structure - `src/pages/`: Contains the application routes (e.g., `index.tsx` for homepage, `products/index.tsx` for product listing). - `src/components/`: Reusable React components (e.g., `Header.tsx`, `Footer.tsx`, `Layout.tsx`). - `src/styles/`: Global styles and Tailwind CSS base configuration. - `public/`: Static assets (images, fonts, etc.). - `tailwind.config.ts`: Tailwind CSS configuration file. - `next.config.mjs`: Next.js configuration file. - `tsconfig.json`: TypeScript configuration. ## Next Steps - Implement state management for the shopping cart. - Create reusable `ProductCard` component. - Fetch product data (initially mock data, then from API). - Build out the product detail page (`src/pages/products/[productId].tsx`). - Develop the checkout process. - Integrate payment gateways. - Set up user authentication. - Build the admin panel for product management. - Implement the chatbot. - Refine WhatsApp integration (potentially using Business API for more automation). This sets up: 1. A Next.js project using TypeScript. 2. Tailwind CSS for styling, with basic configuration and primary color theme. 3. A global layout (`Layout.tsx`) including a `Header` and `Footer`. 4. Basic page structure for Home, Products, Cart, About, and Contact. 5. A placeholder homepage (`index.tsx`) with sections for Hero, Featured Products, and Categories. 6. A placeholder product listing page (`products/index.tsx`). 7. A basic cart page (`cart/index.tsx`) with a "Send Cart to WhatsApp" button using a simple `wa.me` link for now. *Note: This uses the simpler click-to-chat functionality. Full automation requires the WhatsApp Business API.* 8. Placeholder About and Contact pages. 9. A `README.md` with setup instructions. You can now run `npm install` and then `npm run dev` to start the development server.