bender/7535110a-b7d4-41f6-82d5-cccd151dccae
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-03-09 08:25:16 +00:00
parent a301706633
commit 522de0eced
1 changed files with 67 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
src/app/page.tsx
View File

@@ -2,177 +2,143 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
import { useRouter } from "next/navigation";
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
export default function LandingPage() {
const router = useRouter();
const handleProjectClick = (projectId: string) => {
router.push(`/project/${projectId}`);
};
export default function Home() {
const navItems = [
{ name: "Home", id: "/" },
{ name: "Projects", id: "/projects" },
{ name: "About", id: "about" },
{ name: "Contact", id: "contact" },
];
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="smallMedium"
sizing="mediumLarge"
defaultButtonVariant="text-stagger"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="outline"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
brandName="Portfolio"
navItems={[
{ name: "Work", id: "work" },
{ name: "About", id: "about" },
{ name: "Services", id: "services" },
{ name: "Contact", id: "contact" },
]}
button={{
text: "Get in Touch", href: "contact"}}
/>
<NavbarLayoutFloatingOverlay navItems={navItems} />
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
title="Crafting Digital Experiences"
description="Innovative design solutions that combine aesthetics with functionality. Explore a curated collection of projects that showcase creative excellence and strategic thinking."
tag="Portfolio"
background={{ variant: "sparkles-gradient" }}
title="Welcome to Our Portfolio"
description="Explore our latest design projects and creative work"
background={{ variant: "animated-grid" }}
mediaItems={[
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-stunning-creative-portfolio-showcasing-1773043068077-12221410.png", imageAlt: "Portfolio showcase project one"},
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Portfolio showcase 1"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/bold-creative-design-project-displayed-i-1773043067366-f2dd6201.png", imageAlt: "Portfolio showcase project two"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-piece-featuring-s-1773043067962-bd19ff43.png", imageAlt: "Portfolio showcase project three"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/high-end-portfolio-presentation-featurin-1773043068108-9dc5d0cb.png", imageAlt: "Portfolio showcase project four"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-portfolio-piece-with-1773043067431-feb1d48d.png", imageAlt: "Portfolio showcase project five"},
{
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/sleek-portfolio-presentation-displaying--1773043067678-cc62c707.png", imageAlt: "Portfolio showcase project six"},
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Portfolio showcase 2"},
]}
buttons={[
{ text: "View Work", href: "work" },
{ text: "Start a Project", href: "contact" },
{ text: "View Projects", href: "/projects" },
{ text: "Get In Touch", href: "contact" },
]}
/>
</div>
<div id="work" data-section="work">
<FeatureCardTwentyFour
title="Featured Projects"
description="Showcase of selected works demonstrating design excellence and strategic approach"
tag="Our Work"
title="Our Featured Work"
description="Discover the projects we're most proud of"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
features={[
{
id: "1", title: "Digital Brand Identity System", author: "Brand Strategy", description: "Complete visual identity redesign for tech startup. Developed comprehensive brand guidelines, typography system, and digital asset library. Increased brand recognition by 40% within six months.", tags: ["Branding", "Identity", "Design System"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", imageAlt: "Brand identity project showcase", onFeatureClick: () => handleProjectClick("1"),
},
id: "1", title: "Digital Brand Identity", author: "Design Team", description: "Complete brand redesign for a tech startup", tags: ["Branding", "Design"],
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Digital brand identity project"},
{
id: "2", title: "E-commerce Platform Redesign", author: "UX Design", description: "User-centered redesign of enterprise e-commerce platform. Improved conversion rate by 35% through streamlined navigation and optimized checkout flow. Implemented accessible design patterns and mobile-first approach.", tags: ["UX Design", "E-commerce", "Accessibility"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", imageAlt: "E-commerce platform design", onFeatureClick: () => handleProjectClick("2"),
},
id: "2", title: "E-commerce Platform Redesign", author: "UX Team", description: "Modern platform redesign with improved UX", tags: ["E-commerce", "UX"],
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "E-commerce platform project"},
{
id: "3", title: "SaaS Product Interface Design", author: "Product Design", description: "Designed intuitive interface for data analytics SaaS platform. Created interactive prototypes and design system for 15+ component variations. Enhanced user onboarding experience and reduced support tickets by 50%.", tags: ["SaaS", "Product Design", "UI Design"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", imageAlt: "SaaS product interface design", onFeatureClick: () => handleProjectClick("3"),
},
id: "3", title: "SaaS Product Interface Design", author: "Design Team", description: "Intuitive interface for enterprise SaaS product", tags: ["SaaS", "UI Design"],
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "SaaS interface project"},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
title="About My Practice"
title="About Our Studio"
description={[
"With over a decade of experience in digital design, I specialize in creating meaningful visual experiences that solve real problems. My approach combines strategic thinking with meticulous attention to detail.", "I believe great design goes beyond aesthetics—it should drive business results while delighting users. Every project is an opportunity to push creative boundaries and establish new standards in digital craftsmanship.", "I collaborate closely with clients and teams to understand vision, challenge assumptions, and deliver work that exceeds expectations. Let's create something extraordinary together."]}
"We are a creative studio specializing in digital design and brand strategy. With over a decade of experience, we help businesses transform their vision into reality.", "Our team of talented designers, strategists, and developers work collaboratively to create exceptional digital experiences that inspire and engage."]}
useInvertedBackground={false}
buttons={[
{ text: "Download Resume", href: "#" },
{ text: "Connect", href: "contact" },
{ text: "Learn More", href: "/about" },
]}
showBorder={true}
useInvertedBackground={true}
/>
</div>
<div id="services" data-section="services">
<FeatureCardTwentyFour
title="Services Offered"
description="Comprehensive design solutions tailored to your business objectives"
tag="Expertise"
title="Our Services"
description="Comprehensive design and development solutions"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
features={[
{
id: "1", title: "Brand Strategy & Identity", author: "Strategic Design", description: "Develop compelling brand narratives and visual identities that resonate with target audiences. From logo design to complete brand systems, I create cohesive visual languages.", tags: ["Branding", "Strategy", "Identity"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/abstract-illustration-representing-creat-1773043067648-d1f91d56.png?_wi=1", imageAlt: "Brand strategy service"},
id: "1", title: "Brand Strategy", author: "Strategy Team", description: "Develop compelling brand identities and positioning", tags: ["Strategy", "Branding"],
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Brand strategy service"},
{
id: "2", title: "Digital Product Design", author: "UX/UI", description: "User-centered design for web and mobile applications. I create intuitive interfaces, conduct user research, and build design systems that scale with your product.", tags: ["UX Design", "UI Design", "Product"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/modern-illustration-depicting-branding-a-1773043067558-0eccfee5.png", imageAlt: "Digital product design service"},
id: "2", title: "UX/UI Design", author: "Design Team", description: "Create intuitive and beautiful digital interfaces", tags: ["Design", "UX"],
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "UX/UI design service"},
{
id: "3", title: "Design Systems & Component Libraries", author: "System Design", description: "Build scalable design systems and component libraries that improve workflow efficiency and maintain consistency across products. Documentation included for seamless developer handoff.", tags: ["Design System", "Components", "Scalability"],
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/abstract-illustration-representing-creat-1773043067648-d1f91d56.png?_wi=2", imageAlt: "Design systems service"},
id: "3", title: "Web Development", author: "Dev Team", description: "Build responsive and performant web experiences", tags: ["Development", "Web"],
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Web development service"},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
cardTitle="Trusted by leading brands and organizations worldwide"
cardTag="Client feedback"
cardTitle="Client Success Stories"
cardTag="Testimonials"
cardAnimation="slide-up"
useInvertedBackground={false}
testimonials={[
{
id: "1", name: "Sarah Chen", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-portrait-of-a-crea-1773043067225-0aed98b9.png", imageAlt: "Sarah Chen"},
id: "1", name: "Sarah Johnson", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Sarah Johnson"},
{
id: "2", name: "Marcus Johnson", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portrait-photograph-of-busi-1773043067191-64c1ffe8.png", imageAlt: "Marcus Johnson"},
id: "2", name: "Michael Chen", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Michael Chen"},
{
id: "3", name: "Elena Rodriguez", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-of-creative-indust-1773043067885-58b8d4c1.png", imageAlt: "Elena Rodriguez"},
{
id: "4", name: "James Williams", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-business-portrait-photograp-1773043066896-7b04d7eb.png", imageAlt: "James Williams"},
{
id: "5", name: "Sophie Laurent", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-headshot-portrait-of-busine-1773043067827-a52a508e.png", imageAlt: "Sophie Laurent"},
{
id: "6", name: "David Kumar", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-business-portrait-photograp-1773043067750-9681fff7.png", imageAlt: "David Kumar"},
id: "3", name: "Emma Williams", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Emma Williams"},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
tag="Let's Talk"
title="Ready to Start Your Next Project?"
description="Get in touch to discuss your design needs, project vision, and how we can collaborate to create exceptional digital experiences."
background={{ variant: "sparkles-gradient" }}
tag="Get In Touch"
title="Let's Work Together"
description="Have a project in mind? We'd love to hear about it. Contact us today."
background={{ variant: "plain" }}
useInvertedBackground={false}
inputPlaceholder="Enter your email address"
buttonText="Send Message"
termsText="I'll respond within 24 hours. We respect your privacy and will never share your information."
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Portfolio"
leftLink={{ text: "Privacy Policy", href: "#" }}
rightLink={{ text: "Terms of Service", href: "#" }}
logoText="Our Studio"
leftLink={{ text: "Privacy Policy", href: "/privacy" }}
rightLink={{ text: "Contact", href: "contact" }}
/>
</div>
</ThemeProvider>