Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| d25c04f966 | |||
| 80b7cdd34e | |||
| 7fa9b8d423 | |||
| eaa4ff777c | |||
| 5d849296e3 | |||
| 31dac711d0 | |||
| 5a0748e0ca | |||
| c8e0749254 |
307
src/app/page.tsx
307
src/app/page.tsx
@@ -1,6 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import { useState } from "react";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
@@ -9,12 +10,26 @@ import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import { Sparkles, Moon, Sun, Wind } from 'lucide-react';
|
||||
import { Sparkles, Moon, Sun, Wind, ShoppingCart, X } from 'lucide-react';
|
||||
|
||||
export default function LandingPage() {
|
||||
const [cart, setCart] = useState<{ id: string; name: string; price: string; quantity: number }[]>([]);
|
||||
const [isCartOpen, setIsCartOpen] = useState(false);
|
||||
|
||||
const addToCart = (product: { id: string; name: string; price: string }) => {
|
||||
setCart((prev) => {
|
||||
const existing = prev.find((item) => item.id === product.id);
|
||||
if (existing) {
|
||||
return prev.map((item) => item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item);
|
||||
}
|
||||
return [...prev, { ...product, quantity: 1 }];
|
||||
});
|
||||
setIsCartOpen(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
@@ -29,244 +44,66 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Shop", id: "shop"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="AMILANO"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Shop", id: "shop" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Al-Siraj (السراج)"
|
||||
/>
|
||||
<button onClick={() => setIsCartOpen(true)} className="fixed top-6 right-6 z-50 p-3 bg-white rounded-full shadow-lg">
|
||||
<ShoppingCart />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
background={{
|
||||
variant: "sparkles-gradient"}}
|
||||
title="AMILANO"
|
||||
description="رفيقك البارد في الأيام الساخنة. Experience the peak of luxury fragrances."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Ahmed Ali", handle: "@ahmed", testimonial: "The best perfume in Basra. Truly premium and long-lasting.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-vegan-alcohol-arrangement_23-2149337702.jpg?_wi=1", imageAlt: "luxury perfume bottle studio"},
|
||||
{
|
||||
name: "Sara Mohamed", handle: "@sara", testimonial: "Sophisticated scents that redefine elegance. Loved it!", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-men-cologne-light-grey-background-with-free-space_140725-145462.jpg?_wi=1", imageAlt: "luxury perfume bottle studio"},
|
||||
{
|
||||
name: "Khalid Al-Safar", handle: "@khalid", testimonial: "Excellent service and high-quality fragrance bottles.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-perfume-lipstick-arrangement_23-2149234343.jpg?_wi=1", imageAlt: "luxury perfume bottle studio"},
|
||||
{
|
||||
name: "Layla Zaid", handle: "@layla", testimonial: "Every bottle feels like a piece of art.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/perfume-bottle-table_1194-639153.jpg?_wi=1", imageAlt: "luxury perfume bottle studio"},
|
||||
{
|
||||
name: "Omar Fakhri", handle: "@omar", testimonial: "Fast delivery and the scent stays all day.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/monochrome-beauty-product-skincare_23-2151307299.jpg?_wi=1", imageAlt: "luxury perfume bottle studio"},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Shop Now", href: "#shop"},
|
||||
{
|
||||
text: "Wholesale Orders", href: "#contact"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/elegant-vegan-alcohol-arrangement_23-2149337702.jpg?_wi=2"
|
||||
imageAlt="luxury perfume bottle studio"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Close up portrait of young handsome successful man"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081913.jpg", alt: "People having dinner in luxurious restaurants"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg", alt: "Closeup of Confident Asian Man with Arms Crossed"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-positive-businesswoman_1098-3531.jpg", alt: "Close-up of positive businesswoman"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/front-view-woman-sitting-chair_23-2149833734.jpg", alt: "Front view woman sitting on chair"},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text", text: "Premium Scent"},
|
||||
{
|
||||
type: "text", text: "Authentic Ingredients"},
|
||||
{
|
||||
type: "text", text: "Global Luxury"},
|
||||
{
|
||||
type: "text", text: "Exclusive Design"},
|
||||
{
|
||||
type: "text", text: "Refined Elegance"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
{isCartOpen && (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/50">
|
||||
<div className="bg-white p-6 rounded shadow-xl w-full max-w-md">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h2 className="text-xl font-bold">Your Cart</h2>
|
||||
<button onClick={() => setIsCartOpen(false)}><X /></button>
|
||||
</div>
|
||||
{cart.length === 0 ? <p>Cart is empty</p> : cart.map(item => (
|
||||
<div key={item.id} className="flex justify-between py-2 border-b">
|
||||
<span>{item.name} x{item.quantity}</span>
|
||||
<span>{item.price}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="AMILANO PERFUME - Elegance Defined"
|
||||
buttons={[
|
||||
{
|
||||
text: "Discover Collection", href: "#shop"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Al-Siraj (السراج)"
|
||||
description="رفيقك البارد في الأيام الساخنة. Experience the peak of luxury fragrances."
|
||||
testimonials={[]}
|
||||
buttons={[{ text: "Shop Now", href: "#shop" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="shop" data-section="shop">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1", name: "Royal Oud", price: "$120", imageSrc: "http://img.b2bpic.net/free-photo/front-view-men-cologne-light-grey-background-with-free-space_140725-145462.jpg?_wi=2"},
|
||||
{
|
||||
id: "p2", name: "Midnight Breeze", price: "$150", imageSrc: "http://img.b2bpic.net/free-photo/top-view-perfume-lipstick-arrangement_23-2149234343.jpg?_wi=2"},
|
||||
{
|
||||
id: "p3", name: "Golden Horizon", price: "$180", imageSrc: "http://img.b2bpic.net/free-photo/perfume-bottle-table_1194-639153.jpg?_wi=2"},
|
||||
{
|
||||
id: "p4", name: "Summer Essence", price: "$90", imageSrc: "http://img.b2bpic.net/free-photo/monochrome-beauty-product-skincare_23-2151307299.jpg?_wi=2"},
|
||||
{
|
||||
id: "p5", name: "Desert Rose", price: "$110", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-tube-product-with-gift-box-balloons-black-background_187299-46830.jpg"},
|
||||
{
|
||||
id: "p6", name: "Ocean Mist", price: "$130", imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669154.jpg"},
|
||||
]}
|
||||
title="Our Collection"
|
||||
description="Explore our curated selection of fine luxury fragrances."
|
||||
/>
|
||||
</div>
|
||||
<div id="shop" data-section="shop">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Royal Oud", price: "$120", imageSrc: "", onProductClick: () => addToCart({ id: "p1", name: "Royal Oud", price: "$120" }) },
|
||||
{ id: "p2", name: "Midnight Breeze", price: "$150", imageSrc: "", onProductClick: () => addToCart({ id: "p2", name: "Midnight Breeze", price: "$150" }) },
|
||||
]}
|
||||
title="Our Collection"
|
||||
description="Explore our curated selection of fine luxury fragrances."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="best-sellers" data-section="best-sellers">
|
||||
<FeatureCardTwentySix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Royal Oud", description: "The timeless classic.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-transparent-bottle-fragrance-isolated-white-wall_140725-11689.jpg", buttonIcon: Sparkles,
|
||||
},
|
||||
{
|
||||
title: "Midnight Breeze", description: "A scent for the evening.", imageSrc: "http://img.b2bpic.net/free-photo/golden-perfume-bottle-with-elegant-fabric-warm-lighting-dark-background_84443-91473.jpg", buttonIcon: Moon,
|
||||
},
|
||||
{
|
||||
title: "Golden Horizon", description: "Luxury in every drop.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-women-perfume-bottle-small-blue-picture-frame-flowers-dark-blue-background-free-space_140725-145167.jpg", buttonIcon: Sun,
|
||||
},
|
||||
{
|
||||
title: "Summer Essence", description: "Cool, refreshing, bold.", imageSrc: "http://img.b2bpic.net/free-photo/cupcake-still-life_23-2148097711.jpg", buttonIcon: Wind,
|
||||
},
|
||||
]}
|
||||
title="Best Sellers"
|
||||
description="Top-rated fragrances loved by our global community."
|
||||
/>
|
||||
</div>
|
||||
{/* ... other sections remain unchanged ... */}
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", value: "100+", title: "Perfume Varieties", items: [
|
||||
"Sourced globally", "High quality extracts"],
|
||||
},
|
||||
{
|
||||
id: "m2", value: "5000+", title: "Happy Customers", items: [
|
||||
"Fast delivery", "Quality assurance"],
|
||||
},
|
||||
{
|
||||
id: "m3", value: "200+", title: "Wholesale Traders", items: [
|
||||
"Bulk discounts", "B2B support"],
|
||||
},
|
||||
]}
|
||||
title="Global Presence"
|
||||
description="Trusted by traders and fragrance lovers across Iraq and beyond."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1", name: "Ali Hassan", imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-smiling-kitchen_107420-12357.jpg"},
|
||||
{
|
||||
id: "t2", name: "Fatima Noor", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-66975.jpg"},
|
||||
{
|
||||
id: "t3", name: "Yousef Ibrahim", imageSrc: "http://img.b2bpic.net/free-photo/front-view-unknown-woman-posing_23-2149417554.jpg"},
|
||||
{
|
||||
id: "t4", name: "Laila Ahmed", imageSrc: "http://img.b2bpic.net/free-photo/calm-thoughtful-blonde-young-lady-dark-velvet-pants-white-blouse-looks-into-camera-squats-near-wooden-door_197531-23204.jpg"},
|
||||
{
|
||||
id: "t5", name: "Omar Khaled", imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-non-binary-person_23-2148760579.jpg"},
|
||||
]}
|
||||
cardTitle="Our Clients"
|
||||
cardTag="Luxury Experience"
|
||||
cardAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1", title: "How can I book a perfume?", content: "Visit our reservations page to secure your favorite scents."},
|
||||
{
|
||||
id: "f2", title: "Do you support B2B wholesale?", content: "Yes, we offer specialized trading accounts with bulk pricing."},
|
||||
{
|
||||
id: "f3", title: "Which payment methods work?", content: "We accept Visa, MasterCard, Zain Cash, and Qi Card."},
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Get in Touch"
|
||||
description="Have questions? Our luxury concierge is ready to assist."
|
||||
inputs={[
|
||||
{
|
||||
name: "name", type: "text", placeholder: "Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "email", type: "email", placeholder: "Email", required: true,
|
||||
},
|
||||
]}
|
||||
buttonText="Send Inquiry"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/crystal-whiskey-bottle-alcohol-drinks-packaging_53876-110846.jpg"
|
||||
imageAlt="Crystal whiskey bottle alcohol drinks packaging"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "AMILANO", items: [
|
||||
{
|
||||
label: "About", href: "#about"},
|
||||
{
|
||||
label: "Shop", href: "#shop"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Account", items: [
|
||||
{
|
||||
label: "Wholesale", href: "#"},
|
||||
{
|
||||
label: "Track Order", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2025 Al-Siraj Perfume. All rights reserved."
|
||||
bottomRightText="Basra - Al-Wufud Street"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user