Merge version_4 into main #4
68
src/app/admin/page.tsx
Normal file
68
src/app/admin/page.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from 'react';
|
||||
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ReactLenis from 'lenis/react';
|
||||
|
||||
export default function AdminDashboard() {
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
|
||||
const handleLogin = () => setIsAuthenticated(true);
|
||||
const handleLogout = () => setIsAuthenticated(false);
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<button onClick={handleLogin} className="px-6 py-2 bg-blue-600 text-white rounded">Login to Admin</button>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Dashboard", id: "" },
|
||||
{ name: "Items", id: "" },
|
||||
{ name: "Orders", id: "" },
|
||||
{ name: "Logout", id: "" }
|
||||
]}
|
||||
brandName="Admin Panel"
|
||||
/>
|
||||
</div>
|
||||
<main className="pt-32 px-6">
|
||||
<h1 className="text-4xl font-bold">Dashboard</h1>
|
||||
<p className="mt-4">Manage your items and orders here.</p>
|
||||
<button onClick={handleLogout} className="mt-6 px-4 py-2 bg-red-500 text-white rounded">Logout</button>
|
||||
</main>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
269
src/app/page.tsx
269
src/app/page.tsx
@@ -2,24 +2,35 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import { useState } from "react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import { Leaf, Package, PenTool, Sparkles, Truck } from "lucide-react";
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
|
||||
// Mock Order Interface
|
||||
interface Order {
|
||||
id: string;
|
||||
customer: string;
|
||||
status: string;
|
||||
total: string;
|
||||
}
|
||||
|
||||
export default function OrderManagementPage() {
|
||||
const [orders, setOrders] = useState<Order[]>([
|
||||
{ id: "ORD-001", customer: "Alice M.", status: "Pending", total: "$25" },
|
||||
{ id: "ORD-002", customer: "Mark D.", status: "Shipped", total: "$45" },
|
||||
{ id: "ORD-003", customer: "Sarah P.", status: "Delivered", total: "$30" },
|
||||
]);
|
||||
|
||||
const updateStatus = (id: string, newStatus: string) => {
|
||||
setOrders(prev => prev.map(o => o.id === id ? { ...o, status: newStatus } : o));
|
||||
};
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="gradient-bordered"
|
||||
@@ -28,196 +39,56 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Shop", id: "products"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="giftsbyD"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "Orders", id: "/orders" }]}
|
||||
brandName="giftsbyD"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
title="Unforgettable Gifts for Every Moment"
|
||||
description="Curated collections of handcrafted and unique gifts delivered right to your doorstep. Make every celebration special."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-with-gift-box-showing-credit-card_23-2147957933.jpg", alt: "Customer"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-smiley-woman-with-smartphone_23-2148294016.jpg", alt: "Customer"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/female-tourist-red-hat-with-backpack-sightseeing-explores-historical-landmarks-her-trip-around_1258-151766.jpg", alt: "Customer"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/personal-shopper-office-with-client_23-2148929568.jpg", alt: "Customer"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/silver-festive-christmas-boxes-shiny-background_169016-16328.jpg", alt: "Customer"},
|
||||
]}
|
||||
avatarText="Loved by 500+ happy gifters"
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now", href: "#products"},
|
||||
{
|
||||
text: "About Us", href: "#about"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text-icon", text: "Free Shipping on Orders Over $50", icon: Truck,
|
||||
},
|
||||
{
|
||||
type: "text-icon", text: "Handcrafted Excellence", icon: Sparkles,
|
||||
},
|
||||
{
|
||||
type: "text-icon", text: "Sustainable Materials", icon: Leaf,
|
||||
},
|
||||
{
|
||||
type: "text-icon", text: "Personalized Notes Included", icon: PenTool,
|
||||
},
|
||||
{
|
||||
type: "text-icon", text: "Secure Gift Packaging", icon: Package,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<main className="py-20 px-6 max-w-5xl mx-auto">
|
||||
<h1 className="text-4xl font-bold mb-8">Order Management</h1>
|
||||
<div className="bg-card rounded-lg border p-6">
|
||||
<table className="w-full text-left">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="pb-4">Order ID</th>
|
||||
<th className="pb-4">Customer</th>
|
||||
<th className="pb-4">Status</th>
|
||||
<th className="pb-4">Total</th>
|
||||
<th className="pb-4">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{orders.map(order => (
|
||||
<tr key={order.id} className="border-b last:border-0">
|
||||
<td className="py-4 font-medium">{order.id}</td>
|
||||
<td className="py-4">{order.customer}</td>
|
||||
<td className="py-4">{order.status}</td>
|
||||
<td className="py-4">{order.total}</td>
|
||||
<td className="py-4">
|
||||
<button
|
||||
onClick={() => updateStatus(order.id, order.status === "Pending" ? "Shipped" : "Pending")}
|
||||
className="px-3 py-1 bg-primary text-white rounded text-sm"
|
||||
>
|
||||
Toggle Status
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Our Philosophy"
|
||||
description="We believe every gift tells a story. Our mission is to connect people through thoughtful, high-quality, and unique items that bring joy to the recipient and pride to the giver."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Artisanal Sourcing", description: "We work directly with independent makers."},
|
||||
{
|
||||
title: "Premium Packaging", description: "Every order is wrapped with care and precision."},
|
||||
{
|
||||
title: "Fast Shipping", description: "We ensure your gifts arrive exactly when needed."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-is-wrapping-christmas-presents-blue-wooden-table_8353-6524.jpg?_wi=1"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1", name: "Artisan Scented Candle", price: "$25", imageSrc: "http://img.b2bpic.net/free-photo/oil-diffuser-home-decor-box-set_53876-142855.jpg?_wi=1"},
|
||||
{
|
||||
id: "p2", name: "Ceramic Hand-Painted Vase", price: "$45", imageSrc: "http://img.b2bpic.net/free-photo/windchimes-spools-boxes-wooden-table_23-2147899009.jpg?_wi=1"},
|
||||
{
|
||||
id: "p3", name: "Gourmet Dark Chocolate Box", price: "$30", imageSrc: "http://img.b2bpic.net/free-photo/sweet-marshmallows-wooden-plate-with-glass-christmas-red-balls_114579-32447.jpg?_wi=1"},
|
||||
{
|
||||
id: "p4", name: "Genuine Leather Notebook", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/top-view-simple-notepad-with-pencil-grey-surface_140725-88122.jpg"},
|
||||
{
|
||||
id: "p5", name: "Luxury Essential Oil Kit", price: "$55", imageSrc: "http://img.b2bpic.net/free-photo/books-coffee-gift-box-red-candle_23-2147617709.jpg"},
|
||||
{
|
||||
id: "p6", name: "Dried Floral Arrangement", price: "$40", imageSrc: "http://img.b2bpic.net/free-photo/crop-florist-holding-bouquet-near-counter_23-2147760980.jpg"},
|
||||
]}
|
||||
title="Popular Gifts"
|
||||
description="Browse our latest arrivals and timeless bestsellers."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", value: "1200+", title: "Gifts Delivered", items: [
|
||||
"Successfully shipped", "Happy recipients"],
|
||||
},
|
||||
{
|
||||
id: "m2", value: "98%", title: "Satisfaction Rate", items: [
|
||||
"Customer feedback", "Quality assurance"],
|
||||
},
|
||||
{
|
||||
id: "m3", value: "45", title: "Local Makers", items: [
|
||||
"Direct partnerships", "Sustainable sourcing"],
|
||||
},
|
||||
]}
|
||||
title="By The Numbers"
|
||||
description="Evidence of our commitment to quality."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1", title: "How long is shipping?", content: "Orders typically ship within 24 hours and arrive in 3-5 business days."},
|
||||
{
|
||||
id: "f2", title: "Can I add a note?", content: "Yes! Every checkout allows for a personalized note at no extra cost."},
|
||||
{
|
||||
id: "f3", title: "Do you offer returns?", content: "We offer a 30-day return policy for unused, unopened items."},
|
||||
]}
|
||||
sideTitle="Questions?"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1", name: "Alice M.", date: "Oct 2023", title: "Amazing Quality", quote: "The gift arrived beautifully wrapped and my friend loved it!", tag: "Gift Box", avatarSrc: "http://img.b2bpic.net/free-photo/man-presenting-gift-box-happy-woman_23-2148015315.jpg", imageSrc: "http://img.b2bpic.net/free-photo/ornate-jewelry-boxes-art-nouveau-style_23-2150975549.jpg", imageAlt: "smiling woman holding gift"},
|
||||
{
|
||||
id: "t2", name: "Mark D.", date: "Nov 2023", title: "Great Service", quote: "Quick shipping and excellent product quality. Highly recommend.", tag: "Corporate Gift", avatarSrc: "http://img.b2bpic.net/free-photo/serious-young-business-man-looking-camera_1262-18625.jpg", imageSrc: "http://img.b2bpic.net/free-photo/woman-is-wrapping-christmas-presents-blue-wooden-table_8353-6524.jpg?_wi=2", imageAlt: "smiling woman holding gift"},
|
||||
{
|
||||
id: "t3", name: "Sarah P.", date: "Dec 2023", title: "Beautiful Selection", quote: "So many unique items. This is my go-to shop now.", tag: "Home Decor", avatarSrc: "http://img.b2bpic.net/free-photo/happy-african-man-with-headphones-his-nech-listening-streaming-music_176420-12667.jpg", imageSrc: "http://img.b2bpic.net/free-photo/oil-diffuser-home-decor-box-set_53876-142855.jpg?_wi=2", imageAlt: "smiling woman holding gift"},
|
||||
{
|
||||
id: "t4", name: "John K.", date: "Jan 2024", title: "Highly Satisfied", quote: "The recipient was thrilled with their birthday gift.", tag: "Birthday", avatarSrc: "http://img.b2bpic.net/free-photo/senior-laughing-woman-rose-blouse_23-2148036588.jpg", imageSrc: "http://img.b2bpic.net/free-photo/windchimes-spools-boxes-wooden-table_23-2147899009.jpg?_wi=2", imageAlt: "smiling woman holding gift"},
|
||||
{
|
||||
id: "t5", name: "Elena R.", date: "Feb 2024", title: "Lovely Packaging", quote: "Every order feels like a special present.", tag: "Personalized", avatarSrc: "http://img.b2bpic.net/free-photo/happy-woman-showing-present_23-2147716007.jpg", imageSrc: "http://img.b2bpic.net/free-photo/sweet-marshmallows-wooden-plate-with-glass-christmas-red-balls_114579-32447.jpg?_wi=2", imageAlt: "smiling woman holding gift"},
|
||||
]}
|
||||
title="Loved by Our Customers"
|
||||
description="What people say about their gift experiences."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
tag="Newsletter"
|
||||
title="Stay Connected"
|
||||
description="Subscribe for exclusive gift ideas, new item alerts, and special offers."
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-woman-offering-gift_23-2149066066.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="giftsbyD"
|
||||
leftLink={{
|
||||
text: "Privacy Policy", href: "#"}}
|
||||
rightLink={{
|
||||
text: "Terms of Service", href: "#"}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="giftsbyD"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user