Update src/app/portfolio/page.tsx

Merge version_2 into main

src/app/features/page.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
+import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function FeaturesPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="compact"
+        sizing="large"
+        background="grid"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="glass"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/" },
+              { name: "Services", id: "/" },
+              { name: "Portfolio", id: "/portfolio" },
+              { name: "Features", id: "/features" },
+              { name: "Contact", id: "/" },
+            ]}
+            brandName="EditPro Agency"
+          />
+        </div>
+
+        <div id="pricing" data-section="pricing">
+          <PricingCardOne
+            title="Flexible Pricing"
+            description="Choose the plan that fits your production needs."
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            plans={[
+              {
+                id: "p1",                badge: "Starter",                price: "$99",                subtitle: "Per Project",                features: ["Basic Color Grading", "Audio Balancing", "1 Round Revision"]
+              },
+              {
+                id: "p2",                badge: "Pro",                price: "$299",                subtitle: "Per Month",                features: ["Advanced Color Grading", "Sound Design", "Unlimited Revisions", "Priority Support"]
+              }
+            ]}
+          />
+        </div>
+
+        <div id="social-proof" data-section="social-proof">
+          <SocialProofOne
+            title="Trusted by Industry Leaders"
+            description="We've helped brands grow their reach and impact."
+            names={["Netflix", "Adobe", "Meta", "Spotify", "Google"]}
+            textboxLayout="default"
+            useInvertedBackground={false}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[]}
+            logoText="EditPro Agency"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -32,21 +32,13 @@ export default function LandingPage() {
       <NavbarStyleFullscreen
       navItems={[
         {
-          name: "About",
-          id: "about",
-        },
+          name: "About",          id: "about"},
         {
-          name: "Services",
-          id: "features",
-        },
+          name: "Services",          id: "features"},
         {
-          name: "Portfolio",
-          id: "portfolio",
-        },
+          name: "Portfolio",          id: "/portfolio"},
         {
-          name: "Contact",
-          id: "contact",
-        },
+          name: "Contact",          id: "contact"},
       ]}
       brandName="EditPro Agency"
     />
@@ -56,98 +48,55 @@ export default function LandingPage() {
       <HeroSplitTestimonial
       useInvertedBackground={false}
       background={{
-        variant: "gradient-bars",
-      }}
+        variant: "gradient-bars"}}
       title="Precision Editing for High-Growth Brands"
       description="We turn raw footage into cinematic experiences that captivate your audience and grow your business."
       buttons={[
         {
-          text: "View Our Portfolio",
-          href: "#portfolio",
-        },
+          text: "View Our Portfolio",          href: "/portfolio"},
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/electronic-gadgets-used-podcasting_482257-91517.jpg"
       mediaAnimation="blur-reveal"
       testimonials={[
         {
-          name: "Sarah J.",
-          handle: "@sarah_creative",
-          testimonial: "EditPro turned our raw footage into a viral sensation.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/authentic-small-youthful-marketing-agency_23-2150167407.jpg",
-        },
+          name: "Sarah J.",          handle: "@sarah_creative",          testimonial: "EditPro turned our raw footage into a viral sensation.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/authentic-small-youthful-marketing-agency_23-2150167407.jpg"},
         {
-          name: "Mark D.",
-          handle: "@mark_tech",
-          testimonial: "Professional, fast, and incredibly intuitive.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-man-glasses-freelancer-sitting-cafe-with-laptop-drinking-coffee-pointing-fingers_1258-314116.jpg",
-        },
+          name: "Mark D.",          handle: "@mark_tech",          testimonial: "Professional, fast, and incredibly intuitive.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/happy-young-man-glasses-freelancer-sitting-cafe-with-laptop-drinking-coffee-pointing-fingers_1258-314116.jpg"},
         {
-          name: "Elena V.",
-          handle: "@elena_media",
-          testimonial: "The best editing team we have ever partnered with.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/business-people-working-laptop_53876-20848.jpg",
-        },
+          name: "Elena V.",          handle: "@elena_media",          testimonial: "The best editing team we have ever partnered with.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/business-people-working-laptop_53876-20848.jpg"},
         {
-          name: "Tom K.",
-          handle: "@tom_ventures",
-          testimonial: "Quality that really makes our brand stand out.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-employees-looking-laptop-laughing_74855-4007.jpg",
-        },
+          name: "Tom K.",          handle: "@tom_ventures",          testimonial: "Quality that really makes our brand stand out.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-employees-looking-laptop-laughing_74855-4007.jpg"},
         {
-          name: "Jasmine L.",
-          handle: "@jasmine_film",
-          testimonial: "Seamless communication and breathtaking results.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/traveler-female-holds-digital-photo-camera-takeaway-coffee-grey-background_613910-9804.jpg",
-        },
+          name: "Jasmine L.",          handle: "@jasmine_film",          testimonial: "Seamless communication and breathtaking results.",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/traveler-female-holds-digital-photo-camera-takeaway-coffee-grey-background_613910-9804.jpg"},
       ]}
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/positive-female-tourist-with-photo-camera-travel-backpack_613910-7144.jpg",
-          alt: "Client 1",
-        },
+          src: "http://img.b2bpic.net/free-photo/positive-female-tourist-with-photo-camera-travel-backpack_613910-7144.jpg",          alt: "Client 1"},
         {
-          src: "http://img.b2bpic.net/free-photo/smiley-woman-sitting-photography-umbrella-studio_23-2148424424.jpg",
-          alt: "Client 2",
-        },
+          src: "http://img.b2bpic.net/free-photo/smiley-woman-sitting-photography-umbrella-studio_23-2148424424.jpg",          alt: "Client 2"},
         {
-          src: "http://img.b2bpic.net/free-photo/attractive-blond-female-photographer-taking-pictures-with-professional-camera-tripod_613910-3601.jpg",
-          alt: "Client 3",
-        },
+          src: "http://img.b2bpic.net/free-photo/attractive-blond-female-photographer-taking-pictures-with-professional-camera-tripod_613910-3601.jpg",          alt: "Client 3"},
         {
-          src: "http://img.b2bpic.net/free-photo/business-woman-evening-street_1303-3828.jpg",
-          alt: "Client 4",
-        },
+          src: "http://img.b2bpic.net/free-photo/business-woman-evening-street_1303-3828.jpg",          alt: "Client 4"},
         {
-          src: "http://img.b2bpic.net/free-photo/model-suit-posing-studio_1303-12438.jpg",
-          alt: "Client 5",
-        },
+          src: "http://img.b2bpic.net/free-photo/model-suit-posing-studio_1303-12438.jpg",          alt: "Client 5"},
       ]}
       marqueeItems={[
         {
-          type: "text",
-          text: "Color Grading",
-        },
+          type: "text",          text: "Color Grading"},
         {
-          type: "text",
-          text: "Sound Design",
-        },
+          type: "text",          text: "Sound Design"},
         {
-          type: "text",
-          text: "Post-Production",
-        },
+          type: "text",          text: "Post-Production"},
         {
-          type: "text",
-          text: "Creative Editing",
-        },
+          type: "text",          text: "Creative Editing"},
         {
-          type: "text",
-          text: "Workflow Optimization",
-        },
+          type: "text",          text: "Workflow Optimization"},
       ]}
     />
   </div>
@@ -158,9 +107,7 @@ export default function LandingPage() {
       title="We deliver storytelling that moves metrics."
       buttons={[
         {
-          text: "Contact Us",
-          href: "#contact",
-        },
+          text: "Contact Us",          href: "#contact"},
       ]}
     />
   </div>
@@ -171,75 +118,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          title: "Expert Color Grading",
-          description: "Professional color science to match your brand identity.",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-videographer-working-with-dual-monitors-creative-agency_482257-126384.jpg",
-        },
+          title: "Expert Color Grading",          description: "Professional color science to match your brand identity.",          imageSrc: "http://img.b2bpic.net/free-photo/female-videographer-working-with-dual-monitors-creative-agency_482257-126384.jpg"},
         {
-          title: "Precision Audio Mixing",
-          description: "Crisp dialogue and immersive soundscapes.",
-          imageSrc: "http://img.b2bpic.net/free-photo/digital-mixer-recording-studio-work-with-sound_169016-3813.jpg",
-        },
+          title: "Precision Audio Mixing",          description: "Crisp dialogue and immersive soundscapes.",          imageSrc: "http://img.b2bpic.net/free-photo/digital-mixer-recording-studio-work-with-sound_169016-3813.jpg"},
         {
-          title: "High-Speed Editing",
-          description: "Seamless workflows for rapid content delivery.",
-          imageSrc: "http://img.b2bpic.net/free-photo/male-video-editor-works-from-modern-home-office-living-room_482257-124269.jpg",
-        },
+          title: "High-Speed Editing",          description: "Seamless workflows for rapid content delivery.",          imageSrc: "http://img.b2bpic.net/free-photo/male-video-editor-works-from-modern-home-office-living-room_482257-124269.jpg"},
       ]}
       title="Our Editing Expertise"
       description="From color grading to sound design, we handle every detail of the post-production workflow."
     />
   </div>
 
-  <div id="portfolio" data-section="portfolio">
-      <ProductCardThree
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "1",
-          name: "Short Film Project",
-          price: "View Project",
-          imageSrc: "http://img.b2bpic.net/free-photo/team-videographers-with-protection-masks-working-video-project-creating-content-man-blogger-sitting-wheelchair-new-normal-office-disabled-freelancer-editing-video-durig-global-pandemic_482257-13030.jpg",
-        },
-        {
-          id: "2",
-          name: "Social Promo Reel",
-          price: "View Project",
-          imageSrc: "http://img.b2bpic.net/free-photo/photographer-using-headphones-listen-favorite-songs-while-using-retouching-software_482257-82252.jpg",
-        },
-        {
-          id: "3",
-          name: "Corporate Documentary",
-          price: "View Project",
-          imageSrc: "http://img.b2bpic.net/free-photo/african-american-law-agent-putting-clues-board-trying-conduct-private-investigation-incident-room-young-police-officer-examining-photos-forensic-evidence-map-detective-work_482257-71990.jpg",
-        },
-        {
-          id: "4",
-          name: "High-Energy Music Video",
-          price: "View Project",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-boy-playing-guitar_23-2149542287.jpg",
-        },
-        {
-          id: "5",
-          name: "Storytelling Campaign",
-          price: "View Project",
-          imageSrc: "http://img.b2bpic.net/free-photo/friends-firing-range-shooting-zooming-check-points-scored-bullseyes_482257-125728.jpg",
-        },
-        {
-          id: "6",
-          name: "Luxury Fashion Promo",
-          price: "View Project",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-office-workspace-equipped-digital-design-photo-editing_482257-125052.jpg",
-        },
-      ]}
-      title="Selected Work"
-      description="A glimpse into our recent editorial projects."
-    />
-  </div>
-
   <div id="metrics" data-section="metrics">
       <MetricCardSeven
       animationType="slide-up"
@@ -247,34 +136,16 @@ export default function LandingPage() {
       useInvertedBackground={false}
       metrics={[
         {
-          id: "m1",
-          value: "150+",
-          title: "Projects Completed",
-          items: [
-            "Commercials",
-            "Socials",
-            "Documentaries",
-          ],
+          id: "m1",          value: "150+",          title: "Projects Completed",          items: [
+            "Commercials",            "Socials",            "Documentaries"],
         },
         {
-          id: "m2",
-          value: "40%",
-          title: "Avg. Engagement Lift",
-          items: [
-            "Retention",
-            "Watch Time",
-            "Shares",
-          ],
+          id: "m2",          value: "40%",          title: "Avg. Engagement Lift",          items: [
+            "Retention",            "Watch Time",            "Shares"],
         },
         {
-          id: "m3",
-          value: "5M+",
-          title: "Total Views",
-          items: [
-            "YouTube",
-            "Instagram",
-            "TikTok",
-          ],
+          id: "m3",          value: "5M+",          title: "Total Views",          items: [
+            "YouTube",            "Instagram",            "TikTok"],
         },
       ]}
       title="Proven Results"
@@ -290,25 +161,15 @@ export default function LandingPage() {
       author="Jane Smith, Marketing Director at TechGrowth"
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/close-up-smiley-people-work_23-2149097919.jpg",
-          alt: "Client 1",
-        },
+          src: "http://img.b2bpic.net/free-photo/close-up-smiley-people-work_23-2149097919.jpg",          alt: "Client 1"},
         {
-          src: "http://img.b2bpic.net/free-photo/young-male-blogger-recording-station_1303-22012.jpg",
-          alt: "Client 2",
-        },
+          src: "http://img.b2bpic.net/free-photo/young-male-blogger-recording-station_1303-22012.jpg",          alt: "Client 2"},
         {
-          src: "http://img.b2bpic.net/free-photo/headshot-portrait-smiling-young-woman_1153-7291.jpg",
-          alt: "Client 3",
-        },
+          src: "http://img.b2bpic.net/free-photo/headshot-portrait-smiling-young-woman_1153-7291.jpg",          alt: "Client 3"},
         {
-          src: "http://img.b2bpic.net/free-photo/beauty-vlogger-adjusting-camera_23-2148916349.jpg",
-          alt: "Client 4",
-        },
+          src: "http://img.b2bpic.net/free-photo/beauty-vlogger-adjusting-camera_23-2148916349.jpg",          alt: "Client 4"},
         {
-          src: "http://img.b2bpic.net/free-photo/lifestyle-beauty-blogger-woman-recording-video-her-putting-makeup-talking-camera-making_1258-281529.jpg",
-          alt: "Client 5",
-        },
+          src: "http://img.b2bpic.net/free-photo/lifestyle-beauty-blogger-woman-recording-video-her-putting-makeup-talking-camera-making_1258-281529.jpg",          alt: "Client 5"},
       ]}
       ratingAnimation="slide-up"
       avatarsAnimation="slide-up"
@@ -321,20 +182,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "f1",
-          title: "How do you handle file transfers?",
-          content: "We use encrypted cloud services for secure and fast file delivery.",
-        },
+          id: "f1",          title: "How do you handle file transfers?",          content: "We use encrypted cloud services for secure and fast file delivery."},
         {
-          id: "f2",
-          title: "Do you handle custom color grading?",
-          content: "Yes, we provide professional color grading tailored to your brand.",
-        },
+          id: "f2",          title: "Do you handle custom color grading?",          content: "Yes, we provide professional color grading tailored to your brand."},
         {
-          id: "f3",
-          title: "What is the turnaround time?",
-          content: "Turnaround depends on project scope, typically 3-5 business days.",
-        },
+          id: "f3",          title: "What is the turnaround time?",          content: "Turnaround depends on project scope, typically 3-5 business days."},
       ]}
       title="Frequently Asked Questions"
       description="Everything you need to know about our editing workflow."
@@ -346,16 +198,13 @@ export default function LandingPage() {
       <ContactCTA
       useInvertedBackground={false}
       background={{
-        variant: "plain",
-      }}
+        variant: "plain"}}
       tag="Ready to Start?"
       title="Let's bring your vision to life."
       description="Send us your raw footage and let's discuss your project goals."
       buttons={[
         {
-          text: "Get Started",
-          href: "#",
-        },
+          text: "Get Started",          href: "#"},
       ]}
     />
   </div>
@@ -364,50 +213,31 @@ export default function LandingPage() {
       <FooterBase
       columns={[
         {
-          title: "Services",
-          items: [
+          title: "Services",          items: [
             {
-              label: "Color Grading",
-              href: "#",
-            },
+              label: "Color Grading",              href: "#"},
             {
-              label: "Sound Design",
-              href: "#",
-            },
+              label: "Sound Design",              href: "#"},
             {
-              label: "High-Speed Edit",
-              href: "#",
-            },
+              label: "High-Speed Edit",              href: "#"},
           ],
         },
         {
-          title: "Company",
-          items: [
+          title: "Company",          items: [
             {
-              label: "About Us",
-              href: "#",
-            },
+              label: "About Us",              href: "#"},
             {
-              label: "Portfolio",
-              href: "#",
-            },
+              label: "Portfolio",              href: "/portfolio"},
             {
-              label: "Contact",
-              href: "#contact",
-            },
+              label: "Contact",              href: "#contact"},
           ],
         },
         {
-          title: "Legal",
-          items: [
+          title: "Legal",          items: [
             {
-              label: "Privacy Policy",
-              href: "#",
-            },
+              label: "Privacy Policy",              href: "#"},
             {
-              label: "Terms of Service",
-              href: "#",
-            },
+              label: "Terms of Service",              href: "#"},
           ],
         },
       ]}
@@ -417,4 +247,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/portfolio/page.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import FooterBase from '@/components/sections/footer/FooterBase';
+
+export default function PortfolioPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="text-stagger"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="rounded"
+        contentWidth="compact"
+        sizing="large"
+        background="grid"
+        cardStyle="gradient-bordered"
+        primaryButtonStyle="flat"
+        secondaryButtonStyle="glass"
+        headingFontWeight="semibold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "About", id: "about" },
+              { name: "Services", id: "features" },
+              { name: "Portfolio", id: "/portfolio" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="EditPro Agency"
+          />
+        </div>
+
+        <div id="portfolio" data-section="portfolio">
+          <ProductCardThree
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            products={[
+              {
+                id: "1",                name: "Short Film Project",                price: "Watch Now",                imageSrc: "http://img.b2bpic.net/free-photo/team-videographers-with-protection-masks-working-video-project-creating-content-man-blogger-sitting-wheelchair-new-normal-office-disabled-freelancer-editing-video-durig-global-pandemic_482257-13030.jpg"},
+              {
+                id: "2",                name: "Social Promo Reel",                price: "Watch Now",                videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DKYwqf0ZmlRcnxB1j7s4jLvRFN/uploaded-1778033363321-1tsll219.mp4"},
+              {
+                id: "3",                name: "Corporate Documentary",                price: "Watch Now",                imageSrc: "http://img.b2bpic.net/free-photo/african-american-law-agent-putting-clues-board-trying-conduct-private-investigation-incident-room-young-police-officer-examining-photos-forensic-evidence-map-detective-work_482257-71990.jpg"},
+            ]}
+            title="Our Video Portfolio"
+            description="Experience our latest cinematic work in motion."
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              { title: "Services", items: [{ label: "Color Grading", href: "#" }, { label: "Sound Design", href: "#" }] },
+              { title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Portfolio", href: "/portfolio" }] },
+            ]}
+            logoText="EditPro Agency"
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}