Compare commits
28 Commits
version_1
...
version_19
| Author | SHA1 | Date | |
|---|---|---|---|
| e2958542c8 | |||
| 93d7a2a5f2 | |||
| 134e81bd01 | |||
| fac9222565 | |||
| 097340ef62 | |||
| 9d9c5081e3 | |||
| 3b408721e8 | |||
| 8305659974 | |||
| 0618387a39 | |||
| 9b120b7b68 | |||
| 3aa22ec0d9 | |||
| 2ba025cc98 | |||
| 8918c2dd87 | |||
| 5e59a337dc | |||
| 9f1b955d57 | |||
| aef6a7d93e | |||
| 5dc74614c0 | |||
| ebc47538d2 | |||
| 04ec2a65fd | |||
| b76e44dbdb | |||
| ae6c6eaff9 | |||
| 44fabdd863 | |||
| a8d355e968 | |||
| d738a113e4 | |||
| 4d2a904009 | |||
| f6fcfa27fd | |||
| acc826eed1 | |||
| a7d9889b35 |
298
src/app/page.tsx
298
src/app/page.tsx
@@ -2,198 +2,146 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import { Clock, Fish, Trash2 } from "lucide-react";
|
||||
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import { Cpu, Zap, Palette, BookOpen } from "lucide-react";
|
||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
||||
|
||||
export default function LandingPage() {
|
||||
export default function PortfolioPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="large"
|
||||
background="floatingGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="normal"
|
||||
sizing="medium"
|
||||
background="noise"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Mission", id: "about"},
|
||||
{
|
||||
name: "Solutions", id: "features"},
|
||||
{
|
||||
name: "Get Involved", id: "contact"},
|
||||
]}
|
||||
brandName="Plastique World"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Work", id: "hero" },
|
||||
{ name: "Experience", id: "experience" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Portfolio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
title="Clean Our World, Together."
|
||||
description="Every piece of plastic matters. Join the movement to raise awareness and reduce waste in our oceans and communities."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Involved", href: "#contact"},
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1", imageSrc: "http://img.b2bpic.net/free-photo/leaf-heart-with-copy-space-white-background_23-2148494956.jpg?_wi=1", imageAlt: "Plastic impact"},
|
||||
{
|
||||
id: "2", imageSrc: "http://img.b2bpic.net/free-photo/volunteering-concept-environment-protection-with-young-woman-activist_273609-37028.jpg?_wi=1", imageAlt: "Sustainable nature"},
|
||||
{
|
||||
id: "3", imageSrc: "http://img.b2bpic.net/free-photo/group-volunteers-collecting-trash-beach_23-2147827047.jpg?_wi=1", imageAlt: "Community clean"},
|
||||
{
|
||||
id: "4", imageSrc: "http://img.b2bpic.net/free-photo/close-up-empty-waste-plastic-water-bottle-sand_23-2148214464.jpg?_wi=1", imageAlt: "Waste reduction"},
|
||||
{
|
||||
id: "5", imageSrc: "http://img.b2bpic.net/free-photo/ocean-pollution-concept-cropped-shot-busy-volunteers-pick-up-old-shoes-other-garbage-bags_273609-43687.jpg?_wi=1", imageAlt: "Clean beach"},
|
||||
{
|
||||
id: "6", imageSrc: "http://img.b2bpic.net/free-photo/ocean-plastic-pollution-awareness-post_53876-105253.jpg", imageAlt: "Wildlife protection"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
title="Creative Digital Designer"
|
||||
description="Crafting meaningful digital experiences that blend aesthetic beauty with functional precision. Focused on building human-centric products that make an impact."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Available for Hire"
|
||||
rating={5}
|
||||
ratingText="Over 50+ successful projects completed"
|
||||
mediaItems={[
|
||||
{ imageSrc: "https://img.b2bpic.net/free-photo/designer-working-office_23-2148494956.jpg", imageAlt: "Hero Image 1" },
|
||||
{ imageSrc: "https://img.b2bpic.net/free-photo/workspace-home-office_23-2148494956.jpg", imageAlt: "Hero Image 2" }
|
||||
]}
|
||||
buttons={[{ text: "View My Work", href: "#features" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="Our Mission"
|
||||
description="Plastic World is a dedicated platform to expose the truth about plastic pollution. We empower individuals to make sustainable choices and advocate for meaningful environmental change."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/decorative-background-with-leaf-word-love_23-2147608755.jpg"
|
||||
imageAlt="Our Mission"
|
||||
/>
|
||||
</div>
|
||||
<div id="experience" data-section="experience">
|
||||
<MetricCardFourteen
|
||||
title="Professional Journey"
|
||||
tag="Timeline"
|
||||
metrics={[
|
||||
{ id: "2024", value: "Senior Designer", description: "Leading UX initiatives for enterprise SaaS products." },
|
||||
{ id: "2021", value: "UX Lead", description: "Managed design teams and scaled component libraries." },
|
||||
{ id: "2018", value: "Front-end Dev", description: "Building accessible interfaces for global clients." }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="problems" data-section="problems">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", value: "8M", title: "Tons per year", description: "Plastic entering our oceans annually.", icon: Trash2,
|
||||
},
|
||||
{
|
||||
id: "m2", value: "500", title: "Years", description: "Time plastic takes to decompose.", icon: Clock,
|
||||
},
|
||||
{
|
||||
id: "m3", value: "100K", title: "Marine lives", description: "Lost to plastic waste every year.", icon: Fish,
|
||||
},
|
||||
]}
|
||||
title="The Reality of Waste"
|
||||
description="The numbers don't lie. Plastic is devastating our ecosystems at an alarming rate."
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
title="My Philosophy"
|
||||
description={["I believe that great design is not just about aesthetics, but about solving problems for the user. My approach combines research, creative exploration, and technical execution to deliver solutions that resonate.", "With a background in both front-end engineering and UI/UX design, I bridge the gap between creative vision and implementation excellence."]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Switch to Reusables", description: "Replace single-use bottles and bags with durable alternatives.", phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/net-string-bag-environmental-friendly-essential_53876-128873.jpg", imageAlt: "Reusables"},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/copy-space-bag-with-leaf_23-2148576698.jpg", imageAlt: "Reusables"}
|
||||
},
|
||||
{
|
||||
title: "Community Cleanups", description: "Join local efforts to remove waste from parks and beaches.", phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-girls-putting-hands-together_23-2149332152.jpg", imageAlt: "Cleanup"},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-organizing-live-shop_23-2149947469.jpg", imageAlt: "Cleanup"}
|
||||
},
|
||||
{
|
||||
title: "Proper Recycling", description: "Educate yourself on what can actually be recycled in your area.", phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/compost-still-life-concept_23-2149068966.jpg", imageAlt: "Recycle"},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/recycling-glass-bottle_23-2152005811.jpg", imageAlt: "Recycle"}
|
||||
},
|
||||
]}
|
||||
showStepNumbers={true}
|
||||
title="Practical Solutions"
|
||||
description="Small actions lead to massive change. Start with these simple daily habits."
|
||||
/>
|
||||
</div>
|
||||
<div id="problems" data-section="problems">
|
||||
<MetricCardThree
|
||||
title="What I Bring"
|
||||
description="Core competencies for digital excellence."
|
||||
metrics={[
|
||||
{ id: "1", icon: Cpu, title: "Web Development", value: "Modern" },
|
||||
{ id: "2", icon: Zap, title: "Performance Optimization", value: "Speed" },
|
||||
{ id: "3", icon: Palette, title: "UX Design", value: "Clean" },
|
||||
{ id: "4", icon: BookOpen, title: "Technical Writing", value: "Clear" }
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Alice Green", date: "Oct 2024", title: "Volunteer", quote: "I feel empowered knowing I'm making a difference.", tag: "Active", avatarSrc: "http://img.b2bpic.net/free-photo/smiley-man-holding-pot-with-small-tree_23-2148814057.jpg", imageSrc: "http://img.b2bpic.net/free-photo/leaf-heart-with-copy-space-white-background_23-2148494956.jpg?_wi=2", imageAlt: "happy community volunteer nature"},
|
||||
{
|
||||
id: "2", name: "Mark Rivers", date: "Sep 2024", title: "Advocate", quote: "Plastic World opened my eyes to real sustainability.", tag: "Advocate", avatarSrc: "http://img.b2bpic.net/free-photo/woman-dress-with-pruner_1398-5270.jpg", imageSrc: "http://img.b2bpic.net/free-photo/volunteering-concept-environment-protection-with-young-woman-activist_273609-37028.jpg?_wi=2", imageAlt: "happy community volunteer nature"},
|
||||
{
|
||||
id: "3", name: "Elena Smith", date: "Aug 2024", title: "Member", quote: "The resources here are just incredibly practical.", tag: "Learner", avatarSrc: "http://img.b2bpic.net/free-photo/tech-people-trying-achieve-ambitious-sustainability-goals_23-2150950168.jpg", imageSrc: "http://img.b2bpic.net/free-photo/group-volunteers-collecting-trash-beach_23-2147827047.jpg?_wi=2", imageAlt: "happy community volunteer nature"},
|
||||
{
|
||||
id: "4", name: "James Bond", date: "Jul 2024", title: "Leader", quote: "Together, we are actually cleaning our oceans.", tag: "Expert", avatarSrc: "http://img.b2bpic.net/free-photo/smiling-young-male-gardener-wearing-gardening-hat-holding-flower-flowerpot-isolated-green-wall_141793-83074.jpg", imageSrc: "http://img.b2bpic.net/free-photo/close-up-empty-waste-plastic-water-bottle-sand_23-2148214464.jpg?_wi=2", imageAlt: "happy community volunteer nature"},
|
||||
{
|
||||
id: "5", name: "Sarah Bell", date: "Jun 2024", title: "Student", quote: "My school project was inspired by these guides.", tag: "Student", avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-happy-kid-nature_23-2148895601.jpg", imageSrc: "http://img.b2bpic.net/free-photo/ocean-pollution-concept-cropped-shot-busy-volunteers-pick-up-old-shoes-other-garbage-bags_273609-43687.jpg?_wi=2", imageAlt: "happy community volunteer nature"},
|
||||
]}
|
||||
title="Voices for Change"
|
||||
description="Hear from the community members taking action every single day."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSix
|
||||
title="Featured Projects"
|
||||
description="A selection of projects where design meets code to solve real-world problems."
|
||||
textboxLayout="split"
|
||||
features={[
|
||||
{ title: "SaaS Dashboard", description: "High-performance interface for financial analytics.", imageSrc: "https://img.b2bpic.net/free-photo/dashboard-ui-concept_23-2148814057.jpg" },
|
||||
{ title: "Mobile Design System", description: "Unified component library for scalable apps.", imageSrc: "https://img.b2bpic.net/free-photo/mobile-app-ui_23-2148814057.jpg" }
|
||||
]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
tag="Get Involved"
|
||||
title="Join Our Community"
|
||||
description="Sign up for updates and find out how you can contribute to local plastic reduction initiatives."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/tech-people-trying-achieve-ambitious-sustainability-goals_23-2150950177.jpg"
|
||||
imageAlt="Contact us"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
testimonial="Their work truly transformed our online presence. Professional, creative, and always delivered ahead of schedule. Highly recommended for any product team."
|
||||
author="Jane Doe, CEO at TechInnovate"
|
||||
rating={5}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="opacity"
|
||||
avatars={[{ src: "https://img.b2bpic.net/free-photo/happy-woman_23-2148814057.jpg", alt: "Client" }, { src: "https://img.b2bpic.net/free-photo/professional-man_23-2148814057.jpg", alt: "Partner" }]
|
||||
}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Plastique World"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation", items: [
|
||||
{
|
||||
label: "About Us", href: "#about"},
|
||||
{
|
||||
label: "Solutions", href: "#features"},
|
||||
{
|
||||
label: "Contact", href: "#contact"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms of Use", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
tag="Get In Touch"
|
||||
title="Portfolio Inquiries"
|
||||
description="Interested in collaborating or have a question about my work? I'm always open to discussing new projects and creative opportunities."
|
||||
buttons={[{ text: "Send an Email", href: "mailto:hello@portfolio.com" }, { text: "LinkedIn", href: "https://linkedin.com/in/me" }]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Portfolio"
|
||||
columns={[
|
||||
{ title: "Navigation", items: [{ label: "Home", href: "#" }, { label: "Projects", href: "#features" }, { label: "Contact", href: "#contact" }] },
|
||||
{ title: "Connect", items: [{ label: "LinkedIn", href: "https://linkedin.com" }, { label: "Email", href: "mailto:hello@portfolio.com" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f5f5;
|
||||
--card: #ffffff;
|
||||
--foreground: #1c1c1c;
|
||||
--primary-cta: #1c1c1c;
|
||||
--primary-cta-text: #f5f5f5;
|
||||
--background: #000000;
|
||||
--card: #000000;
|
||||
--foreground: #000000;
|
||||
--primary-cta: #ffffff;
|
||||
--primary-cta-text: #000000;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #1c1c1c;
|
||||
--accent: #159c49;
|
||||
--background-accent: #a8e8ba;
|
||||
--secondary-cta-text: #ffffff;
|
||||
--accent: #ffffff;
|
||||
--background-accent: #000000;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user