Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -4,14 +4,15 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
-import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import { Briefcase, Code, Award, Users } from "lucide-react";
-import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
-import TextAbout from '@/components/sections/about/TextAbout';
 
-export default function LandingPage() {
+export default function PortfolioPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="expand-hover"
@@ -26,289 +27,104 @@ export default function LandingPage() {
         headingFontWeight="bold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+        <div id="nav" data-section="nav">
-      <NavbarStyleApple
+            <NavbarStyleApple
-      navItems={[
+                navItems={[
-        {
+                    { name: "About", id: "about" },
-          name: "About",
+                    { name: "Experience", id: "experience" },
-          id: "about",
+                    { name: "Projects", id: "projects" },
-        },
+                    { name: "Testimonials", id: "testimonials" },
-        {
+                    { name: "Contact", id: "contact" },
-          name: "Experience",
+                ]}
-          id: "experience",
+                brandName="Portfolio"
-        },
+            />
-        {
+        </div>
-          name: "Projects",
-          id: "projects",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="Portfolio"
-    />
-  </div>
 
-  <div id="hero" data-section="hero">
+        <div id="hero" data-section="hero">
-      <HeroBillboard
+            <HeroBillboardGallery
-      background={{
+                background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars",
+                title="Creative Developer"
-      }}
+                description="Crafting digital solutions that blend aesthetics with functionality. Turning complex problems into intuitive experiences."
-      title="Building Digital Excellence"
+                mediaItems={[
-      description="Experienced developer dedicated to creating intuitive, scalable, and high-performance software solutions. Let's build your next big thing."
+                    { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bz1b2AeRyCotz14hcA8uNu1UwL/uploaded-1775477316015-42qlt5vo.jpg?_wi=1", imageAlt: "Project 1" },
-      buttons={[
+                    { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bz1b2AeRyCotz14hcA8uNu1UwL/uploaded-1775477316015-42qlt5vo.jpg?_wi=2", imageAlt: "Project 2" },
-        {
+                    { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bz1b2AeRyCotz14hcA8uNu1UwL/uploaded-1775477316015-42qlt5vo.jpg?_wi=3", imageAlt: "Project 3" }
-          text: "View Resume",
+                ]}
-          href: "#about",
+                buttons={[{ text: "Explore Work", href: "#projects" }, { text: "Get in touch", href: "#contact" }]}
-        },
+            />
-        {
+        </div>
-          text: "Contact Me",
-          href: "#contact",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/empty-modern-corporate-high-end-office-space-designed-ceo_482257-101274.jpg"
-      imageAlt="Professional Portfolio Hero"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/crazy-businessman-worried-expression_1194-3838.jpg",
-          alt: "Team Member",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/woman-young-adult-expertise-smiling-hospital_1134-1350.jpg",
-          alt: "Team Member",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/bearded-man-wearing-white-shirt-with-serious-face-with-arms-crossed-chest-standing-light-wall_141793-56741.jpg",
-          alt: "Team Member",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/confident-businessman-with-beard-smiling-camera-generated-by-ai_188544-33152.jpg",
-          alt: "Team Member",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/senior-businessman_1098-13804.jpg",
-          alt: "Team Member",
-        },
-      ]}
-      avatarText="Trusted by industry experts"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "React.js",
-        },
-        {
-          type: "text",
-          text: "TypeScript",
-        },
-        {
-          type: "text",
-          text: "Node.js",
-        },
-        {
-          type: "text",
-          text: "Cloud Architecture",
-        },
-        {
-          type: "text",
-          text: "System Design",
-        },
-      ]}
-    />
-  </div>
 
-  <div id="about" data-section="about">
+        <div id="about" data-section="about">
-      <TextAbout
+            <TextSplitAbout
-      useInvertedBackground={false}
+                title="About Me"
-      title="About Me"
+                useInvertedBackground={false}
-      buttons={[
+                description={["I am a passionate software developer with a focus on building scalable web applications. My background spans across front-end design and back-end architecture.", "I believe in clean code and collaborative growth, consistently looking for new ways to optimize user experiences."]}
-        {
+            />
-          text: "Download CV",
+        </div>
-          href: "#",
-        },
-      ]}
-    />
-  </div>
 
-  <div id="experience" data-section="experience">
+        <div id="experience" data-section="experience">
-      <MetricCardTwo
+            <MetricCardOne
-      animationType="slide-up"
+                gridVariant="uniform-all-items-equal"
-      textboxLayout="split"
+                animationType="slide-up"
-      gridVariant="uniform-all-items-equal"
+                textboxLayout="split"
-      useInvertedBackground={true}
+                useInvertedBackground={false}
-      metrics={[
+                title="Technical Expertise"
-        {
+                description="A showcase of professional milestones and core competencies."
-          id: "1",
+                metrics={[
-          value: "5+",
+                    { id: "1", value: "5+", title: "Years Experience", description: "Dedicated software development journey", icon: Briefcase },
-          description: "Years of experience in software development",
+                    { id: "2", value: "50+", title: "Projects Completed", description: "Diverse industry solutions", icon: Code },
-        },
+                    { id: "3", value: "100%", title: "Quality Driven", description: "Commitment to clean and performant code", icon: Award },
-        {
+                    { id: "4", value: "20+", title: "Global Partners", description: "Collaborating with teams worldwide", icon: Users }
-          id: "2",
+                ]}
-          value: "20+",
+            />
-          description: "Successful projects delivered across industries",
+        </div>
-        },
-        {
-          id: "3",
-          value: "100%",
-          description: "Dedicated commitment to high quality code",
-        },
-        {
-          id: "4",
-          value: "12+",
-          description: "Global clients supported",
-        },
-        {
-          id: "5",
-          value: "500k+",
-          description: "Lines of production code written",
-        },
-      ]}
-      title="Career Milestones"
-      description="A deep dive into my professional track record and commitment to excellence."
-    />
-  </div>
 
-  <div id="projects" data-section="projects">
+        <div id="projects" data-section="projects">
-      <ProductCardOne
+            <ProductCardThree
-      animationType="slide-up"
+                title="Selected Work"
-      textboxLayout="split"
+                textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
+                gridVariant="bento-grid"
-      useInvertedBackground={false}
+                animationType="slide-up"
-      products={[
+                useInvertedBackground={false}
-        {
+                description="Curated list of technical projects demonstrating diverse problem-solving skills."
-          id: "1",
+                products={[
-          name: "Software Dashboard",
+                    { id: "1", name: "Design System", price: "Web App", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bz1b2AeRyCotz14hcA8uNu1UwL/uploaded-1775477316015-42qlt5vo.jpg?_wi=4" },
-          price: "SaaS Platform",
+                    { id: "2", name: "E-commerce Platform", price: "SaaS", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bz1b2AeRyCotz14hcA8uNu1UwL/uploaded-1775477316015-42qlt5vo.jpg?_wi=5" },
-          imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-looking-computer-monitor-with-charts-analyzing-statistics-information-data-create-project-report-doing-financial-research-pc-screen-with-network-presentation_482257-46960.jpg",
+                    { id: "3", name: "Fintech Dashboard", price: "Fintech", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bz1b2AeRyCotz14hcA8uNu1UwL/uploaded-1775477316015-42qlt5vo.jpg?_wi=6" }
-        },
+                ]}
-        {
+            />
-          id: "2",
+        </div>
-          name: "Mobile Productivity App",
-          price: "Mobile App",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-illustration-closed-black-gift-box_107791-18203.jpg",
-        },
-        {
-          id: "3",
-          name: "Productivity Hub",
-          price: "Web App",
-          imageSrc: "http://img.b2bpic.net/free-photo/mockup-copy-space-blank-screen-concept_53876-120457.jpg",
-        },
-        {
-          id: "4",
-          name: "Analytics Component",
-          price: "UI Kit",
-          imageSrc: "http://img.b2bpic.net/free-vector/fitness-mobile-app-infographic-template-flat-style_23-2148219822.jpg",
-        },
-        {
-          id: "5",
-          name: "Development Tool",
-          price: "Dev Tool",
-          imageSrc: "http://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18937.jpg",
-        },
-        {
-          id: "6",
-          name: "Design Concept",
-          price: "Concept",
-          imageSrc: "http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-122738.jpg",
-        },
-      ]}
-      title="Featured Projects"
-      description="A collection of my latest work spanning various industries and technologies."
-    />
-  </div>
 
-  <div id="testimonials" data-section="testimonials">
+        <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTen
+            <TestimonialCardTwo
-      textboxLayout="split"
+                title="Client Stories"
-      useInvertedBackground={true}
+                textboxLayout="split"
-      testimonials={[
+                animationType="slide-up"
-        {
+                useInvertedBackground={false}
-          id: "1",
+                description="Feedback from clients regarding previous collaborations and project outcomes."
-          title: "Expertise",
+                testimonials={[
-          quote: "Exceptional development skills and professional approach.",
+                    { id: "1", name: "Alex P.", role: "Founder", testimonial: "Fantastic work. Understood the requirements instantly and delivered high-quality results.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bz1b2AeRyCotz14hcA8uNu1UwL/uploaded-1775477316015-42qlt5vo.jpg?_wi=7" }
-          name: "Sarah J.",
+                ]}
-          role: "CEO",
+            />
-          imageSrc: "http://img.b2bpic.net/free-photo/crazy-businessman-worried-expression_1194-3838.jpg",
+        </div>
-        },
-        {
-          id: "2",
-          title: "Efficiency",
-          quote: "Delivered high-quality results ahead of schedule.",
-          name: "Michael R.",
-          role: "CTO",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-young-adult-expertise-smiling-hospital_1134-1350.jpg",
-        },
-        {
-          id: "3",
-          title: "Innovation",
-          quote: "Always brings creative, modern solutions to problems.",
-          name: "Emily D.",
-          role: "Product Manager",
-          imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-wearing-white-shirt-with-serious-face-with-arms-crossed-chest-standing-light-wall_141793-56741.jpg",
-        },
-        {
-          id: "4",
-          title: "Communication",
-          quote: "Great to work with, responsive and very clear.",
-          name: "David L.",
-          role: "Marketing Director",
-          imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman-with-beard-smiling-camera-generated-by-ai_188544-33152.jpg",
-        },
-        {
-          id: "5",
-          title: "Reliability",
-          quote: "Solid codebase, highly recommended for any team.",
-          name: "Jessica W.",
-          role: "Founder",
-          imageSrc: "http://img.b2bpic.net/free-photo/senior-businessman_1098-13804.jpg",
-        },
-      ]}
-      title="Client Feedback"
-      description="What partners and colleagues have to say about my work."
-    />
-  </div>
 
-  <div id="contact" data-section="contact">
+        <div id="contact" data-section="contact">
-      <ContactSplitForm
+            <ContactSplitForm
-      useInvertedBackground={false}
+                title="Let's Connect"
-      title="Get In Touch"
+                description="Open for new projects and collaborations. Reach out to discuss how we can work together."
-      description="Have an exciting project? I'd love to hear from you. Send me a message!"
+                useInvertedBackground={false}
-      inputs={[
+                inputs={[{ name: "name", type: "text", placeholder: "Name" }, { name: "email", type: "email", placeholder: "Email" }]}
-        {
+                imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Bz1b2AeRyCotz14hcA8uNu1UwL/uploaded-1775477316015-42qlt5vo.jpg?_wi=8"
-          name: "name",
+            />
-          type: "text",
+        </div>
-          placeholder: "Your Name",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Your Email",
-          required: true,
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "Project details...",
-        rows: 4,
-      }}
-      imageSrc="http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994395.jpg"
-    />
-  </div>
 
-  <div id="footer" data-section="footer">
+        <div id="footer" data-section="footer">
-      <FooterLogoReveal
+            <FooterLogoReveal
-      logoText="Portfolio"
+                logoText="Portfolio"
-      leftLink={{
+                leftLink={{ text: "Privacy Policy", href: "#" }}
-        text: "Privacy Policy",
+                rightLink={{ text: "© 2024 Portfolio", href: "#" }}
-        href: "#",
+            />
-      }}
+        </div>
-      rightLink={{
-        text: "Built by Portfolio",
-        href: "#",
-      }}
-    />
-  </div>
       </ReactLenis>
     </ThemeProvider>
   );