Merge version_3_1782062527681 into main #2

Merged
bender merged 1 commits from version_3_1782062527681 into main 2026-06-21 17:23:34 +00:00
11 changed files with 405 additions and 304 deletions

View File

@@ -1,318 +1,42 @@
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
import ContactCta from '@/components/sections/contact/ContactCta';
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
import FeaturesTaggedCards from '@/components/sections/features/FeaturesTaggedCards';
import HeroOverlayMarquee from '@/components/sections/hero/HeroOverlayMarquee';
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
import TeamOverlayCards from '@/components/sections/team/TeamOverlayCards';
import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
import { CheckCircle, Clock, Scissors, Smartphone, Sparkles, TrendingUp, Users, Zap } from "lucide-react";
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
// AUTO-GENERATED shell by per-section-migrate.
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
// files directly. Non-block content (wrappers, non-inlinable sections) is
// preserved inline; extracted section blocks become <XSection/> refs.
export default function HomePage() {
import React from 'react';
import HeroSection from './HomePage/sections/Hero';
import AboutSection from './HomePage/sections/About';
import SocialProofSection from './HomePage/sections/SocialProof';
import FeaturesSection from './HomePage/sections/Features';
import WorkSection from './HomePage/sections/Work';
import MetricsSection from './HomePage/sections/Metrics';
import TeamSection from './HomePage/sections/Team';
import TestimonialSection from './HomePage/sections/Testimonial';
import FaqSection from './HomePage/sections/Faq';
import ContactSection from './HomePage/sections/Contact';
export default function HomePage(): React.JSX.Element {
return (
<>
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroOverlayMarquee
tag="Coastal Content Studio"
title="Stunning Reels Shot Simple Edited Fast"
description="iPhone content capture and professional editing for brands, creators, and events. From raw footage to viral-ready reels in days, not weeks."
primaryButton={{
text: "See Our Work",
href: "#work",
}}
secondaryButton={{
text: "Get a Quote",
href: "#contact",
}}
items={[
{
text: "Fast Turnaround",
icon: Zap,
},
{
text: "Viral-Ready",
icon: Sparkles,
},
{
text: "Authentic Style",
icon: CheckCircle,
},
]}
imageSrc="https://storage.googleapis.com/webild/users/user_3FSASYKMHoXNQgyyFUZlwV8BBH7/uploaded-1782061796036-vi9b3n2h.jpg"
/>
</SectionErrorBoundary>
</div>
<>
<HeroSection />
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutFeaturesSplit
tag="Why Us"
title="Content Capture for the Speed of Social"
description="We bridge the gap between expensive production houses and DIY. Our iPhone-based content creation delivers authentic, engaging reels that stop the scroll while maintaining your brand voice."
items={[
{
icon: Smartphone,
title: "Rapid Capture",
description: "High-quality footage shot on iPhone, ensuring an authentic social-native feel.",
},
{
icon: Scissors,
title: "Viral Editing",
description: "Rapid turnaround editing designed to maximize hook rates and engagement.",
},
{
icon: Clock,
title: "Same-Day Delivery",
description: "Fast turnarounds for event coverage that doesn't miss the moment.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/empty-desktop-with-futuristic-software-tools-shows-live-ai-brain-processing_482257-126206.jpg"
/>
</SectionErrorBoundary>
</div>
<AboutSection />
<div id="social-proof" data-section="social-proof">
<SectionErrorBoundary name="social-proof">
<SocialProofMarquee
tag="Trusted By"
title="Leading Brands & Creators"
description="Building digital engagement for modern companies."
names={[
"Nike",
"Adidas",
"Shopify",
"Airbnb",
"Spotify",
"Netflix",
"Google",
]}
/>
</SectionErrorBoundary>
</div>
<SocialProofSection />
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<FeaturesTaggedCards
tag="Our Workflow"
title="Seamless Content Production"
description="A streamlined process designed for consistent posting velocity."
items={[
{
tag: "Strategy",
title: "Content Planning",
description: "We align on your goals and plan the shoot schedule.",
primaryButton: {
text: "Learn More",
href: "#",
},
imageSrc: "http://img.b2bpic.net/free-photo/high-tech-clinical-environment-with-pc-displays-showing-healthcare-software_482257-124292.jpg",
},
{
tag: "Capture",
title: "On-Site Capture",
description: "Our team captures raw footage with a creator-first approach.",
primaryButton: {
text: "Learn More",
href: "#",
},
imageSrc: "http://img.b2bpic.net/free-photo/crop-girl-playing-game-while-studying_23-2147833781.jpg",
},
{
tag: "Delivery",
title: "Rapid Edit",
description: "Get high-performing reels delivered in 24-48 hours.",
primaryButton: {
text: "Learn More",
href: "#",
},
imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-holding-smartphone_23-2149711474.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<FeaturesSection />
<div id="work" data-section="work">
<SectionErrorBoundary name="work">
<FeaturesImageBento
tag="Portfolio"
title="Our Latest Captures"
description="A glimpse into the content that drives engagement."
items={[
{
title: "Fashion Campaign",
description: "Streetwear lifestyle reel.",
imageSrc: "http://img.b2bpic.net/free-photo/cooking-camera_1098-19823.jpg",
},
{
title: "Motion Graphics",
description: "High-impact visual elements.",
imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139270.jpg",
},
{
title: "Event Coverage",
description: "Real-time live highlights.",
imageSrc: "http://img.b2bpic.net/free-photo/female-journalist-telling-news-outside_23-2149032396.jpg",
},
{
title: "Brand Strategy",
description: "Digital marketing assets.",
imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-with-papers-notes-office_23-2149749911.jpg",
},
{
title: "Studio BTS",
description: "Professional production setup.",
imageSrc: "http://img.b2bpic.net/free-photo/studio-lighting-isolated-white_93675-132047.jpg",
},
{
title: "Viral Reels",
description: "Maximized hook engagement.",
imageSrc: "http://img.b2bpic.net/free-photo/social-media-concept-with-device_23-2150149025.jpg",
},
{
title: "Visual Storytelling",
description: "Brand identity content.",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-photo-camera-indoors-still-life_23-2150630621.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<WorkSection />
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsIconCards
tag="Results"
title="Data-Driven Engagement"
description="Results that matter for your growth."
metrics={[
{
icon: TrendingUp,
title: "Avg. Engagement Lift",
value: "45%",
},
{
icon: Clock,
title: "Average Delivery",
value: "24h",
},
{
icon: Users,
title: "Monthly Reach",
value: "2M+",
},
]}
/>
</SectionErrorBoundary>
</div>
<MetricsSection />
<div id="team" data-section="team">
<SectionErrorBoundary name="team">
<TeamOverlayCards
tag="Our Experts"
title="Meet the Content Team"
description="The creative minds behind your viral content."
members={[
{
name: "Alex Rivers",
role: "Creative Lead",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-sitting-chair-black-white_23-2149411360.jpg",
},
{
name: "Jordan Smith",
role: "Senior Editor",
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-working-as-photographer_52683-110067.jpg",
},
{
name: "Casey Miles",
role: "Cinematographer",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-businessman-with-brick-background_23-2148242735.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<TeamSection />
<div id="testimonial" data-section="testimonial">
<SectionErrorBoundary name="testimonial">
<TestimonialTrustCard
quote="Coastal Club transformed our content workflow. We went from posting once a week to daily high-quality reels. Absolutely game-changing."
rating={5}
author="Sarah Jenkins, Marketing Lead"
avatars={[
{
name: "Sarah Jenkins",
imageSrc: "http://img.b2bpic.net/free-photo/smiley-girl-with-pink-hair-hoodie_23-2148629699.jpg",
},
{
name: "Mark D.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-artistic-girl_23-2148014048.jpg",
},
{
name: "Elena R.",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",
},
{
name: "David W.",
imageSrc: "http://img.b2bpic.net/free-photo/event-manager-with-laptop-banquet-hall_23-2148085309.jpg",
},
{
name: "Chloe B.",
imageSrc: "http://img.b2bpic.net/free-photo/goal-oriented-entrepreneur-focuses-his-business-career-development_482257-116941.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<TestimonialSection />
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqTwoColumn
tag="Common Questions"
title="Everything You Need to Know"
description="Get clear answers about our production studio."
items={[
{
question: "What's the turnaround time?",
answer: "Standard edits are completed within 48 hours, with express options for 24-hour delivery.",
},
{
question: "Can you film at events?",
answer: "Yes, we specialize in real-time capture for events to help amplify your reach instantly.",
},
{
question: "Do you edit raw footage I have?",
answer: "Absolutely. We can take your existing content and edit it into high-converting reels.",
},
{
question: "Is this only for iPhone?",
answer: "We specialize in iPhone-native content for authenticity, but can work with other formats if needed.",
},
]}
/>
</SectionErrorBoundary>
</div>
<FaqSection />
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Ready to Start?"
text="Let's turn your ideas into high-performing content."
primaryButton={{
text: "Contact Us",
href: "#",
}}
secondaryButton={{
text: "View Pricing",
href: "#",
}}
/>
</SectionErrorBoundary>
</div>
<ContactSection />
</>
);
}

View File

@@ -0,0 +1,39 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "about" section.
import React from 'react';
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
import { CheckCircle, Clock, Scissors, Smartphone, Sparkles, TrendingUp, Users, Zap } from "lucide-react";
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function AboutSection(): React.JSX.Element {
return (
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutFeaturesSplit
tag="Why Us"
title="Content Capture for the Speed of Social"
description="We bridge the gap between expensive production houses and DIY. Our iPhone-based content creation delivers authentic, engaging reels that stop the scroll while maintaining your brand voice."
items={[
{
icon: Smartphone,
title: "Rapid Capture",
description: "High-quality footage shot on iPhone, ensuring an authentic social-native feel.",
},
{
icon: Scissors,
title: "Viral Editing",
description: "Rapid turnaround editing designed to maximize hook rates and engagement.",
},
{
icon: Clock,
title: "Same-Day Delivery",
description: "Fast turnarounds for event coverage that doesn't miss the moment.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/empty-desktop-with-futuristic-software-tools-shows-live-ai-brain-processing_482257-126206.jpg"
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,27 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "contact" section.
import React from 'react';
import ContactCta from '@/components/sections/contact/ContactCta';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ContactSection(): React.JSX.Element {
return (
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Ready to Start?"
text="Let's turn your ideas into high-performing content."
primaryButton={{
text: "Contact Us",
href: "#",
}}
secondaryButton={{
text: "View Pricing",
href: "#",
}}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,38 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "faq" section.
import React from 'react';
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function FaqSection(): React.JSX.Element {
return (
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqTwoColumn
tag="Common Questions"
title="Everything You Need to Know"
description="Get clear answers about our production studio."
items={[
{
question: "What's the turnaround time?",
answer: "Standard edits are completed within 48 hours, with express options for 24-hour delivery.",
},
{
question: "Can you film at events?",
answer: "Yes, we specialize in real-time capture for events to help amplify your reach instantly.",
},
{
question: "Do you edit raw footage I have?",
answer: "Absolutely. We can take your existing content and edit it into high-converting reels.",
},
{
question: "Is this only for iPhone?",
answer: "We specialize in iPhone-native content for authenticity, but can work with other formats if needed.",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,52 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "features" section.
import React from 'react';
import FeaturesTaggedCards from '@/components/sections/features/FeaturesTaggedCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function FeaturesSection(): React.JSX.Element {
return (
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<FeaturesTaggedCards
tag="Our Workflow"
title="Seamless Content Production"
description="A streamlined process designed for consistent posting velocity."
items={[
{
tag: "Strategy",
title: "Content Planning",
description: "We align on your goals and plan the shoot schedule.",
primaryButton: {
text: "Learn More",
href: "#",
},
imageSrc: "http://img.b2bpic.net/free-photo/high-tech-clinical-environment-with-pc-displays-showing-healthcare-software_482257-124292.jpg",
},
{
tag: "Capture",
title: "On-Site Capture",
description: "Our team captures raw footage with a creator-first approach.",
primaryButton: {
text: "Learn More",
href: "#",
},
imageSrc: "http://img.b2bpic.net/free-photo/crop-girl-playing-game-while-studying_23-2147833781.jpg",
},
{
tag: "Delivery",
title: "Rapid Edit",
description: "Get high-performing reels delivered in 24-48 hours.",
primaryButton: {
text: "Learn More",
href: "#",
},
imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-holding-smartphone_23-2149711474.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,18 @@
// Created by add_section_from_catalog (HeroBrandCarousel).
import React from 'react';
import HeroBrandCarousel from '@/components/sections/hero/HeroBrandCarousel';
export default function HeroSection(): React.JSX.Element {
return (
<div data-webild-section="hero" id="hero">
<HeroBrandCarousel
secondaryButton={{"href":"#contact","text":"Get a Quote"}}
items={[{"imageSrc":"https://storage.googleapis.com/webild/users/user_3FSASYKMHoXNQgyyFUZlwV8BBH7/uploaded-1782061796036-vi9b3n2h.jpg"},{"imageSrc":"https://storage.googleapis.com/webild/users/user_3FSASYKMHoXNQgyyFUZlwV8BBH7/uploaded-1782061796039-jwubbov4.jpg"},{"imageSrc":"https://storage.googleapis.com/webild/users/user_3FSASYKMHoXNQgyyFUZlwV8BBH7/uploaded-1782061796038-37oooc3j.png"}]}
brand="Coastal Club Studio"
primaryButton={{"href":"#work","text":"See Our Work"}}
description="iPhone content capture and professional editing for brands, creators, and events. From raw footage to viral-ready reels in days, not weeks."
/>
</div>
);
}

View File

@@ -0,0 +1,38 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "metrics" section.
import React from 'react';
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
import { CheckCircle, Clock, Scissors, Smartphone, Sparkles, TrendingUp, Users, Zap } from "lucide-react";
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function MetricsSection(): React.JSX.Element {
return (
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsIconCards
tag="Results"
title="Data-Driven Engagement"
description="Results that matter for your growth."
metrics={[
{
icon: TrendingUp,
title: "Avg. Engagement Lift",
value: "45%",
},
{
icon: Clock,
title: "Average Delivery",
value: "24h",
},
{
icon: Users,
title: "Monthly Reach",
value: "2M+",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,29 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "social-proof" section.
import React from 'react';
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function SocialProofSection(): React.JSX.Element {
return (
<div id="social-proof" data-section="social-proof">
<SectionErrorBoundary name="social-proof">
<SocialProofMarquee
tag="Trusted By"
title="Leading Brands & Creators"
description="Building digital engagement for modern companies."
names={[
"Nike",
"Adidas",
"Shopify",
"Airbnb",
"Spotify",
"Netflix",
"Google",
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,37 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "team" section.
import React from 'react';
import TeamOverlayCards from '@/components/sections/team/TeamOverlayCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function TeamSection(): React.JSX.Element {
return (
<div id="team" data-section="team">
<SectionErrorBoundary name="team">
<TeamOverlayCards
tag="Our Experts"
title="Meet the Content Team"
description="The creative minds behind your viral content."
members={[
{
name: "Alex Rivers",
role: "Creative Lead",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-sitting-chair-black-white_23-2149411360.jpg",
},
{
name: "Jordan Smith",
role: "Senior Editor",
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-working-as-photographer_52683-110067.jpg",
},
{
name: "Casey Miles",
role: "Cinematographer",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-businessman-with-brick-background_23-2148242735.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,42 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "testimonial" section.
import React from 'react';
import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function TestimonialSection(): React.JSX.Element {
return (
<div id="testimonial" data-section="testimonial">
<SectionErrorBoundary name="testimonial">
<TestimonialTrustCard
quote="Coastal Club transformed our content workflow. We went from posting once a week to daily high-quality reels. Absolutely game-changing."
rating={5}
author="Sarah Jenkins, Marketing Lead"
avatars={[
{
name: "Sarah Jenkins",
imageSrc: "http://img.b2bpic.net/free-photo/smiley-girl-with-pink-hair-hoodie_23-2148629699.jpg",
},
{
name: "Mark D.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-artistic-girl_23-2148014048.jpg",
},
{
name: "Elena R.",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg",
},
{
name: "David W.",
imageSrc: "http://img.b2bpic.net/free-photo/event-manager-with-laptop-banquet-hall_23-2148085309.jpg",
},
{
name: "Chloe B.",
imageSrc: "http://img.b2bpic.net/free-photo/goal-oriented-entrepreneur-focuses-his-business-career-development_482257-116941.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,57 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "work" section.
import React from 'react';
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function WorkSection(): React.JSX.Element {
return (
<div id="work" data-section="work">
<SectionErrorBoundary name="work">
<FeaturesImageBento
tag="Portfolio"
title="Our Latest Captures"
description="A glimpse into the content that drives engagement."
items={[
{
title: "Fashion Campaign",
description: "Streetwear lifestyle reel.",
imageSrc: "http://img.b2bpic.net/free-photo/cooking-camera_1098-19823.jpg",
},
{
title: "Motion Graphics",
description: "High-impact visual elements.",
imageSrc: "http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139270.jpg",
},
{
title: "Event Coverage",
description: "Real-time live highlights.",
imageSrc: "http://img.b2bpic.net/free-photo/female-journalist-telling-news-outside_23-2149032396.jpg",
},
{
title: "Brand Strategy",
description: "Digital marketing assets.",
imageSrc: "http://img.b2bpic.net/free-photo/female-web-designer-with-papers-notes-office_23-2149749911.jpg",
},
{
title: "Studio BTS",
description: "Professional production setup.",
imageSrc: "http://img.b2bpic.net/free-photo/studio-lighting-isolated-white_93675-132047.jpg",
},
{
title: "Viral Reels",
description: "Maximized hook engagement.",
imageSrc: "http://img.b2bpic.net/free-photo/social-media-concept-with-device_23-2150149025.jpg",
},
{
title: "Visual Storytelling",
description: "Brand identity content.",
imageSrc: "http://img.b2bpic.net/free-photo/top-view-photo-camera-indoors-still-life_23-2150630621.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}