bender/03afbc31-8b0d-4b31-8905-2b4ffa7fcbbd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_3 into main

Browse Source 
Merge version_3 into main
This commit was merged in pull request #3.
This commit is contained in:
bender
2026-06-03 22:47:22 +00:00
parent c9a885fc6e 46c094623e
commit 9c32a82825
7 changed files with 412 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
src/app/blog/page.tsx Normal file
View File

@@ -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>
);
}

12
src/app/layout.tsx
View File

@@ -8,19 +8,17 @@ import Tag from "@/tag/Tag";
import { getVisualEditScript } from "@/utils/visual-edit-script";
const halant = Halant({
variable: "--font-halant",
subsets: ["latin"],
variable: "--font-halant", subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
});
const inter = Inter({
variable: "--font-inter",
subsets: ["latin"],
variable: "--font-inter", subsets: ["latin"],
});
export const metadata: Metadata = {
title: 'Webild: Creative Web Agency & Digital Solutions',
description: 'Webild is a creative web agency crafting stunning, high-performance websites and digital experiences. Elevate your brand with our expert design and development.',
title: 'Digital Solutions Agency: Web Development, Design & Marketing',
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>
);
}
}

62
src/app/page.tsx
View File

@@ -5,14 +5,14 @@ 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, MessageCircle } 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 ContactForm from "@/components/form/ContactForm"; // Replaced ContactText with ContactForm
import FooterCard from "@/components/sections/footer/FooterCard";
import ContactSplit from "@/components/sections/contact/ContactSplit";
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
export default function WebAgencyThemePage() {
const navItems = [
@@ -91,6 +91,7 @@ export default function WebAgencyThemePage() {
marqueeClassName="md:mb-5"
/>
<TextAbout
id="about"
title="We craft digital experiences that captivate audiences and drive meaningful results for ambitious brands worldwide."
buttons={[
{ text: "Our Process", href: "#process" },
@@ -99,6 +100,7 @@ export default function WebAgencyThemePage() {
useInvertedBackground={false}
/>
<FeatureCardNineteen
id="services"
title="Our Services"
description="A proven methodology that delivers results consistently across every project."
tag="What We Do"
@@ -158,6 +160,7 @@ export default function WebAgencyThemePage() {
useInvertedBackground={false}
/>
<FeatureCardTen
id="process"
tag="How We Work"
tagIcon={Layers}
title="Our Process"
@@ -195,25 +198,40 @@ export default function WebAgencyThemePage() {
}
]}
/>
<ContactForm
title="Ready to transform your digital presence?"
description="Let's create something extraordinary together."
tag="Get in Touch"
inputPlaceholder="Your Email Address"
buttonText="Send Message"
termsText="By submitting your email, you agree to our privacy policy."
onSubmit={handleFormSubmit}
centered={false}
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" },
{ icon: MessageCircle, href: "https://wa.me/1234567890", ariaLabel: "Chat with us on WhatsApp" } // WhatsApp integration
<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: [
{ label: "سياسة الخصوصية", href: "/privacy-policy" },
{ label: "الشروط والأحكام", href: "/terms-and-conditions" }
]
}
]}
/>
</ReactLenis>

89
src/app/payment-gateways/page.tsx Normal file
View File

@@ -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>
);
}

97
src/app/privacy-policy/page.tsx Normal file
View File

@@ -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>
);
}

2
src/app/styles/variables.css
View File

@@ -13,7 +13,7 @@
--background: #0F112A;
--card: #1A1D3A;
--foreground: #E0E6F0;
--primary-cta: #1A73E8;
--primary-cta: #FFD700;
--primary-cta-text: #FFFFFF;
--secondary-cta: #3A4160;
--secondary-cta-text: #E0E6F0;

100
src/app/terms-and-conditions/page.tsx Normal file
View File

@@ -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>
);
}