Update src/app/page.tsx

Merge version_2 into main

src/app/blog/page.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import LegalSection from "@/components/legal/LegalSection";
+import { Layers, Sparkles, Star, Users, Globe, Zap, MessageCircle } from "lucide-react"; // Ensure MessageCircle is imported
+
+export default function BlogPage() {
+    const navItems = [
+        { name: "Home", id: "home" },
+        { name: "Services", id: "services" },
+        { name: "Work", id: "work" },
+        { name: "Contact", id: "contact" }
+    ];
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="pill"
+            contentWidth="medium"
+            sizing="medium"
+            background="aurora"
+            cardStyle="layered-gradient"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="medium"
+        >
+            <ReactLenis root>
+                <NavbarLayoutFloatingInline
+                    navItems={navItems}
+                    brandName="Studio"
+                    button={{ text: "Get in Touch", href: "#contact" }}
+                />
+                <div id="blog" data-section="blog" className="py-20">
+                    <LegalSection
+                        layout="page"
+                        title="مدونتنا"
+                        subtitle="اكتشف آخر الأخبار والمقالات والنصائح من استوديو."
+                        sections={[
+                            {
+                                heading: "مرحباً بكم في مدونة استوديو",                                content: [
+                                    { type: "paragraph", text: "هنا ستجد أحدث الأفكار والتحليلات حول تصميم الويب، التطوير، التسويق الرقمي، والتقنيات الناشئة. هدفنا هو تزويدك بالمعرفة التي تحتاجها للنجاح في المشهد الرقمي المتطور باستمرار."
+                                    }
+                                ]
+                            },
+                            {
+                                heading: "مقالات مميزة",                                content: [
+                                    { type: "list", items: ["كيفية بناء موقع ويب ناجح لعملك", "أفضل ممارسات تحسين محركات البحث لعام 2024", "مستقبل تصميم تجربة المستخدم: الاتجاهات القادمة"]
+                                    }
+                                ]
+                            }
+                        ]}
+                    />
+                </div>
+                <FooterBaseReveal
+                    logoText="استوديو"
+                    copyrightText="© 2025 استوديو. جميع الحقوق محفوظة."
+                    columns={[
+                        {
+                            title: "روابط سريعة",                            items: [
+                                { label: "من نحن", href: "#about" },
+                                { label: "الخدمات", href: "#services" },
+                                { label: "المدونة", href: "/blog" }
+                            ]
+                        },
+                        {
+                            title: "قانوني",                            items: [
+                                { label: "سياسة الخصوصية", href: "/privacy-policy" },
+                                { label: "الشروط والأحكام", href: "/terms-and-conditions" }
+                            ]
+                        }
+                    ]}
+                />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}

src/app/layout.tsx

@@ -8,19 +8,17 @@ import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 
 const halant = Halant({
-  variable: "--font-halant",
+  variable: "--font-halant",  subsets: ["latin"],
-  subsets: ["latin"],
   weight: ["300", "400", "500", "600", "700"],
 });
 
 const inter = Inter({
-  variable: "--font-inter",
+  variable: "--font-inter",  subsets: ["latin"],
-  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: 'Webild: Creative Web Agency & Digital Solutions',
+  title: 'Digital Solutions Agency: Web Development, Design & Marketing',
-  description: 'Webild is a creative web agency crafting stunning, high-performance websites and digital experiences. Elevate your brand with our expert design and development.',
+  description: 'Your partner for cutting-edge digital solutions, including web development, design, and marketing. We help businesses thrive online.',
 };
 
 export default function RootLayout({
@@ -45,4 +43,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -5,23 +5,28 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
 import TextAbout from "@/components/sections/about/TextAbout";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
-import { Sparkles, Users, Globe, Zap, Star, Layers, Twitter, Instagram, Linkedin } from "lucide-react";
+import { Sparkles, Users, Globe, Zap, Star, Layers, MessageCircle } from "lucide-react";
 import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
 import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
 import FeatureCardNineteen from "@/components/sections/feature/FeatureCardNineteen";
 import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
 import { Check, Code, Palette, TrendingUp } from "lucide-react";
-import ContactText from "@/components/sections/contact/ContactText";
+import ContactSplit from "@/components/sections/contact/ContactSplit";
-import FooterCard from "@/components/sections/footer/FooterCard";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
 
 export default function WebAgencyThemePage() {
     const navItems = [
         { name: "Home", id: "home" },
         { name: "Services", id: "services" },
         { name: "Work", id: "work" },
-        { name: "Contact", id: "contact" },
+        { name: "Contact", id: "contact" }
     ];
 
+    const handleFormSubmit = (email: string) => {
+        console.log("Lead submitted:", email);
+        alert(`Thank you for your interest! We'll be in touch at ${email}.`);
+    };
+
     return (
         <ThemeProvider
             defaultButtonVariant="icon-arrow"
@@ -51,17 +56,15 @@ export default function WebAgencyThemePage() {
                     kpis={[
                         { value: "150+", label: "Projects Delivered" },
                         { value: "98%", label: "Client Satisfaction" },
-                        { value: "12+", label: "Years Experience" },
+                        { value: "12+", label: "Years Experience" }
                     ]}
                     buttons={[
                         {
-                            text: "Start Project",
+                            text: "Start Project",                            href: "#contact"
-                            href: "#contact",
                         },
                         {
-                            text: "View Work",
+                            text: "View Work",                            href: "#work"
-                            href: "#work",
+                        }
-                        },
                     ]}
                     avatars={[
                         { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero2.webp", alt: "Team member 1" },
@@ -83,7 +86,7 @@ export default function WebAgencyThemePage() {
                         { type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/logo.svg", alt: "Logo" },
                         { type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/logo.svg", alt: "Logo" },
                         { type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/logo.svg", alt: "Logo" },
-                        { type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/logo.svg", alt: "Logo" },
+                        { type: "image", src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/logo.svg", alt: "Logo" }
                     ]}
                     marqueeClassName="md:mb-5"
                 />
@@ -91,7 +94,7 @@ export default function WebAgencyThemePage() {
                     title="We craft digital experiences that captivate audiences and drive meaningful results for ambitious brands worldwide."
                     buttons={[
                         { text: "Our Process", href: "#process" },
-                        { text: "Meet the Team", href: "#team" },
+                        { text: "Meet the Team", href: "#team" }
                     ]}
                     useInvertedBackground={false}
                 />
@@ -102,37 +105,17 @@ export default function WebAgencyThemePage() {
                     tagIcon={Layers}
                     features={[
                         {
-                            tag: "Service 01",
+                            tag: "Service 01",                            title: "01",                            subtitle: "Web Development",                            description: "Your website should be more than functional—it should resonate. We craft bespoke digital experiences that merge innovation with creativity, delivering intuitive, visually stunning platforms that captivate audiences, reflect your brand's essence, and adapt to future opportunities.",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/process/process1.webp",                            imageAlt: "Web development"
-                            title: "01",
-                            subtitle: "Web Development",
-                            description: "Your website should be more than functional—it should resonate. We craft bespoke digital experiences that merge innovation with creativity, delivering intuitive, visually stunning platforms that captivate audiences, reflect your brand's essence, and adapt to future opportunities.",
-                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/process/process1.webp",
-                            imageAlt: "Web development",
                         },
                         {
-                            tag: "Service 02",
+                            tag: "Service 02",                            title: "02",                            subtitle: "Marketing",                            description: "Impactful marketing goes beyond visibility—it creates connections. We fuse creativity with analytics to craft adaptive strategies that engage your audience authentically, keeping your brand relevant and resonant while delivering measurable results in an ever-evolving digital world.",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/process/process2.webp",                            imageAlt: "Marketing"
-                            title: "02",
-                            subtitle: "Marketing",
-                            description: "Impactful marketing goes beyond visibility—it creates connections. We fuse creativity with analytics to craft adaptive strategies that engage your audience authentically, keeping your brand relevant and resonant while delivering measurable results in an ever-evolving digital world.",
-                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/process/process2.webp",
-                            imageAlt: "Marketing",
                         },
                         {
-                            tag: "Service 03",
+                            tag: "Service 03",                            title: "03",                            subtitle: "Design",                            description: "Design is your brand's voice. We craft visuals and layouts that communicate purpose, inspire trust, and connect emotionally. By harmonizing artistry with intent, our designs transform user interactions into meaningful, memorable experiences that align with your identity.",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/process/process3.webp",                            imageAlt: "Design"
-                            title: "03",
-                            subtitle: "Design",
-                            description: "Design is your brand's voice. We craft visuals and layouts that communicate purpose, inspire trust, and connect emotionally. By harmonizing artistry with intent, our designs transform user interactions into meaningful, memorable experiences that align with your identity.",
-                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/process/process3.webp",
-                            imageAlt: "Design",
                         },
                         {
-                            tag: "Service 04",
+                            tag: "Service 04",                            title: "04",                            subtitle: "Software Development",                            description: "We build custom software that evolves with your business. By addressing unique challenges, our tailored solutions streamline workflows, eliminate inefficiencies, and foster innovation—empowering you to scale, adapt, and maintain a competitive edge in an ever-changing landscape.",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/process/process4.webp",                            imageAlt: "Software development"
-                            title: "04",
+                        }
-                            subtitle: "Software Development",
-                            description: "We build custom software that evolves with your business. By addressing unique challenges, our tailored solutions streamline workflows, eliminate inefficiencies, and foster innovation—empowering you to scale, adapt, and maintain a competitive edge in an ever-changing landscape.",
-                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/process/process4.webp",
-                            imageAlt: "Software development",
-                        },
                     ]}
                     textboxLayout="default"
                     useInvertedBackground={false}
@@ -145,7 +128,7 @@ export default function WebAgencyThemePage() {
                     metrics={[
                         { id: "clients", value: "200+", title: "Happy Clients", description: "Businesses transformed through our digital solutions", icon: Users },
                         { id: "projects", value: "500+", title: "Projects", description: "Websites and apps launched worldwide", icon: Globe },
-                        { id: "performance", value: "99%", title: "Uptime", description: "Reliable performance for all our projects", icon: Zap },
+                        { id: "performance", value: "99%", title: "Uptime", description: "Reliable performance for all our projects", icon: Zap }
                     ]}
                     gridVariant="uniform-all-items-equal"
                     animationType="depth-3d"
@@ -159,53 +142,17 @@ export default function WebAgencyThemePage() {
                     tagIcon={Star}
                     testimonials={[
                         {
-                            id: "1",
+                            id: "1",                            name: "Sarah Johnson",                            date: "CEO, TechStart",                            title: "Transformed Our Digital Presence",                            quote: "Working with Studio was a game-changer for our startup. They delivered a website that not only looks stunning but converts visitors into customers at twice our previous rate.",                            tag: "Web Development",                            avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero2.webp",                            avatarAlt: "Sarah Johnson",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero2.webp",                            imageAlt: "TechStart project showcase"
-                            name: "Sarah Johnson",
-                            date: "CEO, TechStart",
-                            title: "Transformed Our Digital Presence",
-                            quote: "Working with Studio was a game-changer for our startup. They delivered a website that not only looks stunning but converts visitors into customers at twice our previous rate.",
-                            tag: "Web Development",
-                            avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero2.webp",
-                            avatarAlt: "Sarah Johnson",
-                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero2.webp",
-                            imageAlt: "TechStart project showcase",
                         },
                         {
-                            id: "2",
+                            id: "2",                            name: "Michael Chen",                            date: "Founder, GrowthLab",                            title: "Exceeded All Expectations",                            quote: "The team's attention to detail and creative vision brought our brand to life in ways we never imagined. Our new platform has received incredible feedback from users.",                            tag: "Brand Design",                            avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero3.webp",                            avatarAlt: "Michael Chen",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero3.webp",                            imageAlt: "GrowthLab project showcase"
-                            name: "Michael Chen",
-                            date: "Founder, GrowthLab",
-                            title: "Exceeded All Expectations",
-                            quote: "The team's attention to detail and creative vision brought our brand to life in ways we never imagined. Our new platform has received incredible feedback from users.",
-                            tag: "Brand Design",
-                            avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero3.webp",
-                            avatarAlt: "Michael Chen",
-                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero3.webp",
-                            imageAlt: "GrowthLab project showcase",
                         },
                         {
-                            id: "3",
+                            id: "3",                            name: "Emily Rodriguez",                            date: "Marketing Director, Elevate",                            title: "A True Partnership",                            quote: "From strategy to execution, Studio understood our vision and delivered beyond what we hoped for. The new website has become our most powerful marketing asset.",                            tag: "E-commerce",                            avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero4.webp",                            avatarAlt: "Emil Svenson",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero4.webp",                            imageAlt: "Elevate project showcase"
-                            name: "Emily Rodriguez",
-                            date: "Marketing Director, Elevate",
-                            title: "A True Partnership",
-                            quote: "From strategy to execution, Studio understood our vision and delivered beyond what we hoped for. The new website has become our most powerful marketing asset.",
-                            tag: "E-commerce",
-                            avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero4.webp",
-                            avatarAlt: "Emil Svenson",
-                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero4.webp",
-                            imageAlt: "Elevate project showcase",
                         },
                         {
-                            id: "4",
+                            id: "4",                            name: "David Park",                            date: "CTO, InnovateCo",                            title: "Technical Excellence",                            quote: "The development team delivered a high-performance application that handles our complex requirements with ease. Their technical expertise is unmatched in the industry.",                            tag: "Web Application",                            avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero5.webp",                            avatarAlt: "David Park",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero5.webp",                            imageAlt: "InnovateCo project showcase"
-                            name: "David Park",
+                        }
-                            date: "CTO, InnovateCo",
-                            title: "Technical Excellence",
-                            quote: "The development team delivered a high-performance application that handles our complex requirements with ease. Their technical expertise is unmatched in the industry.",
-                            tag: "Web Application",
-                            avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero5.webp",
-                            avatarAlt: "David Park",
-                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/hero/hero5.webp",
-                            imageAlt: "InnovateCo project showcase",
-                        },
                     ]}
                     textboxLayout="default"
                     useInvertedBackground={false}
@@ -220,56 +167,68 @@ export default function WebAgencyThemePage() {
                     useInvertedBackground={false}
                     features={[
                         {
-                            title: "Discovery & Strategy",
+                            title: "Discovery & Strategy",                            description: "We start by understanding your goals, audience, and market to build a roadmap tailored to your business.",                            media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/services/how1.webp", imageAlt: "Discovery and strategy" },
-                            description: "We start by understanding your goals, audience, and market to build a roadmap tailored to your business.",
-                            media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/services/how1.webp", imageAlt: "Discovery and strategy" },
                             reverse: false,
                             items: [
                                 { icon: Code, text: "In-depth research and audits" },
                                 { icon: Zap, text: "Clear goals and KPIs defined" },
-                                { icon: Check, text: "Custom project roadmap" },
+                                { icon: Check, text: "Custom project roadmap" }
-                            ],
+                            ]
                         },
                         {
-                            title: "Design & Prototyping",
+                            title: "Design & Prototyping",                            description: "We translate strategy into visual concepts, iterating with you until every detail feels right.",                            media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/services/how2.webp", imageAlt: "Design and prototyping" },
-                            description: "We translate strategy into visual concepts, iterating with you until every detail feels right.",
-                            media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/services/how2.webp", imageAlt: "Design and prototyping" },
                             reverse: true,
                             items: [
                                 { icon: Palette, text: "Wireframes and mockups" },
                                 { icon: Layers, text: "Interactive prototypes" },
-                                { icon: Check, text: "Client feedback loops" },
+                                { icon: Check, text: "Client feedback loops" }
-                            ],
+                            ]
                         },
                         {
-                            title: "Build & Launch",
+                            title: "Build & Launch",                            description: "We develop, test, and deploy your project with precision, ensuring a smooth launch and measurable impact.",                            media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/services/how3.webp", imageAlt: "Build and launch" },
-                            description: "We develop, test, and deploy your project with precision, ensuring a smooth launch and measurable impact.",
-                            media: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/services/how3.webp", imageAlt: "Build and launch" },
                             reverse: false,
                             items: [
                                 { icon: TrendingUp, text: "Agile development sprints" },
                                 { icon: Globe, text: "QA testing and optimization" },
-                                { icon: Check, text: "Launch support and analytics" },
+                                { icon: Check, text: "Launch support and analytics" }
-                            ],
+                            ]
+                        }
+                    ]}
+                />
+                <div id="contact" data-section="contact">
+                    <ContactSplit
+                        tag="تواصل معنا"
+                        tagIcon={MessageCircle}
+                        title="هل أنت مستعد لتحويل حضورك الرقمي؟"
+                        description="دعنا نبني شيئًا استثنائيًا معًا. للحصول على استشارة، يرجى ملء النموذج أدناه أو التواصل معنا عبر:\n\n واتساب: +966 50 123 4567\n البريد الإلكتروني: info@studio.com"
+                        imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/web-agency/contact/contact1.webp"
+                        imageAlt="Consultation meeting"
+                        background={{ variant: "sparkles-gradient" }}
+                        mediaPosition="right"
+                        inputPlaceholder="اسمك الكامل وبريدك الإلكتروني"
+                        buttonText="إرسال رسالتك"
+                        termsText="بإرسال بريدك الإلكتروني، فإنك توافق على سياسة الخصوصية الخاصة بنا."
+                        onSubmit={handleFormSubmit}
+                        useInvertedBackground={false}
+                    />
+                </div>
+                <FooterBaseReveal
+                    logoText="استوديو"
+                    copyrightText="© 2025 استوديو. جميع الحقوق محفوظة."
+                    columns={[
+                        {
+                            title: "روابط سريعة",                            items: [
+                                { label: "من نحن", href: "#about" },
+                                { label: "الخدمات", href: "#services" },
+                                { label: "المدونة", href: "/blog" }
+                            ]
                         },
-                    ]}
+                        {
-                />
+                            title: "قانوني",                            items: [
-                <ContactText
+                                { label: "سياسة الخصوصية", href: "/privacy-policy" },
-                    text="Ready to transform your digital presence? Let's create something extraordinary together."
+                                { label: "الشروط والأحكام", href: "/terms-and-conditions" }
-                    buttons={[
+                            ]
-                        { text: "Start a Project", href: "#contact" },
+                        }
-                        { text: "Schedule a Call", href: "#call" },
-                    ]}
-                    background={{ variant: "canvas-reveal" }}
-                    useInvertedBackground={false}
-                />
-                <FooterCard
-                    logoText="Studio"
-                    copyrightText="© 2025 Studio. All rights reserved."
-                    socialLinks={[
-                        { icon: Twitter, href: "https://twitter.com", ariaLabel: "Follow us on Twitter" },
-                        { icon: Instagram, href: "https://instagram.com", ariaLabel: "Follow us on Instagram" },
-                        { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "Connect on LinkedIn" },
                     ]}
                 />
             </ReactLenis>

src/app/payment-gateways/page.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import { CreditCard, Globe, PiggyBank, Banknote, ShieldCheck, Zap } from "lucide-react"; // Import necessary icons
+import FeatureCardTwentySix from "@/components/sections/feature/FeatureCardTwentySix";
+import FooterCard from "@/components/sections/footer/FooterCard";
+import { Twitter, Instagram, Linkedin, MessageCircle } from "lucide-react";
+
+
+export default function PaymentGatewaysPage() {
+    const navItems = [
+        { name: "Home", id: "home" },
+        { name: "Services", id: "services" },
+        { name: "Work", id: "work" },
+        { name: "Payment Gateways", id: "payment-gateways" }, // New page link
+        { name: "Contact", id: "contact" }
+    ];
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="pill"
+            contentWidth="medium"
+            sizing="medium"
+            background="aurora"
+            cardStyle="layered-gradient"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="medium"
+        >
+            <ReactLenis root>
+                <NavbarLayoutFloatingInline
+                    navItems={navItems}
+                    brandName="Studio"
+                    button={{ text: "Get in Touch", href: "#contact" }}
+                />
+
+                <FeatureCardTwentySix
+                    title="Payment Gateways Showcase (بوابات الدفع)"
+                    description="Explore leading payment gateways, their features, supported countries, and e-commerce integration options to power your global business."
+                    tag="Payment Solutions"
+                    tagIcon={CreditCard}
+                    textboxLayout="default"
+                    useInvertedBackground={false}
+                    features={[
+                        {
+                            title: "Stripe",                            description: "A powerful, developer-friendly platform for online and in-person payments. Supports various payment methods and recurring billing. \n\n**Key Features:** Global reach, robust API, fraud prevention, recurring payments, invoicing, link payments. \n**Supported Countries:** 40+ countries (North America, Europe, Asia, Australia). \n**E-commerce Integration:** Extensive libraries for popular platforms like Shopify, WooCommerce, Magento, custom websites.",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/payment-gateways/stripe.webp",                            imageAlt: "Stripe logo",                            buttonIcon: Globe,
+                            buttonHref: "https://stripe.com"
+                        },
+                        {
+                            title: "PayPal",                            description: "A widely recognized online payment system enabling secure transactions for consumers and businesses globally. \n\n**Key Features:** Buyer and seller protection, one-touch checkout, invoicing, recurring payments, credit options, international payments. \n**Supported Countries:** 200+ countries/regions. \n**E-commerce Integration:** Native integrations with most e-commerce platforms, easy to add to custom sites.",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/payment-gateways/paypal.webp",                            imageAlt: "PayPal logo",                            buttonIcon: ShieldCheck,
+                            buttonHref: "https://paypal.com"
+                        },
+                        {
+                            title: "Wise (formerly TransferWise)",                            description: "Specializes in international money transfers and multi-currency accounts, offering competitive exchange rates and low fees. \n\n**Key Features:** Multi-currency account, low-fee international transfers, debit card, batch payments, transparent fees, API for business. \n**Supported Countries:** 80+ countries for transfers, accounts available in many more. \n**E-commerce Integration:** Primarily for international payouts and supplier payments, not direct customer checkout. API available for custom integration.",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/payment-gateways/wise.webp",                            imageAlt: "Wise logo",                            buttonIcon: PiggyBank,
+                            buttonHref: "https://wise.com"
+                        },
+                        {
+                            title: "Mercury",                            description: "Banking built for startups, offering FDIC-insured accounts, debit cards, and seamless integration with payment processors. \n\n**Key Features:** US bank accounts, debit cards, virtual cards, API access, integrations with Stripe/PayPal. Not a payment gateway itself but complements them. \n**Supported Countries:** Primarily US-based businesses, but serves international founders with US entities. \n**E-commerce Integration:** Integrates with payment gateways like Stripe/PayPal for settlement, not direct checkout.",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/payment-gateways/mercury.webp",                            imageAlt: "Mercury logo",                            buttonIcon: Banknote,
+                            buttonHref: "https://mercury.com"
+                        },
+                        {
+                            title: "Airwallex",                            description: "A global fintech platform providing cross-border payment solutions, multi-currency accounts, and expense management for businesses. \n\n**Key Features:** Global accounts, multi-currency cards, international payments, online payments, expense management, API. \n**Supported Countries:** Offices in 15+ locations, operates globally. \n**E-commerce Integration:** Supports online payment acceptance, local payment methods, and integrations for global e-commerce.",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/payment-gateways/airwallex.webp",                            imageAlt: "Airwallex logo",                            buttonIcon: Zap,
+                            buttonHref: "https://airwallex.com"
+                        },
+                        {
+                            title: "Payoneer",                            description: "A cross-border payments platform that simplifies international business payments for freelancers, SMBs, and enterprises. \n\n**Key Features:** Global payment sending/receiving, mass payout services, working capital, multi-currency accounts, invoicing. \n**Supported Countries:** 200+ countries/regions. \n**E-commerce Integration:** Popular for marketplace payouts (e.g., Amazon, Etsy), not typically for direct e-commerce checkout.",                            imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/payment-gateways/payoneer.webp",                            imageAlt: "Payoneer logo",                            buttonIcon: Globe,
+                            buttonHref: "https://payoneer.com"
+                        }
+                    ]}
+                />
+
+                <FooterCard
+                    logoText="Studio"
+                    copyrightText="© 2025 Studio. All rights reserved."
+                    socialLinks={[
+                        { icon: Twitter, href: "https://twitter.com", ariaLabel: "Follow us on Twitter" },
+                        { icon: Instagram, href: "https://instagram.com", ariaLabel: "Follow us on Instagram" },
+                        { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "Connect on LinkedIn" },
+                        { icon: MessageCircle, href: "https://wa.me/1234567890", ariaLabel: "Chat with us on WhatsApp" }
+                    ]}
+                />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}

src/app/privacy-policy/page.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import LegalSection from "@/components/legal/LegalSection";
+import { Layers, Sparkles, Star, Users, Globe, Zap, MessageCircle } from "lucide-react"; // Ensure MessageCircle is imported
+
+export default function PrivacyPolicyPage() {
+    const navItems = [
+        { name: "Home", id: "home" },
+        { name: "Services", id: "services" },
+        { name: "Work", id: "work" },
+        { name: "Contact", id: "contact" }
+    ];
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="pill"
+            contentWidth="medium"
+            sizing="medium"
+            background="aurora"
+            cardStyle="layered-gradient"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="medium"
+        >
+            <ReactLenis root>
+                <NavbarLayoutFloatingInline
+                    navItems={navItems}
+                    brandName="Studio"
+                    button={{ text: "Get in Touch", href: "#contact" }}
+                />
+                <div id="privacy-policy" data-section="privacy-policy" className="py-20">
+                    <LegalSection
+                        layout="page"
+                        title="سياسة الخصوصية"
+                        subtitle="آخر تحديث: 12 مايو 2024"
+                        sections={[
+                            {
+                                heading: "مقدمة",                                content: [
+                                    { type: "paragraph", text: "نحن في استوديو نلتزم بحماية خصوصية زوارنا وعملائنا. توضح هذه السياسة كيفية جمعنا، استخدامنا، وحمايتنا لمعلوماتك الشخصية."
+                                    }
+                                ]
+                            },
+                            {
+                                heading: "المعلومات التي نجمعها",                                content: [
+                                    { type: "paragraph", text: "قد نجمع معلومات شخصية مثل اسمك، عنوان بريدك الإلكتروني، رقم هاتفك، وأي تفاصيل أخرى تقدمها لنا طواعية عبر نماذج الاتصال أو الاشتراك في النشرة الإخبارية."
+                                    }
+                                ]
+                            },
+                            {
+                                heading: "كيف نستخدم معلوماتك",                                content: [
+                                    { type: "list", items: ["لتقديم خدماتنا وتحسينها", "للتواصل معك بخصوص استفساراتك وطلباتك", "لإرسال رسائل تسويقية وعروض قد تهمك (مع إمكانية إلغاء الاشتراك)", "للامتثال للمتطلبات القانونية"]}
+                                ]
+                            },
+                            {
+                                heading: "مشاركة المعلومات",                                content: [
+                                    { type: "paragraph", text: "لن نبيع أو نتاجر أو نؤجر معلوماتك الشخصية لأطراف ثالثة. قد نشارك معلوماتك مع شركاء موثوقين يساعدوننا في تشغيل موقعنا الإلكتروني أو إدارة أعمالنا، شريطة أن يوافقوا على الحفاظ على سرية هذه المعلومات."
+                                    }
+                                ]
+                            },
+                            {
+                                heading: "حقوقك",                                content: [
+                                    { type: "paragraph", text: "يحق لك الوصول إلى معلوماتك الشخصية التي نحتفظ بها، وطلب تصحيحها أو حذفها. يمكنك أيضاً الاعتراض على معالجتها في ظروف معينة."
+                                    }
+                                ]
+                            }
+                        ]}
+                    />
+                </div>
+                <FooterBaseReveal
+                    logoText="استوديو"
+                    copyrightText="© 2025 استوديو. جميع الحقوق محفوظة."
+                    columns={[
+                        {
+                            title: "روابط سريعة",                            items: [
+                                { label: "من نحن", href: "#about" },
+                                { label: "الخدمات", href: "#services" },
+                                { label: "المدونة", href: "/blog" }
+                            ]
+                        },
+                        {
+                            title: "قانوني",                            items: [
+                                { label: "سياسة الخصوصية", href: "/privacy-policy" },
+                                { label: "الشروط والأحكام", href: "/terms-and-conditions" }
+                            ]
+                        }
+                    ]}
+                />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
+  --background: #0F112A;
-  --card: #ffffff;
+  --card: #1A1D3A;
-  --foreground: #0c1325;
+  --foreground: #E0E6F0;
-  --primary-cta: #0b07ff;
+  --primary-cta: #FFD700;
-  --primary-cta-text: #f7f6f7;
+  --primary-cta-text: #FFFFFF;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #3A4160;
-  --secondary-cta-text: #0c1325;
+  --secondary-cta-text: #E0E6F0;
-  --accent: #93b7ff;
+  --accent: #FFD700;
-  --background-accent: #a8bae8;
+  --background-accent: #0B0C1E;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/terms-and-conditions/page.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import ReactLenis from "lenis/react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
+import LegalSection from "@/components/legal/LegalSection";
+import { Layers, Sparkles, Star, Users, Globe, Zap, MessageCircle } from "lucide-react"; // Ensure MessageCircle is imported
+
+export default function TermsAndConditionsPage() {
+    const navItems = [
+        { name: "Home", id: "home" },
+        { name: "Services", id: "services" },
+        { name: "Work", id: "work" },
+        { name: "Contact", id: "contact" }
+    ];
+
+    return (
+        <ThemeProvider
+            defaultButtonVariant="icon-arrow"
+            defaultTextAnimation="entrance-slide"
+            borderRadius="pill"
+            contentWidth="medium"
+            sizing="medium"
+            background="aurora"
+            cardStyle="layered-gradient"
+            primaryButtonStyle="gradient"
+            secondaryButtonStyle="glass"
+            headingFontWeight="medium"
+        >
+            <ReactLenis root>
+                <NavbarLayoutFloatingInline
+                    navItems={navItems}
+                    brandName="Studio"
+                    button={{ text: "Get in Touch", href: "#contact" }}
+                />
+                <div id="terms-and-conditions" data-section="terms-and-conditions" className="py-20">
+                    <LegalSection
+                        layout="page"
+                        title="الشروط والأحكام"
+                        subtitle="آخر تحديث: 12 مايو 2024"
+                        sections={[
+                            {
+                                heading: "مقدمة",                                content: [
+                                    { type: "paragraph", text: "مرحباً بك في موقع استوديو! تحدد هذه الشروط والأحكام القواعد واللوائح الخاصة باستخدام موقعنا الإلكتروني."
+                                    }
+                                ]
+                            },
+                            {
+                                heading: "الموافقة على الشروط",                                content: [
+                                    { type: "paragraph", text: "باستخدام هذا الموقع، فإنك توافق على الالتزام بهذه الشروط والأحكام. إذا لم توافق على أي جزء من هذه الشروط، فلا تستخدم موقعنا."
+                                    }
+                                ]
+                            },
+                            {
+                                heading: "حقوق الملكية الفكرية",                                content: [
+                                    { type: "paragraph", text: "جميع المحتويات الموجودة على هذا الموقع، بما في ذلك النصوص، الرسومات، الشعارات، الصور، ومقاطع الفيديو، هي ملكية فكرية لـ استوديو أو مرخصيها، ومحمية بموجب قوانين حقوق النشر."
+                                    }
+                                ]
+                            },
+                            {
+                                heading: "استخدام الموقع",                                content: [
+                                    { type: "list", items: [
+                                        "يُسمح لك باستخدام الموقع لأغراض شخصية وغير تجارية.",                                        "لا يجوز لك نسخ، تعديل، توزيع، بيع، أو تأجير أي جزء من المحتوى دون موافقة كتابية مسبقة منا.",                                        "لا يجوز لك استخدام الموقع بأي طريقة قد تسبب أو قد تسبب ضررًا للموقع أو تعطيل الوصول إليه."
+                                    ]
+                                    }
+                                ]
+                            },
+                            {
+                                heading: "إخلاء المسؤولية",                                content: [
+                                    { type: "paragraph", text: "يتم توفير المعلومات الموجودة على هذا الموقع 'كما هي' دون أي ضمانات من أي نوع، صريحة أو ضمنية. نحن لا نضمن أن يكون الموقع خالياً من الأخطاء أو الفيروسات."
+                                    }
+                                ]
+                            }
+                        ]}
+                    />
+                </div>
+                <FooterBaseReveal
+                    logoText="استوديو"
+                    copyrightText="© 2025 استوديو. جميع الحقوق محفوظة."
+                    columns={[
+                        {
+                            title: "روابط سريعة",                            items: [
+                                { label: "من نحن", href: "#about" },
+                                { label: "الخدمات", href: "#services" },
+                                { label: "المدونة", href: "/blog" }
+                            ]
+                        },
+                        {
+                            title: "قانوني",                            items: [
+                                { label: "سياسة الخصوصية", href: "/privacy-policy" },
+                                { label: "الشروط والأحكام", href: "/terms-and-conditions" }
+                            ]
+                        }
+                    ]}
+                />
+            </ReactLenis>
+        </ThemeProvider>
+    );
+}