diff --git a/src/app/page.tsx b/src/app/page.tsx index 4b4a183..5eea811 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -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() { @@ -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"}, ]} /> @@ -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"}, ]} /> @@ -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"}, ]} /> @@ -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."}, ]} /> @@ -416,4 +275,4 @@ export default function HomePage() { ); -} \ No newline at end of file +}