|
|
|
|
@@ -1,169 +1,80 @@
|
|
|
|
|
"use client";
|
|
|
|
|
|
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
|
|
|
import HeroSplit from "@/components/sections/hero/HeroSplit";
|
|
|
|
|
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
|
|
|
|
import FeatureCardTwentyFour from "@/components/sections/feature/FeatureCardTwentyFour";
|
|
|
|
|
import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
|
|
|
|
|
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
|
|
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
|
|
|
import { Mail, Linkedin, Github } from "lucide-react";
|
|
|
|
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
|
|
|
import HeroPersonalLinks from "@/components/sections/hero/HeroPersonalLinks";
|
|
|
|
|
import TextAbout from "@/components/sections/about/TextAbout";
|
|
|
|
|
import { Mail, Github, Linkedin, ExternalLink } from "lucide-react";
|
|
|
|
|
|
|
|
|
|
export default function LandingPage() {
|
|
|
|
|
export default function Home() {
|
|
|
|
|
return (
|
|
|
|
|
<ThemeProvider
|
|
|
|
|
defaultButtonVariant="elastic-effect"
|
|
|
|
|
defaultTextAnimation="reveal-blur"
|
|
|
|
|
defaultButtonVariant="hover-magnetic"
|
|
|
|
|
defaultTextAnimation="entrance-slide"
|
|
|
|
|
borderRadius="soft"
|
|
|
|
|
contentWidth="compact"
|
|
|
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
|
|
|
background="circleGradient"
|
|
|
|
|
cardStyle="layered-gradient"
|
|
|
|
|
primaryButtonStyle="primary-glow"
|
|
|
|
|
secondaryButtonStyle="glass"
|
|
|
|
|
headingFontWeight="medium"
|
|
|
|
|
sizing="medium"
|
|
|
|
|
background="none"
|
|
|
|
|
cardStyle="solid"
|
|
|
|
|
primaryButtonStyle="flat"
|
|
|
|
|
secondaryButtonStyle="solid"
|
|
|
|
|
headingFontWeight="normal"
|
|
|
|
|
>
|
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
|
<NavbarStyleApple
|
|
|
|
|
brandName="Portfolio"
|
|
|
|
|
<NavbarStyleFullscreen
|
|
|
|
|
navItems={[
|
|
|
|
|
{ name: "About", id: "about" },
|
|
|
|
|
{ name: "Work", id: "work" },
|
|
|
|
|
{ name: "Contact", id: "contact" },
|
|
|
|
|
{ name: "Home", id: "/" },
|
|
|
|
|
{ name: "About", id: "#about" },
|
|
|
|
|
{ name: "Projects", id: "#projects" }
|
|
|
|
|
]}
|
|
|
|
|
brandName="Portfolio"
|
|
|
|
|
bottomLeftText="Student Developer"
|
|
|
|
|
bottomRightText="hello@example.com"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="hero" data-section="hero">
|
|
|
|
|
<HeroSplit
|
|
|
|
|
title="Creative Professional & Designer"
|
|
|
|
|
description="I craft beautiful, thoughtful digital experiences. Specializing in modern design and web development to bring your vision to life."
|
|
|
|
|
background={{ variant: "glowing-orb" }}
|
|
|
|
|
tag="Welcome"
|
|
|
|
|
tagAnimation="blur-reveal"
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "View My Work", href: "#work" },
|
|
|
|
|
{ text: "Get In Touch", href: "#contact" },
|
|
|
|
|
<HeroPersonalLinks
|
|
|
|
|
background={{ variant: "plain" }}
|
|
|
|
|
title="Hi, I'm a Student Developer"
|
|
|
|
|
socialLinks={[
|
|
|
|
|
{ icon: Github, label: "GitHub", href: "https://github.com" },
|
|
|
|
|
{ icon: Linkedin, label: "LinkedIn", href: "https://linkedin.com" },
|
|
|
|
|
{ icon: Mail, label: "Email", href: "mailto:hello@example.com" }
|
|
|
|
|
]}
|
|
|
|
|
linkCards={[
|
|
|
|
|
{
|
|
|
|
|
title: "My Projects", description: "Check out what I've built", button: { text: "View", href: "#projects" }
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "About Me", description: "Learn more about my background", button: { text: "Read", href: "#about" }
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
title: "Get in Touch", description: "Let's work together", button: { text: "Contact", href: "mailto:hello@example.com" }
|
|
|
|
|
}
|
|
|
|
|
]}
|
|
|
|
|
buttonAnimation="blur-reveal"
|
|
|
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1"
|
|
|
|
|
imageAlt="Professional portrait"
|
|
|
|
|
mediaAnimation="slide-up"
|
|
|
|
|
imagePosition="right"
|
|
|
|
|
fixedMediaHeight={true}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="about" data-section="about">
|
|
|
|
|
<InlineImageSplitTextAbout
|
|
|
|
|
heading={[
|
|
|
|
|
{
|
|
|
|
|
type: "text", content: "Passionate about creating elegant solutions through"},
|
|
|
|
|
{
|
|
|
|
|
type: "image", src: "http://img.b2bpic.net/free-vector/naive-ai-stickers-collection_23-2150522590.jpg", alt: "Design icon"},
|
|
|
|
|
{
|
|
|
|
|
type: "text", content: "design and development"},
|
|
|
|
|
]}
|
|
|
|
|
<TextAbout
|
|
|
|
|
tag="About"
|
|
|
|
|
title="I'm a student passionate about building clean, simple web applications that solve real problems."
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Download Resume", href: "#" },
|
|
|
|
|
{ text: "My Projects", href: "#projects" },
|
|
|
|
|
{ text: "Contact Me", href: "mailto:hello@example.com" }
|
|
|
|
|
]}
|
|
|
|
|
buttonAnimation="blur-reveal"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="work" data-section="work">
|
|
|
|
|
<FeatureCardTwentyFour
|
|
|
|
|
title="Featured Projects"
|
|
|
|
|
description="A selection of recent work that demonstrates my approach to design and development"
|
|
|
|
|
features={[
|
|
|
|
|
{
|
|
|
|
|
id: "1", title: "Brand Identity System", author: "2024", description:
|
|
|
|
|
"Comprehensive brand identity system including logo, typography, color palette, and design guidelines for a tech startup.", tags: ["Branding", "Design System"],
|
|
|
|
|
imageSrc:
|
|
|
|
|
"http://img.b2bpic.net/free-vector/corporate-branding-set_1057-860.jpg", imageAlt: "Brand identity design"},
|
|
|
|
|
{
|
|
|
|
|
id: "2", title: "E-commerce Platform Redesign", author: "2024", description:
|
|
|
|
|
"Complete UX/UI redesign of e-commerce platform resulting in 40% improvement in conversion rates.", tags: ["UX Design", "Web Development"],
|
|
|
|
|
imageSrc:
|
|
|
|
|
"http://img.b2bpic.net/free-vector/landing-page-template-second-hand-fashion-store_52683-109215.jpg", imageAlt: "E-commerce platform"},
|
|
|
|
|
{
|
|
|
|
|
id: "3", title: "Mobile App Interface", author: "2023", description:
|
|
|
|
|
"User-centered interface design for a productivity mobile application with focus on accessibility and usability.", tags: ["Mobile Design", "UI/UX"],
|
|
|
|
|
imageSrc:
|
|
|
|
|
"http://img.b2bpic.net/free-vector/mobile-app-concept_52683-5155.jpg", imageAlt: "Mobile app interface"},
|
|
|
|
|
]}
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
<div id="projects" data-section="projects">
|
|
|
|
|
<TextAbout
|
|
|
|
|
tag="Projects"
|
|
|
|
|
title="Simple projects showcasing what I'm learning and building."
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
|
|
|
<TestimonialCardTwelve
|
|
|
|
|
testimonials={[
|
|
|
|
|
{
|
|
|
|
|
id: "1", name: "Sarah Johnson", imageSrc:
|
|
|
|
|
"http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=1", imageAlt: "Sarah Johnson"},
|
|
|
|
|
{
|
|
|
|
|
id: "2", name: "Michael Chen", imageSrc:
|
|
|
|
|
"http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "Michael Chen"},
|
|
|
|
|
{
|
|
|
|
|
id: "3", name: "Emma Davis", imageSrc:
|
|
|
|
|
"http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg?_wi=2", imageAlt: "Emma Davis"},
|
|
|
|
|
{
|
|
|
|
|
id: "4", name: "James Wilson", imageSrc:
|
|
|
|
|
"http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3", imageAlt: "James Wilson"},
|
|
|
|
|
]}
|
|
|
|
|
cardTitle="Trusted by 50+ Clients Worldwide"
|
|
|
|
|
cardTag="See what they say"
|
|
|
|
|
cardAnimation="blur-reveal"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="contact" data-section="contact">
|
|
|
|
|
<ContactFaq
|
|
|
|
|
ctaTitle="Let's Work Together"
|
|
|
|
|
ctaDescription="I'm always interested in hearing about new projects. Feel free to reach out and let's create something amazing."
|
|
|
|
|
ctaButton={{
|
|
|
|
|
text: "Send Email", href: "mailto:hello@example.com"}}
|
|
|
|
|
ctaIcon={Mail}
|
|
|
|
|
faqs={[
|
|
|
|
|
{
|
|
|
|
|
id: "1", title: "What's your typical project timeline?", content:
|
|
|
|
|
"Most projects take 4-12 weeks depending on scope and complexity. I'll provide a detailed timeline during our initial consultation."},
|
|
|
|
|
{
|
|
|
|
|
id: "2", title: "Do you offer maintenance and support?", content:
|
|
|
|
|
"Yes, I provide ongoing support and maintenance packages to ensure your project runs smoothly after launch."},
|
|
|
|
|
{
|
|
|
|
|
id: "3", title: "What's your design process?", content:
|
|
|
|
|
"My process includes discovery, research, wireframing, design, prototyping, and iteration based on feedback."},
|
|
|
|
|
{
|
|
|
|
|
id: "4", title: "Can you work with existing designs?", content:
|
|
|
|
|
"Absolutely. I can work with your existing brand guidelines and designs to maintain consistency."},
|
|
|
|
|
]}
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
accordionAnimationType="smooth"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="footer" data-section="footer">
|
|
|
|
|
<FooterCard
|
|
|
|
|
logoText="Portfolio"
|
|
|
|
|
copyrightText="© 2025 | All rights reserved"
|
|
|
|
|
socialLinks={[
|
|
|
|
|
{
|
|
|
|
|
icon: Linkedin,
|
|
|
|
|
href: "https://linkedin.com", ariaLabel: "LinkedIn"},
|
|
|
|
|
{
|
|
|
|
|
icon: Github,
|
|
|
|
|
href: "https://github.com", ariaLabel: "GitHub"},
|
|
|
|
|
{
|
|
|
|
|
icon: Mail,
|
|
|
|
|
href: "mailto:hello@example.com", ariaLabel: "Email"},
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "GitHub", href: "https://github.com" }
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
