Merge version_2 into main #10
@@ -1,6 +1,8 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/providers/service/ServiceWrapper";
|
||||
import { Tag } from "@/components/utils/Tag";
|
||||
|
||||
const geist = Geist({
|
||||
variable: "--font-geist-sans", subsets: ["latin"],
|
||||
@@ -11,7 +13,7 @@ const geistMono = Geist_Mono({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Portfolio", description: "Creative portfolio showcasing design excellence and strategic thinking"};
|
||||
title: "Portfolio", description: "Creative portfolio showcasing design excellence"};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
@@ -20,15 +22,27 @@ export default function RootLayout({
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body className={`${geist.variable} ${geistMono.variable}`}>
|
||||
{children}
|
||||
<body
|
||||
className={`${geist.variable} ${geistMono.variable} antialiased`}
|
||||
suppressHydrationWarning
|
||||
>
|
||||
<ServiceWrapper>
|
||||
<Tag />
|
||||
{children}
|
||||
</ServiceWrapper>
|
||||
<script
|
||||
src="https://cdnjs.cloudflare.com/ajax/libs/lenis/1.1.13/lenis.min.js"
|
||||
integrity="sha512-+ZrK7rJ8h09z0/VVl3c+dRkXGaSLScjqlXN8uvWGSfh+ugEGH2FCi//N0JKLaML937xsqt3g7IoGD1afS+vQ==="
|
||||
crossOrigin="anonymous"
|
||||
referrerPolicy="no-referrer"
|
||||
async
|
||||
></script>
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
try {
|
||||
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
|
||||
document.documentElement.classList.add('dark')
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark')
|
||||
}
|
||||
} catch (e) {}
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
|
||||
181
src/app/page.tsx
181
src/app/page.tsx
@@ -2,143 +2,188 @@
|
||||
|
||||
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 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 Home() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Projects", id: "/projects" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
export default function LandingPage() {
|
||||
const handleProjectClick = (projectId: string) => {
|
||||
window.location.href = `/project/${projectId}`;
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay navItems={navItems} />
|
||||
<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"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
title="Welcome to Our Portfolio"
|
||||
description="Explore our latest design projects and creative work"
|
||||
background={{ variant: "animated-grid" }}
|
||||
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" }}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Portfolio showcase 1"},
|
||||
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 2"},
|
||||
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"
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "View Projects", href: "/projects" },
|
||||
{ text: "Get In Touch", href: "contact" },
|
||||
{ text: "View Work", href: "work" },
|
||||
{ text: "Start a Project", href: "contact" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="work" data-section="work">
|
||||
<FeatureCardTwentyFour
|
||||
title="Our Featured Work"
|
||||
description="Discover the projects we're most proud of"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
title="Featured Projects"
|
||||
description="Showcase of selected works demonstrating design excellence and strategic approach"
|
||||
tag="Our Work"
|
||||
features={[
|
||||
{
|
||||
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: "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: "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: "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: "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"},
|
||||
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")
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="About Our Studio"
|
||||
title="About My Practice"
|
||||
description={[
|
||||
"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: "Learn More", href: "/about" },
|
||||
"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."
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Download Resume", href: "#" },
|
||||
{ text: "Connect", href: "contact" },
|
||||
]}
|
||||
showBorder={true}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyFour
|
||||
title="Our Services"
|
||||
description="Comprehensive design and development solutions"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
title="Services Offered"
|
||||
description="Comprehensive design solutions tailored to your business objectives"
|
||||
tag="Expertise"
|
||||
features={[
|
||||
{
|
||||
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: "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: "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: "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: "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"},
|
||||
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"},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
cardTitle="Client Success Stories"
|
||||
cardTag="Testimonials"
|
||||
cardTitle="Trusted by leading brands and organizations worldwide"
|
||||
cardTag="Client feedback"
|
||||
cardAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Sarah Johnson", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Sarah Johnson"},
|
||||
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: "2", name: "Michael Chen", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Michael Chen"},
|
||||
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: "3", name: "Emma Williams", imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Emma Williams"},
|
||||
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"
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
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" }}
|
||||
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" }}
|
||||
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="Our Studio"
|
||||
leftLink={{ text: "Privacy Policy", href: "/privacy" }}
|
||||
rightLink={{ text: "Contact", href: "contact" }}
|
||||
logoText="Portfolio"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
245
src/app/portfolio/[projectId]/page.tsx
Normal file
245
src/app/portfolio/[projectId]/page.tsx
Normal file
@@ -0,0 +1,245 @@
|
||||
"use client";
|
||||
|
||||
import { useParams } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
|
||||
// Mock project data - replace with actual data fetching
|
||||
const projects: Record<string, any> = {
|
||||
"1": {
|
||||
id: "1", title: "Digital Brand Identity System", subtitle: "Complete visual identity redesign for tech startup", category: "Brand Strategy", year: "2024", 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.", fullDescription: [
|
||||
"This comprehensive brand identity project involved creating a complete visual system for an emerging tech startup. The project scope included logo design, color palette development, typography system, brand guidelines, and a full suite of digital assets.", "Through extensive stakeholder interviews and market research, we developed a brand strategy that positioned the company as an innovative leader in their space. The visual identity reflects the company's core values of innovation, reliability, and forward-thinking approach.", "The resulting brand system has been implemented across all digital touchpoints, including website, marketing materials, product interfaces, and company communications. The new brand identity has contributed to a 40% increase in brand recognition within the first six months of launch."],
|
||||
tags: ["Branding", "Identity", "Design System"],
|
||||
challenge:
|
||||
"The startup needed to establish a strong visual identity that would differentiate them in a crowded market while conveying trust and innovation to enterprise clients.", solution:
|
||||
"We created a modern, versatile brand system with a distinctive visual language that works across all applications, from digital interfaces to printed materials.", result: "40% increase in brand recognition, improved market positioning, and a comprehensive design system for future growth.", images: [
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-piece-featuring-s-1773043067962-bd19ff43.png"],
|
||||
},
|
||||
"2": {
|
||||
id: "2", title: "E-commerce Platform Redesign", subtitle: "User-centered redesign of enterprise e-commerce platform", category: "UX Design", year: "2024", 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.", fullDescription: [
|
||||
"This e-commerce redesign project focused on improving user experience and increasing conversion rates for a large-scale enterprise platform. Through extensive user research and analytics review, we identified key friction points in the customer journey.", "We implemented a mobile-first design approach, streamlined the checkout process, and created an intuitive navigation system that reduced friction at every step. Accessibility was a key consideration, with WCAG 2.1 AA compliance implemented throughout.", "The redesigned platform resulted in a 35% increase in conversion rates, 40% reduction in cart abandonment, and improved customer satisfaction scores. The platform now serves over 100,000 monthly active users with a seamless shopping experience."],
|
||||
tags: ["UX Design", "E-commerce", "Accessibility"],
|
||||
challenge:
|
||||
"The existing platform suffered from high cart abandonment rates and poor mobile experience, resulting in significant revenue loss.", solution:
|
||||
"We conducted comprehensive user research, optimized the checkout flow, and implemented a mobile-first responsive design with improved accessibility.", result: "35% increase in conversion rate, 40% reduction in cart abandonment, improved WCAG accessibility compliance.", images: [
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/bold-creative-design-project-displayed-i-1773043067366-f2dd6201.png"],
|
||||
},
|
||||
"3": {
|
||||
id: "3", title: "SaaS Product Interface Design", subtitle: "Designed intuitive interface for data analytics SaaS platform", category: "Product Design", year: "2024", 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%.", fullDescription: [
|
||||
"This SaaS design project involved creating a comprehensive product interface for a data analytics platform serving enterprise clients. The challenge was to make complex data visualization and analysis tools accessible to non-technical users.", "We developed an extensive design system with over 15 component variations, created interactive prototypes for validation, and implemented a guided onboarding experience that reduced the learning curve significantly.", "The result was a 50% reduction in support tickets, improved user engagement, and increased adoption rates among new customers. The design system has also streamlined development processes, reducing design-to-development time by 35%."],
|
||||
tags: ["SaaS", "Product Design", "UI Design"],
|
||||
challenge:
|
||||
"Making complex data analytics tools intuitive for both technical and non-technical users while maintaining powerful functionality.", solution:
|
||||
"Created a comprehensive design system with clear information architecture, progressive disclosure patterns, and comprehensive onboarding.", result: "50% reduction in support tickets, 35% improvement in design-to-development time, increased user adoption.", images: [
|
||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/high-end-portfolio-presentation-featurin-1773043068108-9dc5d0cb.png"],
|
||||
},
|
||||
};
|
||||
|
||||
export default function ProjectDetailPage() {
|
||||
const params = useParams();
|
||||
const projectId = params.projectId as string;
|
||||
const project = projects[projectId];
|
||||
|
||||
if (!project) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div className="min-h-screen flex flex-col">
|
||||
<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"}}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<h1 className="text-2xl font-bold mb-4">Project not found</h1>
|
||||
<Link href="/" className="text-blue-500 hover:underline">
|
||||
Back to portfolio
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div className="min-h-screen flex flex-col">
|
||||
{/* Navigation */}
|
||||
<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"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Back Button */}
|
||||
<div className="pt-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto w-full">
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-flex items-center gap-2 text-sm font-medium hover:opacity-70 transition-opacity mb-12"
|
||||
>
|
||||
<ArrowLeft size={16} />
|
||||
Back to Portfolio
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto w-full">
|
||||
{/* Hero Section */}
|
||||
<div className="mb-16">
|
||||
<div className="mb-8">
|
||||
<p className="text-sm font-medium text-gray-600 mb-3 uppercase tracking-wide">
|
||||
{project.category}
|
||||
</p>
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-4 leading-tight">
|
||||
{project.title}
|
||||
</h1>
|
||||
<p className="text-lg sm:text-xl text-gray-600 max-w-3xl">
|
||||
{project.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div className="flex flex-wrap gap-2 mb-12">
|
||||
{project.tags.map((tag: string) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-3 py-1 bg-gray-200 text-gray-800 text-xs font-medium rounded-full"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Hero Image */}
|
||||
{project.images[0] && (
|
||||
<div className="w-full rounded-lg overflow-hidden mb-12 aspect-video">
|
||||
<img
|
||||
src={project.images[0]}
|
||||
alt={project.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Project Details Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16 py-12 border-t border-gray-200">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold uppercase tracking-wide text-gray-600 mb-2">
|
||||
Challenge
|
||||
</h3>
|
||||
<p className="text-gray-800">{project.challenge}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold uppercase tracking-wide text-gray-600 mb-2">
|
||||
Solution
|
||||
</h3>
|
||||
<p className="text-gray-800">{project.solution}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold uppercase tracking-wide text-gray-600 mb-2">
|
||||
Result
|
||||
</h3>
|
||||
<p className="text-gray-800">{project.result}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Full Description */}
|
||||
<div className="prose prose-lg max-w-none mb-16">
|
||||
<h2 className="text-3xl font-bold mb-8">Project Overview</h2>
|
||||
<div className="space-y-6">
|
||||
{project.fullDescription.map((paragraph: string, idx: number) => (
|
||||
<p key={idx} className="text-gray-700 leading-relaxed">
|
||||
{paragraph}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional Images */}
|
||||
{project.images.length > 1 && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
|
||||
{project.images.slice(1).map((image: string, idx: number) => (
|
||||
<div key={idx} className="rounded-lg overflow-hidden aspect-square">
|
||||
<img
|
||||
src={image}
|
||||
alt={`${project.title} - ${idx + 2}`}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* CTA Section */}
|
||||
<div className="py-12 mb-16 border-t border-gray-200 text-center">
|
||||
<h3 className="text-2xl font-bold mb-4">Interested in working together?</h3>
|
||||
<p className="text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||
Let's discuss your next project and how we can create exceptional digital experiences.
|
||||
</p>
|
||||
<Link
|
||||
href="/#contact"
|
||||
className="inline-block px-8 py-3 bg-black text-white font-medium rounded-lg hover:opacity-80 transition-opacity"
|
||||
>
|
||||
Start a Project
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer" className="mt-auto">
|
||||
<FooterLogoReveal
|
||||
logoText="Portfolio"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -2,88 +2,109 @@
|
||||
|
||||
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 ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
|
||||
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
||||
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import { useParams } from "next/navigation";
|
||||
|
||||
export default function ProjectDetail() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Projects", id: "/projects" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
const projectsData: Record<string, any> = {
|
||||
"1": {
|
||||
title: "Digital Brand Identity System", heroTitle: "Digital Brand Identity System", heroDescription: "Complete visual identity redesign for tech startup. Developed comprehensive brand guidelines, typography system, and digital asset library.", heroImage: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/a-beautiful-case-study-image-showing-a-c-1773043067456-ca425d2a.png", aboutTitle: "Project Overview", aboutDescription: [
|
||||
"This comprehensive brand identity project involved conducting extensive market research and competitive analysis to position the tech startup effectively in their market.", "We developed a complete visual identity system including logo design, color palette, typography standards, and a comprehensive brand guidelines document spanning over 50 pages.", "The result was a cohesive and scalable brand system that increased brand recognition by 40% within six months of implementation."],
|
||||
},
|
||||
"2": {
|
||||
title: "E-commerce Platform Redesign", heroTitle: "E-commerce Platform Redesign", heroDescription: "User-centered redesign of enterprise e-commerce platform. Improved conversion rate by 35% through streamlined navigation and optimized checkout flow.", heroImage: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/professional-portfolio-project-image-fea-1773043068039-3c07e3ca.png", aboutTitle: "Project Overview", aboutDescription: [
|
||||
"This e-commerce redesign project focused on improving user experience through data-driven insights and user testing methodologies.", "We streamlined the navigation structure, optimized the checkout flow to reduce cart abandonment, and implemented accessibility standards to serve a broader audience.", "The redesigned platform resulted in a 35% improvement in conversion rate and significantly reduced support tickets through improved usability."],
|
||||
},
|
||||
"3": {
|
||||
title: "SaaS Product Interface Design", heroTitle: "SaaS Product Interface Design", heroDescription: "Designed intuitive interface for data analytics SaaS platform. Created interactive prototypes and design system for 15+ component variations.", heroImage: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AhRowzw9k0ZSJ87n7KX34EwoE1/contemporary-design-project-featured-in--1773043068896-89ed9073.png", aboutTitle: "Project Overview", aboutDescription: [
|
||||
"This SaaS product design engagement involved creating a comprehensive design system for a data analytics platform serving enterprise clients.", "We conducted extensive user research with data analysts and business intelligence professionals to understand workflow patterns and pain points.", "The final design system includes 15+ core components, detailed interaction patterns, and comprehensive documentation for developer handoff."],
|
||||
},
|
||||
};
|
||||
|
||||
export default function ProjectDetailPage() {
|
||||
const params = useParams();
|
||||
const projectId = params.id as string;
|
||||
const project = projectsData[projectId] || projectsData["1"];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay navItems={navItems} />
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Portfolio"
|
||||
navItems={[
|
||||
{ name: "Work", id: "/" },
|
||||
{ name: "About", id: "/" },
|
||||
{ name: "Services", id: "/" },
|
||||
{ name: "Contact", id: "/" },
|
||||
]}
|
||||
button={{
|
||||
text: "Get in Touch", href: "/"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
title="Project Details"
|
||||
description="Explore the complete project overview and case study"
|
||||
background={{ variant: "animated-grid" }}
|
||||
title={project.heroTitle}
|
||||
description={project.heroDescription}
|
||||
tag="Project"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Project showcase"},
|
||||
imageSrc: project.heroImage,
|
||||
imageAlt: project.title,
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Back to Projects", href: "/projects" },
|
||||
{ text: "Back to Portfolio", href: "/" },
|
||||
{ text: "Start a Project", href: "/" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="work" data-section="work">
|
||||
<FeatureCardTwentyFour
|
||||
title="Project Breakdown"
|
||||
description="See how we approached and executed this project"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Discovery Phase", author: "Strategy", description: "Initial research and stakeholder interviews", tags: ["Research", "Planning"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Discovery phase"},
|
||||
{
|
||||
id: "2", title: "Design Process", author: "Design", description: "Wireframing, prototyping, and visual design", tags: ["Design", "Prototyping"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Design process"},
|
||||
{
|
||||
id: "3", title: "Implementation", author: "Development", description: "Development and quality assurance", tags: ["Development", "QA"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Implementation phase"},
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title={project.aboutTitle}
|
||||
description={project.aboutDescription}
|
||||
buttons={[
|
||||
{ text: "View Other Projects", href: "/" },
|
||||
{ text: "Connect", href: "/" },
|
||||
]}
|
||||
showBorder={true}
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Ready to Start?"
|
||||
title="Let's Create Something Amazing"
|
||||
description="Interested in working with us on your next project?"
|
||||
background={{ variant: "plain" }}
|
||||
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" }}
|
||||
useInvertedBackground={false}
|
||||
buttonText="Get Started"
|
||||
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="Our Studio"
|
||||
leftLink={{ text: "Privacy Policy", href: "/privacy" }}
|
||||
rightLink={{ text: "Contact", href: "contact" }}
|
||||
logoText="Portfolio"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
@@ -2,88 +2,59 @@
|
||||
|
||||
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 ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
|
||||
export default function DigitalBrandIdentity() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Projects", id: "/projects" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
|
||||
export default function DigitalBrandIdentityPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay navItems={navItems} />
|
||||
<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"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
title="Digital Brand Identity"
|
||||
description="A comprehensive brand redesign for a tech startup"
|
||||
background={{ variant: "animated-grid" }}
|
||||
title="Digital Brand Identity System"
|
||||
description="Complete visual identity redesign for tech startup. Developed comprehensive brand guidelines, typography system, and digital asset library."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Brand identity showcase"},
|
||||
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"
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Back to Projects", href: "/projects" },
|
||||
{ text: "Back to Work", href: "/" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="work" data-section="work">
|
||||
<FeatureCardTwentyFour
|
||||
title="Project Highlights"
|
||||
description="Key deliverables and outcomes"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Logo Design", author: "Brand Team", description: "Modern and versatile logo system", tags: ["Branding", "Logo"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Logo design"},
|
||||
{
|
||||
id: "2", title: "Color Palette", author: "Design", description: "Vibrant and cohesive color system", tags: ["Design", "Colors"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Color palette"},
|
||||
{
|
||||
id: "3", title: "Typography", author: "Design", description: "Custom typography guidelines", tags: ["Typography", "Brand"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Typography system"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Interested?"
|
||||
title="Let's Discuss Your Brand"
|
||||
description="Ready to create a powerful brand identity?"
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
buttonText="Schedule Consultation"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Our Studio"
|
||||
leftLink={{ text: "Privacy Policy", href: "/privacy" }}
|
||||
rightLink={{ text: "Contact", href: "contact" }}
|
||||
logoText="Portfolio"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
@@ -2,88 +2,59 @@
|
||||
|
||||
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 ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
|
||||
export default function EcommercePlatformRedesign() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Projects", id: "/projects" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
|
||||
export default function EcommercePlatformPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay navItems={navItems} />
|
||||
<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"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
title="E-commerce Platform Redesign"
|
||||
description="Modern platform redesign with improved user experience"
|
||||
background={{ variant: "animated-grid" }}
|
||||
description="User-centered redesign of enterprise e-commerce platform. Improved conversion rate by 35% through streamlined navigation and optimized checkout flow."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "E-commerce platform showcase"},
|
||||
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"
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Back to Projects", href: "/projects" },
|
||||
{ text: "Back to Work", href: "/" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="work" data-section="work">
|
||||
<FeatureCardTwentyFour
|
||||
title="Project Goals & Results"
|
||||
description="How we improved the shopping experience"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "User Research", author: "UX Team", description: "Comprehensive user testing and interviews", tags: ["Research", "UX"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "User research phase"},
|
||||
{
|
||||
id: "2", title: "Improved Navigation", author: "Design", description: "Streamlined product discovery flow", tags: ["UX", "Navigation"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Navigation improvements"},
|
||||
{
|
||||
id: "3", title: "Conversion Optimization", author: "Strategy", description: "30% increase in conversion rates", tags: ["Optimization", "Results"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Conversion metrics"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Transform Your Platform"
|
||||
title="Ready to Redesign?"
|
||||
description="Let's create an e-commerce experience your customers will love"
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
buttonText="Start Your Project"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Our Studio"
|
||||
leftLink={{ text: "Privacy Policy", href: "/privacy" }}
|
||||
rightLink={{ text: "Contact", href: "contact" }}
|
||||
logoText="Portfolio"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
102
src/app/projects/page.tsx
Normal file
102
src/app/projects/page.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
"use client";
|
||||
|
||||
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 ContactCenter from "@/components/sections/contact/ContactCenter";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function ProjectsPage() {
|
||||
const projects = [
|
||||
{
|
||||
id: "digital-brand-identity", 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"},
|
||||
{
|
||||
id: "ecommerce-platform-redesign", 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"},
|
||||
{
|
||||
id: "saas-product-interface", 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"},
|
||||
];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
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"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
title="All Projects"
|
||||
description="A comprehensive collection of design projects showcasing expertise across branding, UX design, and product strategy. Each project demonstrates creative excellence and strategic problem-solving."
|
||||
tag="Portfolio"
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
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"},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Back Home", href: "/" },
|
||||
{ text: "Start Your Project", href: "#contact" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="projects" data-section="projects">
|
||||
<FeatureCardTwentyFour
|
||||
title="Featured Projects"
|
||||
description="Detailed case studies showcasing design process, outcomes, and business impact"
|
||||
tag="Case Studies"
|
||||
features={projects}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Let's Collaborate"
|
||||
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" }}
|
||||
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: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -2,88 +2,59 @@
|
||||
|
||||
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 ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
|
||||
export default function SaasProductInterfaceDesign() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Projects", id: "/projects" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
];
|
||||
import HeroBillboardCarousel from "@/components/sections/hero/HeroBillboardCarousel";
|
||||
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
||||
|
||||
export default function SaasProductPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="smallMedium"
|
||||
sizing="mediumLarge"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay navItems={navItems} />
|
||||
<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"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
title="SaaS Product Interface Design"
|
||||
description="Intuitive interface design for enterprise SaaS product"
|
||||
background={{ variant: "animated-grid" }}
|
||||
description="Designed intuitive interface for data analytics SaaS platform. Created interactive prototypes and design system for 15+ component variations."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "SaaS interface showcase"},
|
||||
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"
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Back to Projects", href: "/projects" },
|
||||
{ text: "Back to Work", href: "/" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="work" data-section="work">
|
||||
<FeatureCardTwentyFour
|
||||
title="Design Solution"
|
||||
description="Creating an intuitive enterprise experience"
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Dashboard Design", author: "Design", description: "Clean and informative dashboard layout", tags: ["UI", "Dashboard"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Dashboard design"},
|
||||
{
|
||||
id: "2", title: "Component Library", author: "Design", description: "Comprehensive design system and components", tags: ["Design System", "Components"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Component library"},
|
||||
{
|
||||
id: "3", title: "User Onboarding", author: "UX", description: "Guided onboarding flow for new users", tags: ["UX", "Onboarding"],
|
||||
imageSrc: "/placeholders/placeholder1.webp", imageAlt: "Onboarding flow"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Build Your SaaS"
|
||||
title="Design for Enterprise"
|
||||
description="Let's create an interface that your users will love"
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
buttonText="Discuss Your Project"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Our Studio"
|
||||
leftLink={{ text: "Privacy Policy", href: "/privacy" }}
|
||||
rightLink={{ text: "Contact", href: "contact" }}
|
||||
logoText="Portfolio"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
|
||||
Reference in New Issue
Block a user