Merge version_1 into main #1
467
src/app/page.tsx
467
src/app/page.tsx
@@ -29,346 +29,151 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
{
|
||||
name: "Collection",
|
||||
id: "#collection",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="Imperial Crystals"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "#hero" },
|
||||
{ name: "Collection", id: "#collection" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Imperial Crystals"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
title="Timeless Elegance, Naturally Crafted"
|
||||
description="Discover Imperial Crystals, where rare mineral treasures meet artisanal luxury. Every piece is curated for those who command distinction."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Collection",
|
||||
href: "#collection",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/abstract-gold-chain-jewellery-presentation_23-2149599086.jpg"
|
||||
imageAlt="Luxurious Imperial Crystals display"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-beautiful-brunette-girl-posing-with-closed-eyes_176420-8507.jpg",
|
||||
alt: "Customer portrait one",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-spanish-woman-posing-studio_23-2150104702.jpg",
|
||||
alt: "Customer portrait two",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-man-posing-black-white-medium-shot_23-2149411423.jpg",
|
||||
alt: "Customer portrait three",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-copy-space_23-2149411419.jpg",
|
||||
alt: "Customer portrait four",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-modelsexy-modern-man-dressed-elegant-suit-fashion-male-posing-street-near-fence-sunset-sunglassesusing-smartphone-apps_158538-22406.jpg",
|
||||
alt: "Customer portrait five",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by 5,000+ elite collectors"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Rare Mineral Sourcing",
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Authentic Gemstones",
|
||||
icon: Diamond,
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Artisanal Craftsmanship",
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Insured Shipping",
|
||||
icon: Truck,
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Private Concierge",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Timeless Elegance, Naturally Crafted"
|
||||
description="Discover Imperial Crystals, where rare mineral treasures meet artisanal luxury. Every piece is curated for those who command distinction."
|
||||
buttons={[{ text: "Explore Collection", href: "#collection" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/abstract-gold-chain-jewellery-presentation_23-2149599086.jpg"
|
||||
imageAlt="Luxurious Imperial Crystals display"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-beautiful-brunette-girl-posing-with-closed-eyes_176420-8507.jpg", alt: "Customer portrait one" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-spanish-woman-posing-studio_23-2150104702.jpg", alt: "Customer portrait two" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-man-posing-black-white-medium-shot_23-2149411423.jpg", alt: "Customer portrait three" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-man-posing-with-copy-space_23-2149411419.jpg", alt: "Customer portrait four" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-modelsexy-modern-man-dressed-elegant-suit-fashion-male-posing-street-near-fence-sunset-sunglassesusing-smartphone-apps_158538-22406.jpg", alt: "Customer portrait five" },
|
||||
]}
|
||||
avatarText="Trusted by 5,000+ elite collectors"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Rare Mineral Sourcing" },
|
||||
{ type: "text-icon", text: "Authentic Gemstones", icon: Diamond },
|
||||
{ type: "text", text: "Artisanal Craftsmanship" },
|
||||
{ type: "text-icon", text: "Insured Shipping", icon: Truck },
|
||||
{ type: "text", text: "Private Concierge" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="A Legacy of Refinement"
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn Our Story",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="A Legacy of Refinement"
|
||||
buttons={[{ text: "Learn Our Story", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="collection" data-section="collection">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Royal Amethyst",
|
||||
price: "$850",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/colored-choco-candies-art-designed-isolated-white-floor_140725-14153.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Arctic Clear Quartz",
|
||||
price: "$620",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-crystals-flowers-arrangement_23-2149324177.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Imperial Emerald",
|
||||
price: "$2,400",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vibrant-green-orange-agate-geode_23-2152029626.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Golden Rutile Quartz",
|
||||
price: "$1,150",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/macro-photography-purple-rock-with-white-crystals-black-background_91008-516.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Citrine Point",
|
||||
price: "$900",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/everyday-bath-utensils-dark-marble-background_58702-17689.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Tourmaline Slab",
|
||||
price: "$1,300",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photo-stone-texture-pattern_58702-16039.jpg",
|
||||
},
|
||||
]}
|
||||
title="The Imperial Collection"
|
||||
description="Our curated selection of rare gemstones and minerals, handled with artisanal precision."
|
||||
/>
|
||||
</div>
|
||||
<div id="collection" data-section="collection">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Royal Amethyst", price: "$850", imageSrc: "http://img.b2bpic.net/free-photo/colored-choco-candies-art-designed-isolated-white-floor_140725-14153.jpg" },
|
||||
{ id: "2", name: "Arctic Clear Quartz", price: "$620", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-crystals-flowers-arrangement_23-2149324177.jpg" },
|
||||
{ id: "3", name: "Imperial Emerald", price: "$2,400", imageSrc: "http://img.b2bpic.net/free-photo/vibrant-green-orange-agate-geode_23-2152029626.jpg" },
|
||||
{ id: "4", name: "Golden Rutile Quartz", price: "$1,150", imageSrc: "http://img.b2bpic.net/free-photo/macro-photography-purple-rock-with-white-crystals-black-background_91008-516.jpg" },
|
||||
{ id: "5", name: "Citrine Point", price: "$900", imageSrc: "http://img.b2bpic.net/free-photo/everyday-bath-utensils-dark-marble-background_58702-17689.jpg" },
|
||||
{ id: "6", name: "Tourmaline Slab", price: "$1,300", imageSrc: "http://img.b2bpic.net/free-photo/photo-stone-texture-pattern_58702-16039.jpg" },
|
||||
]}
|
||||
title="The Imperial Collection"
|
||||
description="Our curated selection of rare gemstones and minerals, handled with artisanal precision."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "15+",
|
||||
title: "Years of Sourcing",
|
||||
description: "Global mineral expertise",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "5k+",
|
||||
title: "Satisfied Clients",
|
||||
description: "Collectors worldwide",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "99%",
|
||||
title: "Purity Rating",
|
||||
description: "Unmatched mineral quality",
|
||||
icon: ShieldCheck,
|
||||
},
|
||||
]}
|
||||
title="Excellence in Every Facet"
|
||||
description="Numbers behind our commitment to purity and luxury."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "15+", title: "Years of Sourcing", description: "Global mineral expertise", icon: Award },
|
||||
{ id: "m2", value: "5k+", title: "Satisfied Clients", description: "Collectors worldwide", icon: Users },
|
||||
{ id: "m3", value: "99%", title: "Purity Rating", description: "Unmatched mineral quality", icon: ShieldCheck },
|
||||
]}
|
||||
title="Excellence in Every Facet"
|
||||
description="Numbers behind our commitment to purity and luxury."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Eleanor Vance",
|
||||
role: "Collector",
|
||||
testimonial: "The quality is simply unmatched. Imperial Crystals exceeded all expectations.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-female_23-2148880262.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Marcus Thorne",
|
||||
role: "Designer",
|
||||
testimonial: "These pieces serve as the perfect centerpiece for any luxury interior.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-stylish-bearded-man-with-hairstyle-glasses-gray-suit-pink-shirt-posing-studio-isolated-gray-background_613910-4660.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Sophia Laurent",
|
||||
role: "Art Consultant",
|
||||
testimonial: "Exquisite textures and rare clarity. Truly artisanal standard.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-black-short-dress-is-working-chair-with-laptop-cafeteria-she-is-looks-busy_197531-1130.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Julian Reed",
|
||||
role: "Investor",
|
||||
testimonial: "Purity and rarity combined. A fantastic acquisition for my private display.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-floor-new-year-party_23-2147995159.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Isabella Grant",
|
||||
role: "Architect",
|
||||
testimonial: "Sophisticated display and prompt service. Extremely professional.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-woman-portrait_23-2148148150.jpg",
|
||||
},
|
||||
]}
|
||||
title="Reflections of Our Patrons"
|
||||
description="Stories from collectors who value authentic craftsmanship."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Eleanor Vance", role: "Collector", testimonial: "The quality is simply unmatched. Imperial Crystals exceeded all expectations.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-female_23-2148880262.jpg" },
|
||||
{ id: "2", name: "Marcus Thorne", role: "Designer", testimonial: "These pieces serve as the perfect centerpiece for any luxury interior.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-stylish-bearded-man-with-hairstyle-glasses-gray-suit-pink-shirt-posing-studio-isolated-gray-background_613910-4660.jpg" },
|
||||
{ id: "3", name: "Sophia Laurent", role: "Art Consultant", testimonial: "Exquisite textures and rare clarity. Truly artisanal standard.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-black-short-dress-is-working-chair-with-laptop-cafeteria-she-is-looks-busy_197531-1130.jpg" },
|
||||
{ id: "4", name: "Julian Reed", role: "Investor", testimonial: "Purity and rarity combined. A fantastic acquisition for my private display.", imageSrc: "http://img.b2bpic.net/free-photo/girl-floor-new-year-party_23-2147995159.jpg" },
|
||||
{ id: "5", name: "Isabella Grant", role: "Architect", testimonial: "Sophisticated display and prompt service. Extremely professional.", imageSrc: "http://img.b2bpic.net/free-photo/confident-beautiful-young-woman-portrait_23-2148148150.jpg" },
|
||||
]}
|
||||
title="Reflections of Our Patrons"
|
||||
description="Stories from collectors who value authentic craftsmanship."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Luxe Interior",
|
||||
"GemWorld",
|
||||
"Artisan Decor",
|
||||
"Global Fine Arts",
|
||||
"Mineral Guild",
|
||||
"Imperial Stones",
|
||||
"Pure Stones",
|
||||
]}
|
||||
title="Trusted by Premier Brands"
|
||||
description="Selected by the best in the industry."
|
||||
/>
|
||||
</div>
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Luxe Interior", "GemWorld", "Artisan Decor", "Global Fine Arts", "Mineral Guild", "Imperial Stones", "Pure Stones"]}
|
||||
title="Trusted by Premier Brands"
|
||||
description="Selected by the best in the industry."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How is authenticity verified?",
|
||||
content: "Every crystal undergoes rigorous laboratory testing and grading.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do you ship worldwide?",
|
||||
content: "Yes, we provide secure, insured global shipping for all our pieces.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Can I request custom sourcing?",
|
||||
content: "Absolutely. Our expert team facilitates bespoke sourcing requests.",
|
||||
},
|
||||
]}
|
||||
title="Common Inquiries"
|
||||
description="How we manage our collections and deliveries."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How is authenticity verified?", content: "Every crystal undergoes rigorous laboratory testing and grading." },
|
||||
{ id: "f2", title: "Do you ship worldwide?", content: "Yes, we provide secure, insured global shipping for all our pieces." },
|
||||
{ id: "f3", title: "Can I request custom sourcing?", content: "Absolutely. Our expert team facilitates bespoke sourcing requests." },
|
||||
]}
|
||||
title="Common Inquiries"
|
||||
description="How we manage our collections and deliveries."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
text="Start your private acquisition process with our concierge today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Concierge",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
text="Start your private acquisition process with our concierge today."
|
||||
buttons={[{ text: "Contact Concierge", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Imperial Crystals"
|
||||
columns={[
|
||||
{
|
||||
title: "Collection",
|
||||
items: [
|
||||
{
|
||||
label: "All Crystals",
|
||||
href: "#collection",
|
||||
},
|
||||
{
|
||||
label: "Rare Finds",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Concierge",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Imperial Crystals"
|
||||
columns={[
|
||||
{ title: "Collection", items: [{ label: "All Crystals", href: "#collection" }, { label: "Rare Finds", href: "#" }] },
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Concierge", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user