Update src/app/page.tsx
This commit is contained in:
448
src/app/page.tsx
448
src/app/page.tsx
@@ -29,331 +29,147 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Work",
|
||||
id: "#portfolio",
|
||||
},
|
||||
{
|
||||
name: "Process",
|
||||
id: "#process",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="Hidden Gem Studio"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Work", id: "#portfolio" },
|
||||
{ name: "Process", id: "#process" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Hidden Gem Studio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "rotated-rays-static",
|
||||
}}
|
||||
title="We Turn Hidden Gems Into Premium Brands"
|
||||
description="Hidden Gem Studio transforms local businesses into high-converting, visually powerful brands through luxury websites, branding, and digital presence design."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Our Work",
|
||||
href: "#portfolio",
|
||||
},
|
||||
{
|
||||
text: "Start Your Transformation",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cook-is-fry-vegetables-with-spices-sauce-wok-flame-cooking-process-asian-restaurant_613910-5938.jpg",
|
||||
imageAlt: "Cinematic wok fire",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-cooked-squashes-designed-meal-inside-plate-grey-surface_140725-89993.jpg",
|
||||
imageAlt: "Gourmet plating",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-young-curly-dark-skinned-woman-white-pants-jacket-blouse-leans-desk-fashion-designer-office-holds-coffee-cup-laptop_197531-24108.jpg",
|
||||
imageAlt: "Luxury restaurant interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-kitchen-interior-design_23-2151821355.jpg",
|
||||
imageAlt: "Cinematic wok fire detail",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-wedding-reception-hall-with-decorated-luxury-table-setting_181624-13771.jpg",
|
||||
imageAlt: "Gourmet plating detail",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-clothing-store-filled-casual-formal-wear-items-hanging-fashion-store-racks-hangers-full-with-fashionable-clothes-accessories-discount-small-business-commercial-activity_482257-65075.jpg",
|
||||
imageAlt: "Warm boutique interior",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{ variant: "rotated-rays-static" }}
|
||||
title="We Turn Hidden Gems Into Premium Brands"
|
||||
description="Hidden Gem Studio transforms local businesses into high-converting, visually powerful brands through luxury websites, branding, and digital presence design."
|
||||
buttons={[
|
||||
{ text: "View Our Work", href: "#portfolio" },
|
||||
{ text: "Start Your Transformation", href: "#contact" },
|
||||
]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/cook-is-fry-vegetables-with-spices-sauce-wok-flame-cooking-process-asian-restaurant_613910-5938.jpg", imageAlt: "Cinematic wok fire" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-cooked-squashes-designed-meal-inside-plate-grey-surface_140725-89993.jpg", imageAlt: "Gourmet plating" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/stylish-young-curly-dark-skinned-woman-white-pants-jacket-blouse-leans-desk-fashion-designer-office-holds-coffee-cup-laptop_197531-24108.jpg", imageAlt: "Luxury restaurant interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/futuristic-kitchen-interior-design_23-2151821355.jpg", imageAlt: "Cinematic wok fire detail" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-wedding-reception-hall-with-decorated-luxury-table-setting_181624-13771.jpg", imageAlt: "Gourmet plating detail" },
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="Your Business Is Already a Hidden Gem. It Just Doesn’t Look Like One Online."
|
||||
metrics={[
|
||||
{
|
||||
icon: Sparkles,
|
||||
label: "Perception Shift",
|
||||
value: "100%",
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
label: "Conversion Boost",
|
||||
value: "3x",
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
label: "Trust Enhancement",
|
||||
value: "High",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="Your Business Is Already a Hidden Gem. It Just Doesn’t Look Like One Online."
|
||||
metrics={[
|
||||
{ icon: Sparkles, label: "Perception Shift", value: "100%" },
|
||||
{ icon: TrendingUp, label: "Conversion Boost", value: "3x" },
|
||||
{ icon: ShieldCheck, label: "Trust Enhancement", value: "High" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"No generic tech templates",
|
||||
"No low-quality stock images",
|
||||
"No cold corporate agencies",
|
||||
"No ignore-your-brand strategies",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Complete visual identity design",
|
||||
"Luxury cinematic website design",
|
||||
"Google Maps presence optimization",
|
||||
"Ongoing visual content growth",
|
||||
],
|
||||
}}
|
||||
title="Our Core Services"
|
||||
description="Premium creative transformations tailored to your local business."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{ items: ["No generic tech templates", "No low-quality stock images", "No cold corporate agencies", "No ignore-your-brand strategies"] }}
|
||||
positiveCard={{ items: ["Complete visual identity design", "Luxury cinematic website design", "Google Maps presence optimization", "Ongoing visual content growth"] }}
|
||||
title="Our Core Services"
|
||||
description="Premium creative transformations tailored to your local business."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Luxury Chinese Restaurant",
|
||||
price: "Transformed",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/knife-fork-tied-with-red-ribbon-bank-white-background_169016-27119.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Premium Med Spa",
|
||||
price: "Transformed",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gold-foil-business-card-template-collection_23-2148887994.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Luxury Auto Service",
|
||||
price: "Transformed",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/looking-vehicle-interior-female-customer-modern-stylish-bearded-businessman-automobile-saloon_146671-16013.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Gourmet BBQ House",
|
||||
price: "Transformed",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/vintage-menu-template-with-golden-style_23-2147665897.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Local Boutique Shop",
|
||||
price: "Transformed",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/gradient-elegant-business-card-template_23-2150363476.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Artisan Coffee House",
|
||||
price: "Transformed",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-legs-close-up-by-automobile_1303-13879.jpg",
|
||||
},
|
||||
]}
|
||||
title="Portfolio of Transformation"
|
||||
description="Conceptual redesigns showing the power of perception."
|
||||
/>
|
||||
</div>
|
||||
<div id="portfolio" data-section="portfolio">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Luxury Chinese Restaurant", price: "Transformed", imageSrc: "http://img.b2bpic.net/free-photo/knife-fork-tied-with-red-ribbon-bank-white-background_169016-27119.jpg" },
|
||||
{ id: "p2", name: "Premium Med Spa", price: "Transformed", imageSrc: "http://img.b2bpic.net/free-vector/gold-foil-business-card-template-collection_23-2148887994.jpg" },
|
||||
{ id: "p3", name: "Luxury Auto Service", price: "Transformed", imageSrc: "http://img.b2bpic.net/free-photo/looking-vehicle-interior-female-customer-modern-stylish-bearded-businessman-automobile-saloon_146671-16013.jpg" },
|
||||
{ id: "p4", name: "Gourmet BBQ House", price: "Transformed", imageSrc: "http://img.b2bpic.net/free-vector/vintage-menu-template-with-golden-style_23-2147665897.jpg" },
|
||||
{ id: "p5", name: "Local Boutique Shop", price: "Transformed", imageSrc: "http://img.b2bpic.net/free-vector/gradient-elegant-business-card-template_23-2150363476.jpg" },
|
||||
{ id: "p6", name: "Artisan Coffee House", price: "Transformed", imageSrc: "http://img.b2bpic.net/free-photo/female-legs-close-up-by-automobile_1303-13879.jpg" },
|
||||
]}
|
||||
title="Portfolio of Transformation"
|
||||
description="Conceptual redesigns showing the power of perception."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah Miller",
|
||||
role: "Owner",
|
||||
company: "BBQ House",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021814.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "David Chen",
|
||||
role: "Owner",
|
||||
company: "Chinese Rest.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-modern-female-talking-phone_23-2148415960.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena Ross",
|
||||
role: "Manager",
|
||||
company: "Med Spa",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-beautiful-asian-girl-advertising-payment_1262-18277.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Mark Jones",
|
||||
role: "Owner",
|
||||
company: "Auto Tech",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/enjoying-process-creation-attractive-successful-young-ginger-female-artisan-artist-designer-with-hair-knot-feeling-happy-excited-about-creating-something-beautiful-new-her-studio_273609-953.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Jenny Lee",
|
||||
role: "Founder",
|
||||
company: "Local Cafe",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-bearded-male-small-cafe-with-lot-flowers-coffee-machine_613910-8899.jpg",
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Real results from local businesses transformed."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah Miller", role: "Owner", company: "BBQ House", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021814.jpg" },
|
||||
{ id: "t2", name: "David Chen", role: "Owner", company: "Chinese Rest.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiley-modern-female-talking-phone_23-2148415960.jpg" },
|
||||
{ id: "t3", name: "Elena Ross", role: "Manager", company: "Med Spa", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/positive-beautiful-asian-girl-advertising-payment_1262-18277.jpg" },
|
||||
{ id: "t4", name: "Mark Jones", role: "Owner", company: "Auto Tech", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/enjoying-process-creation-attractive-successful-young-ginger-female-artisan-artist-designer-with-hair-knot-feeling-happy-excited-about-creating-something-beautiful-new-her-studio_273609-953.jpg" },
|
||||
{ id: "t5", name: "Jenny Lee", role: "Founder", company: "Local Cafe", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-redhead-bearded-male-small-cafe-with-lot-flowers-coffee-machine_613910-8899.jpg" },
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Real results from local businesses transformed."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="process" data-section="process">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Step 1 — Discovery",
|
||||
content: "We understand your business, customers, and positioning.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Step 2 — Brand Direction",
|
||||
content: "We define your new visual identity and digital presence.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Step 3 — Launch",
|
||||
content: "We build and launch a premium experience that elevates perception instantly.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Our Creative Process"
|
||||
sideDescription="Clear, premium steps for your digital transformation."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="process" data-section="process">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "f1", title: "Step 1 — Discovery", content: "We understand your business, customers, and positioning." },
|
||||
{ id: "f2", title: "Step 2 — Brand Direction", content: "We define your new visual identity and digital presence." },
|
||||
{ id: "f3", title: "Step 3 — Launch", content: "We build and launch a premium experience that elevates perception instantly." },
|
||||
]}
|
||||
sideTitle="Our Creative Process"
|
||||
sideDescription="Clear, premium steps for your digital transformation."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "plan1",
|
||||
badge: "Essential",
|
||||
price: "$2,500",
|
||||
subtitle: "Website Transformation",
|
||||
features: [
|
||||
"Luxury cinematic design",
|
||||
"Mobile-first experience",
|
||||
"Brand positioning",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "plan2",
|
||||
badge: "Premium",
|
||||
price: "$299/mo",
|
||||
subtitle: "Monthly Brand Growth",
|
||||
features: [
|
||||
"Monthly brand updates",
|
||||
"Visual content growth",
|
||||
"Priority support",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Investment in Perception"
|
||||
description="Simple premium packages to transform your brand."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "plan1", badge: "Essential", price: "$2,500", subtitle: "Website Transformation", features: ["Luxury cinematic design", "Mobile-first experience", "Brand positioning"] },
|
||||
{ id: "plan2", badge: "Premium", price: "$299/mo", subtitle: "Monthly Brand Growth", features: ["Monthly brand updates", "Visual content growth", "Priority support"] },
|
||||
]}
|
||||
title="Investment in Perception"
|
||||
description="Simple premium packages to transform your brand."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "rotated-rays-static",
|
||||
}}
|
||||
text="Your business is already great. Let’s make people see it."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Your Transformation",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "rotated-rays-static" }}
|
||||
text="Your business is already great. Let’s make people see it."
|
||||
buttons={[{ text: "Start Your Transformation", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
{
|
||||
label: "hello@hiddengem.studio",
|
||||
href: "mailto:hello@hiddengem.studio",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "https://instagram.com",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Hidden Gem Studio"
|
||||
copyrightText="Every hidden gem deserves to be discovered."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Contact", items: [{ label: "hello@hiddengem.studio", href: "mailto:hello@hiddengem.studio" }] },
|
||||
{ title: "Social", items: [{ label: "Instagram", href: "https://instagram.com" }] },
|
||||
]}
|
||||
logoText="Hidden Gem Studio"
|
||||
copyrightText="Every hidden gem deserves to be discovered."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user