204 lines
13 KiB
TypeScript
204 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TeamCardFive from '@/components/sections/team/TeamCardFive';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import { Globe, Shield, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Projects", id: "projects" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="DevFolio"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
background={{ variant: "gradient-bars" }}
|
|
imagePosition="right"
|
|
title="Crafting Digital Experiences."
|
|
description="Freelance web developer specialized in creating high-performance, modern web applications that drive business growth."
|
|
testimonials={[
|
|
{ name: "Sarah J.", handle: "@sarahj", testimonial: "Exceptional work on our platform migration.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg" },
|
|
{ name: "Mike D.", handle: "@miked", testimonial: "Delivered the product early and beyond expectations.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg" },
|
|
{ name: "Ana R.", handle: "@anar", testimonial: "Excellent communication and technical expertise.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/user-profile-icon-front-side_187299-39596.jpg" },
|
|
{ name: "John K.", handle: "@johnk", testimonial: "The performance gains were immediate and massive.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/user-front-side-with-white-background_187299-40007.jpg" },
|
|
{ name: "Lisa V.", handle: "@lisav", testimonial: "Very professional and a pleasure to work with.", rating: 5, imageSrc: "http://img.b2bpic.net/free-vector/linear-flat-people-faces-icon-set-social-media-avatar-userpic-profiles_1416-508.jpg" }
|
|
]}
|
|
buttons={[{ text: "View Projects", href: "#projects" }, { text: "Contact Me", href: "#contact" }]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/cozy-loft-style-illuminated-apartment-with-modern-home-office_482257-126413.jpg"
|
|
mediaAnimation="blur-reveal"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/smiling-man-suit-looking-camera_23-2148112202.jpg", alt: "user-1" },
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-man-with-glasses_23-2148514897.jpg", alt: "user-2" },
|
|
{ src: "http://img.b2bpic.net/free-photo/positive-confident-businesswoman-wearing-formal-suit-standing-with-arms-folded_74855-10328.jpg", alt: "user-3" },
|
|
{ src: "http://img.b2bpic.net/free-photo/beautiful-afro-american-woman-smiling_23-2148336914.jpg", alt: "user-4" },
|
|
{ src: "http://img.b2bpic.net/free-photo/blond-businessman-with-glasses_1098-57.jpg", alt: "user-5" },
|
|
]}
|
|
avatarText="Trusted by 50+ clients"
|
|
marqueeItems={[{ type: "text", text: "React.js" }, { type: "text", text: "Next.js" }, { type: "text", text: "TypeScript" }, { type: "text", text: "PostgreSQL" }, { type: "text", text: "Cloud-Native" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={false}
|
|
title="Passionate about Quality Code."
|
|
description="With over 6 years of experience, I build robust, scalable, and responsive web solutions that prioritize user experience and maintainability."
|
|
metrics={[{ value: "100+", title: "Projects Completed" }, { value: "50+", title: "Happy Clients" }, { value: "6y", title: "Experience" }]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="skills" data-section="skills">
|
|
<FeatureHoverPattern
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{ icon: Zap, title: "Front-End Development", description: "Expert in React, Next.js, and TypeScript for fast user interfaces." },
|
|
{ icon: Shield, title: "Backend Engineering", description: "Strong skills in Node.js, PostgreSQL, and secure API architecture." },
|
|
{ icon: Globe, title: "Responsive Design", description: "Mobile-first approach ensuring perfect experience on every device." }
|
|
]}
|
|
title="Core Technical Skills."
|
|
description="Leveraging modern tech stacks to deliver high-quality, efficient, and scalable digital solutions."
|
|
/>
|
|
</div>
|
|
|
|
<div id="projects" data-section="projects">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{ id: "p1", name: "SaaS Dashboard", price: "View Project", variant: "web", imageSrc: "http://img.b2bpic.net/free-photo/man-trading-browsing-online-stock-investments-night_169016-57295.jpg" },
|
|
{ id: "p2", name: "E-Commerce Site", price: "View Project", variant: "web", imageSrc: "http://img.b2bpic.net/free-psd/soft-nest-website-template_23-2151985943.jpg" },
|
|
{ id: "p3", name: "Banking App", price: "View Project", variant: "mobile", imageSrc: "http://img.b2bpic.net/free-photo/two-factor-authentication-mobile-device_23-2151997022.jpg" },
|
|
{ id: "p4", name: "Portfolio Site", price: "View Project", variant: "web", imageSrc: "http://img.b2bpic.net/free-vector/abstract-paper-cut-banner-template-backgrounds-paper-cut-shapes-template-banner_1142-9405.jpg" },
|
|
{ id: "p5", name: "Medical Booking", price: "View Project", variant: "web", imageSrc: "http://img.b2bpic.net/free-photo/empty-medical-workspace-with-technology_482257-115276.jpg" },
|
|
{ id: "p6", name: "Learning Platform", price: "View Project", variant: "web", imageSrc: "http://img.b2bpic.net/free-photo/education-application-knowledge-development-concept_53876-105721.jpg" }
|
|
]}
|
|
title="Selected Projects."
|
|
description="A showcase of recent work focusing on functionality, aesthetics, and user impact."
|
|
/>
|
|
</div>
|
|
|
|
<div id="experience" data-section="experience">
|
|
<MetricCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{ id: "m1", value: "99.9%", title: "Uptime", description: "Guaranteed performance for all apps.", imageSrc: "http://img.b2bpic.net/free-photo/data-analysis-summary-graph-arrow-up_53876-133586.jpg" },
|
|
{ id: "m2", value: "40ms", title: "Avg Response", description: "Optimized database queries.", imageSrc: "http://img.b2bpic.net/free-photo/high-tech-governmental-cyber-security-room-without-staff-work_482257-94558.jpg" },
|
|
{ id: "m3", value: "1.2M", title: "Users Served", description: "Platform capacity reached.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphics-composition_23-2148991203.jpg" }
|
|
]}
|
|
title="Growth and Milestones."
|
|
description="Tracking impactful growth markers throughout my freelance career."
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardFive
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
team={[
|
|
{ id: "t1", name: "Alex W.", role: "Senior Dev", imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-graphic-designer-smiling_1170-992.jpg" },
|
|
{ id: "t2", name: "Jane D.", role: "UI Designer", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-bright-curly-woman-dressed-blue-jacket-glasses-stands-with-serious-emotions-pink_291650-1099.jpg" },
|
|
{ id: "t3", name: "Mark S.", role: "Product Manager", imageSrc: "http://img.b2bpic.net/free-photo/technician-optimizing-data-center-equipment-maximum-efficiency_482257-117650.jpg" }
|
|
]}
|
|
title="Key Contributors."
|
|
description="Often collaborating with industry specialists to expand project capabilities."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{ id: "1", name: "Alice M.", role: "Director", company: "TechStream", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-positive-executive-work_1098-519.jpg" },
|
|
{ id: "2", name: "Bob B.", role: "Founder", company: "StartupX", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-young-professional-posing-office_1262-21170.jpg" },
|
|
{ id: "3", name: "Charlie C.", role: "CTO", company: "Innovate", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/user-profile-icon-front-side_187299-39596.jpg" },
|
|
{ id: "4", name: "Diana D.", role: "Manager", company: "DataCorp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/user-front-side-with-white-background_187299-40007.jpg" },
|
|
{ id: "5", name: "Evan E.", role: "Product Lead", company: "GrowthIQ", rating: 5, imageSrc: "http://img.b2bpic.net/free-vector/linear-flat-people-faces-icon-set-social-media-avatar-userpic-profiles_1416-508.jpg" }
|
|
]}
|
|
title="What Clients Say."
|
|
description="Building lasting relationships through reliable, professional results."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{ id: "f1", title: "How do you handle project timelines?", content: "I use agile methodology and detailed milestones." },
|
|
{ id: "f2", title: "What is your typical stack?", content: "React, Next.js, and TypeScript are my go-to tools." },
|
|
{ id: "f3", title: "Do you provide maintenance?", content: "Yes, I offer monthly maintenance and support packages." }
|
|
]}
|
|
title="Frequently Asked."
|
|
description="Clear answers to standard questions about the hiring and development process."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
useInvertedBackground={true}
|
|
background={{ variant: "gradient-bars" }}
|
|
text="Ready to discuss your project? Let's build something extraordinary together."
|
|
buttons={[{ text: "Email Me", href: "mailto:hello@example.com" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Careers", href: "#" }] },
|
|
{ title: "Connect", items: [{ label: "Twitter", href: "https://twitter.com" }, { label: "LinkedIn", href: "https://linkedin.com" }] }
|
|
]}
|
|
bottomLeftText="© 2024 DevFolio."
|
|
bottomRightText="All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |