Files
66a925c8-d68c-4a10-9119-85c…/src/app/page.tsx
2026-03-15 19:07:48 +00:00

287 lines
16 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroSplitDoubleCarousel from "@/components/sections/hero/HeroSplitDoubleCarousel";
import ProductCardThree from "@/components/sections/product/ProductCardThree";
import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactText from "@/components/sections/contact/ContactText";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { Camera, Heart, HelpCircle, MessageCircle, ShoppingCart, Sparkles, Zap, Crown, Shield, Zap as Lightning, Phone } from "lucide-react";
export default function LandingPage() {
const phoneNumber = "+923299462929";
const whatsappLink = `https://wa.me/${phoneNumber.replace(/[^0-9]/g, '')}?text=Hi%20Crown%20Fragrance%2C%20I%20would%20like%20to%20know%20more%20about%20your%20fragrances.`;
const callLink = `tel:${phoneNumber}`;
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultTextAnimation="entrance-slide"
borderRadius="soft"
contentWidth="compact"
sizing="mediumSizeLargeTitles"
background="circleGradient"
cardStyle="solid"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="layered"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Crown Fragrance"
navItems={[
{ name: "Shop", id: "products" },
{ name: "About", id: "about" },
{ name: "Testimonials", id: "testimonials" },
{ name: "Contact", id: "contact" }
]}
button={{
text: "WhatsApp Now", href: whatsappLink
}}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDoubleCarousel
title="Crown Fragrance Smells Like Royalty"
description="Premium, long-lasting fragrances inspired by luxury designers, delivered fresh from Lahore across Pakistan. 100% authentic, cash on delivery, satisfaction guaranteed."
tag="Limited Stock First-Time Offer 20% Off"
tagIcon={Lightning}
tagAnimation="blur-reveal"
background={{ variant: "plain" }}
leftCarouselItems={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArZchIApxcVpfImnAbjJ0y3n5f/uploaded-1773600852872-kpi2829e.png", imageAlt: "Crown Fragrance Classic Blue Bottle"
},
{
imageSrc: "http://img.b2bpic.net/free-photo/glass-whiskey-with-cigar-table-close-up-photo-alcohol-cigar_1157-39195.jpg", imageAlt: "Luxury Fragrance Product Shot"
}
]}
rightCarouselItems={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArZchIApxcVpfImnAbjJ0y3n5f/uploaded-1773600852873-60xr2fm0.png", imageAlt: "Crown Fragrance Sauvage Dark Bottle"
},
{
imageSrc: "http://img.b2bpic.net/free-vector/flat-design-art-deco-vintage-instagram-post-collection_23-2149145827.jpg", imageAlt: "Premium Fragrance Dark Bottle"
}
]}
buttons={[
{ text: "Shop Now & Get 20% Off", href: "#products" },
{ text: "WhatsApp Now", href: whatsappLink }
]}
buttonAnimation="slide-up"
carouselPosition="right"
ariaLabel="Crown Fragrance Hero Section"
/>
</div>
<div id="products" data-section="products">
<ProductCardThree
title="Our Premium Collections"
description="Handpicked fragrances that define elegance and luxury. Each bottle is carefully selected for quality, authenticity, and lasting impression."
tag="Limited Stock"
tagIcon={Sparkles}
tagAnimation="slide-up"
buttons={[
{ text: "Shop Premium Scents Now", href: "#" },
{ text: "View FAQ", href: "#faq" }
]}
buttonAnimation="opacity"
textboxLayout="default"
useInvertedBackground={false}
gridVariant="three-columns-all-equal-width"
animationType="slide-up"
products={[
{
id: "product-1", name: "Crown Classic Blue", price: "PKR 3,499", imageSrc: "http://img.b2bpic.net/free-vector/realistic-luxury-golden-wedding-ig-stories_23-2149138368.jpg", imageAlt: "Crown Fragrance Classic Blue Bottle", initialQuantity: 1,
isFavorited: false
},
{
id: "product-2", name: "Crown Sauvage", price: "PKR 4,299", imageSrc: "http://img.b2bpic.net/free-vector/abstract-tropical-cards_23-2148534619.jpg", imageAlt: "Crown Fragrance Sauvage Dark Bottle", initialQuantity: 1,
isFavorited: false
},
{
id: "product-3", name: "Crown Essence", price: "PKR 3,799", imageSrc: "http://img.b2bpic.net/free-photo/flower-retro-beautiful-life-wooden_1203-5606.jpg", imageAlt: "Crown Fragrance Essence Light Bottle", initialQuantity: 1,
isFavorited: false
}
]}
carouselMode="buttons"
ariaLabel="Product Collection Section"
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
title="Why Choose Crown Fragrance"
description="We are committed to delivering premium, authentic fragrances to discerning customers across Pakistan. With rigorous quality control, competitive pricing, and customer-first service, Crown Fragrance has become the trusted name for luxury perfumes."
tag="Trusted Since 2020"
tagIcon={Shield}
tagAnimation="blur-reveal"
imageSrc="http://img.b2bpic.net/free-photo/stylish-beautiful-woman-jeans-jacket-walking-street-with-little-purse-elegant-style-spring-fashion-trends_285396-6696.jpg"
imageAlt="Crown Fragrance Premium Quality"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
metrics={[
{ value: "50K+", title: "Happy Customers" },
{ value: "100%", title: "Authentic Products" },
{ value: "24/7", title: "WhatsApp Support" },
{ value: "48hrs", title: "Fast Delivery" }
]}
useInvertedBackground={true}
ariaLabel="About Crown Fragrance Section"
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentySix
title="Luxury Perfection, Seamlessly Delivered"
description="From browsing to checkout to doorstep, every step is designed for your convenience. Experience premium fragrance shopping with the assurance of authenticity and quality."
tag="Premium Experience"
tagIcon={Zap}
tagAnimation="opacity"
buttons={[{ text: "Start Shopping", href: "#products" }]}
buttonAnimation="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
title: "Dramatic Product Photography", description: "Each fragrance is showcased with premium photography that captures the essence of luxury and elegance.", buttonIcon: Camera,
buttonHref: "#products"
},
{
title: "Seamless Checkout", description: "Quick, secure, and hassle-free checkout process with multiple payment options including cash on delivery.", buttonIcon: ShoppingCart,
buttonHref: "#"
},
{
title: "24/7 WhatsApp Support", description: "Direct communication channel for product inquiries, order tracking, and customer support anytime.", buttonIcon: MessageCircle,
buttonHref: whatsappLink
}
]}
ariaLabel="Features Section"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
title="What Our Customers Say"
description="Real reviews from satisfied customers across Pakistan who trust Crown Fragrance for authentic luxury perfumes."
tag="Customer Love"
tagIcon={Heart}
tagAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={true}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
testimonials={[
{
id: "testimonial-1", name: "Ahmed Khan", role: "Business Executive", company: "Lahore", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/afro-american-woman-smiling-close-up_23-2148336947.jpg"
},
{
id: "testimonial-2", name: "Fatima Mirza", role: "Fashion Blogger", company: "Karachi", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-business-office-business-center_1303-20365.jpg"
},
{
id: "testimonial-3", name: "Hassan Ali", role: "Professional", company: "Islamabad", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/confident-handsome-middle-aged-entrepreneur_1262-4871.jpg"
},
{
id: "testimonial-4", name: "Zainab Khan", role: "Entrepreneur", company: "Multan", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/waist-up-confident-businessman-office_329181-19349.jpg"
},
{
id: "testimonial-5", name: "Malik Usama", role: "Corporate Manager", company: "Lahore", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/businessman-smiling-looking-camera_23-2148112827.jpg"
},
{
id: "testimonial-6", name: "Aisha Syed", role: "Marketing Professional", company: "Karachi", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg"
}
]}
carouselMode="buttons"
ariaLabel="Customer Testimonials Section"
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
title="Trusted By Leading Platforms"
description="Crown Fragrance is recognized and supported by premium e-commerce platforms and luxury retail partners across Pakistan."
textboxLayout="default"
useInvertedBackground={false}
names={[
"Premium Partners", "Luxury Retailers", "Online Marketplace", "Certified Dealers", "Authorized Distributors", "Premium Brands", "Luxury Networks"
]}
logos={[
"http://img.b2bpic.net/free-vector/perfume-logo-with-luxury-style_23-2148464119.jpg", "http://img.b2bpic.net/free-vector/luxury-perfume-logo_23-2148460707.jpg", "http://img.b2bpic.net/free-photo/top-view-valentines-day-present-fragnance-inside-package-dark-surface-gift-perfume-love-couple-feeling-color_140725-108985.jpg", "http://img.b2bpic.net/free-vector/letter-luxury-logo-concept-with-golden-leaves_1017-27135.jpg", "http://img.b2bpic.net/free-vector/line-art-golden-botanical-logo-set-template-minimal-style_1017-59288.jpg", "http://img.b2bpic.net/free-photo/high-angle-arrangement-still-life-items_23-2148229273.jpg", "http://img.b2bpic.net/free-photo/close-up-dispenser-liquid-soap-female-hands-store_169016-23896.jpg"
]}
speed={40}
showCard={true}
ariaLabel="Social Proof Section"
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
title="Frequently Asked Questions"
description="Get answers to common questions about our fragrances, delivery, payments, and authenticity guarantees."
tag="Help & Support"
tagIcon={HelpCircle}
tagAnimation="opacity"
textboxLayout="default"
useInvertedBackground={true}
faqsAnimation="blur-reveal"
faqs={[
{
id: "faq-1", title: "Are all products 100% authentic?", content: "Yes, we guarantee 100% authentic fragrances. Every product is sourced directly from authorized distributors and thoroughly verified for authenticity before dispatch."
},
{
id: "faq-2", title: "What payment methods do you accept?", content: "We accept cash on delivery (COD) across Pakistan, bank transfers, and online payment methods. Choose the most convenient option at checkout."
},
{
id: "faq-3", title: "How long does delivery take?", content: "We deliver within 48 hours in major cities (Lahore, Karachi, Islamabad) and 3-5 days in other regions. All orders are carefully tracked for safety."
},
{
id: "faq-4", title: "Can I return or exchange a product?", content: "Yes, we offer a 7-day return/exchange policy if the product is unopened and in original packaging. Contact our WhatsApp team for hassle-free processing."
},
{
id: "faq-5", title: "Are there discounts for bulk orders?", content: "Absolutely! We offer special pricing for bulk and corporate orders. WhatsApp us with your requirements for a custom quote."
},
{
id: "faq-6", title: "How do I track my order?", content: "After placing your order, you'll receive tracking details via WhatsApp and SMS. Our support team is available 24/7 to assist with any queries."
}
]}
ariaLabel="FAQ Section"
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Ready to experience luxury? Connect with us on WhatsApp for personalized recommendations, exclusive deals, and instant support. Your perfect fragrance is just a message away. You can also call us directly at +923299462929 for immediate assistance."
background={{ variant: "radial-gradient" }}
useInvertedBackground={true}
animationType="entrance-slide"
buttons={[
{ text: "Chat on WhatsApp", href: whatsappLink },
{ text: "Call Us", href: callLink }
]}
ariaLabel="Contact Section"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Crown Fragrance"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "WhatsApp: +923299462929", href: whatsappLink }}
ariaLabel="Site Footer"
/>
</div>
</ThemeProvider>
);
}