Update src/app/page.tsx
This commit is contained in:
433
src/app/page.tsx
433
src/app/page.tsx
@@ -2,6 +2,7 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { Zap, Shield, CheckCircle } from 'lucide-react';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
||||
@@ -28,321 +29,141 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "#products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="Palms Company"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Products", id: "#products" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Palms Company"
|
||||
button={{ text: "Get Quote", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Bringing the Tropics Home"
|
||||
description="Exquisite palm landscaping and decor services designed for modern lifestyles."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explore Services",
|
||||
href: "#about",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-banner-made-intertwined-palm-leaves-neon-color-with-inscription-palm-sunday-backg_166373-6592.jpg",
|
||||
imageAlt: "Tropical palm landscape",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-palm-tree-landscape_1048-8187.jpg",
|
||||
imageAlt: "Sunlit palm garden",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/olden-norway-may-17-2023-mountain_58702-16536.jpg",
|
||||
imageAlt: "Serene botanical design",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-palm-tree-vivid-colors_23-2151591805.jpg",
|
||||
imageAlt: "Modern palm aesthetics",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-tropical-leaves-background_23-2148245085.jpg",
|
||||
imageAlt: "Lush green space",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/water-drops-palm-leaf_23-2147829117.jpg",
|
||||
imageAlt: "Vibrant nature design",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Bringing the Tropics Home"
|
||||
description="Exquisite palm landscaping and decor services designed for modern lifestyles."
|
||||
buttons={[{ text: "Explore Services", href: "#about" }]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/vertical-banner-made-intertwined-palm-leaves-neon-color-with-inscription-palm-sunday-backg_166373-6592.jpg", imageAlt: "Tropical palm landscape" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/3d-palm-tree-landscape_1048-8187.jpg", imageAlt: "Sunlit palm garden" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/olden-norway-may-17-2023-mountain_58702-16536.jpg", imageAlt: "Serene botanical design" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-palm-tree-vivid-colors_23-2151591805.jpg", imageAlt: "Modern palm aesthetics" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-tropical-leaves-background_23-2148245085.jpg", imageAlt: "Lush green space" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/water-drops-palm-leaf_23-2147829117.jpg", imageAlt: "Vibrant nature design" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Rooted in Quality"
|
||||
description={[
|
||||
"Palms Company specializes in delivering premium botanical solutions for homes and offices.",
|
||||
"Our design team creates tranquil, refreshing environments through expertly curated natural landscapes.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Rooted in Quality"
|
||||
description={[
|
||||
"Palms Company specializes in delivering premium botanical solutions for homes and offices.", "Our design team creates tranquil, refreshing environments through expertly curated natural landscapes."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Expert Design",
|
||||
description: "Professional team designing custom palm landscapes.",
|
||||
tag: "Expertise",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-white-calla-lily-flower-put-green-ceramic-vase-sunlight_181624-50885.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Eco-Friendly",
|
||||
description: "Sustainable practices that respect local ecosystems.",
|
||||
tag: "Green",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/arrangement-different-trashed-objects_23-2148996920.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "End-to-End Care",
|
||||
description: "Full service from initial design to ongoing maintenance.",
|
||||
tag: "Support",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-entrepreneur-talking-with-female-courier-while-signing-delivery-office_637285-2844.jpg",
|
||||
},
|
||||
]}
|
||||
title="Why Choose Us"
|
||||
description="We prioritize quality, sustainability, and elegance in every service."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "1", title: "Expert Design", description: "Professional team designing custom palm landscapes.", tag: "Expertise", imageSrc: "http://img.b2bpic.net/free-photo/top-view-white-calla-lily-flower-put-green-ceramic-vase-sunlight_181624-50885.jpg" },
|
||||
{ id: "2", title: "Eco-Friendly", description: "Sustainable practices that respect local ecosystems.", tag: "Green", imageSrc: "http://img.b2bpic.net/free-photo/arrangement-different-trashed-objects_23-2148996920.jpg" },
|
||||
{ id: "3", title: "End-to-End Care", description: "Full service from initial design to ongoing maintenance.", tag: "Support", imageSrc: "http://img.b2bpic.net/free-photo/happy-entrepreneur-talking-with-female-courier-while-signing-delivery-office_637285-2844.jpg" },
|
||||
]}
|
||||
title="Why Choose Us"
|
||||
description="We prioritize quality, sustainability, and elegance in every service."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Classic Parlor Palm",
|
||||
price: "$89",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/calathea-plant-pot_53876-142816.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Elegant Areca Palm",
|
||||
price: "$125",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/potted-plant-home_657883-225.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Tall Majesty Palm",
|
||||
price: "$210",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/plam-blue-sky-background_1372-393.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Desert Fan Palm",
|
||||
price: "$175",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-florist-using-laptop-with-potted-plants-desk_23-2147929417.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Tropical Kentia Palm",
|
||||
price: "$195",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/interior-design-with-eucalyptus-table-high-angle_23-2149420714.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Unique Sago Palm",
|
||||
price: "$145",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-colorful-leaves-flowers_23-2149289753.jpg",
|
||||
},
|
||||
]}
|
||||
title="Premium Palm Varieties"
|
||||
description="Explore our curated collection of indoor and outdoor palm plants."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Classic Parlor Palm", price: "$89", imageSrc: "http://img.b2bpic.net/free-photo/calathea-plant-pot_53876-142816.jpg" },
|
||||
{ id: "2", name: "Elegant Areca Palm", price: "$125", imageSrc: "http://img.b2bpic.net/free-photo/potted-plant-home_657883-225.jpg" },
|
||||
{ id: "3", name: "Tall Majesty Palm", price: "$210", imageSrc: "http://img.b2bpic.net/free-photo/plam-blue-sky-background_1372-393.jpg" },
|
||||
]}
|
||||
title="Premium Palm Varieties"
|
||||
description="Explore our curated collection of indoor and outdoor palm plants."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Projects Completed",
|
||||
value: "500+",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Happy Clients",
|
||||
value: "450+",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Plants Delivered",
|
||||
value: "2,000+",
|
||||
},
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="We are proud of our milestones in bringing nature to our clients."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "1", title: "Projects Completed", value: "500+", icon: CheckCircle },
|
||||
{ id: "2", title: "Happy Clients", value: "450+", icon: Shield },
|
||||
{ id: "3", title: "Plants Delivered", value: "2,000+", icon: Zap },
|
||||
]}
|
||||
title="Our Impact"
|
||||
description="We are proud of our milestones in bringing nature to our clients."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Miller",
|
||||
handle: "@sarah_miller",
|
||||
testimonial: "Transformative service! My office looks incredible.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-charismatic-young-man-digital-nomad-working-from-cafe-sitting-coffee-shop_1258-245441.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "James Chen",
|
||||
handle: "@j_chen",
|
||||
testimonial: "Excellent quality palms, really changed the mood.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-overjoyed-woman-rejoicing-her-success_74855-3513.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena Rodriguez",
|
||||
handle: "@elena_rod",
|
||||
testimonial: "Professional design and seamless installation process.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Smith",
|
||||
handle: "@smith_d",
|
||||
testimonial: "Best palm nursery I have dealt with.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-cafe_1098-13701.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Maria Garcia",
|
||||
handle: "@m_garcia",
|
||||
testimonial: "Stunning aesthetics and healthy plants.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Stories"
|
||||
description="Read what our customers think about our palm collections and landscaping services."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Miller", handle: "@sarah_miller", testimonial: "Transformative service! My office looks incredible.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-charismatic-young-man-digital-nomad-working-from-cafe-sitting-coffee-shop_1258-245441.jpg" },
|
||||
{ id: "2", name: "James Chen", handle: "@j_chen", testimonial: "Excellent quality palms, really changed the mood.", imageSrc: "http://img.b2bpic.net/free-photo/happy-overjoyed-woman-rejoicing-her-success_74855-3513.jpg" },
|
||||
{ id: "3", name: "Elena Rodriguez", handle: "@elena_rod", testimonial: "Professional design and seamless installation process.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg" },
|
||||
]}
|
||||
title="Client Stories"
|
||||
description="Read what our customers think about our palm collections and landscaping services."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How often do I water my palm?",
|
||||
content: "Most indoor palms prefer to dry out slightly before next watering.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Do you offer installation?",
|
||||
content: "Yes, we handle end-to-end installation and maintenance.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Are these plants safe for pets?",
|
||||
content: "Some palms are safe, but verify the species carefully.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Need to know more about our palm care or installation services?"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "How often do I water my palm?", content: "Most indoor palms prefer to dry out slightly before next watering." },
|
||||
{ id: "2", title: "Do you offer installation?", content: "Yes, we handle end-to-end installation and maintenance." },
|
||||
{ id: "3", title: "Are these plants safe for pets?", content: "Some palms are safe, but verify the species carefully." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Need to know more about our palm care or installation services?"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Get Started"
|
||||
title="Transform Your Space"
|
||||
description="Ready to bring the tropics home? Reach out to us today for a consultation."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#footer",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Get Started"
|
||||
title="Transform Your Space"
|
||||
description="Ready to bring the tropics home? Reach out to us today for a consultation."
|
||||
buttons={[{ text: "Contact Us", href: "#footer" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Palms Company"
|
||||
columns={[
|
||||
{
|
||||
title: "Links",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Products",
|
||||
href: "#products",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Palms Company"
|
||||
columns={[
|
||||
{ title: "Links", items: [{ label: "About", href: "#about" }, { label: "Features", href: "#features" }, { label: "Products", href: "#products" }] },
|
||||
{ title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user