bender/7d61b4ed-14ea-4d4a-911d-e30bbe541192
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-03-13 14:40:32 +00:00
parent 9535c07eb3
commit 2caea16546
1 changed files with 39 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
src/app/page.tsx
View File

@@ -25,8 +25,7 @@ export default function HomePage() {
const footerColumns = [
{
title: "Navigation",
items: [
title: "Navigation", items: [
{ label: "Home", href: "/" },
{ label: "Portfolio", href: "/portfolio" },
{ label: "About", href: "/about" },
@@ -34,8 +33,7 @@ export default function HomePage() {
],
},
{
title: "Resources",
items: [
title: "Resources", items: [
{ label: "Documentation", href: "#" },
{ label: "Technical Blog", href: "#" },
{ label: "Animation Guide", href: "#" },
@@ -43,8 +41,7 @@ export default function HomePage() {
],
},
{
title: "Connect",
items: [
title: "Connect", items: [
{ label: "Twitter", href: "#" },
{ label: "LinkedIn", href: "#" },
{ label: "GitHub", href: "#" },
@@ -86,13 +83,9 @@ export default function HomePage() {
buttonAnimation="slide-up"
mediaItems={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/premium-orange-iphone-in-perfect-assembl-1773412704142-bdcf4338.png",
imageAlt: "Assembled orange iPhone showcasing premium design",
},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/premium-orange-iphone-in-perfect-assembl-1773412704142-bdcf4338.png", imageAlt: "Assembled orange iPhone showcasing premium design"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/iphone-exploded-view-with-all-components-1773412703953-7c337dea.png",
imageAlt: "Exploded view of iPhone components in perfect alignment",
},
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/iphone-exploded-view-with-all-components-1773412703953-7c337dea.png", imageAlt: "Exploded view of iPhone components in perfect alignment"},
]}
mediaAnimation="blur-reveal"
ariaLabel="Hero section featuring scroll-linked iPhone exploded view animation"
@@ -103,10 +96,7 @@ export default function HomePage() {
<TextSplitAbout
title="Precision in Every Frame"
description={[
"This portfolio celebrates the intersection of engineering excellence and visual storytelling. Our scroll-linked canvas animation renders preloaded image sequences that seamlessly transition an orange iPhone from fully assembled to completely exploded view.",
"Each frame interpolates with pixel-perfect precision, tied directly to scroll position. The background color matches the image sequence exactly, eliminating visible edges and creating an illusion of seamless transformation.",
"Built mobile-first with responsive canvas scaling, optimized asset loading, and smooth 60fps animations across all devices.",
]}
"This portfolio celebrates the intersection of engineering excellence and visual storytelling. Our scroll-linked canvas animation renders preloaded image sequences that seamlessly transition an orange iPhone from fully assembled to completely exploded view.", "Each frame interpolates with pixel-perfect precision, tied directly to scroll position. The background color matches the image sequence exactly, eliminating visible edges and creating an illusion of seamless transformation.", "Built mobile-first with responsive canvas scaling, optimized asset loading, and smooth 60fps animations across all devices."]}
useInvertedBackground={true}
showBorder={false}
buttons={[{ text: "View Technical Details", href: "/case-studies" }]}
@@ -124,29 +114,17 @@ export default function HomePage() {
useInvertedBackground={false}
features={[
{
title: "Canvas-Rendered Animation",
description: "Preloaded image sequences with frame interpolation tied to scroll position, delivering smooth exploded/assembled transitions.",
buttonIcon: CheckCircle,
buttonHref: "#",
},
title: "Canvas-Rendered Animation", description: "Preloaded image sequences with frame interpolation tied to scroll position, delivering smooth exploded/assembled transitions.", buttonIcon: CheckCircle,
buttonHref: "#"},
{
title: "Orange Accent Precision",
description: "Vibrant orange (#E34400) and golden orange (#FF7B05) throughout the interface, complementing the iPhone's premium aesthetic.",
buttonIcon: CheckCircle,
buttonHref: "#",
},
title: "Orange Accent Precision", description: "Vibrant orange (#E34400) and golden orange (#FF7B05) throughout the interface, complementing the iPhone's premium aesthetic.", buttonIcon: CheckCircle,
buttonHref: "#"},
{
title: "Mobile-First Performance",
description: "Responsive canvas scaling, optimized asset loading, and 60fps animations ensure flawless performance across all devices.",
buttonIcon: CheckCircle,
buttonHref: "#",
},
title: "Mobile-First Performance", description: "Responsive canvas scaling, optimized asset loading, and 60fps animations ensure flawless performance across all devices.", buttonIcon: CheckCircle,
buttonHref: "#"},
{
title: "Seamless Background Blending",
description: "Exact color matching between canvas and background eliminates visible edges, creating a cohesive visual experience.",
buttonIcon: CheckCircle,
buttonHref: "#",
},
title: "Seamless Background Blending", description: "Exact color matching between canvas and background eliminates visible edges, creating a cohesive visual experience.", buttonIcon: CheckCircle,
buttonHref: "#"},
]}
/>
</div>
@@ -164,35 +142,14 @@ export default function HomePage() {
animationType="slide-up"
products={[
{
id: "iphone-display",
brand: "Display System",
name: "Super Retina XDR Screen",
price: "Premium",
rating: 5,
reviewCount: "847",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/iphone-super-retina-xdr-display-componen-1773412704645-0ae05a50.png",
imageAlt: "iPhone Super Retina XDR display component",
},
id: "iphone-display", brand: "Display System", name: "Super Retina XDR Screen", price: "Premium", rating: 5,
reviewCount: "847", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/iphone-super-retina-xdr-display-componen-1773412704645-0ae05a50.png", imageAlt: "iPhone Super Retina XDR display component"},
{
id: "iphone-processor",
brand: "Chip Architecture",
name: "A-Series Neural Engine",
price: "Performance",
rating: 5,
reviewCount: "623",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/iphone-a-series-neural-engine-processor--1773412704938-b9cee7be.png",
imageAlt: "iPhone processor and neural engine component",
},
id: "iphone-processor", brand: "Chip Architecture", name: "A-Series Neural Engine", price: "Performance", rating: 5,
reviewCount: "623", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/iphone-a-series-neural-engine-processor--1773412704938-b9cee7be.png", imageAlt: "iPhone processor and neural engine component"},
{
id: "iphone-camera",
brand: "Optics System",
name: "Advanced Camera Array",
price: "Innovation",
rating: 5,
reviewCount: "1,203",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/iphone-advanced-camera-system-with-multi-1773412705508-7dbb73c3.png",
imageAlt: "iPhone advanced camera system component",
},
id: "iphone-camera", brand: "Optics System", name: "Advanced Camera Array", price: "Innovation", rating: 5,
reviewCount: "1,203", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/iphone-advanced-camera-system-with-multi-1773412705508-7dbb73c3.png", imageAlt: "iPhone advanced camera system component"},
]}
/>
</div>
@@ -209,29 +166,13 @@ export default function HomePage() {
animationType="slide-up"
metrics={[
{
id: "metric-frames",
value: "120+",
title: "Animation Frames",
description: "Preloaded image sequences for smooth exploded view transitions",
},
id: "metric-frames", value: "120+", title: "Animation Frames", description: "Preloaded image sequences for smooth exploded view transitions", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/premium-orange-iphone-in-perfect-assembl-1773412704142-bdcf4338.png", imageAlt: "Animation frames visualization"},
{
id: "metric-fps",
value: "60fps",
title: "Frame Rate",
description: "Consistent performance across all mobile and desktop devices",
},
id: "metric-fps", value: "60fps", title: "Frame Rate", description: "Consistent performance across all mobile and desktop devices", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/premium-orange-iphone-in-perfect-assembl-1773412704142-bdcf4338.png", imageAlt: "Frame rate performance chart"},
{
id: "metric-components",
value: "47",
title: "iPhone Components",
description: "Individually modeled and animated in exploded view breakdown",
},
id: "metric-components", value: "47", title: "iPhone Components", description: "Individually modeled and animated in exploded view breakdown", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/iphone-exploded-view-with-all-components-1773412703953-7c337dea.png", imageAlt: "iPhone components breakdown"},
{
id: "metric-responsive",
value: "100%",
title: "Responsive",
description: "Adaptive canvas scaling for optimal viewing on any screen size",
},
id: "metric-responsive", value: "100%", title: "Responsive", description: "Adaptive canvas scaling for optimal viewing on any screen size", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/premium-orange-iphone-in-perfect-assembl-1773412704142-bdcf4338.png", imageAlt: "Responsive design visualization"},
]}
/>
</div>
@@ -247,65 +188,17 @@ export default function HomePage() {
useInvertedBackground={true}
testimonials={[
{
id: "testimonial-1",
name: "Alex Rivera",
date: "March 2024",
title: "UX Designer, Creative Studio",
quote: "The scroll-linked animation is absolutely mesmerizing. The frame interpolation creates an illusion of continuous motion that feels natural and premium.",
tag: "Design Excellence",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/professional-avatar-portrait-of-a-design-1773412706412-04002ae3.png",
avatarAlt: "Alex Rivera",
},
id: "testimonial-1", name: "Alex Rivera", date: "March 2024", title: "UX Designer, Creative Studio", quote: "The scroll-linked animation is absolutely mesmerizing. The frame interpolation creates an illusion of continuous motion that feels natural and premium.", tag: "Design Excellence", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/professional-avatar-portrait-of-a-design-1773412706412-04002ae3.png", avatarAlt: "Alex Rivera"},
{
id: "testimonial-2",
name: "Jordan Chen",
date: "March 2024",
title: "Frontend Engineer, Tech Startup",
quote: "The technical execution is flawless. Canvas rendering at 60fps across mobile devices shows real engineering craftsmanship.",
tag: "Technical Mastery",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/professional-avatar-portrait-of-an-engin-1773412705472-08900d1a.png",
avatarAlt: "Jordan Chen",
},
id: "testimonial-2", name: "Jordan Chen", date: "March 2024", title: "Frontend Engineer, Tech Startup", quote: "The technical execution is flawless. Canvas rendering at 60fps across mobile devices shows real engineering craftsmanship.", tag: "Technical Mastery", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/professional-avatar-portrait-of-an-engin-1773412705472-08900d1a.png", avatarAlt: "Jordan Chen"},
{
id: "testimonial-3",
name: "Sophia Williams",
date: "February 2024",
title: "Product Manager, Apple Partner",
quote: "This portfolio demonstrates how to tell a product story through interactive design. Every animation serves the narrative of engineering precision.",
tag: "Product Strategy",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/professional-avatar-portrait-of-a-produc-1773412705243-530bce5d.png",
avatarAlt: "Sophia Williams",
},
id: "testimonial-3", name: "Sophia Williams", date: "February 2024", title: "Product Manager, Apple Partner", quote: "This portfolio demonstrates how to tell a product story through interactive design. Every animation serves the narrative of engineering precision.", tag: "Product Strategy", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/professional-avatar-portrait-of-a-produc-1773412705243-530bce5d.png", avatarAlt: "Sophia Williams"},
{
id: "testimonial-4",
name: "Marcus Thompson",
date: "February 2024",
title: "Creative Director, Digital Agency",
quote: "The orange accent color perfectly complements the white background. The visual hierarchy is clean, modern, and premium throughout.",
tag: "Creative Direction",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/professional-avatar-portrait-of-a-creati-1773412705447-da2abb73.png",
avatarAlt: "Marcus Thompson",
},
id: "testimonial-4", name: "Marcus Thompson", date: "February 2024", title: "Creative Director, Digital Agency", quote: "The orange accent color perfectly complements the white background. The visual hierarchy is clean, modern, and premium throughout.", tag: "Creative Direction", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/professional-avatar-portrait-of-a-creati-1773412705447-da2abb73.png", avatarAlt: "Marcus Thompson"},
{
id: "testimonial-5",
name: "Elena Rodriguez",
date: "January 2024",
title: "Motion Designer, Animation Studio",
quote: "The animation principles here are exceptional. The scroll-linked transitions feel organic and responsive, not forced or mechanical.",
tag: "Motion Design",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/professional-avatar-portrait-of-a-motion-1773412705117-1cc87fb4.png",
avatarAlt: "Elena Rodriguez",
},
id: "testimonial-5", name: "Elena Rodriguez", date: "January 2024", title: "Motion Designer, Animation Studio", quote: "The animation principles here are exceptional. The scroll-linked transitions feel organic and responsive, not forced or mechanical.", tag: "Motion Design", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/professional-avatar-portrait-of-a-motion-1773412705117-1cc87fb4.png", avatarAlt: "Elena Rodriguez"},
{
id: "testimonial-6",
name: "David Park",
date: "January 2024",
title: "Tech Writer, Innovation Platform",
quote: "A masterclass in combining technical precision with visual storytelling. This portfolio proves that engineering can be beautiful.",
tag: "Tech Innovation",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/professional-avatar-portrait-of-a-tech-w-1773412706879-3af37ddb.png",
avatarAlt: "David Park",
},
id: "testimonial-6", name: "David Park", date: "January 2024", title: "Tech Writer, Innovation Platform", quote: "A masterclass in combining technical precision with visual storytelling. This portfolio proves that engineering can be beautiful.", tag: "Tech Innovation", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/professional-avatar-portrait-of-a-tech-w-1773412706879-3af37ddb.png", avatarAlt: "David Park"},
]}
/>
</div>
@@ -320,25 +213,9 @@ export default function HomePage() {
textboxLayout="default"
useInvertedBackground={false}
names={[
"Awwwards",
"Dribbble",
"Behance",
"CSS Design Awards",
"Webby Awards",
"Designmodo",
"Studio Design Journal",
"Tech Design Weekly",
]}
"Awwwards", "Dribbble", "Behance", "CSS Design Awards", "Webby Awards", "Designmodo", "Studio Design Journal", "Tech Design Weekly"]}
logos={[
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/awwwards-award-logo-professional-design--1773412704041-88b235ce.png",
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/dribbble-platform-logo-creative-design-c-1773412704972-49fd3d6f.png",
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/behance-logo-adobe-creative-portfolio-pl-1773412705349-7d719b27.png",
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/css-design-awards-logo-web-design-excell-1773412704682-c6cb8a39.png",
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/webby-awards-logo-international-web-reco-1773412704388-60847a9c.png",
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/designmodo-platform-logo-design-resource-1773412703837-f0c0d40d.png",
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/studio-design-journal-logo-design-public-1773412705596-cacf3301.png",
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/tech-design-weekly-logo-technology-desig-1773412706373-fa0a3a0e.png",
]}
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/awwwards-award-logo-professional-design--1773412704041-88b235ce.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/dribbble-platform-logo-creative-design-c-1773412704972-49fd3d6f.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/behance-logo-adobe-creative-portfolio-pl-1773412705349-7d719b27.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/css-design-awards-logo-web-design-excell-1773412704682-c6cb8a39.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/webby-awards-logo-international-web-reco-1773412704388-60847a9c.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/designmodo-platform-logo-design-resource-1773412703837-f0c0d40d.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/studio-design-journal-logo-design-public-1773412705596-cacf3301.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AtWj1RK7bxm4zOc6SZPcDC0Gxo/tech-design-weekly-logo-technology-desig-1773412706373-fa0a3a0e.png"]}
speed={50}
showCard={true}
/>
@@ -362,35 +239,17 @@ export default function HomePage() {
showCard={true}
faqs={[
{
id: "faq-1",
title: "How does the scroll-linked animation work?",
content: "We use preloaded canvas image sequences that render frame-by-frame based on scroll position. The scroll value is mapped to frame index, creating seamless assembly/disassembly transitions. Background color matching eliminates visible seams.",
},
id: "faq-1", title: "How does the scroll-linked animation work?", content: "We use preloaded canvas image sequences that render frame-by-frame based on scroll position. The scroll value is mapped to frame index, creating seamless assembly/disassembly transitions. Background color matching eliminates visible seams."},
{
id: "faq-2",
title: "Is this optimized for mobile devices?",
content: "Yes, the entire experience is mobile-first. Canvas scales responsively, animations run at 60fps, and we use efficient image loading strategies. The experience feels equally premium on phones as on desktops.",
},
id: "faq-2", title: "Is this optimized for mobile devices?", content: "Yes, the entire experience is mobile-first. Canvas scales responsively, animations run at 60fps, and we use efficient image loading strategies. The experience feels equally premium on phones as on desktops."},
{
id: "faq-3",
title: "Why orange as the accent color?",
content: "Orange (#E34400 and #FF7B05) was chosen to complement the premium white aesthetic while evoking energy, innovation, and technical precision. It's bold without being overwhelming.",
},
id: "faq-3", title: "Why orange as the accent color?", content: "Orange (#E34400 and #FF7B05) was chosen to complement the premium white aesthetic while evoking energy, innovation, and technical precision. It's bold without being overwhelming."},
{
id: "faq-4",
title: "What technology stack powers this?",
content: "Built with Next.js, React, and HTML5 Canvas. We use GSAP for scroll animations, Tailwind CSS for styling, and optimized asset pipelines for frame preloading.",
},
id: "faq-4", title: "What technology stack powers this?", content: "Built with Next.js, React, and HTML5 Canvas. We use GSAP for scroll animations, Tailwind CSS for styling, and optimized asset pipelines for frame preloading."},
{
id: "faq-5",
title: "Can I request modifications or components?",
content: "Absolutely. This portfolio showcases our technical capabilities. We're available for custom projects combining scroll mechanics, canvas animations, and premium design.",
},
id: "faq-5", title: "Can I request modifications or components?", content: "Absolutely. This portfolio showcases our technical capabilities. We're available for custom projects combining scroll mechanics, canvas animations, and premium design."},
{
id: "faq-6",
title: "How long does the asset preload take?",
content: "We show an optimized loading spinner during preload (typically 2-4 seconds for 120+ frames). Assets are cached for instant reload on return visits.",
},
id: "faq-6", title: "How long does the asset preload take?", content: "We show an optimized loading spinner during preload (typically 2-4 seconds for 120+ frames). Assets are cached for instant reload on return visits."},
]}
/>
</div>
@@ -416,4 +275,4 @@ export default function HomePage() {
</div>
</ThemeProvider>
);
}
}