Merge version_3 into main #4
192
src/app/page.tsx
192
src/app/page.tsx
@@ -2,17 +2,13 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import BlogCardOne from '@/components/sections/blog/BlogCardOne';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
import { Award, CheckCircle, Shield, Users } from "lucide-react";
|
||||
import { Mail } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -33,8 +29,7 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Projects", id: "projects" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="DevPortfolio"
|
||||
@@ -43,144 +38,59 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
logoText="Building the Future of Software."
|
||||
description="Senior Software Developer specializing in high-performance SaaS, complex system architecture, and modern web applications with a focus on clean, scalable code."
|
||||
buttons={[
|
||||
{ text: "View My Work", href: "#projects" },
|
||||
{ text: "Contact Me", href: "#contact" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/working-table-with-computer_93675-133813.jpg"
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
<HeroCarouselLogo
|
||||
logoText="DevPortfolio"
|
||||
description="Building high-performance software for the next generation of digital products."
|
||||
buttons={[{ text: "View Products", href: "#products" }]}
|
||||
slides={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/working-table-with-computer_93675-133813.jpg", imageAlt: "Workstation" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwelve
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ id: "f1", label: "Web Development", title: "Custom Web Solutions", items: ["Responsive design", "Full-stack development", "Performance optimized"] },
|
||||
{ id: "f2", label: "SaaS Development", title: "Scalable Cloud Platforms", items: ["Multi-tenant architecture", "Cloud infrastructure", "Automated deployment"] },
|
||||
{ id: "f3", label: "Web Applications", title: "Modern SPAs/PWAs", items: ["React/Next.js stack", "Offline capability", "Seamless interaction"] },
|
||||
{ id: "f4", label: "UI/UX & Architecture", title: "Strategic Design & Systems", items: ["User journey mapping", "System design pattern", "UX research & testing"] },
|
||||
]}
|
||||
title="Core Services"
|
||||
description="Providing end-to-end technical solutions designed for modern enterprise performance."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "10+", title: "Years Experience", description: "Senior level development", icon: Award },
|
||||
{ id: "m2", value: "50+", title: "Projects Completed", description: "Scalable enterprise solutions", icon: CheckCircle },
|
||||
{ id: "m3", value: "99.9%", title: "Deployment Uptime", description: "Reliable cloud infrastructure", icon: Shield },
|
||||
{ id: "m4", value: "1M+", title: "Active Users", description: "Supported through production", icon: Users },
|
||||
]}
|
||||
title="Technical Expertise"
|
||||
description="Proven results delivering high-impact software solutions for industry-leading organizations."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="projects" data-section="projects">
|
||||
<ProductCardThree
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Enterprise Dashboard", price: "High Performance", imageSrc: "http://img.b2bpic.net/free-photo/special-operations-engineer-following-enemy-warships-submarines_482257-91174.jpg" },
|
||||
{ id: "p2", name: "SaaS Analytics Engine", price: "Cloud-Native", imageSrc: "http://img.b2bpic.net/free-photo/laptop-dark-night-desktop_169016-51691.jpg" },
|
||||
{ id: "p3", name: "Gateway API Portal", price: "High Security", imageSrc: "http://img.b2bpic.net/free-photo/close-up-admin-office-sing-tablet-design-machine-learning-algorithms_482257-124791.jpg" },
|
||||
{ id: "p4", name: "Modern App Platform", price: "UX-Focused", imageSrc: "http://img.b2bpic.net/free-photo/laptop-dark-night-desktop_169016-53733.jpg" },
|
||||
{ id: "p5", name: "AI Productivity Suite", price: "Intelligent Design", imageSrc: "http://img.b2bpic.net/free-photo/top-view-laptop-table-glowing-screen-dark_169016-53642.jpg" },
|
||||
{ id: "p6", name: "Design System Hub", price: "Modular Arch", imageSrc: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg" },
|
||||
]}
|
||||
title="Featured Works"
|
||||
description="A curated collection of professional projects demonstrating high-end web development skills."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Alex Rivet", handle: "CTO, CloudTech", testimonial: "Exceptional expertise in system architecture. Delivered ahead of schedule.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-data-center-admin-coworkers_482257-130416.jpg" },
|
||||
{ id: "t2", name: "Sarah Miller", handle: "CEO, StartupInc", testimonial: "The best developer we've worked with. Clean, professional code base.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-modern-woman-dressed-jacket-glasses-poses-pink-with-serious-emotions-clasped-hands_291650-1132.jpg" },
|
||||
{ id: "t3", name: "David Zhou", handle: "Manager, InnovateLab", testimonial: "Incredible eye for detail. Transformed our legacy app into a modern beast.", imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-working-warehouse_329181-12778.jpg" },
|
||||
{ id: "t4", name: "Emma Watson", handle: "Lead Designer, Creatix", testimonial: "Seamless collaboration between our UI teams and his development team.", imageSrc: "http://img.b2bpic.net/free-photo/young-man-posing-black-white-medium-shot_23-2149411423.jpg" },
|
||||
{ id: "t5", name: "Mark Evans", handle: "Architect, Systems Co", testimonial: "Always delivers rock-solid, scalable solutions on every single build.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-digital-nomad-woman-working-as-manager-office-standing-office-with-wireless_1258-195325.jpg" },
|
||||
{ id: "t6", name: "Jane Doe", handle: "Principal Dev, Global", testimonial: "Top-tier senior engineering skills, deeply reliable and communicative.", imageSrc: "http://img.b2bpic.net/free-photo/serious-focused-freelancer-using-laptop_1262-18611.jpg" },
|
||||
]}
|
||||
title="Client Feedback"
|
||||
description="Building long-term success through trust, precision, and reliable execution."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "q1", title: "What is your primary tech stack?", content: "I specialize in the MERN/PERN stack with a strong focus on Next.js, TypeScript, and AWS serverless architectures." },
|
||||
{ id: "q2", title: "Do you provide system design?", content: "Yes, I offer full-scale system architecture and design pattern implementation for enterprise platforms." },
|
||||
{ id: "q3", title: "How do you handle project management?", content: "I use Agile methodologies, utilizing tools like Jira and Linear to maintain transparency and efficiency." },
|
||||
]}
|
||||
title="Technical FAQs"
|
||||
description="Common inquiries regarding my development process, engagement model, and technology stack."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="blog" data-section="blog">
|
||||
<BlogCardOne
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Insights & Knowledge"
|
||||
description="Articles on modern software development, scaling, and the latest in web technologies."
|
||||
blogs={[
|
||||
{ id: "b1", category: "Architecture", title: "Scaling Cloud Systems", excerpt: "How to design platforms for millions of users.", imageSrc: "http://img.b2bpic.net/free-photo/urban-apartment-with-minimalist-home-office-wooden-furniture_482257-120933.jpg", authorName: "Dev", authorAvatar: "http://img.b2bpic.net/free-vector/minimalist-letter-u-y-logo-design-with-circle-shape_361591-563.jpg", date: "Jan 2025" },
|
||||
{ id: "b2", category: "DevOps", title: "CI/CD Strategies", excerpt: "Optimizing delivery for modern SaaS teams.", imageSrc: "http://img.b2bpic.net/free-photo/modern-monitor-elegant-table_23-2150706427.jpg", authorName: "Dev", authorAvatar: "http://img.b2bpic.net/free-vector/futuristic-kb-technology-logo_23-2149109515.jpg", date: "Dec 2024" },
|
||||
{ id: "b3", category: "Frontend", title: "The Power of Next.js", excerpt: "Building production apps with high performance.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-computer-display-software-developer-typing-database-functions-script-it-startup-agency-display-concept-programer-writing-source-code-scrolling-text-programming-language_482257-33542.jpg", authorName: "Dev", authorAvatar: "http://img.b2bpic.net/free-photo/telegram-logo-icon-3d-style_23-2152000223.jpg", date: "Nov 2024" },
|
||||
]}
|
||||
/>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
title="Core Solutions"
|
||||
description="High-impact software tools designed for scale."
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "1", name: "Cloud Platform", price: "$99/mo", variant: "Pro", imageSrc: "http://img.b2bpic.net/free-photo/laptop-dark-night-desktop_169016-51691.jpg" },
|
||||
{ id: "2", name: "Design System", price: "$49/mo", variant: "Starter", imageSrc: "http://img.b2bpic.net/free-photo/luxurious-boardroom-space-within-multinational-company-used-meetings_482257-124520.jpg" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "canvas-reveal" }}
|
||||
tag="Let's Talk"
|
||||
title="Start Your Next Build"
|
||||
description="Let's discuss how we can build high-performance software tailored to your business needs."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/abstract-star-shaped-blinds-oscillation-background-3d-star-wavy-surface-geometric-elements-displacement_1217-2507.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
buttonText="Send Message"
|
||||
/>
|
||||
<ContactCTA
|
||||
tag="Get In Touch"
|
||||
title="Ready to scale?"
|
||||
description="Let's build your next project together. Reach out for a consultation."
|
||||
buttons={[{ text: "Contact Now", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
names={["Google", "Microsoft", "Amazon", "Netflix", "Tesla"]}
|
||||
title="Trusted by global teams"
|
||||
description="Empowering teams with reliable and scalable software."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5vdty8"
|
||||
logoText="DevPortfolio"
|
||||
columns={[
|
||||
{ title: "Quick Links", items: [{ label: "Services", href: "#services" }, { label: "Projects", href: "#projects" }, { label: "Contact", href: "#contact" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
<FooterBaseCard
|
||||
logoText="DevPortfolio"
|
||||
columns={[
|
||||
{ title: "Navigation", items: [{ label: "Home", href: "#hero" }, { label: "Products", href: "#products" }] },
|
||||
{ title: "Support", items: [{ label: "Contact", href: "#contact" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user