Merge version_3_1781548902934 into main #6

Merged
bender merged 1 commits from version_3_1781548902934 into main 2026-06-15 18:44:35 +00:00
11 changed files with 278 additions and 203 deletions

View File

@@ -1,217 +1,42 @@
import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
import ContactCta from '@/components/sections/contact/ContactCta';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeaturesBento from '@/components/sections/features/FeaturesBento';
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
import HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
import PricingMediaCards from '@/components/sections/pricing/PricingMediaCards';
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
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 PricingSection from './HomePage/sections/Pricing';
import TestimonialSection from './HomePage/sections/Testimonial';
import MetricsSection from './HomePage/sections/Metrics';
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">
<HeroBillboardBrand
brand="High-End Design Assets, Delivered in 24 Hours"
description="Stop worrying about design output. Get a dedicated design team on demand for a flat monthly fee. High-end, premium quality delivered at scale."
primaryButton={{
text: "View Membership", href: "#pricing"}}
secondaryButton={{
text: "Explore Work", href: "#work"}}
imageSrc="http://img.b2bpic.net/free-photo/ink-tools-near-bamboo-drawing_23-2147823738.jpg?_wi=1"
/>
</SectionErrorBoundary>
</div>
<>
<HeroSection />
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutTextSplit
title="Built for Visionaries"
descriptions={[
"We operate at the intersection of Swiss design rigor and digital-first innovation. Our subscription model removes the bureaucracy of hiring while maintaining elite agency standards.", "Every asset is custom, high-fidelity, and optimized for your specific brand language. No templates, no bloat—just pure creative output delivered daily."]}
/>
</SectionErrorBoundary>
</div>
<AboutSection />
<div id="social-proof" data-section="social-proof">
<SectionErrorBoundary name="social-proof">
<SocialProofMarquee
tag="Trusted By"
title="Creative Powerhouses"
description="Collaborating with high-growth startups and visionary brands globally."
names={[
"VentureFlow", "Apex Studio", "PixelPerfect", "Modernist Labs", "Orbit Digital", "DesignCore", "Canvas Inc"]}
/>
</SectionErrorBoundary>
</div>
<SocialProofSection />
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<FeaturesBento
tag="Capabilities"
title="Everything You Need"
description="End-to-end design coverage for scaling teams."
features={[
{
title: "Brand Strategy", description: "Comprehensive visual identity and system design.", bentoComponent: "info-card-marquee", infoCards: [
{
icon: "PenTool", label: "Identity", value: "100%"},
{
icon: "Layers", label: "System", value: "24/7"},
{
icon: "Sparkles", label: "Quality", value: "Max"},
],
},
{
title: "Product UX/UI", description: "High-fidelity interfaces built for conversion.", bentoComponent: "media-stack", mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/ink-tools-near-bamboo-drawing_23-2147823738.jpg?_wi=2"},
{
imageSrc: "http://img.b2bpic.net/free-photo/top-view-keys-drawing-arrangement_23-2149386326.jpg"},
{
imageSrc: "http://img.b2bpic.net/free-photo/3d-view-puzzle-pieces_23-2150499113.jpg"},
],
},
{
title: "Creative Workflow", description: "Seamless integration into your team.", bentoComponent: "checklist-timeline", heading: "Our Process", subheading: "Predictable outcomes.", checklistItems: [
{
label: "Submit Brief", detail: "On-demand"},
{
label: "Rapid Drafts", detail: "24h turn"},
{
label: "Polished Asset", detail: "Ready to ship"},
],
completedLabel: "Done"},
]}
/>
</SectionErrorBoundary>
</div>
<FeaturesSection />
<div id="work" data-section="work">
<SectionErrorBoundary name="work">
<FeaturesRevealCardsBento
tag="Portfolio"
title="Signature Deliverables"
description="High-impact work for premium partners."
items={[
{
title: "SaaS Platform", description: "Interactive mobile application design.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-woman-posing-outdoors_23-2149988417.jpg"},
{
title: "Brand Manual", description: "Complete visual guidelines documentation.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/simple-corporate-identity-branding-stationery-set_53876-126754.jpg"},
{
title: "Web Marketing", description: "Conversion-focused landing page design.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/inspired-youth_53876-176745.jpg"},
{
title: "Design System", description: "Figma component architecture.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-laptop-blueprints-desk_482257-31167.jpg"},
{
title: "Campaign Assets", description: "Social and advertising creative.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/hands-holding-smartphone-social-media-concept_23-2150208238.jpg"},
{
title: "Motion Identity", description: "Animated logos and micro-interactions.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/communication-social-media-icons-personal-computer_23-2150781063.jpg"},
{
title: "Editorial Print", description: "Large format typography and layouts.", href: "#", imageSrc: "http://img.b2bpic.net/free-vector/hand-painted-liquid-marble-cover-collection_23-2149002719.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
<WorkSection />
<div id="pricing" data-section="pricing">
<SectionErrorBoundary name="pricing">
<PricingMediaCards
tag="Memberships"
title="Simple, Scalable Pricing"
description="Choose the level that fits your growth."
plans={[
{
tag: "Starter", price: "$2,999", period: "/mo", features: [
"1 active request at a time", "Custom design", "Figma deliverables", "Unlimited brands"],
primaryButton: {
text: "Subscribe", href: "#contact"},
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-holding-shop-sign_23-2148731733.jpg"},
{
tag: "Pro", price: "$4,999", period: "/mo", features: [
"2 active requests", "Priority support", "Motion design", "Brand systems", "Direct Slack comms"],
primaryButton: {
text: "Subscribe", href: "#contact"},
imageSrc: "http://img.b2bpic.net/free-photo/full-battery-sign-left-side-with-white-background_187299-40050.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
<PricingSection />
<div id="testimonial" data-section="testimonial">
<SectionErrorBoundary name="testimonial">
<TestimonialQuoteCards
tag="Testimonials"
title="What Founders Say"
description="Real creative impact from satisfied partners."
testimonials={[
{
name: "Alex Rivet", role: "CEO", quote: "The most seamless design experience I've had. Truly premium quality.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-developing-photos_23-2149893918.jpg"},
{
name: "Sarah Chen", role: "Founder", quote: "Finally, a design team that understands modern brutalism and UI.", imageSrc: "http://img.b2bpic.net/free-photo/elderly-businesswoman-sitting-outside-cafe_1303-19438.jpg"},
{
name: "Mark D.", role: "Product", quote: "Scaleable, fast, and high-fidelity. Unmatched value.", imageSrc: "http://img.b2bpic.net/free-photo/amazingly-looking-african-american-man-wear-blue-blazer-with-brooch-black-turtleneck-glasses-posed-street-fashionable-black-guy-with-cup-coffee_627829-2210.jpg"},
{
name: "Elena V.", role: "CMO", quote: "Our brand evolved overnight thanks to these guys.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-clipboard-smiling-camera_482257-121165.jpg"},
{
name: "Joe B.", role: "Founder", quote: "Exclusivity and quality in every single pixel.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-holding-coffee-cup_23-2148815600.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
<TestimonialSection />
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsIconCards
tag="Impact"
title="By The Numbers"
description="Data-driven creative performance."
metrics={[
{
icon: "Rocket", title: "Projects Delivered", value: "1500+"},
{
icon: "Clock", title: "Turnaround Time", value: "24h"},
{
icon: "Smile", title: "Client Retention", value: "98%"},
]}
/>
</SectionErrorBoundary>
</div>
<MetricsSection />
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqSplitMedia
tag="Support"
title="Frequently Asked"
description="Everything you need to know about our subscription."
items={[
{
question: "Can I pause?", answer: "Yes, pause or cancel anytime."},
{
question: "What's included?", answer: "All core design assets."},
{
question: "Turnaround time?", answer: "Usually under 24 hours."},
]}
imageSrc="http://img.b2bpic.net/free-photo/blue-paint-textured-background-aesthetic-diy-experimental-art_53876-126191.jpg"
/>
</SectionErrorBoundary>
</div>
<FaqSection />
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Ready?"
text="Get exclusive creative support today. Unlimited design awaits."
primaryButton={{
text: "Start Subscription", href: "#"}}
secondaryButton={{
text: "Contact Sales", href: "#"}}
/>
</SectionErrorBoundary>
</div>
<ContactSection />
</>
);
}

View File

@@ -0,0 +1,20 @@
// 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 AboutTextSplit from '@/components/sections/about/AboutTextSplit';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function AboutSection(): React.JSX.Element {
return (
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutTextSplit
title="Built for Visionaries"
descriptions={[
"We operate at the intersection of Swiss design rigor and digital-first innovation. Our subscription model removes the bureaucracy of hiring while maintaining elite agency standards.", "Every asset is custom, high-fidelity, and optimized for your specific brand language. No templates, no bloat—just pure creative output delivered daily."]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,23 @@
// 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?"
text="Get exclusive creative support today. Unlimited design awaits."
primaryButton={{
text: "Start Subscription", href: "#"}}
secondaryButton={{
text: "Contact Sales", href: "#"}}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,18 @@
// Created by add_section_from_catalog (FaqSplitMedia).
import React from 'react';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
export default function FaqSection(): React.JSX.Element {
return (
<div data-webild-section="faq" id="faq">
<FaqSplitMedia
tag="FAQ"
title="Frequently Asked Questions"
description="Find answers to common questions about our design subscription service."
items={[{"answer":"You can submit as many design requests as you want. We work on them one by one to ensure the highest quality.","question":"How many requests can I make?"},{"question":"What is the turnaround time?","answer":"Most requests are completed within 24 hours. More complex projects may take slightly longer, but we will always keep you updated."},{"answer":"Yes, you can pause or cancel your subscription at any time. There are no long-term contracts.","question":"Can I pause my subscription?"},{"question":"What if I don't like the design?","answer":"We offer unlimited revisions until you are 100% satisfied with the final design."}]}
imageSrc="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop"
/>
</div>
);
}

View File

@@ -0,0 +1,17 @@
// Created by add_section_from_catalog (FeaturesBento).
import React from 'react';
import FeaturesBento from '@/components/sections/features/FeaturesBento';
export default function FeaturesSection(): React.JSX.Element {
return (
<div data-webild-section="features" id="features">
<FeaturesBento
tag="Features"
title="Why Choose Us"
description="Everything you need to scale your creative output without compromising on quality."
features={[{"title":"Real-Time Tracking","description":"Track your design requests and revisions in real-time.","infoCards":[{"label":"Turnaround","icon":"Clock","value":"24h"},{"label":"Revisions","icon":"CheckCircle","value":"Unlimited"},{"label":"Quality","icon":"Star","value":"Premium"}],"bentoComponent":"info-card-marquee"},{"title":"Streamlined Workflow","completedLabel":"Delivered","checklistItems":[{"label":"Request","detail":"Submit your design request through our portal."},{"detail":"Our designers get to work immediately.","label":"Design"},{"detail":"Receive your assets within 24 hours.","label":"Delivery"}],"heading":"How it Works","bentoComponent":"checklist-timeline","subheading":"Simple and efficient","description":"A streamlined process from request to delivery."},{"orbitIcons":["Framer","Sketch","Adobe","Webflow"],"title":"Seamless Integration","bentoComponent":"orbiting-icons","description":"We work with the tools you already use.","centerIcon":"Figma"},{"description":"Access a vast library of premium design assets.","bentoComponent":"media-stack","title":"Premium Assets","mediaItems":[{"imageSrc":"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1600607686527-6fb886090705?q=80&w=2564&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1558655146-d09347e92766?q=80&w=2564&auto=format&fit=crop"}]}]}
/>
</div>
);
}

View File

@@ -0,0 +1,20 @@
// Created by add_section_from_catalog (HeroSplitVerticalMarquee).
import React from 'react';
import HeroSplitVerticalMarquee from '@/components/sections/hero/HeroSplitVerticalMarquee';
export default function HeroSection(): React.JSX.Element {
return (
<div data-webild-section="hero" id="hero">
<HeroSplitVerticalMarquee
tag="Premium Design Subscription"
title="High-End Design Assets, Delivered in 24 Hours"
description="Access top-tier design assets tailored for your brand, delivered within 24 hours. Elevate your creative projects with our exclusive subscription."
primaryButton={{"href":"#pricing","text":"Get Started"}}
secondaryButton={{"href":"#work","text":"View Portfolio"}}
leftItems={[{"imageSrc":"https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1600607686527-6fb886090705?q=80&w=2564&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1558655146-d09347e92766?q=80&w=2564&auto=format&fit=crop"}]}
rightItems={[{"imageSrc":"https://images.unsplash.com/photo-1561070791-2526d30994b5?q=80&w=2564&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1550684848-fac1c5b4e853?q=80&w=2564&auto=format&fit=crop"},{"imageSrc":"https://images.unsplash.com/photo-1550684376-efcbd6e3f031?q=80&w=2564&auto=format&fit=crop"}]}
/>
</div>
);
}

View File

@@ -0,0 +1,28 @@
// 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 SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function MetricsSection(): React.JSX.Element {
return (
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsIconCards
tag="Impact"
title="By The Numbers"
description="Data-driven creative performance."
metrics={[
{
icon: "Rocket", title: "Projects Delivered", value: "1500+"},
{
icon: "Clock", title: "Turnaround Time", value: "24h"},
{
icon: "Smile", title: "Client Retention", value: "98%"},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,34 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "pricing" section.
import React from 'react';
import PricingMediaCards from '@/components/sections/pricing/PricingMediaCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function PricingSection(): React.JSX.Element {
return (
<div id="pricing" data-section="pricing">
<SectionErrorBoundary name="pricing">
<PricingMediaCards
tag="Memberships"
title="Simple, Scalable Pricing"
description="Choose the level that fits your growth."
plans={[
{
tag: "Starter", price: "$2,999", period: "/mo", features: [
"1 active request at a time", "Custom design", "Figma deliverables", "Unlimited brands"],
primaryButton: {
text: "Subscribe", href: "#contact"},
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-holding-shop-sign_23-2148731733.jpg"},
{
tag: "Pro", price: "$4,999", period: "/mo", features: [
"2 active requests", "Priority support", "Motion design", "Brand systems", "Direct Slack comms"],
primaryButton: {
text: "Subscribe", href: "#contact"},
imageSrc: "http://img.b2bpic.net/free-photo/full-battery-sign-left-side-with-white-background_187299-40050.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,22 @@
// 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="Creative Powerhouses"
description="Collaborating with high-growth startups and visionary brands globally."
names={[
"VentureFlow", "Apex Studio", "PixelPerfect", "Modernist Labs", "Orbit Digital", "DesignCore", "Canvas Inc"]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,32 @@
// 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 TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function TestimonialSection(): React.JSX.Element {
return (
<div id="testimonial" data-section="testimonial">
<SectionErrorBoundary name="testimonial">
<TestimonialQuoteCards
tag="Testimonials"
title="What Founders Say"
description="Real creative impact from satisfied partners."
testimonials={[
{
name: "Alex Rivet", role: "CEO", quote: "The most seamless design experience I've had. Truly premium quality.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-developing-photos_23-2149893918.jpg"},
{
name: "Sarah Chen", role: "Founder", quote: "Finally, a design team that understands modern brutalism and UI.", imageSrc: "http://img.b2bpic.net/free-photo/elderly-businesswoman-sitting-outside-cafe_1303-19438.jpg"},
{
name: "Mark D.", role: "Product", quote: "Scaleable, fast, and high-fidelity. Unmatched value.", imageSrc: "http://img.b2bpic.net/free-photo/amazingly-looking-african-american-man-wear-blue-blazer-with-brooch-black-turtleneck-glasses-posed-street-fashionable-black-guy-with-cup-coffee_627829-2210.jpg"},
{
name: "Elena V.", role: "CMO", quote: "Our brand evolved overnight thanks to these guys.", imageSrc: "http://img.b2bpic.net/free-photo/businessman-with-clipboard-smiling-camera_482257-121165.jpg"},
{
name: "Joe B.", role: "Founder", quote: "Exclusivity and quality in every single pixel.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-holding-coffee-cup_23-2148815600.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,36 @@
// 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 FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function WorkSection(): React.JSX.Element {
return (
<div id="work" data-section="work">
<SectionErrorBoundary name="work">
<FeaturesRevealCardsBento
tag="Portfolio"
title="Signature Deliverables"
description="High-impact work for premium partners."
items={[
{
title: "SaaS Platform", description: "Interactive mobile application design.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-woman-posing-outdoors_23-2149988417.jpg"},
{
title: "Brand Manual", description: "Complete visual guidelines documentation.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/simple-corporate-identity-branding-stationery-set_53876-126754.jpg"},
{
title: "Web Marketing", description: "Conversion-focused landing page design.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/inspired-youth_53876-176745.jpg"},
{
title: "Design System", description: "Figma component architecture.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-laptop-blueprints-desk_482257-31167.jpg"},
{
title: "Campaign Assets", description: "Social and advertising creative.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/hands-holding-smartphone-social-media-concept_23-2150208238.jpg"},
{
title: "Motion Identity", description: "Animated logos and micro-interactions.", href: "#", imageSrc: "http://img.b2bpic.net/free-photo/communication-social-media-icons-personal-computer_23-2150781063.jpg"},
{
title: "Editorial Print", description: "Large format typography and layouts.", href: "#", imageSrc: "http://img.b2bpic.net/free-vector/hand-painted-liquid-marble-cover-collection_23-2149002719.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
);
}