Merge version_2 into main

Merge version_2 into main
This commit was merged in pull request #1.
This commit is contained in:
2026-04-05 15:11:14 +00:00
6 changed files with 367 additions and 216 deletions

77
src/app/cart/page.tsx Normal file
View File

@@ -0,0 +1,77 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { useState } from "react";
export default function CartPage() {
const [cartItems, setCartItems] = useState([
{ id: "1", name: "Pro Wireless Headphones", price: 199, quantity: 1 },
{ id: "2", name: "Modern Smartwatch", price: 299, quantity: 1 },
]);
const total = cartItems.reduce((acc, item) => acc + item.price * item.quantity, 0);
const updateQuantity = (id: string, delta: number) => {
setCartItems(prev => prev.map(item =>
item.id === id ? { ...item, quantity: Math.max(1, item.quantity + delta) } : item
));
};
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="smallMedium"
sizing="large"
background="blurBottom"
cardStyle="solid"
primaryButtonStyle="double-inset"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "/" },
{ name: "Cart", id: "/cart" },
]}
brandName="SwiftMarket"
/>
<div className="container mx-auto py-20 px-6">
<h1 className="text-4xl font-bold mb-10">Your Shopping Cart</h1>
<div className="grid gap-6">
{cartItems.map(item => (
<div key={item.id} className="flex justify-between items-center p-6 border rounded-lg">
<div>
<h2 className="text-xl font-semibold">{item.name}</h2>
<p className="text-gray-500">${item.price}</p>
</div>
<div className="flex items-center gap-4">
<button onClick={() => updateQuantity(item.id, -1)} className="px-3 py-1 border rounded">-</button>
<span className="font-bold">{item.quantity}</span>
<button onClick={() => updateQuantity(item.id, 1)} className="px-3 py-1 border rounded">+</button>
</div>
</div>
))}
<div className="mt-10 border-t pt-6 text-right">
<p className="text-2xl font-bold mb-4">Total: ${total}</p>
<button className="bg-black text-white px-8 py-3 rounded-full hover:opacity-80">
Proceed to Checkout
</button>
</div>
</div>
</div>
<FooterBaseCard
logoText="SwiftMarket"
columns={[]}
/>
</ReactLenis>
</ThemeProvider>
);
}

65
src/app/checkout/page.tsx Normal file
View File

@@ -0,0 +1,65 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
export default function CheckoutPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="smallMedium"
sizing="large"
background="blurBottom"
cardStyle="solid"
primaryButtonStyle="double-inset"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "/" },
{ name: "Features", id: "/#features" },
{ name: "Shop", id: "/#products" },
{ name: "Checkout", id: "/checkout" },
{ name: "Contact", id: "/#contact" },
]}
brandName="SwiftMarket"
/>
</div>
<div className="min-h-screen py-24 flex items-center justify-center">
<div className="w-full max-w-2xl px-6">
<ContactSplitForm
useInvertedBackground={false}
title="Complete Your Order"
description="Enter your shipping details and select a payment method to finalize your purchase."
inputs={[
{ name: "shippingAddress", type: "text", placeholder: "Shipping Address" },
{ name: "paymentMethod", type: "text", placeholder: "Card Number / Payment Method" },
]}
buttonText="Confirm Purchase"
/>
</div>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="SwiftMarket"
columns={[
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
{ title: "Support", items: [{ label: "Help Center", href: "#" }, { label: "FAQ", href: "#" }] },
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

View File

@@ -2,15 +2,12 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { LayoutDashboard, Package, ShoppingCart, BarChart3 } from "lucide-react";
export default function LandingPage() {
export default function AdminDashboardPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
@@ -25,217 +22,42 @@ export default function LandingPage() {
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Features",
id: "features",
},
{
name: "Shop",
id: "products",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="SwiftMarket"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Dashboard", id: "hero" },
{ name: "Products", id: "products" },
{ name: "Inventory", id: "inventory" },
{ name: "Orders", id: "orders" },
]}
brandName="SwiftMarket Admin"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogo
logoText="SwiftMarket"
description="Your ultimate destination for high-quality electronics, gadgets, and tech accessories. Experience seamless shopping with fast, reliable delivery."
buttons={[
{
text: "Browse Products",
href: "#products",
},
{
text: "Contact Us",
href: "#contact",
},
]}
buttonAnimation="slide-up"
imageSrc="http://img.b2bpic.net/free-photo/online-shopping-concept_23-2151896842.jpg"
imageAlt="SwiftMarket Hero"
/>
</div>
<div id="hero" data-section="hero">
<HeroLogo
logoText="Admin Dashboard"
description="Manage your inventory, track product performance, and oversee customer orders in real-time."
buttons={[
{ text: "View Reports", href: "#" },
{ text: "New Product", href: "#" },
]}
imageSrc="http://img.b2bpic.net/free-photo/dashboard-ui-concept_23-2151045233.jpg"
imageAlt="Dashboard Preview"
/>
</div>
<div id="features" data-section="features">
<FeatureCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
features={[
{
title: "Lightning Delivery",
description: "Get your favorite gadgets delivered to your doorstep in record time.",
imageSrc: "http://img.b2bpic.net/free-vector/set-quality-retro-stickers_23-2147623762.jpg",
},
{
title: "24/7 Support",
description: "Our dedicated team is always here to help you with any queries.",
imageSrc: "http://img.b2bpic.net/free-photo/business-marketing-illustration_23-2151928216.jpg",
},
{
title: "Hassle-Free Returns",
description: "Not satisfied? We make the return process simple and quick for you.",
imageSrc: "http://img.b2bpic.net/free-photo/joyful-pretty-caucasian-female-call-center-operator-headphones-sitting-desk-with-office-tools-gesturing-call-me-sign-isolated-orange-wall_141793-121187.jpg",
},
]}
title="Why Shop With Us?"
description="We prioritize quality, speed, and customer satisfaction in everything we do."
/>
</div>
<div id="products" data-section="products">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "1",
name: "Pro Wireless Headphones",
price: "$199",
imageSrc: "http://img.b2bpic.net/free-photo/black-cup-tea-with-headphones-red-background_185193-163975.jpg",
},
{
id: "2",
name: "Modern Smartwatch",
price: "$299",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722697.jpg",
},
{
id: "3",
name: "Mechanical Keyboard",
price: "$149",
imageSrc: "http://img.b2bpic.net/free-photo/pink-keyboard-mouse_23-2147982598.jpg",
},
{
id: "4",
name: "Flagship Smartphone",
price: "$899",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-cyber-monday-tag-with-copy-space_23-2148657706.jpg",
},
{
id: "5",
name: "Smart Home Speaker",
price: "$99",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722623.jpg",
},
{
id: "6",
name: "Pro Camera Lens",
price: "$599",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-dslr-camera-memory-cards-camera-lens-with-extension-rings-white-backdrop_23-2148038890.jpg",
},
]}
title="Latest Arrivals"
description="Explore our curated collection of high-tech gear and modern gadgets."
/>
</div>
<div id="socialProof" data-section="socialProof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"TechDaily",
"InnovateMag",
"GadgetHub",
"FutureTech",
"SmartSolutions",
"DigitalTrend",
"ModernLife",
]}
title="Trusted by Industry Leaders"
description="We are proud to be recognized by leading tech publications and industry experts."
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Get in Touch"
description="Have questions about our products? Send us a message and we'll be happy to assist."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Name",
},
{
name: "email",
type: "email",
placeholder: "Your Email",
},
]}
textarea={{
name: "message",
placeholder: "How can we help?",
}}
imageSrc="http://img.b2bpic.net/free-photo/call-center-operator-assisting-users-with-installing-software_482257-117872.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="SwiftMarket"
columns={[
{
title: "Company",
items: [
{
label: "About",
href: "#",
},
{
label: "Careers",
href: "#",
},
],
},
{
title: "Support",
items: [
{
label: "Help Center",
href: "#",
},
{
label: "FAQ",
href: "#",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms",
href: "#",
},
],
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="SwiftMarket Admin"
columns={[
{ title: "Platform", items: [{ label: "Dashboard", href: "#" }, { label: "Settings", href: "#" }] },
{ title: "Inventory", items: [{ label: "Stock Levels", href: "#" }, { label: "Suppliers", href: "#" }] },
{ title: "Orders", items: [{ label: "Pending", href: "#" }, { label: "Shipping", href: "#" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}

View File

@@ -0,0 +1,70 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
// NOTE: This is a placeholder for the Product Detail Page structure requested.
export default function ProductDetailPage({ params }: { params: { id: string } }) {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="smallMedium"
sizing="large"
background="blurBottom"
cardStyle="solid"
primaryButtonStyle="double-inset"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "/" },
{ name: "Shop", id: "/#products" },
{ name: "Contact", id: "/#contact" },
]}
brandName="SwiftMarket"
/>
</div>
<main className="py-20 px-6 max-w-7xl mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-12">
<div className="bg-gray-100 rounded-2xl min-h-[400px] flex items-center justify-center">
<span className="text-gray-400">Product Image Gallery</span>
</div>
<div>
<h1 className="text-4xl font-extrabold mb-4">Product Title</h1>
<p className="text-2xl font-bold text-primary mb-6">$199.00</p>
<p className="text-lg text-gray-600 mb-8">Detailed product description goes here, explaining all the features and benefits.</p>
<button className="px-8 py-4 bg-primary text-white rounded-full font-bold shadow-lg hover:opacity-90">
Add to Cart
</button>
</div>
</div>
<section className="mt-20">
<h2 className="text-3xl font-bold mb-8">Reviews & Ratings</h2>
<div className="p-6 border border-gray-200 rounded-2xl">
<p>No reviews yet.</p>
</div>
</section>
</main>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="SwiftMarket"
columns={[
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
{ title: "Support", items: [{ label: "Help Center", href: "#" }, { label: "FAQ", href: "#" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

60
src/app/products/page.tsx Normal file
View File

@@ -0,0 +1,60 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
export default function ProductListingPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="smallMedium"
sizing="large"
background="blurBottom"
cardStyle="solid"
primaryButtonStyle="double-inset"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "/" },
{ name: "Products", id: "/products" },
]}
brandName="SwiftMarket"
/>
</div>
<div id="products" data-section="products" className="pt-24">
<ProductCardFour
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
title="All Products"
description="Filter and sort your favorite tech gadgets."
products={[
{ id: "1", name: "Pro Wireless Headphones", price: "$199", variant: "Black", imageSrc: "http://img.b2bpic.net/free-photo/black-cup-tea-with-headphones-red-background_185193-163975.jpg" },
{ id: "2", name: "Modern Smartwatch", price: "$299", variant: "Silver", imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722697.jpg" },
{ id: "3", name: "Mechanical Keyboard", price: "$149", variant: "RGB", imageSrc: "http://img.b2bpic.net/free-photo/pink-keyboard-mouse_23-2147982598.jpg" },
{ id: "4", name: "Flagship Smartphone", price: "$899", variant: "Space Gray", imageSrc: "http://img.b2bpic.net/free-photo/top-view-cyber-monday-tag-with-copy-space_23-2148657706.jpg" }
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="SwiftMarket"
columns={[]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}

57
src/app/profile/page.tsx Normal file
View File

@@ -0,0 +1,57 @@
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
export default function ProfilePage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="smallMedium"
sizing="large"
background="blurBottom"
cardStyle="solid"
primaryButtonStyle="double-inset"
secondaryButtonStyle="radial-glow"
headingFontWeight="extrabold"
>
<ReactLenis root>
<NavbarStyleCentered
navItems={[
{ name: "Home", id: "/" },
{ name: "Features", id: "/#features" },
{ name: "Shop", id: "/#products" },
{ name: "Profile", id: "/profile" },
{ name: "Contact", id: "/#contact" },
]}
brandName="SwiftMarket"
/>
<main className="container mx-auto px-4 py-24 min-h-screen">
<h1 className="text-4xl font-extrabold mb-8">Account Overview</h1>
<div className="grid gap-8">
<section className="p-6 rounded-xl border border-border bg-card">
<h2 className="text-2xl font-semibold mb-4">Order History</h2>
<p className="text-muted-foreground">No recent orders found.</p>
</section>
<section className="p-6 rounded-xl border border-border bg-card">
<h2 className="text-2xl font-semibold mb-4">Saved Addresses</h2>
<p className="text-muted-foreground">No saved addresses yet.</p>
</section>
<section className="p-6 rounded-xl border border-border bg-card">
<h2 className="text-2xl font-semibold mb-4">Wishlist</h2>
<p className="text-muted-foreground">Your wishlist is empty.</p>
</section>
</div>
</main>
<FooterBaseCard
logoText="SwiftMarket"
columns={[]}
/>
</ReactLenis>
</ThemeProvider>
);
}