Update src/app/page.tsx
This commit is contained in:
278
src/app/page.tsx
278
src/app/page.tsx
@@ -2,170 +2,154 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
||||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||
import { MapPin, Clock, Phone, Mail } from "lucide-react";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
||||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="medium"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="normal"
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="compact"
|
||||
sizing="medium"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="radial-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Work", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="MotionArc"
|
||||
button={{ text: "Get Started", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Our Story", id: "about" },
|
||||
{ name: "Products", id: "features" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Golden Hearth Bakery"
|
||||
button={{ text: "Order Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "sparkles-gradient"}}
|
||||
title="Bringing Concepts to Life Through Motion"
|
||||
description="Professional-grade motion design studio focused on cinematic storytelling, high-end 3D animation, and digital brand experiences that captivate audiences."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/smart-pensive-redhead-hipster-with-full-beard-glasses-dressed-casual-clothes-poses-with-hand-chin-studio-isolated-dark-background_613910-20091.jpg", alt: "Creative Lead" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/happy-confident-bearded-man-brown-suit-wearing-glasses-looking-camera-smiling-cheerfully-with-arms-crossed-standing-purple-background_141793-110713.jpg", alt: "Motion Designer" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/pov-businessman-attending-videocall-meeting-office-using-online-videoconference-talk-consultant-about-financial-strategy-company-employee-chatting-remote-teleconference-close-up_482257-40929.jpg", alt: "Technical Artist" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/spotlight-portrait-golden-hour_23-2151915117.jpg", alt: "Editor" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-confident-stylish-bearded-man-with-hairstyle-sunglasses-gray-suit-pink-shirt-holds-tablet-studio-isolated-gray-background_613910-20055.jpg", alt: "Lead Animator" },
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "View Our Portfolio", href: "#features" },
|
||||
{ text: "Contact Us", href: "#contact" },
|
||||
]}
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "3D Animation" },
|
||||
{ type: "text", text: "Motion Graphics" },
|
||||
{ type: "text", text: "Visual Effects" },
|
||||
{ type: "text", text: "Character Design" },
|
||||
{ type: "text", text: "Digital Branding" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Artisan Breads & Handcrafted Pastries"
|
||||
description="From our oven to your table, experience the warmth and quality of traditional baking using locally sourced, fresh ingredients."
|
||||
avatars={[
|
||||
{ src: "https://img.b2bpic.net/free-photo/fresh-bread-counter-bakery-shop_23-2148737333.jpg", alt: "Bakery Staff" },
|
||||
{ src: "https://img.b2bpic.net/free-photo/pastry-chef-working-kitchen_23-2148421043.jpg", alt: "Chef" },
|
||||
]}
|
||||
buttons={[{ text: "Explore Our Menu", href: "#features" }, { text: "Visit Us", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Designing the Future of Motion"
|
||||
description="At MotionArc, we specialize in high-impact visual communication. From abstract branding to complex 3D character animation, we leverage the latest industry tools to create memories, not just videos."
|
||||
bulletPoints={[
|
||||
{ title: "Cinematic Storytelling", description: "Engaging narratives crafted for your specific brand voice." },
|
||||
{ title: "High-End 3D Animation", description: "Cutting edge rendering technology for realistic visuals." },
|
||||
{ title: "Brand-Centric Design", description: "Motion graphics that scale with your growing business." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/empty-desk-living-room-featuring-dual-monitors-displaying-video-project_482257-124533.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Baked with Passion"
|
||||
description="Established in 1995, Golden Hearth Bakery is dedicated to preserving the craft of traditional sourdough and artisan pastries. Every loaf is kneaded, proofed, and baked with love, ensuring an unmatched taste in every bite."
|
||||
bulletPoints={[
|
||||
{ title: "100% Organic Flour", description: "Sourced from sustainable local farms." },
|
||||
{ title: "Natural Fermentation", description: "Our long-fermented sourdough is easier on digestion." },
|
||||
{ title: "Fresh Daily", description: "Everything is baked fresh every single morning." },
|
||||
]}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/hands-kneading-dough-bakery_23-2148281313.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ id: "f1", title: "3D Modeling & Rendering", author: "Studio Team", description: "Full-cycle 3D production services including rigging, texturing, and final cinematic renders.", tags: ["Maya", "C4D"], imageSrc: "http://img.b2bpic.net/free-photo/abstract-neon-background_23-2150737862.jpg" },
|
||||
{ id: "f2", title: "Motion Graphics Design", author: "Design Unit", description: "Professional 2D and 2.5D animation for product launches, explainers, and UI demos.", tags: ["After Effects"], imageSrc: "http://img.b2bpic.net/free-photo/network-concept-with-yellow-squares_23-2148999199.jpg" },
|
||||
{ id: "f3", title: "Cinematic Visual FX", author: "FX Dept", description: "Adding visual depth to your footage with compositing, lighting, and particle effects.", tags: ["VFX", "Compositing"], imageSrc: "http://img.b2bpic.net/free-photo/minimal-surrealistic-abstract-background_23-2151896379.jpg" },
|
||||
]}
|
||||
title="Capabilities"
|
||||
description="Our expertise spans across all facets of modern digital animation."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
title="Signature Creations"
|
||||
description="Explore our daily selection of freshly baked goods."
|
||||
features={[
|
||||
{ id: "p1", title: "Classic Sourdough", author: "Daily Bake", description: "Crispy crust with an airy, flavorful center.", tags: ["Vegan", "Organic"], imageSrc: "https://img.b2bpic.net/free-photo/bread-loaf-table_23-2148682855.jpg" },
|
||||
{ id: "p2", title: "Butter Croissants", author: "Pastry Chef", description: "Flaky, buttery perfection crafted in layers.", tags: ["Premium Butter"], imageSrc: "https://img.b2bpic.net/free-photo/croissants-wooden-table_23-2148386341.jpg" },
|
||||
{ id: "p3", title: "Cinnamon Rolls", author: "Seasonal", description: "Soft, sweet rolls with a spiced glaze.", tags: ["Dessert"], imageSrc: "https://img.b2bpic.net/free-photo/cinnamon-rolls-baking-sheet_23-2148815777.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "150+", description: "Completed Projects" },
|
||||
{ id: "m2", value: "45+", description: "Satisfied Clients" },
|
||||
{ id: "m3", value: "10+", description: "Industry Awards" },
|
||||
]}
|
||||
title="Studio Metrics"
|
||||
description="Proven track record in delivering high-value motion content globally."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTwo
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
title="Bakery Stats"
|
||||
description="A snapshot of our commitment to quality."
|
||||
metrics={[
|
||||
{ id: "m1", value: "500+", description: "Loaves baked daily" },
|
||||
{ id: "m2", value: "25", description: "Years of tradition" },
|
||||
{ id: "m3", value: "100%", description: "Fresh ingredients" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah Jenkins", role: "Creative Director", company: "Global Ads", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-fashion-designer-taking-break-from-work-thinking-about-new-designs_613910-18126.jpg" },
|
||||
{ id: "t2", name: "Marcus Vane", role: "Founder", company: "TechStream", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-stylish-man-elegant-black-suit-dark-background_613910-539.jpg" },
|
||||
{ id: "t3", name: "Elena Ross", role: "Head of Marketing", company: "Innovate Ltd", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/blond-man-happy-expression_1194-2873.jpg" },
|
||||
{ id: "t4", name: "David Chen", role: "Senior Producer", company: "FilmCloud", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/female-painter-her-art-studio_273609-12943.jpg" },
|
||||
{ id: "t5", name: "Julia P.", role: "Brand Manager", company: "Vivid Corp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-cafe_1098-13701.jpg" },
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "99%", label: "Client Satisfaction" },
|
||||
{ value: "2x", label: "Retention Rate" },
|
||||
{ value: "5M+", label: "Video Views" },
|
||||
]}
|
||||
title="Trusted by Visionaries"
|
||||
description="Hear what our partners have to say about the MotionArc production process."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="Community Favorites"
|
||||
description="See what our wonderful customers think about their favorite neighborhood bakery."
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Jane Doe", role: "Local Resident", company: "", rating: 5 },
|
||||
{ id: "t2", name: "John Smith", role: "Regular Customer", company: "", rating: 5 },
|
||||
{ id: "t3", name: "Alice Wong", role: "Food Critic", company: "", rating: 5 },
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "4.9/5", label: "Google Rating" },
|
||||
{ value: "15k+", label: "Happy Customers" },
|
||||
{ value: "98%", label: "Repeat Visitors" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "What is your typical turnaround time?", content: "Depending on project scope, most projects are completed within 4-6 weeks." },
|
||||
{ id: "q2", title: "Do you provide source files?", content: "Yes, we provide all project files upon final project delivery." },
|
||||
{ id: "q3", title: "Can you handle sound design?", content: "We work with top-tier sound engineers to offer full audio-visual solutions." },
|
||||
]}
|
||||
sideTitle="Common Inquiries"
|
||||
sideDescription="Everything you need to know about working with us."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "f1", title: "What are your opening hours?", content: "We are open Tuesday-Sunday, 7:00 AM to 6:00 PM." },
|
||||
{ id: "f2", title: "Do you take custom orders?", content: "Yes! Please call us at least 48 hours in advance for custom cakes or large orders." },
|
||||
{ id: "f3", title: "Are there vegan options?", content: "We offer a wide selection of vegan breads and some rotating vegan pastries." },
|
||||
]}
|
||||
sideTitle="Info & Hours"
|
||||
sideDescription="Everything you need to know about our bakery."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
text="Ready to bring your vision to life? Let's discuss your project today and create something incredible."
|
||||
buttons={[{ text: "Email Our Studio", href: "mailto:hello@motionarc.com" }]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
text="Golden Hearth Bakery | 123 Baker's Lane, Flour Town | Open Tue-Sun: 7am-6pm"
|
||||
buttons={[
|
||||
{ text: "Call Us", href: "tel:+1234567890" },
|
||||
{ text: "Email", href: "mailto:hello@goldenhearth.com" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="MotionArc Studio"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Studio Map", href: "https://maps.app.goo.gl/L6KfvtTCubYdgoSdA" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Golden Hearth Bakery"
|
||||
leftLink={{ text: "Privacy", href: "#" }}
|
||||
rightLink={{ text: "Find Us", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user