bender/66f91282-d0de-431e-9b3b-76cc32a6ae9a
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2_1782033670492 into main #1

Merged
bender merged 1 commits from version_2_1782033670492 into main 2026-06-21 09:24:13 +00:00
Conversation 0 Commits 1 Files Changed 7 +250 -153
7 changed files with 250 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
src/pages/HomePage.tsx
View File

@@ -1,16 +1,22 @@
// 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.
import { motion } from "motion/react";
import { StyleProvider } from "@/components/ui/StyleProvider";
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
import TestimonialTrustCard from "@/components/sections/testimonial/TestimonialTrustCard";
import HeroWorkScrollStack from "@/components/sections/hero/HeroWorkScrollStack";
import AboutTestimonialParallax from "@/components/sections/about/AboutTestimonialParallax";
import FeaturesBentoGridCta from "@/components/sections/features/FeaturesBentoGridCta";
import FaqTabbedAccordion from "@/components/sections/faq/FaqTabbedAccordion";
import ContactSplitFormParallax from "@/components/sections/contact/ContactSplitFormParallax";
import LoaderReveal from "@/components/ui/LoaderReveal";
import CornerGlowBackground from "@/components/ui/CornerGlowBackground";
import React from 'react';
import TestimonialSection from './HomePage/sections/Testimonial';
import AboutSection from './HomePage/sections/About';
import ServicesSection from './HomePage/sections/Services';
import FaqSection from './HomePage/sections/Faq';
import ContactSection from './HomePage/sections/Contact';
export default function HomePage() {
import HeroNewSection from './HomePage/sections/HeroNew';export default function HomePage(): React.JSX.Element {
return (
<StyleProvider siteBackground="none" heroBackground="none" buttonVariant="stagger">
<LoaderReveal
@@ -29,157 +35,17 @@ export default function HomePage() {
</motion.div>
<HeroWorkScrollStack
heroAnimationDelay={4}
tag="1 spot left this month"
title="Design that"
titleHighlight="commands attention."
description="Design engineered for performance, not just aesthetics."
descriptionMuted="I craft every visual touchpoint your brand needs to capture attention and convert it into revenue."
primaryButton={{
text: "Book a call with me",
href: "#contact",
avatarSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp",
avatarLabel: "You",
}}
sectionTag="Selected Work"
sectionTitle="Projects That Speak for Themselves"
sectionDescription="A curated selection of design work that drove real business results for ambitious brands."
items={[
{
title: "HydroFlow Product Launch",
description: "Beverage brand shoot. Every frame engineered to sell.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/screen-1.webp",
tag: "Product Shot",
},
{
title: "Webild Athlete Campaign",
description: "Sports tech shoot. Wearables captured in raw motion.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/screen-2.webp",
tag: "Photography",
},
{
title: "Maru Residence",
description: "Architectural interior shoot. Minimal compositions.",
imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/screen-3.webp",
tag: "Interior Design",
},
]}
secondaryButton={{ text: "View all my projects", href: "#" }}
/>
<HeroNewSection />
<TestimonialTrustCard
quote="Working with Joseph felt like having a seasoned design partner who truly understood our vision for KYMA and brought it to life in ways we hadn't even imagined."
rating={5}
author="Thomas Weber — Co-founder of KYMA"
avatars={[
{ name: "Thomas Weber", imageSrc: "https://randomuser.me/api/portraits/men/75.jpg" },
]}
/>
<TestimonialSection />
<div id="about" data-section="about">
<AboutTestimonialParallax
tag="About"
quote="I don't design to decorate — I design to solve. Sharp, intentional work that moves brands forward."
author="Joseph Alexander"
role="Independent Designer"
imageSrc="https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp"
socialLinks={[
{ icon: "Twitter", label: "Twitter", href: "#" },
{ icon: "Linkedin", label: "LinkedIn", href: "#" },
{ icon: "Instagram", label: "Instagram", href: "#" },
]}
/>
</div>
<AboutSection />
<div id="services" data-section="services">
<FeaturesBentoGridCta
tag="Services"
title="What I Bring to the Table"
description="End-to-end creative services designed to make your brand impossible to ignore — from the first frame to the final pixel."
features={[
{ title: "Photography", description: "Art-directed shoots that capture your brand's personality. Every image is color-graded and built to stop the scroll.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/photography.webp" },
{ title: "Product Design", description: "User-centered interfaces for apps and SaaS products. From wireframe to pixel-perfect UI — intuitive experiences that keep users coming back.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/product-design.webp" },
{ title: "Website", description: "Conversion-focused websites that look sharp and perform. Clean layouts, strategic CTAs, and responsive design that turns traffic into revenue.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/website.webp" },
{ title: "Videos", description: "Brand films and product videos engineered for engagement. Story-driven visuals that convert viewers into customers.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/videos.webp" },
]}
ctaButton={{
text: "Book a call with me",
href: "#contact",
avatarSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp",
avatarLabel: "You",
}}
/>
</div>
<ServicesSection />
<FaqTabbedAccordion
tag="FAQ"
title="Frequently Asked Questions"
description="Everything you need to know before we start working together."
categories={[
{
name: "General",
items: [
{ question: "What type of clients do you work with?", answer: "I work with ambitious brands, startups, and established businesses that value premium creative work. Whether you're launching a new product or refreshing your brand identity, I bring the same level of craft and attention to detail." },
{ question: "What's your availability like?", answer: "I typically take on 2–3 projects at a time to ensure each client gets my full attention. Reach out to check my current availability — I'm happy to discuss timelines." },
{ question: "Do you work remotely or on-site?", answer: "Primarily remote, but I'm open to on-site work for shoots, workshops, or strategy sessions depending on the project scope and location." },
{ question: "Can I see more examples of your work?", answer: "Absolutely. The projects on this site are a curated selection. I'm happy to share additional case studies relevant to your industry during our initial call." },
],
},
{
name: "Pricing",
items: [
{ question: "How do you structure your pricing?", answer: "I offer project-based pricing tailored to scope and deliverables. Every engagement starts with a discovery call so I can provide an accurate, transparent quote — no surprises." },
{ question: "Do you require a deposit?", answer: "Yes, I require a 50% deposit to secure your spot and begin work. The remaining balance is due upon delivery of final assets." },
{ question: "Do you offer retainer packages?", answer: "I do. For clients with ongoing creative needs, monthly retainers offer priority access, discounted rates, and faster turnaround times." },
{ question: "What's included in a typical project quote?", answer: "Quotes include all creative direction, production, editing, and delivery of final files. Revisions are built in — I want you to be thrilled with the result." },
],
},
{
name: "Process",
items: [
{ question: "What does your process look like?", answer: "Discovery call → Creative brief → Concept development → Production → Review & refinement → Final delivery. I keep you in the loop at every stage with clear timelines and checkpoints." },
{ question: "How long does a typical project take?", answer: "Most projects wrap within 2–4 weeks depending on complexity. Larger campaigns or multi-deliverable projects may extend further, and I'll set expectations upfront." },
{ question: "How many revisions are included?", answer: "Two rounds of revisions are standard. In practice, my clients rarely need more than one — I invest heavily in understanding your vision before production begins." },
{ question: "What do you need from me to get started?", answer: "A brief overview of your brand, goals, and any existing assets or references. I'll guide you through the rest during our kickoff call." },
],
},
{
name: "Results",
items: [
{ question: "What kind of results can I expect?", answer: "My work is designed to drive measurable outcomes — higher engagement, increased conversions, and a brand presence that commands attention. I'll share relevant case studies during our call." },
{ question: "Do you track performance metrics?", answer: "While I focus on the creative, I design everything with performance in mind. I'm happy to collaborate with your marketing team to align on KPIs and measure impact." },
{ question: "Can you share client testimonials?", answer: "Yes — I have testimonials and references available. Many of my clients see 2–3x improvements in engagement after implementing new creative assets." },
{ question: "What makes your work different?", answer: "I combine strategic thinking with high-end execution. Every project is approached as a partnership — I'm invested in your success, not just delivering files." },
],
},
]}
cta={{
imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp",
name: "More questions? Reach out anytime.",
role: "joseph@alexandercreative.com",
buttonText: "Book a call",
buttonHref: "#contact",
}}
/>
<FaqSection />
<div id="contact" data-section="contact">
<ContactSplitFormParallax
tag="Get in Touch"
title="Let's Build"
description="Have a project in mind? Drop me a message and I'll get back to you within 24 hours."
inputs={[
{ name: "name", type: "text", placeholder: "Your name", required: true },
{ name: "email", type: "email", placeholder: "Your email", required: true }
]}
textarea={{ name: "message", placeholder: "Tell me about your project...", rows: 5, required: true }}
buttonText="Send Message"
imageSrc="https://storage.googleapis.com/webild/default/templates/creative-portfolio/contact.webp"
ctaLinks={[
{ icon: "Video", label: "Book a Call", href: "#" },
]}
/>
</div>
<ContactSection />
</StyleProvider>

24
src/pages/HomePage/sections/About.tsx Normal file
View File

@@ -0,0 +1,24 @@
// 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 AboutTestimonialParallax from "@/components/sections/about/AboutTestimonialParallax";
export default function AboutSection(): React.JSX.Element {
return (
<div id="about" data-section="about">
<AboutTestimonialParallax
tag="About"
quote="I don't design to decorate — I design to solve. Sharp, intentional work that moves brands forward."
author="Joseph Alexander"
role="Independent Designer"
imageSrc="https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp"
socialLinks={[
{ icon: "Twitter", label: "Twitter", href: "#" },
{ icon: "Linkedin", label: "LinkedIn", href: "#" },
{ icon: "Instagram", label: "Instagram", href: "#" },
]}
/>
</div>
);
}

27
src/pages/HomePage/sections/Contact.tsx Normal file
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 ContactSplitFormParallax from "@/components/sections/contact/ContactSplitFormParallax";
export default function ContactSection(): React.JSX.Element {
return (
<div id="contact" data-section="contact">
<ContactSplitFormParallax
tag="Get in Touch"
title="Let's Build"
description="Have a project in mind? Drop me a message and I'll get back to you within 24 hours."
inputs={[
{ name: "name", type: "text", placeholder: "Your name", required: true },
{ name: "email", type: "email", placeholder: "Your email", required: true }
]}
textarea={{ name: "message", placeholder: "Tell me about your project...", rows: 5, required: true }}
buttonText="Send Message"
imageSrc="https://storage.googleapis.com/webild/default/templates/creative-portfolio/contact.webp"
ctaLinks={[
{ icon: "Video", label: "Book a Call", href: "#" },
]}
/>
</div>
);
}

62
src/pages/HomePage/sections/Faq.tsx Normal file
View File

@@ -0,0 +1,62 @@
// 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 FaqTabbedAccordion from "@/components/sections/faq/FaqTabbedAccordion";
export default function FaqSection(): React.JSX.Element {
return (
<div id="faq" data-section="faq">
<FaqTabbedAccordion
tag="FAQ"
title="Frequently Asked Questions"
description="Everything you need to know before we start working together."
categories={[
{
name: "General",
items: [
{ question: "What type of clients do you work with?", answer: "I work with ambitious brands, startups, and established businesses that value premium creative work. Whether you're launching a new product or refreshing your brand identity, I bring the same level of craft and attention to detail." },
{ question: "What's your availability like?", answer: "I typically take on 2–3 projects at a time to ensure each client gets my full attention. Reach out to check my current availability — I'm happy to discuss timelines." },
{ question: "Do you work remotely or on-site?", answer: "Primarily remote, but I'm open to on-site work for shoots, workshops, or strategy sessions depending on the project scope and location." },
{ question: "Can I see more examples of your work?", answer: "Absolutely. The projects on this site are a curated selection. I'm happy to share additional case studies relevant to your industry during our initial call." },
],
},
{
name: "Pricing",
items: [
{ question: "How do you structure your pricing?", answer: "I offer project-based pricing tailored to scope and deliverables. Every engagement starts with a discovery call so I can provide an accurate, transparent quote — no surprises." },
{ question: "Do you require a deposit?", answer: "Yes, I require a 50% deposit to secure your spot and begin work. The remaining balance is due upon delivery of final assets." },
{ question: "Do you offer retainer packages?", answer: "I do. For clients with ongoing creative needs, monthly retainers offer priority access, discounted rates, and faster turnaround times." },
{ question: "What's included in a typical project quote?", answer: "Quotes include all creative direction, production, editing, and delivery of final files. Revisions are built in — I want you to be thrilled with the result." },
],
},
{
name: "Process",
items: [
{ question: "What does your process look like?", answer: "Discovery call → Creative brief → Concept development → Production → Review & refinement → Final delivery. I keep you in the loop at every stage with clear timelines and checkpoints." },
{ question: "How long does a typical project take?", answer: "Most projects wrap within 2–4 weeks depending on complexity. Larger campaigns or multi-deliverable projects may extend further, and I'll set expectations upfront." },
{ question: "How many revisions are included?", answer: "Two rounds of revisions are standard. In practice, my clients rarely need more than one — I invest heavily in understanding your vision before production begins." },
{ question: "What do you need from me to get started?", answer: "A brief overview of your brand, goals, and any existing assets or references. I'll guide you through the rest during our kickoff call." },
],
},
{
name: "Results",
items: [
{ question: "What kind of results can I expect?", answer: "My work is designed to drive measurable outcomes — higher engagement, increased conversions, and a brand presence that commands attention. I'll share relevant case studies during our call." },
{ question: "Do you track performance metrics?", answer: "While I focus on the creative, I design everything with performance in mind. I'm happy to collaborate with your marketing team to align on KPIs and measure impact." },
{ question: "Can you share client testimonials?", answer: "Yes — I have testimonials and references available. Many of my clients see 2–3x improvements in engagement after implementing new creative assets." },
{ question: "What makes your work different?", answer: "I combine strategic thinking with high-end execution. Every project is approached as a partnership — I'm invested in your success, not just delivering files." },
],
},
]}
cta={{
imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp",
name: "More questions? Reach out anytime.",
role: "joseph@alexandercreative.com",
buttonText: "Book a call",
buttonHref: "#contact",
}}
/>
</div>
);
}

69
src/pages/HomePage/sections/HeroNew.tsx Normal file
View File

@@ -0,0 +1,69 @@
import { motion } from 'motion/react';
import Button from '@/components/ui/Button';
import TextAnimation from '@/components/ui/TextAnimation';
import ScrollReveal from '@/components/ui/ScrollReveal';
import ImageOrVideo from '@/components/ui/ImageOrVideo';
export default function HeroNewSection() {
return (
<div id="hero-new" data-webild-section="hero-new" className="relative w-full min-h-[90vh] bg-background flex items-center pt-32 pb-24 overflow-hidden">
<div className="w-content-width mx-auto grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center">
<div className="flex flex-col items-start z-10">
<ScrollReveal variant="fade">
<span className="text-xs font-medium tracking-[0.3em] uppercase text-accent mb-8 block">
Athlanti Exclusive
</span>
</ScrollReveal>
<TextAnimation
text="Curated Contemporary Art for the Modern Collector."
variant="fade-blur"
tag="h1"
className="text-5xl md:text-6xl lg:text-7xl font-light tracking-tight text-foreground leading-[1.1] mb-8"
gradientText={false}
/>
<ScrollReveal variant="fade" delay={0.2}>
<p className="text-lg text-accent max-w-md mb-12 leading-relaxed font-light">
Discover our latest collection of exclusive, limited-edition pieces designed to elevate high-end spaces. A synthesis of modern aesthetics and timeless luxury.
</p>
<div className="flex flex-col sm:flex-row gap-6">
<Button
text="Explore Collection"
variant="primary"
href="#collection"
className="rounded-none px-10 py-5 uppercase tracking-widest text-xs"
/>
<Button
text="Private Viewing"
variant="secondary"
href="#contact"
className="rounded-none px-10 py-5 uppercase tracking-widest text-xs bg-transparent border border-foreground/20 hover:border-foreground"
/>
</div>
</ScrollReveal>
</div>
<div className="relative h-[60vh] lg:h-[80vh] w-full flex gap-6">
<ScrollReveal variant="fade" delay={0.3} className="w-1/2 h-full mt-16">
<div className="w-full h-[calc(100%-4rem)] relative overflow-hidden group">
<ImageOrVideo
imageSrc="https://images.unsplash.com/photo-1541961017774-22349e4a1262?q=80&w=1958&auto=format&fit=crop"
className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
/>
</div>
</ScrollReveal>
<ScrollReveal variant="fade" delay={0.5} className="w-1/2 h-full mb-16">
<div className="w-full h-[calc(100%-4rem)] relative overflow-hidden group">
<ImageOrVideo
imageSrc="https://images.unsplash.com/photo-1536924940846-227afb31e2a5?q=80&w=2066&auto=format&fit=crop"
className="w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105"
/>
</div>
</ScrollReveal>
</div>
</div>
</div>
);
}

29
src/pages/HomePage/sections/Services.tsx Normal file
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 "services" section.
import React from 'react';
import FeaturesBentoGridCta from "@/components/sections/features/FeaturesBentoGridCta";
export default function ServicesSection(): React.JSX.Element {
return (
<div id="services" data-section="services">
<FeaturesBentoGridCta
tag="Services"
title="What I Bring to the Table"
description="End-to-end creative services designed to make your brand impossible to ignore — from the first frame to the final pixel."
features={[
{ title: "Photography", description: "Art-directed shoots that capture your brand's personality. Every image is color-graded and built to stop the scroll.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/photography.webp" },
{ title: "Product Design", description: "User-centered interfaces for apps and SaaS products. From wireframe to pixel-perfect UI — intuitive experiences that keep users coming back.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/product-design.webp" },
{ title: "Website", description: "Conversion-focused websites that look sharp and perform. Clean layouts, strategic CTAs, and responsive design that turns traffic into revenue.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/website.webp" },
{ title: "Videos", description: "Brand films and product videos engineered for engagement. Story-driven visuals that convert viewers into customers.", imageSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/videos.webp" },
]}
ctaButton={{
text: "Book a call with me",
href: "#contact",
avatarSrc: "https://storage.googleapis.com/webild/default/templates/creative-portfolio/avatar.webp",
avatarLabel: "You",
}}
/>
</div>
);
}

20
src/pages/HomePage/sections/Testimonial.tsx Normal file
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 "testimonial" section.
import React from 'react';
import TestimonialTrustCard from "@/components/sections/testimonial/TestimonialTrustCard";
export default function TestimonialSection(): React.JSX.Element {
return (
<div id="testimonial" data-section="testimonial">
<TestimonialTrustCard
quote="Working with Joseph felt like having a seasoned design partner who truly understood our vision for KYMA and brought it to life in ways we hadn't even imagined."
rating={5}
author="Thomas Weber — Co-founder of KYMA"
avatars={[
{ name: "Thomas Weber", imageSrc: "https://randomuser.me/api/portraits/men/75.jpg" },
]}
/>
</div>
);
}