241 lines
13 KiB
TypeScript
241 lines
13 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from 'react';
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
|
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import { CheckCircle, Flower2, Leaf, Palette, Sparkles, MessageCircle } from "lucide-react";
|
|
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
|
import ContactForm from "@/components/form/ContactForm";
|
|
|
|
const handleImageClick = (imageUrl) => {
|
|
window.open(imageUrl, '_blank', 'width=80%');
|
|
};
|
|
export default function LandingPage() {
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLarge"
|
|
background="aurora"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="MossArt"
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Work", id: "process" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCarouselLogo
|
|
logoText="MOSSART"
|
|
description="Bespoke floral design for moments that matter — events, interiors, and one-of-a-kind botanical art. Trusted by 250+ events and discerning clients."
|
|
buttons={[
|
|
{ text: "Request Consultation", href: "contact" },
|
|
{ text: "Explore Work", href: "process" }
|
|
]}
|
|
slides={[
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/vertical-closeup-shot-beautiful-wedding-bouquet-with-gorgeous-white-roses_181624-15923.jpg", imageAlt: "Luxurious floral event design"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/luxury-wedding-catering-banquet-outdoor_624325-1790.jpg", imageAlt: "Modern moss panel installation"
|
|
},
|
|
{
|
|
imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-beautiful-wedding-bouquet-with-gorgeous-white-roses_181624-27325.jpg", imageAlt: "Handcrafted flower painting"
|
|
}
|
|
]}
|
|
autoplayDelay={4000}
|
|
showDimOverlay={true}
|
|
logoLineHeight={1}
|
|
ariaLabel="MossArt hero section with carousel"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardEight
|
|
title="What We Create" className="underline"
|
|
description="Handcrafted floral experiences tailored to elevate your space and celebrate your moments"
|
|
tag="Our Services"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Event Floral Design", description: "Weddings, corporate events, and private celebrations transformed with bespoke floral installations that set the emotional tone and atmosphere", imageSrc: "https://img.b2bpic.net/free-photo/luxury-wedding-catering-banquet-outdoor_624325-1790.jpg", imageAlt: "Event floral design showcase"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Interior & Space Decoration", description: "Luxury homes, offices, restaurants, and hotels enhanced with thoughtfully placed floral arrangements that elevate the aesthetic and storytelling", imageSrc: "https://img.b2bpic.net/free-photo/high-angle-beautiful-flowers-arrangement_23-2149591558.jpg", imageAlt: "Interior floral decoration"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Custom Floral Art Objects", description: "One-of-a-kind botanical pieces: flower paintings, moss panels, and sculptural installations made exclusively for your vision", imageSrc: "https://img.b2bpic.net/free-photo/high-angle-shot-bouquet-with-evergreen-leaves-white-roses-lights_181624-27606.jpg", imageAlt: "Custom moss panel art"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Discuss Your Project", href: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="process" data-section="process">
|
|
<FeatureCardEight
|
|
title="The MossArt Process"
|
|
description="A personal, collaborative journey from concept to creation — ensuring every detail reflects your vision"
|
|
tag="How We Work"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Consultation & Mood", description: "We listen deeply to understand your vision, aesthetic, and the emotional atmosphere you want to create. This foundation guides everything.", imageSrc: "https://img.b2bpic.net/free-photo/concentrated-woman-with-students-table_23-2147656374.jpg", imageAlt: "Design consultation meeting"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Concept & Materials", description: "Our team sketches your concept, selects the finest natural materials, and refines every detail with you until it's perfect.", imageSrc: "https://img.b2bpic.net/free-photo/people-working-together-medium-shot_23-2149831293.jpg", imageAlt: "Floral design creation process"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Handcrafted Creation", description: "We meticulously craft your piece using premium flowers, moss, botanicals, and sustainable materials with deep attention to detail.", imageSrc: "https://img.b2bpic.net/free-photo/high-angle-shot-bouquet-with-evergreen-leaves-white-roses-lights_181624-27606.jpg", imageAlt: "Handcrafted floral artistry"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Installation & Delivery", description: "Professional installation brings your piece to life in its intended space, perfectly positioned to create the desired atmosphere and impact.", imageSrc: "https://img.b2bpic.net/free-photo/luxury-wedding-catering-banquet-outdoor_624325-1790.jpg", imageAlt: "Installation and setup"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
tag="About MossArt"
|
|
title="Art Before Commerce"
|
|
description="We believe floral design is art. Every project is a unique expression — never replicated, always handcrafted, made specifically for you. We collaborate with event planners, interior designers, and private collectors who demand authenticity and excellence."
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
imagePosition="right"
|
|
imageSrc="https://img.b2bpic.net/free-photo/closeup-shot-beautiful-wedding-bouquet-with-gorgeous-white-roses_181624-27325.jpg"
|
|
imageAlt="Botanical artwork and natural materials"
|
|
bulletPoints={[
|
|
{
|
|
title: "Uniqueness", description: "No mass production. Every piece is bespoke, handmade, and one-of-a-kind", icon: Sparkles
|
|
},
|
|
{
|
|
title: "Natural Materials", description: "We source the finest flowers, moss, botanicals, and sustainable materials", icon: Leaf
|
|
},
|
|
{
|
|
title: "Artistic Vision", description: "Collaboration over transactions. We treat every project as a creative partnership", icon: Palette
|
|
},
|
|
{
|
|
title: "Premium Craftsmanship", description: "Meticulous attention to detail in every arrangement, installation, and finishing touch", icon: CheckCircle
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about-new" data-section="about-new">
|
|
<ContactForm
|
|
title="Your Title Here"
|
|
description="Add your description here."
|
|
tag="Sample tag"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="Loved by Designers, Planners & Clients"
|
|
description="Stories from those who've trusted us with their most important moments"
|
|
tag="Social Proof"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "The Ceremony Transformed", quote: "MossArt didn't just decorate our wedding — they created an atmosphere. Guests couldn't stop talking about how the space made them feel.", name: "Emma Laurent", role: "Bride & Event Host", imageSrc: "https://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg", imageAlt: "Emma Laurent"
|
|
},
|
|
{
|
|
id: "2", title: "Exactly What We Envisioned", quote: "Working with the team was effortless. They understood our design vision and elevated it beyond what we imagined.", name: "James Mitchell", role: "Interior Designer", imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg", imageAlt: "James Mitchell"
|
|
},
|
|
{
|
|
id: "3", title: "Art That Lives", quote: "The moss panel in our office became a conversation piece. It's truly a work of art, not just decoration.", name: "Sofia Rossi", role: "CEO & Art Collector", imageSrc: "https://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg", imageAlt: "Sofia Rossi"
|
|
},
|
|
{
|
|
id: "4", title: "The Difference Is Clear", quote: "You can feel the difference between mass-produced flowers and handcrafted botanical art. MossArt gets it.", name: "David Chen", role: "Event Planner", imageSrc: "https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", imageAlt: "David Chen"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Request Consultation", href: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardFourteen
|
|
title="MossArt in Numbers"
|
|
tag="Our Impact"
|
|
useInvertedBackground="noInvert"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "250+", description: "Projects completed for events, interiors, and private collections"
|
|
},
|
|
{
|
|
id: "2", value: "8+ Years", description: "Crafting bespoke floral art with the same passion and precision"
|
|
},
|
|
{
|
|
id: "3", value: "98%", description: "Client satisfaction rate; nearly every project leads to repeat work or referrals"
|
|
},
|
|
{
|
|
id: "4", value: "12", description: "Cities where our installations have transformed spaces and celebrated moments"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="MossArt"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{ label: "Services", href: "services" },
|
|
{ label: "Our Process", href: "process" },
|
|
{ label: "About", href: "about" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Contact", href: "contact" },
|
|
{ label: "Inquiries", href: "contact" },
|
|
{ label: "Collaborations", href: "contact" }
|
|
]
|
|
},
|
|
{
|
|
items: [
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Email", href: "mailto:hello@mossart.studio" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
|
|
}
|