Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -12,7 +12,8 @@ import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
-import { Award, Briefcase, Eye, Film, Lightbulb, Loader, Paintbrush, Sparkles, Star } from "lucide-react";
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+import { Award, Briefcase, Eye, Film, Lightbulb, Loader, Paintbrush, Sparkles, Star, CreditCard, ShieldCheck, MessageSquare } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -41,9 +42,13 @@ export default function LandingPage() {
         {
           name: "Pricing",          id: "#pricing"},
         {
-          name: "Trust",          id: "#testimonials"},
+          name: "Payment Methods",          id: "#payment-methods"},
+        {
+          name: "Trust",          id: "#trust-badges"},
         {
           name: "Book a Demo",          id: "#contact"},
+        {
+          name: "Contact Us",          id: "#contact-form"},
       ]}
       brandName="PROJECTK ꓯ"
     />
@@ -199,6 +204,32 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="payment-methods" data-section="payment-methods">
+      <SocialProofOne
+      textboxLayout="default"
+      useInvertedBackground={false}
+      tag="Secure Payments"
+      tagIcon={CreditCard}
+      title="Flexible Payment Options | طرق دفع مرنة"
+      description="We support a wide range of secure and convenient payment methods to ensure a smooth experience for our clients."
+      names={[
+        "Apple Pay",        "مدى",        "Visa",        "Mastercard",        "تحويل بنكي"]}
+    />
+  </div>
+
+  <div id="trust-badges" data-section="trust-badges">
+      <SocialProofOne
+      textboxLayout="default"
+      useInvertedBackground={true}
+      tag="Transparency Guaranteed"
+      tagIcon={ShieldCheck}
+      title="Building Trust & Transparency | بناء الثقة والشفافية"
+      description="Your peace of mind is our priority. We are officially registered and recognized."
+      names={[
+        "Maroof",        "Commercial Registration"]}
+    />
+  </div>
+
   <div id="testimonials" data-section="testimonials">
       <TestimonialCardFifteen
       useInvertedBackground={false}
@@ -248,6 +279,20 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="contact-form" data-section="contact-form">
+      <ContactCenter
+      useInvertedBackground={false}
+      background={{
+        variant: "radial-gradient"}}
+      tag="Get in Touch"
+      tagIcon={MessageSquare}
+      title="We'd Love to Hear From You | نحن هنا لمساعدتك"
+      description="Reach out to us with any questions or inquiries. Our team is ready to assist you. Please note that custom bilingual fields (Full Name, Phone Number, Company Name, Message) are not supported by the current ContactCenter component's prop schema. The form below uses a generic email input."
+      inputPlaceholder="Your Email | بريدك الإلكتروني"
+      buttonText="Send Message | إرسال الرسالة"
+    />
+  </div>
+
   <div id="footer" data-section="footer">
       <FooterMedia
       videoSrc="http://img.b2bpic.net/free-photo/blurred-night-lights_23-2148139262.jpg"
@@ -279,7 +324,7 @@ export default function LandingPage() {
             {
               label: "FAQ",              href: "#"},
             {
-              label: "Contact",              href: "#contact"},
+              label: "Contact",              href: "#contact-form"},
             {
               label: "Terms of Service",              href: "#"},
           ],
@@ -291,4 +336,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/components/portalSymbolBackground/PortalSymbolBackground.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { useEffect, useRef } from 'react';
+import gsap from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+gsap.registerPlugin(ScrollTrigger);
+
+export default function PortalSymbolBackground() {
+  const symbolRef = useRef(null);
+
+  useEffect(() => {
+    const symbolElement = symbolRef.current;
+    if (!symbolElement) return;
+
+    // Initial state for the symbol
+    gsap.set(symbolElement, { scale: 1, opacity: 0.01, rotate: 0, filter: 'blur(0px)' });
+
+    ScrollTrigger.create({
+      trigger: "body", // The entire scrollable document
+      start: "top top", // When the top of the body hits the top of the viewport
+      end: "bottom top", // When the bottom of the body hits the top of the viewport
+      scrub: 1, // Smoothly animate over scroll
+      onUpdate: (self) => {
+        const progress = self.progress;
+
+        // Scale the symbol, fade its opacity, rotate, and add blur as we scroll
+        const scale = 1 + progress * 5; // Grow up to 6 times original size
+        const opacity = 0.01 + progress * 0.15; // Fade from very low to slightly visible
+        const rotate = progress * 720 * 0.1; // Rotate slowly, 0.1 times a full rotation over scroll
+        const blur = progress * 20; // Add blur effect, max 20px
+
+        gsap.to(symbolElement, {
+          scale: scale,
+          opacity: opacity,
+          rotate: rotate,
+          filter: `blur(${blur}px)`,
+          ease: "none",          duration: 0
+        });
+
+        // Fade out other content sections for a cinematic feel
+        const sectionsToFade = [
+          document.getElementById('hero'),
+          document.getElementById('about'),
+          document.getElementById('features'),
+          document.getElementById('products'),
+          document.getElementById('pricing'),
+          document.getElementById('testimonials'),
+          document.getElementById('social-proof'),
+          document.getElementById('contact'),
+          document.getElementById('footer'),
+        ];
+
+        sectionsToFade.forEach(section => {
+          if (section) {
+            // Fade sections to a lower opacity, not completely out, as the symbol becomes prominent
+            const sectionFadeProgress = Math.min(1, progress * 2); // Accelerate fading for initial sections
+            gsap.to(section, { opacity: 1 - sectionFadeProgress * 0.5, ease: "power1.out", duration: 0 });
+          }
+        });
+      },
+    });
+
+    // Cleanup function for ScrollTrigger to prevent multiple instances on re-renders
+    return () => {
+      ScrollTrigger.getAll().forEach(trigger => trigger.kill());
+    };
+  }, []); // Re-run effect only on mount/unmount
+
+  return (
+    <div
+      ref={symbolRef}
+      className="fixed inset-0 flex items-center justify-center pointer-events-none"
+      style={{ zIndex: -10 }} // Ensure it's far behind all other content
+      aria-hidden="true"
+    >
+      <span
+        className="text-[calc(70vw)] font-extrabold text-white leading-none tracking-tighter"
+        style={{ transformOrigin: 'center center', willChange: 'transform, opacity, filter' }}
+      >
+        ꓯ
+      </span>
+    </div>
+  );
+}