npm - create-ecom-app - Versions diffs - 1.0.0 - Mend

create-ecom-app 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (69) hide show

package/templates/ecommerce/app/globals.css ADDED Viewed

@@ -0,0 +1,137 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
+:root {
+  --font-inter: 'Inter', sans-serif;
+}
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+html {
+  scroll-behavior: smooth;
+}
+body {
+  font-family: var(--font-inter), system-ui, sans-serif;
+  background-color: #f9fafb;
+  color: #111827;
+  -webkit-font-smoothing: antialiased;
+}
+@layer components {
+  .btn-primary {
+    @apply bg-gray-900 text-white px-5 py-2.5 rounded-lg font-medium
+    hover:bg-gray-700 active:scale-95 transition-all duration-200
+    disabled:opacity-50 disabled:cursor-not-allowed;
+  }
+  .btn-secondary {
+    @apply border border-gray-300 text-gray-700 px-5 py-2.5 rounded-lg font-medium
+    hover:bg-gray-50 active:scale-95 transition-all duration-200;
+  }
+  .btn-danger {
+    @apply bg-red-500 text-white px-5 py-2.5 rounded-lg font-medium
+    hover:bg-red-600 active:scale-95 transition-all duration-200;
+  }
+  .card {
+    @apply bg-white rounded-2xl shadow-sm hover:shadow-lg transition-shadow duration-300;
+  }
+  .input {
+    @apply w-full px-4 py-2.5 border border-gray-200 rounded-lg text-sm
+    focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent
+    transition-all duration-200 bg-white;
+  }
+  .container-main {
+    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
+  }
+  .badge {
+    @apply inline-flex items-center justify-center w-5 h-5 text-xs font-bold
+    bg-gray-900 text-white rounded-full;
+  }
+  .page-title {
+    @apply text-3xl font-bold text-gray-900 mb-2;
+  }
+  .section-title {
+    @apply text-2xl font-bold text-gray-900;
+  }
+}
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+/* Star rating colors */
+.star-filled {
+  color: #f59e0b;
+}
+.star-empty {
+  color: #d1d5db;
+}
+/* ── Floating bubble animations ── */
+@keyframes bubble-float {
+  0%   { transform: translateY(0px) scale(1); opacity: 0.7; }
+  50%  { opacity: 0.5; }
+  100% { transform: translateY(-110vh) scale(0.85); opacity: 0; }
+}
+@keyframes bubble-x-drift {
+  0%   { margin-left: 0px; }
+  50%  { margin-left: 18px; }
+  100% { margin-left: 0px; }
+}
+.bubble {
+  position: absolute;
+  bottom: -10%;
+  border-radius: 50%;
+  animation: bubble-float linear infinite, bubble-x-drift ease-in-out infinite;
+  pointer-events: none;
+}
+@keyframes animate-fade-in {
+  from { opacity: 0; transform: translateY(16px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+.animate-fade-in {
+  animation: animate-fade-in 0.5s ease forwards;
+}
+@keyframes pulse-slow {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.4; }
+}
+.animate-pulse-slow {
+  animation: pulse-slow 2.5s ease-in-out infinite;
+}

package/templates/ecommerce/app/layout.tsx ADDED Viewed

@@ -0,0 +1,31 @@
+import type { Metadata } from 'next';
+import './globals.css';
+import Header from '@/components/Header';
+import Footer from '@/components/Footer';
+export const metadata: Metadata = {
+  title: {
+    template: '%s | GenZ Shop',
+    default: 'GenZ Shop — Shop Different. Shop Smarter.',
+  },
+  description:
+    'GenZ Shop — Curated fashion, electronics, and lifestyle products for the next generation. Shop trending styles at unbeatable prices.',
+};
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body className="min-h-screen flex flex-col bg-gray-50">
+        <Header />
+        <main className="flex-1">{children}</main>
+        <Footer />
+      </body>
+    </html>
+  );
+}

package/templates/ecommerce/app/login/page.tsx ADDED Viewed

@@ -0,0 +1,224 @@
+'use client';
+import { useState } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { Eye, EyeOff, Zap, ShoppingBag, ArrowRight, Mail, Lock } from 'lucide-react';
+import { useAuthStore } from '@/store/useAuthStore';
+// ⚠️ Defined outside to prevent focus loss
+interface InputFieldProps {
+  id: string;
+  label: string;
+  type: string;
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  icon: React.ElementType;
+  suffix?: React.ReactNode;
+}
+function InputField({ id, label, type, value, onChange, placeholder, icon: Icon, suffix }: InputFieldProps) {
+  return (
+    <div>
+      <label htmlFor={id} className="block text-sm font-medium text-gray-700 mb-1.5">{label}</label>
+      <div className="relative">
+        <div className="absolute inset-y-0 left-3.5 flex items-center pointer-events-none">
+          <Icon className="w-4 h-4 text-gray-400" />
+        </div>
+        <input
+          id={id}
+          type={type}
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+          className="input pl-10 pr-10"
+          required
+        />
+        {suffix && (
+          <div className="absolute inset-y-0 right-3 flex items-center">{suffix}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+export default function LoginPage() {
+  const router = useRouter();
+  const { login } = useAuthStore();
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [showPass, setShowPass] = useState(false);
+  const [error, setError] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setIsLoading(true);
+    await new Promise((r) => setTimeout(r, 800));
+    login(email, password);
+    const authed = useAuthStore.getState().isAuthenticated;
+    setIsLoading(false);
+    if (authed) {
+      router.push('/');
+    } else {
+      setError('Invalid email or password. Please try again.');
+    }
+  };
+  return (
+    <div className="min-h-screen flex">
+      {/* ── LEFT PANEL — gradient + brand ── */}
+      <div className="hidden lg:flex lg:w-1/2 text-white flex-col justify-between p-12 relative overflow-hidden" style={{ background: 'linear-gradient(160deg, #020617 0%, #0f172a 45%, #1e3a8a 100%)' }}>
+        {/* Blue glow spots */}
+        <div className="absolute inset-0 pointer-events-none" style={{
+          backgroundImage: `
+            radial-gradient(circle at 15% 70%, rgba(59,130,246,0.2) 0%, transparent 50%),
+            radial-gradient(circle at 85% 20%, rgba(96,165,250,0.15) 0%, transparent 45%),
+            radial-gradient(circle at 50% 95%, rgba(37,99,235,0.18) 0%, transparent 40%)
+          `,
+        }} />
+        {/* Floating Bubbles */}
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          {[
+            { w: 32, h: 32, left: '10%',  dur: '8s',  delay: '0s',   color: 'rgba(59,130,246,0.15)', border: 'rgba(59,130,246,0.3)' },
+            { w: 18, h: 18, left: '25%',  dur: '6s',  delay: '2s',   color: 'rgba(96,165,250,0.15)',   border: 'rgba(96,165,250,0.35)' },
+            { w: 44, h: 44, left: '45%',  dur: '10s', delay: '0.8s', color: 'rgba(37,99,235,0.1)', border: 'rgba(37,99,235,0.2)' },
+            { w: 22, h: 22, left: '65%',  dur: '7s',  delay: '3.5s', color: 'rgba(59,130,246,0.15)',  border: 'rgba(59,130,246,0.35)'},
+            { w: 14, h: 14, left: '80%',  dur: '5s',  delay: '1s',   color: 'rgba(96,165,250,0.2)',   border: 'rgba(96,165,250,0.4)'  },
+            { w: 36, h: 36, left: '55%',  dur: '9s',  delay: '4.5s', color: 'rgba(59,130,246,0.1)', border: 'rgba(59,130,246,0.25)' },
+          ].map((b, i) => (
+            <div
+              key={i}
+              className="bubble"
+              style={{
+                width: b.w,
+                height: b.h,
+                left: b.left,
+                background: b.color,
+                border: `1px solid ${b.border}`,
+                backdropFilter: 'blur(2px)',
+                animationDuration: `${b.dur}, ${parseFloat(b.dur) * 1.4}s`,
+                animationDelay: `${b.delay}, ${b.delay}`,
+              }}
+            />
+          ))}
+        </div>
+        {/* Logo */}
+        <div className="relative flex items-center gap-2">
+          <div className="w-9 h-9 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #3b82f6, #2563eb)' }}>
+            <Zap className="w-5 h-5 text-white" />
+          </div>
+          <span className="text-xl font-black tracking-tight">GenZ Shop</span>
+        </div>
+        {/* Center content */}
+        <div className="relative">
+          <div className="w-20 h-20 rounded-3xl flex items-center justify-center mb-8" style={{ background: 'rgba(59,130,246,0.15)', border: '1px solid rgba(59,130,246,0.3)' }}>
+            <ShoppingBag className="w-10 h-10 text-blue-400" />
+          </div>
+          <h2 className="text-4xl font-black leading-tight mb-4">
+            Your Style,<br />
+            <span className="text-transparent bg-clip-text" style={{ backgroundImage: 'linear-gradient(90deg, #93c5fd, #3b82f6, #60a5fa)' }}>
+              Your Rules.
+            </span>
+          </h2>
+          <p className="text-blue-100/80 leading-relaxed text-lg">
+            Discover trending fashion & lifestyle products curated for the GenZ generation.
+          </p>
+          {/* Trust badges */}
+          <div className="mt-10 grid grid-cols-3 gap-4">
+            {[{ val: '50K+', label: 'Customers' }, { val: '500+', label: 'Products' }, { val: '4.9★', label: 'Rating' }].map(({ val, label }) => (
+              <div key={label} className="rounded-2xl p-4 text-center" style={{ background: 'rgba(59,130,246,0.12)', border: '1px solid rgba(59,130,246,0.25)' }}>
+                <p className="text-xl font-black text-blue-300">{val}</p>
+                <p className="text-xs text-blue-200/60 mt-0.5">{label}</p>
+              </div>
+            ))}
+          </div>
+        </div>
+        <p className="relative text-blue-200/50 text-sm">© 2024 GenZ Shop</p>
+      </div>
+      {/* ── RIGHT PANEL — form ── */}
+      <div className="w-full lg:w-1/2 flex flex-col items-center justify-center p-8 bg-white">
+        <div className="w-full max-w-md">
+          {/* Mobile logo */}
+          <div className="flex items-center gap-2 mb-10 lg:hidden">
+            <div className="w-8 h-8 bg-gray-900 rounded-lg flex items-center justify-center">
+              <Zap className="w-4 h-4 text-white" />
+            </div>
+            <span className="text-lg font-black text-gray-900">GenZ Shop</span>
+          </div>
+          <div className="mb-8">
+            <h1 className="text-3xl font-black text-gray-900 mb-1">Welcome back!</h1>
+            <p className="text-gray-500">Sign in to your account to continue shopping</p>
+          </div>
+          <form onSubmit={handleSubmit} className="space-y-5">
+            <InputField
+              id="login-email"
+              label="Email Address"
+              type="email"
+              value={email}
+              onChange={setEmail}
+              placeholder="you@example.com"
+              icon={Mail}
+            />
+            <InputField
+              id="login-password"
+              label="Password"
+              type={showPass ? 'text' : 'password'}
+              value={password}
+              onChange={setPassword}
+              placeholder="Enter your password"
+              icon={Lock}
+              suffix={
+                <button type="button" onClick={() => setShowPass(!showPass)} className="text-gray-400 hover:text-gray-700 transition-colors">
+                  {showPass ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+                </button>
+              }
+            />
+            {error && (
+              <div className="bg-red-50 border border-red-200 rounded-xl px-4 py-3">
+                <p className="text-sm text-red-600">{error}</p>
+              </div>
+            )}
+            <button
+              type="submit"
+              disabled={isLoading}
+              className="w-full btn-primary py-3.5 text-base flex items-center justify-center gap-2"
+              id="login-submit-btn"
+            >
+              {isLoading ? (
+                <svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
+                </svg>
+              ) : (
+                <>Sign In <ArrowRight className="w-4 h-4" /></>
+              )}
+            </button>
+          </form>
+          <div className="mt-6 text-center">
+            <p className="text-gray-500 text-sm">
+              Don&apos;t have an account?{' '}
+              <Link href="/register" className="font-bold text-gray-900 hover:underline">
+                Create Account
+              </Link>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/ecommerce/app/not-found.tsx ADDED Viewed

@@ -0,0 +1,14 @@
+import Link from 'next/link';
+export default function NotFound() {
+  return (
+    <div className="container-main py-32 text-center animate-fade-in">
+      <p className="text-9xl font-bold text-gray-100">404</p>
+      <h1 className="text-3xl font-bold text-gray-900 mt-4 mb-3">Page not found</h1>
+      <p className="text-gray-500 mb-8">The page you&apos;re looking for doesn&apos;t exist.</p>
+      <Link href="/" className="btn-primary inline-block">
+        Back to Home
+      </Link>
+    </div>
+  );
+}

package/templates/ecommerce/app/orders/[id]/page.tsx ADDED Viewed

@@ -0,0 +1,138 @@
+'use client';
+import { notFound } from 'next/navigation';
+import Link from 'next/link';
+import { motion } from 'framer-motion';
+import { CheckCircle, Clock, Package, Truck, Home, ArrowLeft } from 'lucide-react';
+import { useOrderStore } from '@/store/useOrderStore';
+import { formatPrice } from '@/lib/utils';
+import type { OrderStatus } from '@/types';
+const STEPS: { status: OrderStatus; label: string; desc: string; icon: React.ElementType }[] = [
+  { status: 'confirmed', label: 'Order Confirmed', desc: 'Your order has been placed successfully.', icon: CheckCircle },
+  { status: 'processing', label: 'Processing', desc: 'We are preparing your items.', icon: Package },
+  { status: 'shipped', label: 'Shipped', desc: 'Your order is on its way!', icon: Truck },
+  { status: 'delivered', label: 'Delivered', desc: 'Enjoy your purchase!', icon: Home },
+];
+const STATUS_ORDER: OrderStatus[] = ['confirmed', 'processing', 'shipped', 'delivered'];
+export default function OrderDetailPage({ params }: { params: { id: string } }) {
+  const { getOrder } = useOrderStore();
+  const order = getOrder(params.id);
+  if (!order) notFound();
+  const currentStep = STATUS_ORDER.indexOf(order.status);
+  return (
+    <motion.div
+      className="container-main py-10 max-w-3xl"
+      initial={{ opacity: 0, y: 16 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4 }}
+    >
+      <Link href="/profile?tab=orders" className="flex items-center gap-2 text-sm text-gray-400 hover:text-gray-900 transition-colors mb-6">
+        <ArrowLeft className="w-4 h-4" /> Back to Orders
+      </Link>
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="page-title mb-1">Order Details</h1>
+          <p className="font-mono text-gray-400 text-sm">{order.id}</p>
+        </div>
+        <span className="text-xs font-semibold px-3 py-1.5 rounded-full bg-blue-100 text-blue-700 capitalize">
+          {order.status}
+        </span>
+      </div>
+      {/* Status Stepper */}
+      <div className="bg-white rounded-2xl shadow-sm p-6 mb-6">
+        <h2 className="font-bold text-gray-900 mb-6">Order Status</h2>
+        <div className="relative">
+          {/* Progress line */}
+          <div className="absolute top-5 left-5 right-5 h-0.5 bg-gray-100">
+            <motion.div
+              className="h-full bg-gray-900 rounded-full"
+              initial={{ width: 0 }}
+              animate={{ width: `${(currentStep / (STEPS.length - 1)) * 100}%` }}
+              transition={{ duration: 0.8, ease: 'easeOut' }}
+            />
+          </div>
+          <div className="relative flex justify-between">
+            {STEPS.map((step, i) => {
+              const Icon = step.icon;
+              const isDone = i <= currentStep;
+              return (
+                <div key={step.status} className="flex flex-col items-center max-w-[80px]">
+                  <motion.div
+                    initial={{ scale: 0.8 }}
+                    animate={{ scale: 1 }}
+                    transition={{ delay: i * 0.1 }}
+                    className={`w-10 h-10 rounded-full flex items-center justify-center border-2 transition-all z-10
+                      ${isDone ? 'bg-gray-900 border-gray-900' : 'bg-white border-gray-200'}`}
+                  >
+                    <Icon className={`w-4 h-4 ${isDone ? 'text-white' : 'text-gray-300'}`} />
+                  </motion.div>
+                  <p className={`text-xs font-semibold mt-2 text-center ${isDone ? 'text-gray-900' : 'text-gray-400'}`}>
+                    {step.label}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        <p className="text-sm text-gray-500 mt-6 text-center">
+          {STEPS[currentStep].desc}
+        </p>
+      </div>
+      {/* Order Items */}
+      <div className="bg-white rounded-2xl shadow-sm p-6 mb-6">
+        <h2 className="font-bold text-gray-900 mb-4">Items Ordered</h2>
+        <div className="space-y-3">
+          {order.items.map((item) => (
+            <div key={item.product.id} className="flex justify-between items-center py-2 border-b border-gray-50 last:border-0">
+              <div>
+                <p className="font-medium text-gray-900 text-sm">{item.product.name}</p>
+                <p className="text-xs text-gray-400">{item.product.category} · Qty: {item.quantity}</p>
+              </div>
+              <p className="font-semibold text-gray-900">{formatPrice(item.product.price * item.quantity)}</p>
+            </div>
+          ))}
+        </div>
+        <div className="border-t border-gray-100 pt-4 mt-4 space-y-2">
+          <div className="flex justify-between text-sm text-gray-600">
+            <span>Subtotal</span>
+            <span>{formatPrice(order.subtotal)}</span>
+          </div>
+          <div className="flex justify-between text-sm text-gray-600">
+            <span>Shipping</span>
+            <span className={order.shipping === 0 ? 'text-green-500 font-medium' : ''}>{order.shipping === 0 ? 'FREE' : formatPrice(order.shipping)}</span>
+          </div>
+          <div className="flex justify-between font-bold text-gray-900 pt-2 border-t border-gray-100">
+            <span>Total</span>
+            <span>{formatPrice(order.total)}</span>
+          </div>
+        </div>
+      </div>
+      {/* Delivery Address */}
+      <div className="bg-white rounded-2xl shadow-sm p-6">
+        <h2 className="font-bold text-gray-900 mb-4">Delivery Address</h2>
+        <div className="text-sm text-gray-600 space-y-1">
+          <p className="font-semibold text-gray-900">{order.address.name}</p>
+          <p>{order.address.address}</p>
+          <p>{order.address.city}, {order.address.state} — {order.address.pincode}</p>
+          <p>{order.address.phone}</p>
+          <p>{order.address.email}</p>
+        </div>
+      </div>
+      <div className="mt-6 flex justify-center">
+        <Link href="/products" className="btn-primary">Continue Shopping</Link>
+      </div>
+    </motion.div>
+  );
+}