245 lines
9.6 KiB
TypeScript
245 lines
9.6 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroSplit from "@/components/sections/hero/HeroSplit";
|
|
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
|
import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
|
|
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
|
import Link from "next/link";
|
|
import {
|
|
Sparkles,
|
|
Award,
|
|
PenTool,
|
|
Code,
|
|
Lightbulb,
|
|
Smartphone,
|
|
Zap,
|
|
Shield,
|
|
Star,
|
|
Rocket,
|
|
} from "lucide-react";
|
|
|
|
export default function PortfolioPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="largeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="light"
|
|
>
|
|
{/* Navbar */}
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Webuild"
|
|
navItems={[
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Projects", id: "/portfolio" },
|
|
{ name: "Services", id: "/#services" },
|
|
{ name: "About", id: "/#about" },
|
|
]}
|
|
button={{
|
|
text: "Start Project",
|
|
href: "/contact",
|
|
}}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
{/* Featured Projects Section */}
|
|
<div id="projects" data-section="projects">
|
|
<ProductCardOne
|
|
title="Featured Projects"
|
|
description="Explore our latest work showcasing our expertise in web design and development across diverse industries."
|
|
tag="Portfolio"
|
|
tagIcon={Award}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
gridVariant="three-columns-all-equal-width"
|
|
products={[
|
|
{
|
|
id: "1",
|
|
name: "Luxury Fashion E-Commerce",
|
|
price: "Custom Design",
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/a-sleek-e-commerce-website-design-for-a--1772996200095-d08f9b49.png",
|
|
imageAlt: "Luxury fashion ecommerce website",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "SaaS Dashboard Platform",
|
|
price: "Full Stack Development",
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/a-vibrant-saas-dashboard-interface-desig-1772996199695-16a944db.png",
|
|
imageAlt: "SaaS analytics dashboard interface",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Architecture Portfolio",
|
|
price: "Design & Development",
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/a-creative-portfolio-website-for-an-arch-1772996200200-af72d9d5.png",
|
|
imageAlt: "Architecture firm portfolio website",
|
|
},
|
|
]}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
{/* Services Showcase Section */}
|
|
<div id="services" data-section="services">
|
|
<FeatureHoverPattern
|
|
title="Our Services"
|
|
description="Comprehensive digital solutions tailored to elevate your brand and engage your audience."
|
|
tag="What We Offer"
|
|
tagIcon={Zap}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
features={[
|
|
{
|
|
icon: PenTool,
|
|
title: "Web Design",
|
|
description:
|
|
"Stunning, user-centric designs that capture your brand essence and engage visitors with intuitive interfaces.",
|
|
},
|
|
{
|
|
icon: Code,
|
|
title: "Development",
|
|
description:
|
|
"Robust, scalable web applications built with modern technologies and best practices for performance.",
|
|
},
|
|
{
|
|
icon: Lightbulb,
|
|
title: "Strategy & UX",
|
|
description:
|
|
"Data-driven strategies and user experience optimization to maximize conversions and user satisfaction.",
|
|
},
|
|
{
|
|
icon: Smartphone,
|
|
title: "Responsive Design",
|
|
description:
|
|
"Seamless experiences across all devices, ensuring your website looks perfect on mobile, tablet, and desktop.",
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "Performance",
|
|
description:
|
|
"Lightning-fast load times and optimized performance to keep your users engaged and improve SEO rankings.",
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "Security",
|
|
description:
|
|
"Enterprise-grade security measures to protect your website and user data with industry-leading standards.",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* Testimonials Section */}
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="What Our Clients Say"
|
|
description="Trusted by leading companies and startups worldwide to deliver exceptional digital experiences."
|
|
tag="Client Testimonials"
|
|
tagIcon={Star}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
title: "Transformed Our Online Presence",
|
|
quote:
|
|
"Webuild completely redesigned our website and the results have been phenomenal. Our conversion rates increased by 45% within three months. The team's attention to detail and strategic approach was exactly what we needed.",
|
|
name: "Sarah Johnson",
|
|
role: "CEO",
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/professional-headshot-of-a-confident-bus-1772996199716-3232c800.png",
|
|
imageAlt: "Sarah Johnson",
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Exceptional Development Partnership",
|
|
quote:
|
|
"Working with Webuild was a game-changer for our startup. They didn't just build our platform—they helped us think strategically about our product. The quality of their work and communication was outstanding.",
|
|
name: "Michael Chen",
|
|
role: "Founder",
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/professional-headshot-of-a-male-entrepre-1772996198379-1845b2c5.png",
|
|
imageAlt: "Michael Chen",
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "True Digital Partners",
|
|
quote:
|
|
"The Webuild team goes beyond typical agency work. They truly understand our brand and market. Their designs are not only beautiful but incredibly functional. Highly recommend for any serious digital project.",
|
|
name: "Emily Rodriguez",
|
|
role: "Marketing Director",
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/professional-headshot-of-a-woman-product-1772996198712-9928c824.png",
|
|
imageAlt: "Emily Rodriguez",
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "Unmatched Creative Excellence",
|
|
quote:
|
|
"From initial concept to final launch, Webuild delivered excellence at every step. Their creative direction elevated our brand significantly. The website has become our strongest marketing asset.",
|
|
name: "David Kim",
|
|
role: "Design Director",
|
|
imageSrc:
|
|
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Afuql7F7FvlLkiwg8kcnDPP51q/professional-headshot-of-a-man-design-di-1772996199164-0b5c717e.png",
|
|
imageAlt: "David Kim",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* Contact CTA Section */}
|
|
<div id="contact-cta" data-section="contact-cta">
|
|
<ContactCTA
|
|
tag="Ready to Get Started?"
|
|
tagIcon={Rocket}
|
|
title="Let's Bring Your Vision to Life"
|
|
description="Whether you're launching a new project or redesigning an existing presence, our team is ready to create something extraordinary. Let's talk about your goals and how we can help you succeed."
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{
|
|
text: "Start Your Project",
|
|
href: "/contact",
|
|
},
|
|
{
|
|
text: "Schedule a Call",
|
|
href: "mailto:hello@webuild.com",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Webuild"
|
|
leftLink={{
|
|
text: "Privacy Policy",
|
|
href: "#privacy",
|
|
}}
|
|
rightLink={{
|
|
text: "Terms of Service",
|
|
href: "#terms",
|
|
}}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |