create-ecom-app 1.0.0

package/index.js

@@ -0,0 +1,101 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const prompts = require('prompts');
+const fs = require('fs-extra');
+const path = require('path');
+const chalk = require('chalk');
+const ora = require('ora');
+
+const TEMPLATE_DIR = path.join(__dirname, 'templates', 'ecommerce');
+
+async function main() {
+  console.log('');
+  console.log(chalk.bold.cyan('  ╔══════════════════════════════════╗'));
+  console.log(chalk.bold.cyan('  ║     🛒  create-ecom-app  v1.0    ║'));
+  console.log(chalk.bold.cyan('  ╚══════════════════════════════════╝'));
+  console.log('');
+
+  // Get project name from args or prompt
+  let projectName = process.argv[2];
+
+  if (!projectName) {
+    const response = await prompts({
+      type: 'text',
+      name: 'name',
+      message: 'Project name:',
+      initial: 'my-store',
+      validate: (v) => v.length > 0 || 'Please enter a project name',
+    });
+    if (!response.name) {
+      console.log(chalk.red('\n  ✗ Cancelled.'));
+      process.exit(1);
+    }
+    projectName = response.name;
+  }
+
+  const targetDir = path.resolve(process.cwd(), projectName);
+
+  // Validate: folder must not already exist
+  if (fs.existsSync(targetDir)) {
+    console.log(chalk.red(`\n  ✗ Folder "${projectName}" already exists. Choose a different name.\n`));
+    process.exit(1);
+  }
+
+  // Check template exists
+  if (!fs.existsSync(TEMPLATE_DIR)) {
+    console.log(chalk.red('\n  ✗ Template not found. Please reinstall create-ecom-app.\n'));
+    process.exit(1);
+  }
+
+  console.log('');
+  console.log(chalk.gray(`  Creating project in: ${chalk.white(targetDir)}`));
+  console.log('');
+
+  // Copy template
+  const copySpinner = ora(chalk.cyan('  Copying template files...')).start();
+  try {
+    const EXCLUDE = ['node_modules', '.next', '.turbo', 'dist'];
+    await fs.copy(TEMPLATE_DIR, targetDir, {
+      filter: (src) => {
+        const relative = path.relative(TEMPLATE_DIR, src);
+        return !EXCLUDE.some((ex) => relative.startsWith(ex) || relative === ex);
+      },
+    });
+    // Update package.json name field
+    const pkgPath = path.join(targetDir, 'package.json');
+    if (fs.existsSync(pkgPath)) {
+      const pkg = await fs.readJson(pkgPath);
+      pkg.name = projectName;
+      await fs.writeJson(pkgPath, pkg, { spaces: 2 });
+    }
+    copySpinner.succeed(chalk.green('  Template files copied!'));
+  } catch (err) {
+    copySpinner.fail(chalk.red('  Failed to copy template.'));
+    console.error(err);
+    process.exit(1);
+  }
+
+  // Skipping auto npm install — let user run it (faster UX, no stuck spinner)
+  console.log(chalk.green('  ✔   Template files ready!   '));
+
+  // Success output
+  console.log('');
+  console.log(chalk.bold.green('  ✅ Project created: ') + chalk.bold.white(projectName));
+  console.log('');
+  console.log(chalk.bold('  Next steps:'));
+  console.log(chalk.cyan(`    cd ${projectName}`));
+  console.log(chalk.cyan('    npm install'));
+  console.log(chalk.cyan('    npm run dev'));
+  console.log('');
+  console.log(chalk.gray('  Open: ') + chalk.underline.blue('http://localhost:3000'));
+  console.log('');
+  console.log(chalk.bold.magenta('  🚀 Happy building!'));
+  console.log('');
+}
+
+main().catch((err) => {
+  console.error(chalk.red('\n  Unexpected error:'), err);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "create-ecom-app",
+  "version": "1.0.0",
+  "description": "Zero-config CLI to bootstrap a full-featured Next.js ecommerce app",
+  "main": "index.js",
+  "bin": {
+    "create-ecom-app": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "templates/"
+  ],
+  "scripts": {
+    "test": "node index.js test-store"
+  },
+  "dependencies": {
+    "chalk": "^4.1.2",
+    "fs-extra": "^11.2.0",
+    "ora": "^5.4.1",
+    "prompts": "^2.4.2"
+  },
+  "keywords": ["ecommerce", "nextjs", "cli", "scaffold", "starter"],
+  "author": "Antigravity",
+  "license": "MIT"
+}

package/templates/ecommerce/app/about/page.tsx

@@ -0,0 +1,152 @@
+import type { Metadata } from 'next';
+import Image from 'next/image';
+import Link from 'next/link';
+import { Target, Leaf, Zap, Heart, ArrowRight, Users, Package, Star } from 'lucide-react';
+
+export const metadata: Metadata = {
+  title: 'About Us',
+  description: 'Learn about GenZ Shop — our story, mission and the team behind it.',
+};
+
+const values = [
+  { icon: Target, title: 'Quality First', desc: 'Every product vetted for quality before listing.' },
+  { icon: Leaf, title: 'Sustainability', desc: 'Eco-conscious brands and recyclable packaging.' },
+  { icon: Zap, title: 'Fast Delivery', desc: 'Orders delivered in 2-3 business days.' },
+  { icon: Heart, title: 'Customer First', desc: '30-day hassle-free return policy.' },
+];
+
+const stats = [
+  { icon: Package, val: '50K+', label: 'Orders Shipped' },
+  { icon: Users, val: '98%', label: 'Satisfaction Rate' },
+  { icon: Star, val: '4.9', label: 'Average Rating' },
+];
+
+const team = [
+  { name: 'Arjun Mehta', role: 'Founder & CEO', color: 'bg-violet-100 text-violet-700' },
+  { name: 'Priya Sharma', role: 'Head of Design', color: 'bg-blue-100 text-blue-700' },
+  { name: 'Rohan Kumar', role: 'Tech Lead', color: 'bg-emerald-100 text-emerald-700' },
+  { name: 'Ananya Singh', role: 'Marketing Lead', color: 'bg-amber-100 text-amber-700' },
+];
+
+export default function AboutPage() {
+  return (
+    <div className="bg-white">
+      {/* ── HERO (HubSpot style: text left, image right) ── */}
+      <section className="container-main py-20 md:py-28">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+          <div>
+            <p className="text-sm font-bold text-violet-600 uppercase tracking-widest mb-3">Our Story</p>
+            <h1 className="text-4xl md:text-5xl font-black text-gray-900 leading-tight mb-5">
+              About<br />GenZ Shop
+            </h1>
+            <p className="text-gray-500 text-lg leading-relaxed">
+              GenZ Shop&apos;s culture is a lot like our product. Crafted, not cobbled — for a delightful shopping experience made for the next generation.
+            </p>
+          </div>
+          <div className="relative rounded-3xl overflow-hidden aspect-[4/3]">
+            <Image
+              src="/images/about-1.jpg"
+              alt="Our team"
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 100vw, 50vw"
+            />
+          </div>
+        </div>
+      </section>
+
+      {/* ── STATS ── */}
+      <section className="bg-gray-900 text-white py-14">
+        <div className="container-main">
+          <div className="grid grid-cols-3 divide-x divide-gray-700">
+            {stats.map(({ icon: Icon, val, label }) => (
+              <div key={label} className="text-center px-6 py-2">
+                <Icon className="w-6 h-6 text-gray-400 mx-auto mb-2" />
+                <p className="text-3xl font-black mb-1">{val}</p>
+                <p className="text-gray-400 text-sm">{label}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── MISSION (HubSpot: image left, text right) ── */}
+      <section className="container-main py-20">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+          <div className="relative rounded-3xl overflow-hidden aspect-[4/3] order-2 md:order-1">
+            <Image
+              src="/images/about-2.jpg"
+              alt="Our office culture"
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 100vw, 50vw"
+            />
+          </div>
+          <div className="order-1 md:order-2">
+            <p className="text-sm font-bold text-violet-600 uppercase tracking-widest mb-3">Our Mission</p>
+            <h2 className="text-3xl font-black text-gray-900 leading-tight mb-5">
+              Helping Everyone Shop Smarter
+            </h2>
+            <p className="text-gray-500 leading-relaxed mb-5">
+              We believe not just in selling products, but in building a community. Growing better means aligning the success of our store with the satisfaction of our customers. Win-win!
+            </p>
+            <p className="text-gray-500 leading-relaxed">
+              Since 2022, we&apos;ve worked directly with brands and manufacturers to cut out middlemen and pass savings directly to you.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* ── VALUES ── */}
+      <section className="bg-gray-50 py-16">
+        <div className="container-main">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl font-black text-gray-900 mb-2">What We Stand For</h2>
+            <p className="text-gray-500">The principles that drive everything we do</p>
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {values.map(({ icon: Icon, title, desc }) => (
+              <div key={title} className="bg-white rounded-2xl p-6 shadow-sm hover:shadow-md transition-shadow">
+                <div className="w-12 h-12 bg-gray-900 rounded-xl flex items-center justify-center mb-4">
+                  <Icon className="w-6 h-6 text-white" />
+                </div>
+                <h3 className="font-bold text-gray-900 mb-2">{title}</h3>
+                <p className="text-sm text-gray-500 leading-relaxed">{desc}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* ── TEAM ── */}
+      <section className="container-main py-20">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-black text-gray-900 mb-2">Meet the Team</h2>
+          <p className="text-gray-500">The humans building GenZ Shop</p>
+        </div>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+          {team.map(({ name, role, color }) => (
+            <div key={name} className="bg-white rounded-2xl p-6 text-center shadow-sm hover:shadow-md transition-shadow">
+              <div className={`w-16 h-16 ${color} rounded-2xl flex items-center justify-center mx-auto mb-4`}>
+                <span className="text-2xl font-black">{name.charAt(0)}</span>
+              </div>
+              <h3 className="font-bold text-gray-900">{name}</h3>
+              <p className="text-sm text-gray-500 mt-0.5">{role}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* ── CTA ── */}
+      <section className="bg-gray-900 py-16 text-center text-white">
+        <div className="container-main max-w-xl mx-auto">
+          <h2 className="text-3xl font-black mb-3">Ready to shop smarter?</h2>
+          <p className="text-gray-400 mb-8">Join thousands of happy GenZ customers today.</p>
+          <Link href="/products" className="inline-flex items-center gap-2 bg-white text-gray-900 font-bold px-10 py-3.5 rounded-xl hover:bg-gray-100 transition-all active:scale-95">
+            Explore Products <ArrowRight className="w-4 h-4" />
+          </Link>
+        </div>
+      </section>
+    </div>
+  );
+}

package/templates/ecommerce/app/cart/page.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import Link from 'next/link';
+import { ShoppingCart, Trash2, ArrowRight } from 'lucide-react';
+import { useCartStore } from '@/store/useCartStore';
+import CartItem from '@/components/CartItem';
+import { formatPrice } from '@/lib/utils';
+
+const SHIPPING_THRESHOLD = 999;
+
+export default function CartPage() {
+  const { items, clearCart, total, itemCount } = useCartStore();
+  const subtotal = total();
+  const count = itemCount();
+  const shipping = subtotal > 0 && subtotal < SHIPPING_THRESHOLD ? 99 : 0;
+  const grandTotal = subtotal + shipping;
+
+  if (count === 0) {
+    return (
+      <div className="container-main py-24 text-center animate-fade-in">
+        <div className="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6">
+          <ShoppingCart className="w-12 h-12 text-gray-400" />
+        </div>
+        <h1 className="page-title">Your cart is empty</h1>
+        <p className="text-gray-500 mb-8">Looks like you haven&apos;t added anything yet.</p>
+        <Link href="/products" className="btn-primary inline-flex items-center gap-2">
+          Browse Products <ArrowRight className="w-4 h-4" />
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container-main py-10 animate-fade-in">
+      <div className="flex items-center justify-between mb-8">
+        <div>
+          <h1 className="page-title">Your Cart</h1>
+          <p className="text-gray-500">{count} {count === 1 ? 'item' : 'items'}</p>
+        </div>
+        <button
+          onClick={clearCart}
+          className="flex items-center gap-1.5 text-sm text-red-400 hover:text-red-500 font-medium transition-colors"
+          id="clear-cart-btn"
+        >
+          <Trash2 className="w-4 h-4" /> Clear Cart
+        </button>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* Cart Items */}
+        <div className="lg:col-span-2 space-y-4">
+          {items.map((item) => (
+            <CartItem key={item.product.id} item={item} />
+          ))}
+        </div>
+
+        {/* Order Summary */}
+        <div className="lg:col-span-1">
+          <div className="bg-white rounded-2xl shadow-sm p-6 sticky top-24">
+            <h2 className="text-lg font-bold text-gray-900 mb-5">Order Summary</h2>
+
+            <div className="space-y-3 mb-5">
+              <div className="flex justify-between text-sm text-gray-600">
+                <span>Subtotal ({count} items)</span>
+                <span className="font-medium text-gray-900">{formatPrice(subtotal)}</span>
+              </div>
+              <div className="flex justify-between text-sm text-gray-600">
+                <span>Shipping</span>
+                <span className={`font-medium ${shipping === 0 ? 'text-green-500' : 'text-gray-900'}`}>
+                  {shipping === 0 ? 'FREE' : formatPrice(shipping)}
+                </span>
+              </div>
+              {subtotal > 0 && subtotal < SHIPPING_THRESHOLD && (
+                <p className="text-xs text-gray-400">
+                  Add {formatPrice(SHIPPING_THRESHOLD - subtotal)} more for free shipping
+                </p>
+              )}
+            </div>
+
+            <div className="border-t border-gray-100 pt-4 mb-6">
+              <div className="flex justify-between">
+                <span className="font-bold text-gray-900">Total</span>
+                <span className="font-bold text-xl text-gray-900">{formatPrice(grandTotal)}</span>
+              </div>
+            </div>
+
+            <Link
+              href="/checkout"
+              className="btn-primary w-full text-center block py-3.5 text-base"
+              id="checkout-btn"
+            >
+              Proceed to Checkout →
+            </Link>
+
+            <Link href="/products" className="block text-center text-sm text-gray-400 hover:text-gray-700 mt-4 transition-colors">
+              ← Continue Shopping
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/ecommerce/app/checkout/page.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { CheckCircle, Loader2 } from 'lucide-react';
+import { useCartStore } from '@/store/useCartStore';
+import { useAuthStore } from '@/store/useAuthStore';
+import { useOrderStore } from '@/store/useOrderStore';
+import CheckoutForm from '@/components/CheckoutForm';
+import { formatPrice, generateId } from '@/lib/utils';
+import type { Address } from '@/types';
+
+export default function CheckoutPage() {
+  const router = useRouter();
+  const { items, total, clearCart } = useCartStore();
+  const { isAuthenticated, user } = useAuthStore();
+  const { addOrder } = useOrderStore();
+  const [success, setSuccess] = useState(false);
+  const [orderId, setOrderId] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const subtotal = total();
+  const shipping = subtotal > 0 && subtotal < 999 ? 99 : 0;
+  const grandTotal = subtotal + shipping;
+
+  if (!isAuthenticated) {
+    return (
+      <div className="container-main py-24 text-center">
+        <div className="text-6xl mb-6">🔐</div>
+        <h1 className="page-title">Login Required</h1>
+        <p className="text-gray-500 mb-8">Please login to proceed to checkout.</p>
+        <Link href="/login" className="btn-primary inline-block">Login</Link>
+      </div>
+    );
+  }
+
+  if (items.length === 0 && !success) {
+    return (
+      <div className="container-main py-24 text-center">
+        <div className="text-8xl mb-6">🛒</div>
+        <h1 className="page-title">Your cart is empty</h1>
+        <Link href="/products" className="btn-primary inline-block mt-4">Browse Products</Link>
+      </div>
+    );
+  }
+
+  if (success) {
+    return (
+      <div className="container-main py-24 text-center">
+        <div className="max-w-md mx-auto">
+          <div className="w-24 h-24 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
+            <CheckCircle className="w-14 h-14 text-green-500" />
+          </div>
+          <h1 className="text-3xl font-bold text-gray-900 mb-3">Order Placed! 🎉</h1>
+          <p className="text-gray-500 mb-1">Thank you for shopping with ShopVibe!</p>
+          {orderId && (
+            <p className="text-sm font-mono text-gray-400 mb-8">Order ID: {orderId}</p>
+          )}
+          <div className="flex flex-col sm:flex-row gap-3 justify-center">
+            <Link href="/profile?tab=orders" className="btn-primary">View My Orders</Link>
+            <Link href="/products" className="btn-secondary">Continue Shopping</Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const handlePlaceOrder = (address: Address) => {
+    setIsLoading(true);
+    setTimeout(() => {
+      const order = addOrder({ items, address, subtotal, shipping, total: grandTotal });
+      clearCart();
+      setOrderId(order.id);
+      setIsLoading(false);
+      setSuccess(true);
+    }, 1200);
+  };
+
+  return (
+    <div className="container-main py-10">
+      <div className="mb-8">
+        <h1 className="page-title">Checkout</h1>
+        <p className="text-gray-500">Almost there! Fill in your delivery details.</p>
+      </div>
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="lg:col-span-2">
+          <div className="bg-white rounded-2xl shadow-sm p-6">
+            <h2 className="font-bold text-gray-900 mb-5 text-lg">Delivery Address</h2>
+            <CheckoutForm onSubmit={handlePlaceOrder} isLoading={isLoading} />
+          </div>
+        </div>
+        <div>
+          <div className="bg-white rounded-2xl shadow-sm p-6 sticky top-24">
+            <h2 className="font-bold text-gray-900 mb-5 text-lg">Order Summary</h2>
+            <div className="space-y-3 mb-5">
+              {items.map((item) => (
+                <div key={item.product.id} className="flex justify-between text-sm">
+                  <span className="text-gray-600 line-clamp-1 flex-1 mr-2">
+                    {item.product.name} × {item.quantity}
+                  </span>
+                  <span className="font-medium text-gray-900 flex-shrink-0">
+                    {formatPrice(item.product.price * item.quantity)}
+                  </span>
+                </div>
+              ))}
+            </div>
+            <div className="border-t border-gray-100 pt-4 space-y-2">
+              <div className="flex justify-between text-sm text-gray-600">
+                <span>Subtotal</span>
+                <span>{formatPrice(subtotal)}</span>
+              </div>
+              <div className="flex justify-between text-sm text-gray-600">
+                <span>Shipping</span>
+                <span className={shipping === 0 ? 'text-green-500 font-medium' : ''}>{shipping === 0 ? 'FREE' : formatPrice(shipping)}</span>
+              </div>
+              <div className="flex justify-between font-bold text-gray-900 pt-2 border-t border-gray-100">
+                <span>Total</span>
+                <span className="text-lg">{formatPrice(grandTotal)}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/ecommerce/app/contact/page.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { useState } from 'react';
+import { Mail, Phone, MapPin, Clock, Loader2, CheckCircle, Send, Twitter, Instagram, Youtube } from 'lucide-react';
+
+const contactInfo = [
+  { icon: Phone, label: 'Call Us', value: '+91 98765 43210' },
+  { icon: Mail, label: 'Email Us', value: 'hello@genzshop.in' },
+  { icon: MapPin, label: 'Address', value: 'Chennai, Tamil Nadu, India 600001' },
+  { icon: Clock, label: 'Hours', value: 'Mon–Sat, 9AM–6PM IST' },
+];
+
+const socials = [
+  { icon: Twitter, href: '#', bg: 'bg-sky-500' },
+  { icon: Instagram, href: '#', bg: 'bg-pink-500' },
+  { icon: Youtube, href: '#', bg: 'bg-red-500' },
+];
+
+export default function ContactPage() {
+  const [form, setForm] = useState({ name: '', email: '', subject: '', message: '' });
+  const [sent, setSent] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setTimeout(() => { setIsLoading(false); setSent(true); }, 1000);
+  };
+
+  return (
+    <div>
+      {/* Hero Banner */}
+      <section className="relative bg-gray-900 text-white py-20 overflow-hidden">
+        <div className="absolute inset-0 opacity-30" style={{
+          backgroundImage: `url('/images/contact-bg.jpg')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+        }} />
+        <div className="absolute inset-0 bg-gray-900/70" />
+        <div className="relative z-10 container-main text-center">
+          <h1 className="text-5xl font-black mb-3">Contact <span className="text-violet-400">Us</span></h1>
+          <p className="text-gray-300">Home / Contact Us</p>
+        </div>
+      </section>
+
+      {/* Main Content */}
+      <section className="container-main py-16">
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-10">
+          {/* Form — left 2 cols */}
+          <div className="lg:col-span-2 bg-white rounded-2xl shadow-sm p-8">
+            {sent ? (
+              <div className="text-center py-16">
+                <CheckCircle className="w-16 h-16 text-green-500 mx-auto mb-5" />
+                <h3 className="text-2xl font-black text-gray-900 mb-2">Message Sent!</h3>
+                <p className="text-gray-500 mb-6">We&apos;ll reply within 24 hours.</p>
+                <button onClick={() => { setSent(false); setForm({ name: '', email: '', subject: '', message: '' }); }} className="btn-secondary">
+                  Send Another
+                </button>
+              </div>
+            ) : (
+              <form onSubmit={handleSubmit} className="space-y-5">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <div>
+                    <label htmlFor="contact-name" className="block text-sm font-medium text-gray-700 mb-1.5">Your Name</label>
+                    <input id="contact-name" type="text" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} placeholder="Full Name" className="input" required />
+                  </div>
+                  <div>
+                    <label htmlFor="contact-email" className="block text-sm font-medium text-gray-700 mb-1.5">Your Email</label>
+                    <input id="contact-email" type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} placeholder="Email Address" className="input" required />
+                  </div>
+                </div>
+                <div>
+                  <label htmlFor="contact-subject" className="block text-sm font-medium text-gray-700 mb-1.5">Subject</label>
+                  <input id="contact-subject" type="text" value={form.subject} onChange={(e) => setForm({ ...form, subject: e.target.value })} placeholder="Subject" className="input" required />
+                </div>
+                <div>
+                  <label htmlFor="contact-message" className="block text-sm font-medium text-gray-700 mb-1.5">Your Message</label>
+                  <textarea id="contact-message" value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} placeholder="Message..." rows={6} className="input resize-none" required />
+                </div>
+                <button type="submit" disabled={isLoading} className="btn-primary px-8 py-3 flex items-center gap-2" id="contact-submit-btn">
+                  {isLoading ? <><Loader2 className="w-4 h-4 animate-spin" /> Sending...</> : <><Send className="w-4 h-4" /> Send Message</>}
+                </button>
+              </form>
+            )}
+          </div>
+
+          {/* Right: Contact Info */}
+          <div className="space-y-5">
+            <div>
+              <p className="text-sm font-bold text-violet-600 uppercase tracking-widest mb-2">Contact Us</p>
+              <h2 className="text-3xl font-black text-gray-900 mb-4">Get In Touch</h2>
+              <p className="text-gray-500 text-sm leading-relaxed">
+                Have a question or feedback? We&apos;re here to help. Fill in the form or reach us directly through the channels below.
+              </p>
+            </div>
+
+            {contactInfo.map(({ icon: Icon, label, value }) => (
+              <div key={label} className="flex items-start gap-4">
+                <div className="w-11 h-11 bg-gray-900 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
+                  <Icon className="w-5 h-5 text-white" />
+                </div>
+                <div>
+                  <p className="text-xs font-bold text-gray-400 uppercase tracking-wider">{label}</p>
+                  <p className="text-sm font-semibold text-gray-900 mt-0.5">{value}</p>
+                </div>
+              </div>
+            ))}
+
+            <div>
+              <p className="text-sm font-bold text-gray-700 mb-3">Follow Us On</p>
+              <div className="flex gap-3">
+                {socials.map(({ icon: Icon, href, bg }) => (
+                  <a key={bg} href={href} className={`${bg} w-9 h-9 rounded-full flex items-center justify-center text-white hover:opacity-90 transition-opacity`}>
+                    <Icon className="w-4 h-4" />
+                  </a>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}