From efea41726d2ce0b244b1b1f8560c654aff545828 Mon Sep 17 00:00:00 2001 From: Josephat-S Date: Tue, 26 May 2026 09:34:38 +0200 Subject: [PATCH] implemented ecommerce full design --- .../nextjs-monolith/app/cart/page.tsx | 144 ++++++++++ .../nextjs-monolith/app/checkout/page.tsx | 257 ++++++++++++++++++ .../ecommerce/nextjs-monolith/app/page.tsx | 201 +++++++++++--- .../app/products/[slug]/page.tsx | 255 +++++++++++++++-- .../nextjs-monolith/app/products/page.tsx | 168 ++++++++++-- .../nextjs-monolith/components/CartItem.tsx | 56 ++++ .../nextjs-monolith/components/Footer.tsx | 146 ++++++++++ .../components/ProductCard.tsx | 55 ++++ 8 files changed, 1203 insertions(+), 79 deletions(-) create mode 100644 templates/ecommerce/nextjs-monolith/app/cart/page.tsx create mode 100644 templates/ecommerce/nextjs-monolith/app/checkout/page.tsx create mode 100644 templates/ecommerce/nextjs-monolith/components/CartItem.tsx create mode 100644 templates/ecommerce/nextjs-monolith/components/Footer.tsx create mode 100644 templates/ecommerce/nextjs-monolith/components/ProductCard.tsx diff --git a/templates/ecommerce/nextjs-monolith/app/cart/page.tsx b/templates/ecommerce/nextjs-monolith/app/cart/page.tsx new file mode 100644 index 0000000..208a5fc --- /dev/null +++ b/templates/ecommerce/nextjs-monolith/app/cart/page.tsx @@ -0,0 +1,144 @@ +import Link from 'next/link'; + +export default function CartPage() { + const cartItems = [ + { name: 'Classic White Sneakers', price: 89.99, quantity: 1, color: 'White', size: '10', imageColor: '#f1f5f9' }, + { name: 'Leather Crossbody Bag', price: 129.99, quantity: 1, color: 'Tan', size: 'One Size', imageColor: '#d4a574' }, + { name: 'Oversized Wool Coat', price: 249.99, quantity: 1, color: 'Charcoal', size: 'M', imageColor: '#1e293b' }, + ]; + + const subtotal = cartItems.reduce((sum, item) => sum + item.price * item.quantity, 0); + const tax = subtotal * 0.08; + const total = subtotal + tax; + + return ( +
+
+

Shopping Cart

+

{cartItems.length} items in your cart

+ +
+ {/* Cart Items */} +
+
+ {cartItems.map((item, index) => ( +
+ {/* Image */} +
+ + {/* Info */} +
+
+
+

{item.name}

+

+ {item.color} · Size {item.size} +

+
+ {/* Remove Button */} + +
+ + {/* Quantity & Price */} +
+
+ + + {item.quantity} + + +
+ + ${(item.price * item.quantity).toFixed(2)} + +
+
+
+ ))} +
+ + {/* Continue Shopping */} + + + + + Continue Shopping + +
+ + {/* Order Summary */} +
+
+

Order Summary

+ +
+
+ Subtotal + ${subtotal.toFixed(2)} +
+
+ Shipping + Calculated at checkout +
+
+ Estimated Tax + ${tax.toFixed(2)} +
+
+ +
+
+ Total + ${total.toFixed(2)} +
+
+ + + Proceed to Checkout + + + + Continue Shopping + + + {/* Payment Methods */} +
+

Accepted Payment Methods

+
+ {['Visa', 'Mastercard', 'Amex', 'PayPal'].map((method) => ( + + {method} + + ))} +
+
+
+
+
+
+
+ ); +} diff --git a/templates/ecommerce/nextjs-monolith/app/checkout/page.tsx b/templates/ecommerce/nextjs-monolith/app/checkout/page.tsx new file mode 100644 index 0000000..9cd32f8 --- /dev/null +++ b/templates/ecommerce/nextjs-monolith/app/checkout/page.tsx @@ -0,0 +1,257 @@ +import Link from 'next/link'; + +export default function CheckoutPage() { + const orderItems = [ + { name: 'Classic White Sneakers', quantity: 1, price: 89.99, imageColor: '#f1f5f9' }, + { name: 'Leather Crossbody Bag', quantity: 1, price: 129.99, imageColor: '#d4a574' }, + { name: 'Oversized Wool Coat', quantity: 1, price: 249.99, imageColor: '#1e293b' }, + ]; + + const subtotal = orderItems.reduce((sum, item) => sum + item.price * item.quantity, 0); + const shipping = 9.99; + const tax = 12.50; + const total = subtotal + shipping + tax; + + const steps = [ + { label: 'Shipping', active: true, completed: false }, + { label: 'Payment', active: false, completed: false }, + { label: 'Review', active: false, completed: false }, + ]; + + return ( +
+
+ {/* Header */} +
+ + + + + Back to Cart + +

Checkout

+
+ + {/* Step Indicator */} +
+
+ {steps.map((step, i) => ( +
+
+
+ {step.completed ? ( + + + + ) : ( + i + 1 + )} +
+ + {step.label} + +
+ {i < steps.length - 1 && ( +
+ )} +
+ ))} +
+
+ +
+ {/* Shipping Form */} +
+
+

Shipping Information

+ +
+ {/* Name Row */} +
+
+ + +
+
+ + +
+
+ + {/* Email */} +
+ + +
+ + {/* Address */} +
+ + +
+ + {/* City, State, Zip */} +
+
+ + +
+
+ + +
+
+ + +
+
+ + {/* Country */} +
+ + +
+ + {/* Phone */} +
+ + +
+ + {/* Save Address */} + +
+ + {/* Continue Button */} + +
+
+ + {/* Order Summary Sidebar */} +
+
+

Order Summary

+ + {/* Items */} +
+ {orderItems.map((item, i) => ( +
+
+
+

{item.name}

+

Qty: {item.quantity}

+
+ ${item.price.toFixed(2)} +
+ ))} +
+ + {/* Promo Code */} +
+
+ + +
+
+ + {/* Totals */} +
+
+ Subtotal + ${subtotal.toFixed(2)} +
+
+ Shipping + ${shipping.toFixed(2)} +
+
+ Tax + ${tax.toFixed(2)} +
+
+ +
+
+ Total + ${total.toFixed(2)} +
+
+ + {/* Security Note */} +
+ + + + Secure checkout — your data is encrypted +
+
+
+
+
+
+ ); +} diff --git a/templates/ecommerce/nextjs-monolith/app/page.tsx b/templates/ecommerce/nextjs-monolith/app/page.tsx index 1f7bcc9..9d0297e 100644 --- a/templates/ecommerce/nextjs-monolith/app/page.tsx +++ b/templates/ecommerce/nextjs-monolith/app/page.tsx @@ -1,45 +1,184 @@ import Link from 'next/link'; export default function Home() { + const categories = [ + { name: 'Women', count: 124, color: '#f9a8d4' }, + { name: 'Men', count: 98, color: '#93c5fd' }, + { name: 'Accessories', count: 67, color: '#fcd34d' }, + { name: 'Sale', count: 45, color: '#fca5a5' }, + ]; + + const featuredProducts = [ + { slug: 'classic-white-sneakers', name: 'Classic White Sneakers', price: '$89.99', originalPrice: null, badge: null, color: '#f1f5f9' }, + { slug: 'leather-crossbody-bag', name: 'Leather Crossbody Bag', price: '$129.99', originalPrice: '$159.99', badge: 'Sale', color: '#d4a574' }, + { slug: 'oversized-wool-coat', name: 'Oversized Wool Coat', price: '$249.99', originalPrice: null, badge: 'New', color: '#1e293b' }, + { slug: 'silk-scarf-collection', name: 'Silk Scarf Collection', price: '$59.99', originalPrice: null, badge: null, color: '#c4b5fd' }, + ]; + + const testimonials = [ + { name: 'Sarah M.', text: 'Absolutely love the quality. Every piece I have ordered has exceeded my expectations. The attention to detail is remarkable.', rating: 5 }, + { name: 'James K.', text: 'Fast shipping and the packaging is beautiful. It feels like a luxury experience from start to finish. Will definitely order again.', rating: 5 }, + { name: 'Emily R.', text: 'Found my new favorite store. The curated selection makes it so easy to find pieces that work together. Customer service is top-notch.', rating: 4 }, + ]; + return (
- {/* Hero Section */} -
-

- Welcome to {{projectName}} -

-

- Your {{variant}} store, powered by Next.js 14 and scaffolded by Opusify CLI. -

-
- - Browse Products - - - View Cart - + {/* Hero Banner */} +
+
+
+
+ + New Season Collection + +

+ Welcome to {{projectName}} +

+

+ Discover our curated {{variant}} collection — where timeless elegance meets modern design. Elevate your everyday with pieces crafted for those who appreciate quality. +

+
+ + Shop Now + + + View Collections + +
+
- {/* Featured Section */} -
-

Featured Products

-
- {[1, 2, 3].map((i) => ( -
-
-

Product {i}

-

$29.99

-
+ {/* Categories */} +
+
+

Shop by Category

+

Find exactly what you are looking for

+
+
+ {categories.map((cat) => ( + +
+
+

{cat.name}

+

{cat.count} items

+
+ + ))} +
+
+ + {/* Featured Products */} +
+
+

Featured Products

+ + View All → + +
+
+ {featuredProducts.map((product) => ( + +
+
+ {product.badge && ( + + {product.badge} + + )} +
+ + Quick View + +
+
+
+

+ {product.name} +

+
+ {product.price} + {product.originalPrice && ( + {product.originalPrice} + )} +
+
+ ))}
+ + {/* Testimonials */} +
+
+
+

What Our Customers Say

+

Trusted by thousands of happy shoppers

+
+
+ {testimonials.map((t, i) => ( +
+ {/* Stars */} +
+ {[1, 2, 3, 4, 5].map((star) => ( + + + + ))} +
+

+ “{t.text}” +

+

{t.name}

+
+ ))} +
+
+
+ + {/* Newsletter */} +
+
+

Join the {{projectName}} Community

+

Get 10% off your first order when you subscribe to our newsletter.

+
+ + +
+

No spam, unsubscribe anytime. We respect your privacy.

+
+
); } diff --git a/templates/ecommerce/nextjs-monolith/app/products/[slug]/page.tsx b/templates/ecommerce/nextjs-monolith/app/products/[slug]/page.tsx index 46675ee..118e4fd 100644 --- a/templates/ecommerce/nextjs-monolith/app/products/[slug]/page.tsx +++ b/templates/ecommerce/nextjs-monolith/app/products/[slug]/page.tsx @@ -5,33 +5,238 @@ export default function ProductDetailPage({ }: { params: { slug: string }; }) { + const productName = params.slug.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()); + + const relatedProducts = [ + { slug: 'cashmere-sweater', name: 'Cashmere V-Neck Sweater', price: '$179.99', color: '#fef3c7' }, + { slug: 'tailored-blazer', name: 'Tailored Linen Blazer', price: '$199.99', color: '#e2e8f0' }, + { slug: 'silk-scarf-collection', name: 'Silk Scarf Collection', price: '$59.99', color: '#c4b5fd' }, + { slug: 'gold-hoop-earrings', name: 'Gold Hoop Earrings', price: '$39.99', color: '#fde68a' }, + ]; + + const sizes = ['XS', 'S', 'M', 'L', 'XL']; + const colors = [ + { name: 'Black', hex: '#1a1a1a' }, + { name: 'White', hex: '#ffffff' }, + { name: 'Navy', hex: '#1e3a5f' }, + { name: 'Red', hex: '#dc2626' }, + ]; + return ( -
- - ← Back to Products - - -
- {/* Product Image Placeholder */} -
- - {/* Product Info */} -
-

- {params.slug.replace(/-/g, ' ')} -

-

$99.99

-

- This is a placeholder product page for {params.slug}. - When connected to a CMS or database, this page will display real product data. -

- +
+
+ {/* Breadcrumb */} + + + {/* Product Layout */} +
+ {/* Image Gallery */} +
+ {/* Main Image */} +
+ {/* Thumbnails */} +
+ {[0, 1, 2, 3].map((i) => ( +
+ ))} +
+
+ + {/* Product Info */} +
+

{productName}

+ + {/* Rating */} +
+
+ {[1, 2, 3, 4, 5].map((star) => ( + + + + ))} +
+ 4.5 (128 reviews) +
+ + {/* Price */} +
+ $99.99 + $129.99 + -23% +
+ + {/* Description */} +

+ Crafted from premium materials with meticulous attention to detail. This piece combines timeless design with modern comfort, making it a versatile addition to any wardrobe. +

+ + {/* Color Selector */} +
+

Color: Black

+
+ {colors.map((c, i) => ( +
+
+ + {/* Size Selector */} +
+
+

Size

+ +
+
+ {sizes.map((size, i) => ( + + ))} +
+
+ + {/* Quantity */} +
+

Quantity

+
+ + 1 + +
+
+ + {/* Add to Cart */} + + + {/* Wishlist */} + + + {/* Accordion Sections */} +
+ {/* Description */} +
+ + Description + + + + +

+ Made from carefully sourced materials, this product features reinforced stitching, premium hardware, and a refined silhouette. The versatile design transitions seamlessly from casual to formal settings. Machine washable for easy care. +

+
+ + {/* Shipping */} +
+ + Shipping Info + + + + +
+

Free standard shipping on orders over $100.

+

Standard delivery: 5–7 business days.

+

Express delivery: 2–3 business days ($12.99).

+

International shipping available to select countries.

+
+
+ + {/* Returns */} +
+ + Returns + + + + +
+

30-day return policy for unworn items with tags attached.

+

Free returns on all domestic orders.

+

Exchanges available for different sizes or colors.

+

Refunds processed within 5–7 business days.

+
+
+
+
+ + {/* Related Products */} +
+

You May Also Like

+
+ {relatedProducts.map((product) => ( + +
+
+
+ + Quick View + +
+
+
+

+ {product.name} +

+ {product.price} +
+ + ))} +
+
); diff --git a/templates/ecommerce/nextjs-monolith/app/products/page.tsx b/templates/ecommerce/nextjs-monolith/app/products/page.tsx index 8459f68..bc43036 100644 --- a/templates/ecommerce/nextjs-monolith/app/products/page.tsx +++ b/templates/ecommerce/nextjs-monolith/app/products/page.tsx @@ -1,30 +1,152 @@ import Link from 'next/link'; -const products = [ - { slug: 'product-1', name: 'Classic T-Shirt', price: '$29.99' }, - { slug: 'product-2', name: 'Denim Jacket', price: '$89.99' }, - { slug: 'product-3', name: 'Running Shoes', price: '$119.99' }, - { slug: 'product-4', name: 'Leather Bag', price: '$149.99' }, - { slug: 'product-5', name: 'Sunglasses', price: '$59.99' }, - { slug: 'product-6', name: 'Watch', price: '$199.99' }, -]; - export default function ProductsPage() { + const products = [ + { slug: 'classic-white-sneakers', name: 'Classic White Sneakers', price: '$89.99', originalPrice: null, badge: null, color: '#f1f5f9' }, + { slug: 'leather-crossbody-bag', name: 'Leather Crossbody Bag', price: '$129.99', originalPrice: '$159.99', badge: 'Sale', color: '#d4a574' }, + { slug: 'oversized-wool-coat', name: 'Oversized Wool Coat', price: '$249.99', originalPrice: null, badge: 'New', color: '#1e293b' }, + { slug: 'silk-scarf-collection', name: 'Silk Scarf Collection', price: '$59.99', originalPrice: null, badge: null, color: '#c4b5fd' }, + { slug: 'cashmere-sweater', name: 'Cashmere V-Neck Sweater', price: '$179.99', originalPrice: '$219.99', badge: 'Sale', color: '#fef3c7' }, + { slug: 'tailored-blazer', name: 'Tailored Linen Blazer', price: '$199.99', originalPrice: null, badge: 'New', color: '#e2e8f0' }, + { slug: 'canvas-tote-bag', name: 'Canvas Tote Bag', price: '$49.99', originalPrice: null, badge: null, color: '#d6d3d1' }, + { slug: 'gold-hoop-earrings', name: 'Gold Hoop Earrings', price: '$39.99', originalPrice: null, badge: null, color: '#fde68a' }, + { slug: 'leather-chelsea-boots', name: 'Leather Chelsea Boots', price: '$189.99', originalPrice: null, badge: 'New', color: '#292524' }, + { slug: 'merino-wool-beanie', name: 'Merino Wool Beanie', price: '$34.99', originalPrice: '$44.99', badge: 'Sale', color: '#7c3aed' }, + { slug: 'linen-wide-leg-pants', name: 'Linen Wide-Leg Pants', price: '$109.99', originalPrice: null, badge: null, color: '#f5f5f4' }, + { slug: 'structured-leather-belt', name: 'Structured Leather Belt', price: '$69.99', originalPrice: null, badge: null, color: '#78350f' }, + ]; + + const categories = ['Clothing', 'Shoes', 'Bags', 'Accessories', 'Jewelry']; + const priceRanges = ['$0 – $50', '$50 – $100', '$100 – $200', '$200+']; + return ( -
-

All Products

-
- {products.map((product) => ( - -
-

{product.name}

-

{product.price}

- - ))} +
+
+ {/* Page Header */} +
+

All Products

+

Showing 12 products

+
+ +
+ {/* Filter Sidebar */} + + + {/* Product Grid */} +
+
+ {products.map((product) => ( + +
+
+ {product.badge && ( + + {product.badge} + + )} +
+ + Quick View + +
+
+
+

+ {product.name} +

+
+ {product.price} + {product.originalPrice && ( + {product.originalPrice} + )} +
+
+ + ))} +
+ + {/* Pagination */} +
+ + + + + +
+
+
); diff --git a/templates/ecommerce/nextjs-monolith/components/CartItem.tsx b/templates/ecommerce/nextjs-monolith/components/CartItem.tsx new file mode 100644 index 0000000..7531425 --- /dev/null +++ b/templates/ecommerce/nextjs-monolith/components/CartItem.tsx @@ -0,0 +1,56 @@ +interface CartItemProps { + name: string; + price: number; + quantity: number; + color: string; + size: string; + imageColor: string; +} + +export default function CartItem({ name, price, quantity, color, size, imageColor }: CartItemProps) { + const lineTotal = (price * quantity).toFixed(2); + + return ( +
+ {/* Image */} +
+ + {/* Info */} +
+
+
+

{name}

+

+ {color} · Size {size} +

+
+ {/* Remove Button */} + +
+ + {/* Quantity & Price */} +
+
+ + + {quantity} + + +
+ ${lineTotal} +
+
+
+ ); +} diff --git a/templates/ecommerce/nextjs-monolith/components/Footer.tsx b/templates/ecommerce/nextjs-monolith/components/Footer.tsx new file mode 100644 index 0000000..252c7e6 --- /dev/null +++ b/templates/ecommerce/nextjs-monolith/components/Footer.tsx @@ -0,0 +1,146 @@ +import Link from 'next/link'; + +export default function Footer() { + const shopLinks = [ + { label: 'New Arrivals', href: '/products' }, + { label: 'Best Sellers', href: '/products' }, + { label: 'Sale', href: '/products' }, + { label: 'Collections', href: '/products' }, + { label: 'Gift Cards', href: '/products' }, + ]; + + const serviceLinks = [ + { label: 'Contact Us', href: '/contact' }, + { label: 'Shipping & Returns', href: '/shipping' }, + { label: 'FAQ', href: '/faq' }, + { label: 'Size Guide', href: '/size-guide' }, + { label: 'Order Tracking', href: '/tracking' }, + ]; + + return ( +
+ {/* Newsletter Strip */} +
+
+
+

Join Our Newsletter

+

Get 10% off your first order + exclusive access to new drops.

+
+
+ + +
+
+
+ + {/* Main Footer */} +
+
+ {/* Brand */} +
+ + {{projectName}} + +

+ Curated fashion and lifestyle essentials for the modern individual. Quality craftsmanship meets contemporary design. +

+ {/* Social Icons */} +
+ {/* Instagram */} + + + + + + {/* Facebook */} + + + + + + {/* Twitter/X */} + + + + + + {/* Pinterest */} + + + + + +
+
+ + {/* Shop Links */} +
+

Shop

+
    + {shopLinks.map((link) => ( +
  • + + {link.label} + +
    • + ))} +
+
+ + {/* Customer Service */} +
+

Customer Service

+
    + {serviceLinks.map((link) => ( +
  • + + {link.label} + +
    • + ))} +
+
+ + {/* Connect */} +
+

Connect

+

+ Mon–Fri: 9am – 6pm EST
+ support@{{projectName}}.com +

+
+
We Accept
+
+ {['Visa', 'Mastercard', 'Amex', 'PayPal'].map((method) => ( + + {method} + + ))} +
+
+
+
+ + {/* Bottom Bar */} +
+

+ © 2024 {{projectName}}. All rights reserved. +

+
+ Privacy Policy + Terms of Service +
+
+
+
+ ); +} diff --git a/templates/ecommerce/nextjs-monolith/components/ProductCard.tsx b/templates/ecommerce/nextjs-monolith/components/ProductCard.tsx new file mode 100644 index 0000000..733b368 --- /dev/null +++ b/templates/ecommerce/nextjs-monolith/components/ProductCard.tsx @@ -0,0 +1,55 @@ +import Link from 'next/link'; + +interface ProductCardProps { + name: string; + price: string; + originalPrice?: string; + imageColor: string; + badge?: 'New' | 'Sale'; + slug: string; +} + +export default function ProductCard({ name, price, originalPrice, imageColor, badge, slug }: ProductCardProps) { + return ( + + {/* Image */} +
+
+ {/* Badge */} + {badge && ( + + {badge} + + )} + {/* Quick View Overlay */} +
+ + Quick View + +
+
+ {/* Info */} +
+

+ {name} +

+
+ {price} + {originalPrice && ( + {originalPrice} + )} +
+
+ + ); +}