From 71aeda981ee51724de0d8612c2e86ffc028d1708 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 7 Jun 2026 23:25:20 +0000
Subject: [PATCH 1/2] Update src/app/page.tsx

---
 src/app/page.tsx | 53 ++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 49 insertions(+), 4 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 588b512..645bacd 100644
--- a/src/app/page.tsx
+++ b/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>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1


From 17e9149a8bf13c86c9a63a8cdff5dcf79689f9a9 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sun, 7 Jun 2026 23:25:20 +0000
Subject: [PATCH 2/2] Add
 src/components/portalSymbolBackground/PortalSymbolBackground.tsx

---
 .../PortalSymbolBackground.tsx                | 85 +++++++++++++++++++
 1 file changed, 85 insertions(+)
 create mode 100644 src/components/portalSymbolBackground/PortalSymbolBackground.tsx

diff --git a/src/components/portalSymbolBackground/PortalSymbolBackground.tsx b/src/components/portalSymbolBackground/PortalSymbolBackground.tsx
new file mode 100644
index 0000000..affa44f
--- /dev/null
+++ b/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>
+  );
+}
-- 
2.49.1