bender/b8a300e3-20dc-4a44-bc89-1c7c28644b64
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-10 21:15:30 +00:00
parent 41ff6062ae
commit 7c7f1150a8
1 changed files with 131 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

278
src/app/page.tsx
View File

@@ -2,170 +2,154 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react"; import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText'; import { MapPin, Clock, Phone, Mail } from "lucide-react";
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 NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline'; import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import SplitAbout from '@/components/sections/about/SplitAbout'; 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 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() { export default function LandingPage() {
return ( return (
<ThemeProvider <ThemeProvider
defaultButtonVariant="icon-arrow" defaultButtonVariant="icon-arrow"
defaultTextAnimation="background-highlight" defaultTextAnimation="background-highlight"
borderRadius="soft" borderRadius="soft"
contentWidth="compact" contentWidth="compact"
sizing="medium" sizing="medium"
background="noiseDiagonalGradient" background="noiseDiagonalGradient"
cardStyle="glass-depth" cardStyle="glass-depth"
primaryButtonStyle="radial-glow" primaryButtonStyle="radial-glow"
secondaryButtonStyle="layered" secondaryButtonStyle="layered"
headingFontWeight="normal" headingFontWeight="normal"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarLayoutFloatingInline <NavbarLayoutFloatingInline
navItems={[ navItems={[
{ name: "About", id: "about" }, { name: "Our Story", id: "about" },
{ name: "Features", id: "features" }, { name: "Products", id: "features" },
{ name: "Work", id: "testimonials" }, { name: "Reviews", id: "testimonials" },
{ name: "Contact", id: "contact" }, { name: "Contact", id: "contact" },
]} ]}
brandName="MotionArc" brandName="Golden Hearth Bakery"
button={{ text: "Get Started", href: "#contact" }} button={{ text: "Order Now", href: "#contact" }}
/> />
</div> </div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroCentered <HeroCentered
background={{ background={{ variant: "sparkles-gradient" }}
variant: "sparkles-gradient"}} title="Artisan Breads & Handcrafted Pastries"
title="Bringing Concepts to Life Through Motion" description="From our oven to your table, experience the warmth and quality of traditional baking using locally sourced, fresh ingredients."
description="Professional-grade motion design studio focused on cinematic storytelling, high-end 3D animation, and digital brand experiences that captivate audiences." avatars={[
avatars={[ { src: "https://img.b2bpic.net/free-photo/fresh-bread-counter-bakery-shop_23-2148737333.jpg", alt: "Bakery Staff" },
{ 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: "https://img.b2bpic.net/free-photo/pastry-chef-working-kitchen_23-2148421043.jpg", alt: "Chef" },
{ 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" }, buttons={[{ text: "Explore Our Menu", href: "#features" }, { text: "Visit Us", href: "#contact" }]}
{ 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" }, </div>
]}
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="about" data-section="about"> <div id="about" data-section="about">
<SplitAbout <SplitAbout
textboxLayout="split" textboxLayout="split"
useInvertedBackground={false} useInvertedBackground={false}
title="Designing the Future of Motion" title="Baked with Passion"
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." 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={[ bulletPoints={[
{ title: "Cinematic Storytelling", description: "Engaging narratives crafted for your specific brand voice." }, { title: "100% Organic Flour", description: "Sourced from sustainable local farms." },
{ title: "High-End 3D Animation", description: "Cutting edge rendering technology for realistic visuals." }, { title: "Natural Fermentation", description: "Our long-fermented sourdough is easier on digestion." },
{ title: "Brand-Centric Design", description: "Motion graphics that scale with your growing business." }, { title: "Fresh Daily", description: "Everything is baked fresh every single morning." },
]} ]}
imageSrc="http://img.b2bpic.net/free-photo/empty-desk-living-room-featuring-dual-monitors-displaying-video-project_482257-124533.jpg" imageSrc="https://img.b2bpic.net/free-photo/hands-kneading-dough-bakery_23-2148281313.jpg"
mediaAnimation="slide-up" />
/> </div>
</div>
<div id="features" data-section="features"> <div id="features" data-section="features">
<FeatureCardTwentyFour <FeatureCardTwentyFour
animationType="slide-up" animationType="slide-up"
textboxLayout="default" textboxLayout="default"
useInvertedBackground={true} useInvertedBackground={true}
features={[ title="Signature Creations"
{ 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" }, description="Explore our daily selection of freshly baked goods."
{ 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" }, features={[
{ 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" }, { 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" },
title="Capabilities" { 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" },
description="Our expertise spans across all facets of modern digital animation." ]}
/> />
</div> </div>
<div id="metrics" data-section="metrics"> <div id="metrics" data-section="metrics">
<MetricCardTwo <MetricCardTwo
animationType="slide-up" gridVariant="bento-grid"
textboxLayout="default" animationType="slide-up"
gridVariant="bento-grid" textboxLayout="default"
useInvertedBackground={false} title="Bakery Stats"
metrics={[ description="A snapshot of our commitment to quality."
{ id: "m1", value: "150+", description: "Completed Projects" }, metrics={[
{ id: "m2", value: "45+", description: "Satisfied Clients" }, { id: "m1", value: "500+", description: "Loaves baked daily" },
{ id: "m3", value: "10+", description: "Industry Awards" }, { id: "m2", value: "25", description: "Years of tradition" },
]} { id: "m3", value: "100%", description: "Fresh ingredients" },
title="Studio Metrics" ]}
description="Proven track record in delivering high-value motion content globally." />
/> </div>
</div>
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardSixteen <TestimonialCardSixteen
animationType="slide-up" animationType="slide-up"
textboxLayout="split" textboxLayout="split"
useInvertedBackground={true} useInvertedBackground={true}
testimonials={[ title="Community Favorites"
{ 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" }, description="See what our wonderful customers think about their favorite neighborhood bakery."
{ 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" }, testimonials={[
{ 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: "t1", name: "Jane Doe", role: "Local Resident", company: "", rating: 5 },
{ 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: "t2", name: "John Smith", role: "Regular Customer", company: "", rating: 5 },
{ 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" }, { id: "t3", name: "Alice Wong", role: "Food Critic", company: "", rating: 5 },
]} ]}
kpiItems={[ kpiItems={[
{ value: "99%", label: "Client Satisfaction" }, { value: "4.9/5", label: "Google Rating" },
{ value: "2x", label: "Retention Rate" }, { value: "15k+", label: "Happy Customers" },
{ value: "5M+", label: "Video Views" }, { value: "98%", label: "Repeat Visitors" },
]} ]}
title="Trusted by Visionaries" />
description="Hear what our partners have to say about the MotionArc production process." </div>
/>
</div>
<div id="faq" data-section="faq"> <div id="faq" data-section="faq">
<FaqSplitText <FaqSplitText
useInvertedBackground={false} faqsAnimation="slide-up"
faqs={[ faqs={[
{ id: "q1", title: "What is your typical turnaround time?", content: "Depending on project scope, most projects are completed within 4-6 weeks." }, { id: "f1", title: "What are your opening hours?", content: "We are open Tuesday-Sunday, 7:00 AM to 6:00 PM." },
{ id: "q2", title: "Do you provide source files?", content: "Yes, we provide all project files upon final project delivery." }, { 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: "q3", title: "Can you handle sound design?", content: "We work with top-tier sound engineers to offer full audio-visual solutions." }, { id: "f3", title: "Are there vegan options?", content: "We offer a wide selection of vegan breads and some rotating vegan pastries." },
]} ]}
sideTitle="Common Inquiries" sideTitle="Info & Hours"
sideDescription="Everything you need to know about working with us." sideDescription="Everything you need to know about our bakery."
faqsAnimation="slide-up" />
/> </div>
</div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactText <ContactText
useInvertedBackground={true} background={{ variant: "sparkles-gradient" }}
background={{ variant: "sparkles-gradient" }} text="Golden Hearth Bakery | 123 Baker's Lane, Flour Town | Open Tue-Sun: 7am-6pm"
text="Ready to bring your vision to life? Let's discuss your project today and create something incredible." buttons={[
buttons={[{ text: "Email Our Studio", href: "mailto:hello@motionarc.com" }]} { text: "Call Us", href: "tel:+1234567890" },
/> { text: "Email", href: "mailto:hello@goldenhearth.com" }
</div> ]}
/>
</div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterLogoReveal <FooterLogoReveal
logoText="MotionArc Studio" logoText="Golden Hearth Bakery"
leftLink={{ text: "Privacy Policy", href: "#" }} leftLink={{ text: "Privacy", href: "#" }}
rightLink={{ text: "Studio Map", href: "https://maps.app.goo.gl/L6KfvtTCubYdgoSdA" }} rightLink={{ text: "Find Us", href: "#contact" }}
/> />
</div> </div>
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );