349 lines
13 KiB
TypeScript
349 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
|
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import { CalendarCheck, Droplet, Facebook, Feather, Instagram, Leaf, Lightbulb, Palette, Sprout } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="aurora"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "about",
|
|
},
|
|
{
|
|
name: "Services",
|
|
id: "features",
|
|
},
|
|
{
|
|
name: "Testimonials",
|
|
id: "testimonials",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="Filla"
|
|
button={{
|
|
text: "Get a Quote",
|
|
href: "#contact",
|
|
}}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitKpi
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
imagePosition="right"
|
|
title="Fresh Flowers, Beautifully Arranged for Every Occasion"
|
|
description="At Filla Studio, we craft stunning floral designs that elevate moments and express heartfelt emotions. Discover the artistry in every bloom."
|
|
kpis={[
|
|
{
|
|
value: "10+",
|
|
label: "Years Experience",
|
|
},
|
|
{
|
|
value: "200+",
|
|
label: "Happy Clients",
|
|
},
|
|
{
|
|
value: "500+",
|
|
label: "Unique Creations",
|
|
},
|
|
]}
|
|
enableKpiAnimation={false}
|
|
buttons={[
|
|
{
|
|
text: "Shop Bouquets",
|
|
href: "#features",
|
|
},
|
|
{
|
|
text: "Get a Custom Quote",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
imageSrc="https://pixabay.com/get/gedd0c976733bcd961f936fa7d8366e57a2127bf1199f81f2fa85c166420f9d6936017c4f0020b9b88eed7d549df646a0632da2b5d6aa925f07262d34d9e1872a_1280.jpg"
|
|
imageAlt="Luxurious fresh flower bouquet in a studio setting"
|
|
mediaAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
useInvertedBackground={false}
|
|
tag="Our Story"
|
|
title="The Art of Floristry, Cultivated with Passion"
|
|
buttons={[
|
|
{
|
|
text: "Learn More",
|
|
href: "#",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNineteen
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
tag: "Personalized",
|
|
title: "Custom Bouquets",
|
|
subtitle: "Unique designs for every individual.",
|
|
description: "Handcrafted bouquets tailored to your preferences, occasion, and style. Each arrangement is a unique expression of beauty.",
|
|
imageSrc: "https://pixabay.com/get/g569f6328673ab1df6c370e652ec6c0a3509f94081cd1dd86edb3d26a63c419dd966e71095bb004f7c124be363f6f6f32f75cfb9b2fb54e94b7c11912ecf05076_1280.jpg",
|
|
imageAlt: "Custom designed flower bouquet",
|
|
},
|
|
{
|
|
id: 2,
|
|
tag: "Memorable",
|
|
title: "Event Florals",
|
|
subtitle: "Transforming spaces into floral wonders.",
|
|
description: "Exquisite floral decor for weddings, corporate events, and special occasions, creating breathtaking atmospheres.",
|
|
imageSrc: "https://pixabay.com/get/g31aa6681cec2e2d86424a13fc8bacc11110f9359c4ba4e15cb5a4d9ee65f39889457bd39fb74e05b3d59f5e90c95b47d4bf1fe2326685b324bdc1b35c7b9c0f7_1280.jpg",
|
|
imageAlt: "Elegant floral decoration for an event",
|
|
},
|
|
{
|
|
id: 3,
|
|
tag: "Convenient",
|
|
title: "Reliable Delivery",
|
|
subtitle: "Freshness delivered right to your door.",
|
|
description: "Prompt and careful delivery of your chosen arrangements, ensuring they arrive in pristine condition and on time.",
|
|
imageSrc: "https://pixabay.com/get/g640e570385fe1711ce2b78c18e5e6d3fe98afc92d3f5d44b65ac5a2c45f0081f65208aebcc44b2488ecc44fae28704467f86c450adc0ff2fb12e5b5c21869cac_1280.jpg",
|
|
imageAlt: "Flower delivery service",
|
|
},
|
|
]}
|
|
title="Tailored Floral Creations for Every Need"
|
|
description="From intimate gatherings to grand celebrations, Filla Studio offers a full spectrum of floral services designed to bring your vision to life."
|
|
tag="Our Services"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "1",
|
|
value: "100%",
|
|
title: "Freshness Guaranteed",
|
|
description: "We source only the freshest blooms for every order, ensuring lasting beauty.",
|
|
icon: Droplet,
|
|
},
|
|
{
|
|
id: "2",
|
|
value: "Artisan",
|
|
title: "Handcrafted Designs",
|
|
description: "Each arrangement is thoughtfully designed and meticulously crafted by expert florists.",
|
|
icon: Feather,
|
|
},
|
|
{
|
|
id: "3",
|
|
value: "Eco-Friendly",
|
|
title: "Sustainable Sourcing",
|
|
description: "Committed to environmentally responsible practices in all our floral selections.",
|
|
icon: Leaf,
|
|
},
|
|
]}
|
|
title="Why Filla Studio Stands Out"
|
|
description="Our commitment to quality, creativity, and customer satisfaction sets us apart."
|
|
tag="Our Impact"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Sophia R.",
|
|
date: "May 2024",
|
|
title: "Absolutely stunning arrangements!",
|
|
quote: "Filla Studio created the most beautiful centerpieces for our wedding. They exceeded all expectations and truly brought our vision to life. Highly recommend!",
|
|
tag: "Wedding Decor",
|
|
avatarSrc: "https://pixabay.com/get/g9db24a95c4a64fd87cfe4bebc93af3bcfb3b6c48bf5bdf9bc9acd4347effab208ab869080472ceb26fc0f1df02b2078ec3d369b59816a1e8af77c36e14a861a6_1280.jpg",
|
|
avatarAlt: "Sophia R. avatar",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Liam K.",
|
|
date: "April 2024",
|
|
title: "The perfect birthday gift!",
|
|
quote: "I ordered a custom bouquet for my wife's birthday, and it was breathtaking. The flowers were fresh, and the design was incredibly elegant. She loved it!",
|
|
tag: "Birthday Gift",
|
|
avatarSrc: "https://pixabay.com/get/g55b29332551245c54d135037068cc992f912526d6c773f180235f4b467bac780272fa021937eb51a0b3722121db22b19d46f04641e13b2b0f0e00a0c7578768d_1280.jpg",
|
|
avatarAlt: "Liam K. avatar",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Olivia M.",
|
|
date: "March 2024",
|
|
title: "Professional and artistic!",
|
|
quote: "Filla Studio handled the floral arrangements for our corporate event, and they were flawless. The team was a pleasure to work with, and their artistry is unmatched.",
|
|
tag: "Corporate Event",
|
|
avatarSrc: "https://pixabay.com/get/g4f4596f96b0b0625800edefdf34bbb2398fccba371a90ed862899f10f78023d4ff4277a70a6b8648bb54ab7bfbd1dc546171a2023d0ed07333e5e27f9a611d9d_1280.jpg",
|
|
avatarAlt: "Olivia M. avatar",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Ethan J.",
|
|
date: "February 2024",
|
|
title: "Exceptional service and quality!",
|
|
quote: "I'm a regular customer because Filla Studio consistently delivers the highest quality flowers and the most creative designs. Always a fantastic experience.",
|
|
tag: "Regular Customer",
|
|
avatarSrc: "https://pixabay.com/get/g77bf7823b1e8b5f7c126cd4943586a23f6bc32cf9d33e4eb4af474f51580b288899c1f85922f7995ebf8e26f6b81e6273bd3b1e0ea93632da269249574ff616b_1280.jpg",
|
|
avatarAlt: "Ethan J. avatar",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Ava P.",
|
|
date: "January 2024",
|
|
title: "Truly magical flowers!",
|
|
quote: "The bouquet I received was more beautiful than I could have imagined. The attention to detail and the vibrancy of the flowers were just perfect. Thank you, Filla!",
|
|
tag: "Anniversary",
|
|
avatarSrc: "https://pixabay.com/get/gae1e3f92b89acb6d7b235ad523414099b9f81f0d4d641e380b415ce7f5cb4c02208d49af8d31be4f236c97336c025726e9fd1dfa9d8b25db7ebe3eb8bbac0299_1280.jpg",
|
|
avatarAlt: "Ava P. avatar",
|
|
},
|
|
]}
|
|
title="Kind Words from Our Cherished Clients"
|
|
description="Hear from those who have experienced the Filla Studio difference."
|
|
tag="What Clients Say"
|
|
/>
|
|
</div>
|
|
|
|
<div id="process" data-section="process">
|
|
<FeatureCardTen
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
features={[
|
|
{
|
|
id: "1",
|
|
title: "Personal Consultation",
|
|
description: "We begin with a detailed discussion to understand your vision, preferences, and the unique requirements of your occasion.",
|
|
media: {
|
|
imageSrc: "https://pixabay.com/get/g00f903ac6f8b3f2967032dfaf47a02ec866dcfa1be4faca04c6e2d1688d760e6eaabd0992edcc03c043a912d7ffb593714febaf32307a2292914a9a36e70e41e_1280.jpg",
|
|
imageAlt: "Florist consulting with a client",
|
|
},
|
|
items: [
|
|
{
|
|
icon: CalendarCheck,
|
|
text: "Schedule a meeting",
|
|
},
|
|
{
|
|
icon: Lightbulb,
|
|
text: "Share your ideas",
|
|
},
|
|
],
|
|
reverse: false,
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Creative Design & Sourcing",
|
|
description: "Our florists craft a unique design concept and meticulously source the freshest, highest-quality flowers and foliage.",
|
|
media: {
|
|
imageSrc: "https://pixabay.com/get/g569f6328673ab1df6c370e652ec6c0a3509f94081cd1dd86edb3d26a63c419dd966e71095bb004f7c124be363f6f6f32f75cfb9b2fb54e94b7c11912ecf05076_1280.jpg",
|
|
imageAlt: "Florist arranging a bouquet",
|
|
},
|
|
items: [
|
|
{
|
|
icon: Palette,
|
|
text: "Develop concept",
|
|
},
|
|
{
|
|
icon: Sprout,
|
|
text: "Source fresh blooms",
|
|
},
|
|
],
|
|
reverse: true,
|
|
},
|
|
]}
|
|
title="The Art of Floral Design"
|
|
description="Every Filla Studio creation follows a meticulous process, blending artistic vision with precise execution to bring your floral dreams to life."
|
|
tag="Our Process"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
text="Ready to bloom your ideas? Let's create something beautiful together. Reach out to Filla Studio today."
|
|
buttons={[
|
|
{
|
|
text: "Contact Us Now",
|
|
href: "mailto:info@fillastudio.com",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Filla Studio"
|
|
copyrightText="© 2024 Filla Studio. All rights reserved."
|
|
socialLinks={[
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com/fillastudio",
|
|
ariaLabel: "Instagram",
|
|
},
|
|
{
|
|
icon: Facebook,
|
|
href: "https://facebook.com/fillastudio",
|
|
ariaLabel: "Facebook",
|
|
},
|
|
{
|
|
icon: Instagram,
|
|
href: "https://pinterest.com/fillastudio",
|
|
ariaLabel: "Pinterest",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|