379 lines
16 KiB
TypeScript
379 lines
16 KiB
TypeScript
import AboutText from '@/components/sections/about/AboutText';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FeaturesProfileCards from '@/components/sections/features/FeaturesProfileCards';
|
|
import MetricsGradientCards from '@/components/sections/metrics/MetricsGradientCards';
|
|
import ProductMediaCards from '@/components/sections/product/ProductMediaCards';
|
|
import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
|
|
import TestimonialOverlayCards from '@/components/sections/testimonial/TestimonialOverlayCards';
|
|
import { CheckCircle, Clock, Smile } from 'lucide-react';
|
|
import SectionErrorBoundary from '@/components/ui/SectionErrorBoundary';
|
|
import Button from '@/components/ui/Button';
|
|
import HeroBackgroundSlot from '@/components/ui/HeroBackgroundSlot';
|
|
import TextAnimation from '@/components/ui/TextAnimation';
|
|
import ImageOrVideo from '@/components/ui/ImageOrVideo';
|
|
import ScrollReveal from '@/components/ui/ScrollReveal';
|
|
import { cls } from '@/lib/utils';
|
|
|
|
// ── Inlined from src/components/sections/hero/HeroTiltedCards.tsx (was <HeroTiltedCards />)
|
|
// You can now edit InlinedHeroTiltedCards freely below — it is a local copy and
|
|
// will not affect any other page that imports the original HeroTiltedCards.
|
|
interface HeroTiltedCardsProps {
|
|
tag: string;
|
|
title: string;
|
|
description: string;
|
|
primaryButton: { text: string; href: string };
|
|
secondaryButton: { text: string; href: string };
|
|
items: ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never })[];
|
|
}
|
|
|
|
const InlinedHeroTiltedCards = ({
|
|
tag,
|
|
title,
|
|
description,
|
|
primaryButton,
|
|
secondaryButton,
|
|
items,
|
|
}: HeroTiltedCardsProps) => {
|
|
const marqueeItems = [...items, ...items];
|
|
const galleryStyles = [
|
|
"-rotate-6 z-10 -translate-y-5",
|
|
"rotate-6 z-20 translate-y-5 -ml-15",
|
|
"-rotate-6 z-30 -translate-y-5 -ml-15",
|
|
"rotate-6 z-40 translate-y-5 -ml-15",
|
|
"-rotate-6 z-50 -translate-y-5 -ml-15",
|
|
];
|
|
|
|
return (
|
|
<section aria-label="Hero section" className="relative flex items-center h-fit md:h-svh pt-25 pb-20 md:py-0">
|
|
<HeroBackgroundSlot />
|
|
<div className="flex flex-col items-center gap-10 md:gap-15 w-full md:w-content-width mx-auto">
|
|
<div className="flex flex-col items-center gap-2 w-content-width mx-auto text-center">
|
|
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
|
<p>{tag}</p>
|
|
</div>
|
|
|
|
<TextAnimation
|
|
text={title}
|
|
variant="fade"
|
|
gradientText={true}
|
|
tag="h1"
|
|
className="text-6xl font-medium text-balance"
|
|
/>
|
|
|
|
<TextAnimation
|
|
text={description}
|
|
variant="fade"
|
|
gradientText={false}
|
|
tag="p"
|
|
className="text-base md:text-lg leading-tight text-balance"
|
|
/>
|
|
|
|
<div className="flex flex-wrap justify-center gap-3 mt-3">
|
|
<Button text={primaryButton.text} href={primaryButton.href} variant="primary" className="transform-gpu [perspective:1000px] [transform-style:preserve-3d] transition-transform duration-300 hover:[transform:rotateY(12deg)] hover:scale-105"/>
|
|
<Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} className="transform-gpu [perspective:1000px] [transform-style:preserve-3d] transition-transform duration-300 hover:[transform:rotateY(12deg)] hover:scale-105" />
|
|
</div>
|
|
</div>
|
|
|
|
<ScrollReveal variant="fade-blur" delay={0.2} className="block md:hidden w-full overflow-hidden mask-padding-x">
|
|
<div className="flex w-max animate-marquee-horizontal">
|
|
{marqueeItems.map((item, index) => (
|
|
<div key={index} className="shrink-0 w-[50vw] mr-5 aspect-4/5 p-2 card rounded overflow-hidden">
|
|
<ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ScrollReveal>
|
|
|
|
<ScrollReveal variant="fade-blur" delay={0.2} className="hidden md:flex justify-center items-center w-full">
|
|
<div className="flex items-center justify-center">
|
|
{items.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className={cls(
|
|
"relative w-[23%] aspect-4/5 p-2 card rounded overflow-hidden shadow-lg transition-transform duration-500 ease-out hover:scale-110",
|
|
galleryStyles[index]
|
|
)}
|
|
>
|
|
<ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</ScrollReveal>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<>
|
|
<div id="hero" data-section="hero">
|
|
<SectionErrorBoundary name="hero">
|
|
<InlinedHeroTiltedCards
|
|
tag="Motion Graphics Designer"
|
|
title="Bringing Ideas to Life with Dynamic Visuals"
|
|
description="Crafting compelling narratives through animation, visual effects, and engaging motion design. Let's make your vision move."
|
|
primaryButton={{
|
|
text: "View Portfolio",
|
|
href: "#portfolio",
|
|
}}
|
|
secondaryButton={{
|
|
text: "Get a Quote",
|
|
href: "#contact",
|
|
}}
|
|
items={[
|
|
{
|
|
imageSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-dynamic-motion-graphics-animation-reel-1779668838041-e7209357.png",
|
|
},
|
|
{
|
|
imageSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-still-frame-from-a-corporate-explainer-1779668838607-35f7bb47.png",
|
|
},
|
|
{
|
|
imageSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-visually-striking-title-sequence-for-a-1779668840251-beabfb35.png",
|
|
},
|
|
{
|
|
imageSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-vibrant-logo-animation-showcasing-a-br-1779668837162-aac8e0b2.png",
|
|
},
|
|
{
|
|
imageSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/an-animated-infographic-showing-data-vis-1779668838536-becff250.png",
|
|
},
|
|
{
|
|
imageSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-creative-product-promotion-video-still-1779668837264-5c79a210.png",
|
|
},
|
|
]}
|
|
/>
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SectionErrorBoundary name="about">
|
|
<AboutText
|
|
title="About Me & My Passion"
|
|
primaryButton={{
|
|
text: "Learn More",
|
|
href: "#about",
|
|
}}
|
|
secondaryButton={{
|
|
text: "View Resume",
|
|
href: "#",
|
|
}}
|
|
/>
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<SectionErrorBoundary name="services">
|
|
<FeaturesProfileCards
|
|
tag="My Expertise"
|
|
title="Creative Solutions for Every Vision"
|
|
description="Offering a diverse range of motion graphics services tailored to elevate your brand and message. From concept to final delivery, I ensure high-quality and impactful results."
|
|
items={[
|
|
{
|
|
title: "2D & 3D Animation",
|
|
description: "Bringing characters, objects, and environments to life with fluid and expressive animation, suitable for explainer videos, commercials, and digital content.",
|
|
avatarSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-stylized-avatar-icon-representing-2d-3-1779668837917-026027fa.png",
|
|
imageSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-visually-appealing-scene-from-a-2d-ani-1779668839589-2b91a290.png",
|
|
buttonText: "See 2D/3D work",
|
|
buttonHref: "#portfolio",
|
|
},
|
|
{
|
|
title: "Explainer Videos",
|
|
description: "Simplifying complex ideas into engaging, easy-to-understand animated videos that capture attention and drive conversions for your product or service.",
|
|
avatarSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-stylized-avatar-icon-representing-expl-1779668839515-0a677557.png",
|
|
imageSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-clean-modern-explainer-video-graphic-i-1779668841195-26d46304.png",
|
|
buttonText: "View Explainers",
|
|
buttonHref: "#portfolio",
|
|
},
|
|
{
|
|
title: "Visual Effects (VFX)",
|
|
description: "Enhancing live-action footage with seamless visual effects, from compositing and green screen to particle simulations and digital environments.",
|
|
avatarSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-stylized-avatar-icon-representing-visu-1779668837433-622e14ce.png",
|
|
imageSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-captivating-scene-with-subtle-visual-e-1779668840396-d80c3601.png",
|
|
buttonText: "Explore VFX",
|
|
buttonHref: "#portfolio",
|
|
},
|
|
]}
|
|
/>
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
|
|
<div id="portfolio" data-section="portfolio">
|
|
<SectionErrorBoundary name="portfolio">
|
|
<ProductMediaCards
|
|
tag="Selected Work"
|
|
title="A Glimpse into My Portfolio"
|
|
description="Explore a collection of diverse projects, showcasing my versatility in motion graphics, animation, and visual storytelling."
|
|
products={[
|
|
{
|
|
name: "Brand Launch Animation",
|
|
price: "Commercial",
|
|
imageSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-still-frame-from-a-high-energy-brand-l-1779668841569-250ad89e.png",
|
|
},
|
|
{
|
|
name: "Product Visualization",
|
|
price: "Tech",
|
|
imageSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-still-from-a-product-visualization-ani-1779668841486-ccf66878.png",
|
|
},
|
|
{
|
|
name: "Architectural Walkthrough",
|
|
price: "Real Estate",
|
|
imageSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-frame-from-an-architectural-visualizat-1779668840338-8a3aabb5.png",
|
|
},
|
|
{
|
|
name: "Indie Film Title Sequence",
|
|
price: "Entertainment",
|
|
imageSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-creative-short-film-title-sequence-wit-1779668842783-2ab2a7f3.png",
|
|
},
|
|
{
|
|
name: "Broadcast News Package",
|
|
price: "Media",
|
|
imageSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-segment-from-a-broadcast-graphics-pack-1779668841177-bffad746.png",
|
|
},
|
|
{
|
|
name: "Music Video Visualizer",
|
|
price: "Music",
|
|
imageSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-dynamic-music-video-animation-frame-wi-1779668838175-755d7e19.png",
|
|
},
|
|
]}
|
|
/>
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<SectionErrorBoundary name="metrics">
|
|
<MetricsGradientCards
|
|
tag="My Impact"
|
|
title="Driving Results Through Motion"
|
|
description="Quantifying creativity with key achievements and client satisfaction."
|
|
metrics={[
|
|
{
|
|
value: "10+",
|
|
title: "Years Experience",
|
|
description: "Dedicated to the craft of motion design.",
|
|
icon: Clock,
|
|
},
|
|
{
|
|
value: "150+",
|
|
title: "Projects Completed",
|
|
description: "Delivering diverse and impactful solutions.",
|
|
icon: CheckCircle,
|
|
},
|
|
{
|
|
value: "95%",
|
|
title: "Client Satisfaction",
|
|
description: "Building strong relationships with every client.",
|
|
icon: Smile,
|
|
},
|
|
]}
|
|
/>
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<SectionErrorBoundary name="testimonials">
|
|
<TestimonialOverlayCards
|
|
tag="What Clients Say"
|
|
title="Trusted by Visionaries"
|
|
description="Hear directly from clients who have experienced the power of impactful motion graphics."
|
|
testimonials={[
|
|
{
|
|
name: "Sarah Chen",
|
|
role: "Marketing Director",
|
|
company: "Innovate Corp",
|
|
rating: 5,
|
|
imageSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-professional-portrait-of-a-female-mark-1779668838505-aee2799f.png",
|
|
},
|
|
{
|
|
name: "Mark Ramirez",
|
|
role: "Startup Founder",
|
|
company: "NextGen AI",
|
|
rating: 5,
|
|
imageSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-professional-portrait-of-a-male-startu-1779668836215-7dacd90c.jpg",
|
|
},
|
|
{
|
|
name: "Emily Watson",
|
|
role: "Brand Manager",
|
|
company: "Global Brands Inc.",
|
|
rating: 5,
|
|
imageSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-professional-portrait-of-a-female-bran-1779668836595-90e2b132.png",
|
|
},
|
|
{
|
|
name: "David Lee",
|
|
role: "Creative Director",
|
|
company: "Artifice Studio",
|
|
rating: 5,
|
|
imageSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-professional-portrait-of-a-male-creati-1779668839021-b2e1a1c4.png",
|
|
},
|
|
{
|
|
name: "Jessica Kim",
|
|
role: "Product Lead",
|
|
company: "FutureTech Solutions",
|
|
rating: 5,
|
|
imageSrc: "https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-professional-portrait-of-a-female-prod-1779668838104-da1019b9.png",
|
|
},
|
|
]}
|
|
/>
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
|
|
<div id="clients" data-section="clients">
|
|
<SectionErrorBoundary name="clients">
|
|
<SocialProofMarquee
|
|
tag="Partners"
|
|
title="Collaborating with Leading Brands"
|
|
description="Proud to have worked with a diverse range of clients, from innovative startups to established enterprises."
|
|
names={[
|
|
"Tech Solutions",
|
|
"Global Corp",
|
|
"Creative Agency X",
|
|
"Digital Innovations",
|
|
"Future Forward Media",
|
|
"Brand Dynamics",
|
|
"Apex Studios",
|
|
"Pioneer Tech",
|
|
"Visionary Brands",
|
|
]}
|
|
/>
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<SectionErrorBoundary name="contact">
|
|
<ContactSplitForm
|
|
tag="Get in Touch"
|
|
title="Let's Create Something Amazing"
|
|
description="Ready to discuss your next motion graphics project? Fill out the form below or reach out directly."
|
|
inputs={[
|
|
{
|
|
name: "name",
|
|
type: "text",
|
|
placeholder: "Your Name",
|
|
required: true,
|
|
},
|
|
{
|
|
name: "email",
|
|
type: "email",
|
|
placeholder: "Your Email",
|
|
required: true,
|
|
},
|
|
{
|
|
name: "company",
|
|
type: "text",
|
|
placeholder: "Your Company (Optional)",
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message",
|
|
placeholder: "Tell me about your project...",
|
|
rows: 5,
|
|
required: true,
|
|
}}
|
|
buttonText="Send Message"
|
|
imageSrc="https://storage.googleapis.com/webild/users/user_3AM9hp4M6eDzEwMxDU5gYArbELf/a-stylish-dark-themed-motion-graphics-de-1779668835849-710013ef.jpg"
|
|
/>
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|