Files
e23db56d-ecad-4a48-a334-ff3…/src/app/page.tsx
2026-04-02 06:51:54 +00:00

168 lines
7.0 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import { Briefcase, Code2, Rocket } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="mediumSmall"
sizing="largeSmallSizeLargeTitles"
background="grid"
cardStyle="gradient-radial"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="radial-glow"
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Home", id: "hero"},
{
name: "About", id: "about"},
{
name: "Services", id: "services"},
{
name: "Projects", id: "projects"},
{
name: "Contact", id: "contact"},
]}
brandName="Vipul"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitDualMedia
background={{
variant: "gradient-bars"}}
title="AI & FullStack Solutions, Built & Deployed"
description="I build intelligent applications that scale. Specializing in machine learning pipelines, cloud architecture, and production-ready systems."
tag="Vipul Parmar"
buttons={[
{
text: "View My Work", href: "#projects"},
]}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169840.jpg", imageAlt: "AI Development"},
{
imageSrc: "http://img.b2bpic.net/free-vector/technology-particle-abstract-background_23-2148304156.jpg", imageAlt: "Neural Infrastructure"}
]}
mediaAnimation="slide-up"
rating={5}
ratingText="Verified Technical Expertise"
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
useInvertedBackground={true}
tag="About Me"
title="Web Developer & Prompt Engineer"
description="Hello! I am Vipul Parmar. Aspiring Web Developer and Prompt Engineer dedicated to doing great work, enjoying tough tasks, and creating amazing online experiences using careful coding and limitless creativity."
subdescription="Passionate about continuous improvement, I specialize in creating impactful solutions at the intersection of web development and AI."
imageSrc="http://img.b2bpic.net/free-photo/worker-with-big-smile-crossed-arms_1139-248.jpg"
mediaAnimation="blur-reveal"
icon={Code2}
/>
</div>
<div id="services" data-section="services">
<FeatureCardNineteen
textboxLayout="split"
useInvertedBackground={false}
features={[
{
id: 1,
tag: "Development", title: "Web Development", subtitle: "Full Stack Excellence", description: "Expertise in ReactJS, Python(Flask/Django), and modern web architectures.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-code-running-laptop-screen-data-center_482257-124594.jpg"},
{
id: 2,
tag: "Intelligence", title: "Prompt Engineering", subtitle: "AI-Driven Innovation", description: "Optimizing LLMs and creating custom AI pipelines for scalable solutions.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-code-running-laptop-screen-data-center_482257-124594.jpg"},
{
id: 3,
tag: "Strategy", title: "Cloud Architecture", subtitle: "Scalable Systems", description: "Building cloud-native infrastructure for production-ready applications.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-code-running-laptop-screen-data-center_482257-124594.jpg"},
]}
title="Technical Services"
description="Expertise in fast-changing fields like ReactJS and Python."
tagIcon={Briefcase}
/>
</div>
<div id="projects" data-section="projects">
<ProductCardFour
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
products={[
{
id: "p1", name: "eCommerce Store", price: "Active Project", variant: "Full Stack", imageSrc: "http://img.b2bpic.net/free-vector/ecommerce-email-template-with-illustrations_23-2148735948.jpg"},
{
id: "p2", name: "HRMS System", price: "Active Project", variant: "Management Tool", imageSrc: "http://img.b2bpic.net/free-vector/gradient-dashboard-user-panel-template_23-2148370540.jpg"},
{
id: "p3", name: "Mask Detection System", price: "Research", variant: "AI/ML", imageSrc: "http://img.b2bpic.net/free-vector/creative-concept-eye-biometrics-scanner-technology-infographic-design-with-cartooned-guy-scanning-his-eye-access-blue-background_1284-42139.jpg"},
]}
title="Featured Projects"
description="A collection of impactful applications and systems."
tagIcon={Rocket}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
useInvertedBackground={false}
background={{
variant: "sparkles-gradient"}}
text="Let's build something amazing together. Reach out for collaboration, consulting, or project inquiries."
buttons={[
{
text: "SEND", href: "mailto:vipul@example.com"},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Portfolio", items: [
{
label: "Home", href: "#hero"},
{
label: "About", href: "#about"},
{
label: "Projects", href: "#projects"},
],
},
{
title: "Social", items: [
{
label: "GitHub", href: "#"},
{
label: "LinkedIn", href: "#"},
{
label: "Twitter", href: "#"},
],
},
]}
copyrightText="© 2025 Vipul Parmar. All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}