191 lines
8.3 KiB
TypeScript
191 lines
8.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
import HeroBillboardTestimonial from "@/components/sections/hero/HeroBillboardTestimonial";
|
|
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
|
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
|
import TestimonialCardFifteen from "@/components/sections/testimonial/TestimonialCardFifteen";
|
|
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Projects", id: "/projects" },
|
|
{ name: "Vision", id: "/about" },
|
|
{ name: "Connect", id: "/connect" },
|
|
{ name: "Writing", id: "/writing" },
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
title: "Navigation", items: [
|
|
{ label: "Home", href: "/" },
|
|
{ label: "Projects", href: "/projects" },
|
|
{ label: "Vision", href: "/about" },
|
|
{ label: "Contact", href: "/contact" },
|
|
],
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "LinkedIn", href: "https://linkedin.com" },
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Email", href: "mailto:hello@example.com" },
|
|
],
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Newsletter", href: "#" },
|
|
{ label: "Blog", href: "/writing" },
|
|
{ label: "Privacy", href: "#" },
|
|
{ label: "Terms", href: "#" },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="floatingGradient"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={navItems}
|
|
brandName="Portfolio"
|
|
bottomLeftText="Crafted with intention"
|
|
bottomRightText="Let's connect"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
title="Building ideas into reality"
|
|
description="A collection of projects, thoughts, and vision. Explore what's in progress, subscribe to my writing, or let's connect."
|
|
background={{ variant: "plain" }}
|
|
imageSrc="http://img.b2bpic.net/free-psd/acting-agency-template-landing-page_23-2148797778.jpg"
|
|
imageAlt="Portfolio hero showcase"
|
|
mediaAnimation="blur-reveal"
|
|
testimonials={[
|
|
{
|
|
name: "Creative Vision", handle: "Portfolio Focus", testimonial: "Transforming concepts into compelling visual narratives that resonate with audiences and drive meaningful engagement.", rating: 5,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5BwcOCEdbUvGXGzmfDl4faxC/uploaded-1772588138755-nsxcu3nt.png"
|
|
},
|
|
]}
|
|
buttons={[
|
|
{ text: "Explore My Work", href: "/projects" },
|
|
{ text: "Subscribe", href: "#" },
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
useInvertedBackground={false}
|
|
tag="Creative Portfolio"
|
|
tagAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
title="About My Vision"
|
|
description={[
|
|
"I believe in intentional design that bridges creativity and purpose. Every project is an opportunity to explore the intersection of aesthetic sophistication and clear communication.", "My work draws inspiration from film aesthetics, vintage typography, and minimalist principles. I create digital experiences that feel thoughtfully crafted, inviting audiences to engage deeply with ideas and stories."
|
|
]}
|
|
useInvertedBackground={true}
|
|
showBorder={true}
|
|
buttons={[{ text: "View Full Story", href: "/about" }]}
|
|
buttonAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="projects" data-section="projects">
|
|
<ProductCardTwo
|
|
title="Selected Projects"
|
|
description="A curated selection of work demonstrating creative vision and strategic thinking across design and digital mediums."
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
gridVariant="three-columns-all-equal-width"
|
|
products={[
|
|
{
|
|
id: "1", brand: "Visual Identity", name: "Brand Narrative Series", price: "2024", rating: 5,
|
|
reviewCount: "Strategic Design", imageSrc: "http://img.b2bpic.net/free-photo/startup-business-people-looking-strategy-board-information-thoughtful_53876-22977.jpg?_wi=1", imageAlt: "Brand narrative project"
|
|
},
|
|
{
|
|
id: "2", brand: "Digital Experience", name: "Interactive Storytelling", price: "2024", rating: 5,
|
|
reviewCount: "Web Design", imageSrc: "http://img.b2bpic.net/free-photo/top-photo-camera-laptop-vintage-tone-wooden-background_482257-35230.jpg?_wi=1", imageAlt: "Digital experience project"
|
|
},
|
|
{
|
|
id: "3", brand: "Creative Direction", name: "Visual Language System", price: "2024", rating: 5,
|
|
reviewCount: "Brand Strategy", imageSrc: "http://img.b2bpic.net/free-vector/geometric-gradient-shapes-cover-collection_52683-32230.jpg?_wi=1", imageAlt: "Creative direction project"
|
|
},
|
|
]}
|
|
carouselMode="buttons"
|
|
tag="Portfolio Showcase"
|
|
tagAnimation="blur-reveal"
|
|
buttons={[{ text: "View All Projects", href: "/projects" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardFifteen
|
|
testimonial="An exceptional creative mind who transforms complex ideas into visually compelling narratives. Working with them elevated our entire brand presence."
|
|
rating={5}
|
|
author="Creative Director, Strategic Brand Partners"
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AP5BwcOCEdbUvGXGzmfDl4faxC/uploaded-1772588138755-nsxcu3nt.png", alt: "Creative collaborator"
|
|
},
|
|
]}
|
|
ratingAnimation="blur-reveal"
|
|
avatarsAnimation="blur-reveal"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="connect" data-section="connect">
|
|
<SocialProofOne
|
|
title="Connect With Me"
|
|
description="Let's explore ideas together. Reach out through any of these channels."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={["Twitter", "LinkedIn", "Instagram", "Email", "Newsletter"]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact-cta" data-section="contact-cta">
|
|
<ContactCTA
|
|
tag="Get In Touch"
|
|
title="Ready to collaborate?"
|
|
description="Whether you're exploring new creative directions, developing a project, or simply want to discuss ideas, I'd love to hear from you."
|
|
background={{ variant: "plain" }}
|
|
buttons={[
|
|
{ text: "Explore My Writing", href: "#" },
|
|
{ text: "Start a Conversation", href: "/contact" },
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={footerColumns}
|
|
copyrightText="© 2025 Portfolio. Crafted with intention and creative vision."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|