257 lines
15 KiB
TypeScript
257 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import { ArrowRight, BarChart, Code, Database, Feather, Github, Laptop, Palette, Search, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="large"
|
|
background="grid"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "#home"},
|
|
{
|
|
name: "About", id: "#about"},
|
|
{
|
|
name: "Skills", id: "#skills"},
|
|
{
|
|
name: "Projects", id: "#projects"},
|
|
{
|
|
name: "Services", id: "#services"},
|
|
{
|
|
name: "Testimonials", id: "#testimonials"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
brandName="Pavani Portfolio"
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroBillboardRotatedCarousel
|
|
background={{
|
|
variant: "rotated-rays-animated-grid"}}
|
|
title="Hi, I'm Pavani"
|
|
description="A Computer Science (Data Science) Student & Freelance Web Developer passionate about crafting modern, responsive websites and leveraging data to build innovative digital solutions. I bring technical expertise and creative design to every project."
|
|
buttons={[
|
|
{
|
|
text: "View Projects", href: "#projects"},
|
|
{
|
|
text: "Contact Me", href: "#contact"},
|
|
]}
|
|
carouselItems={[
|
|
{
|
|
id: "carousel-1", imageSrc: "http://img.b2bpic.net/free-photo/technology-concept-with-futuristic-element_23-2151910928.jpg", imageAlt: "Futuristic data science dashboard"},
|
|
{
|
|
id: "carousel-2", imageSrc: "http://img.b2bpic.net/free-photo/photovoltaics-factory-manager-visualizes-solar-cells-designs-with-3d-software-tools-drinking-coffee_482257-135656.jpg", imageAlt: "Web developer's workspace with multiple screens"},
|
|
{
|
|
id: "carousel-3", imageSrc: "http://img.b2bpic.net/free-photo/3d-technology-background-with-low-poly-plexus-design_1048-16168.jpg", imageAlt: "Abstract data flowing through interconnected nodes"},
|
|
{
|
|
id: "carousel-4", imageSrc: "http://img.b2bpic.net/free-vector/twitter-interface-template_23-2148587406.jpg", imageAlt: "Minimalist web design concept on laptop"},
|
|
{
|
|
id: "carousel-5", imageSrc: "http://img.b2bpic.net/free-photo/man-monitoring-company-systems-using-notebook-while-standing-office_482257-124884.jpg", imageAlt: "Professional portrait of Pavani"},
|
|
{
|
|
id: "carousel-6", imageSrc: "http://img.b2bpic.net/free-photo/young-boy-playing-computer_23-2148860550.jpg", imageAlt: "Close-up of hands typing on glowing keyboard"},
|
|
]}
|
|
autoPlay={true}
|
|
autoPlayInterval={4000}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
imagePosition="right"
|
|
title="About Pavani"
|
|
description="I'm Pavani, a passionate Computer Science student specializing in Data Science, with a keen interest in full-stack web development. I love transforming complex data into actionable insights and bringing ideas to life through elegant, user-friendly websites. My journey involves continuously learning new technologies and applying them to solve real-world challenges, both in academic projects and as a freelance developer."
|
|
bulletPoints={[
|
|
{
|
|
title: "Data Science Enthusiast", description: "Leveraging machine learning and statistical analysis to extract meaningful insights from vast datasets."},
|
|
{
|
|
title: "Creative Web Developer", description: "Building modern, responsive, and visually appealing web applications with a focus on user experience."},
|
|
{
|
|
title: "Problem Solver", description: "Dedicated to finding innovative and efficient solutions for complex technical challenges."},
|
|
{
|
|
title: "Continuous Learner", description: "Always exploring new technologies and best practices to stay ahead in the rapidly evolving tech landscape."},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/contemplating-young-caucasian-man-holding-dairy-thinking_23-2148187202.jpg"
|
|
imageAlt="Pavani professional portrait"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="skills" data-section="skills">
|
|
<FeatureBento
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "HTML", description: "Semantic and accessible markup for robust web structures.", bentoComponent: "reveal-icon", icon: Code
|
|
},
|
|
{
|
|
title: "CSS", description: "Crafting beautiful and responsive designs with modern styling techniques.", bentoComponent: "reveal-icon", icon: Palette
|
|
},
|
|
{
|
|
title: "JavaScript", description: "Dynamic and interactive web experiences using modern JavaScript.", bentoComponent: "reveal-icon", icon: Zap
|
|
},
|
|
{
|
|
title: "React", description: "Building powerful single-page applications with reusable components.", bentoComponent: "reveal-icon", icon: BarChart
|
|
},
|
|
{
|
|
title: "Next.js", description: "Developing performant, full-stack React applications with server-side rendering.", bentoComponent: "reveal-icon", icon: ArrowRight
|
|
},
|
|
{
|
|
title: "Python", description: "Proficiency in Python for data analysis, machine learning, and web backend.", bentoComponent: "reveal-icon", icon: Feather
|
|
},
|
|
{
|
|
title: "Data Science", description: "Skilled in data analysis, visualization, and predictive modeling.", bentoComponent: "reveal-icon", icon: Database
|
|
},
|
|
{
|
|
title: "Git & GitHub", description: "Version control and collaborative development workflows.", bentoComponent: "reveal-icon", icon: Github
|
|
},
|
|
{
|
|
title: "Responsive Design", description: "Ensuring optimal user experience across all devices and screen sizes.", bentoComponent: "reveal-icon", icon: Laptop
|
|
},
|
|
{
|
|
title: "SEO", description: "Optimizing websites for search engine visibility and performance.", bentoComponent: "reveal-icon", icon: Search
|
|
}
|
|
]}
|
|
title="My Technical Skills"
|
|
description="A comprehensive overview of my expertise in web development and data science, honed through coursework and freelance projects. I continually strive to expand my skill set to deliver impactful solutions."
|
|
/>
|
|
</div>
|
|
|
|
<div id="projects" data-section="projects">
|
|
<ProductCardFour
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1", name: "FashionAura E-commerce Website", price: "Live Demo", variant: "React, Next.js, Stripe, Tailwind CSS", imageSrc: "http://img.b2bpic.net/free-photo/black-white-portrait-digital-nomads_23-2151254065.jpg", imageAlt: "FashionAura E-commerce Website"},
|
|
{
|
|
id: "p2", name: "Luxury Fashion Landing Page", price: "Live Demo", variant: "HTML, CSS, JavaScript, GSAP", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-clothes-bed-fast-fashion-concept_23-2149726122.jpg", imageAlt: "Luxury Fashion Landing Page"},
|
|
{
|
|
id: "p3", name: "Restaurant Website", price: "Live Demo", variant: "React, Node.js, Express, MongoDB", imageSrc: "http://img.b2bpic.net/free-photo/young-adult-enjoying-virtual-date_23-2149328154.jpg", imageAlt: "Restaurant Website"},
|
|
{
|
|
id: "p4", name: "Personal Portfolio Website", price: "Live Demo", variant: "Next.js, Tailwind CSS, Framer Motion", imageSrc: "http://img.b2bpic.net/free-photo/top-view-stationery-concept_23-2147800640.jpg", imageAlt: "Personal Portfolio Website"},
|
|
{
|
|
id: "p5", name: "Business Landing Page", price: "Live Demo", variant: "Webflow, Custom CSS", imageSrc: "http://img.b2bpic.net/free-photo/empty-luxurious-corporate-high-end-office-designed-ceo-leader_482257-101437.jpg", imageAlt: "Business Landing Page"},
|
|
{
|
|
id: "p6", name: "Financial Data Dashboard", price: "Live Demo", variant: "Python, Pandas, Matplotlib, Dash", imageSrc: "http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-122738.jpg", imageAlt: "Financial Data Dashboard"},
|
|
]}
|
|
title="My Portfolio Projects"
|
|
description="A showcase of my recent work, demonstrating my skills in web development and data science. Each project highlights my approach to design, development, and problem-solving."
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Website Development", "Landing Page Design", "Responsive Website Design", "Website Redesign", "Frontend Development", "UI/UX Consulting", "API Integration"]}
|
|
title="Services I Offer"
|
|
description="As a freelance web developer, I provide a range of services designed to help individuals and businesses establish a strong online presence. My goal is to deliver high-quality, scalable, and visually appealing digital solutions tailored to your specific needs."
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1", name: "Sarah Chen", role: "Startup Founder", testimonial: "Pavani built an incredible landing page for my startup. Her attention to detail and design flair transformed our vision into a stunning, high-converting reality. Highly recommend!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-pretty-mulatto-woman-with-trendy-make-up-standing-with-arms-crossed-office-indoor-photo-female-black-employee-posing-with-international-colleagues-gently-smile_197531-3788.jpg", imageAlt: "Sarah Chen"},
|
|
{
|
|
id: "t2", name: "Michael Davis", role: "Small Business Owner", testimonial: "The website redesign Pavani did for my restaurant was outstanding. It's now modern, easy to navigate, and has significantly improved our online presence. A true professional!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-businessman-with-tablet-pc_1262-1044.jpg", imageAlt: "Michael Davis"},
|
|
{
|
|
id: "t3", name: "Emily Rodriguez", role: "Marketing Director", testimonial: "Working with Pavani on our e-commerce platform was a game-changer. She delivered a robust and beautiful site that exceeded our expectations, all within budget and on time.", imageSrc: "http://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg", imageAlt: "Emily Rodriguez"},
|
|
{
|
|
id: "t4", name: "David Kim", role: "Tech Lead", testimonial: "Pavani's data science insights were invaluable for our project. Her ability to analyze complex data and present clear findings helped us make crucial business decisions.", imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg", imageAlt: "David Kim"},
|
|
{
|
|
id: "t5", name: "Jessica Lee", role: "Project Manager", testimonial: "Her frontend development skills are top-notch. Pavani is reliable, responsive, and creates beautiful, functional interfaces. A pleasure to collaborate with!", imageSrc: "http://img.b2bpic.net/free-photo/middle-eastern-businessman-does-daily-tasks-corporate-job_482257-116713.jpg", imageAlt: "Jessica Lee"},
|
|
]}
|
|
title="Client Testimonials"
|
|
description="Hear what my clients have to say about working with me. I'm committed to delivering excellent results and building strong, collaborative relationships."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "sparkles-gradient"}}
|
|
tag="Get in Touch"
|
|
title="Let's Build Something Amazing Together"
|
|
description="Whether you have a project in mind, a data challenge to solve, or just want to connect, I'd love to hear from you. Reach out through the form below or connect with me on my social platforms."
|
|
buttons={[
|
|
{
|
|
text: "Send an Email", href: "mailto:pavani@example.com"},
|
|
{
|
|
text: "Connect on LinkedIn", href: "https://www.linkedin.com/in/pavani"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoSrc="http://img.b2bpic.net/free-vector/collection-logos-branding-vector_53876-66298.jpg"
|
|
logoAlt="Pavani Portfolio Logo"
|
|
logoText="Pavani Portfolio"
|
|
columns={[
|
|
{
|
|
title: "Quick Links", items: [
|
|
{ label: "Home", href: "#home" },
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Projects", href: "#projects" },
|
|
{ label: "Contact", href: "#contact" },
|
|
],
|
|
},
|
|
{
|
|
title: "Social Media", items: [
|
|
{ label: "LinkedIn", href: "https://www.linkedin.com/in/pavani" },
|
|
{ label: "GitHub", href: "https://github.com/pavani" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 Pavani. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |