bender/93180cb5-edc5-473a-9b44-faa8a6d31d41
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #2

Merged
bender merged 4 commits from version_2 into main 2026-03-09 13:49:30 +00:00
Conversation 0 Commits 4 Files Changed 4 +456 -330
4 changed files with 456 additions and 330 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
src/app/layout.tsx
View File

@@ -1,57 +1,42 @@
import type { Metadata } from "next";
import { Halant } from "next/font/google";
import { Inter } from "next/font/google";
import { Montserrat } from "next/font/google";
import { Inter_Tight } from "next/font/google";
import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
import { ServiceWrapper } from "@/providers/serviceWrapper/ServiceWrapper";
import { Tag } from "@/components/tag/Tag";
const halant = Halant({
variable: "--font-halant", subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
});
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
const montserrat = Montserrat({
variable: "--font-montserrat", subsets: ["latin"],
const interTight = Inter_Tight({
variable: "--font-inter-tight", subsets: ["latin"],
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
});
export const metadata: Metadata = {
title: "Web Design Agency | Clean Modern Websites", description: "Award-winning web design agency creating beautiful, functional websites that convert. Portfolio of 150+ successful projects for startups and enterprises.", keywords: "web design agency, minimalist website design, web development, portfolio, responsive websites", metadataBase: new URL("https://webild.com"),
alternates: {
canonical: "https://webild.com"},
openGraph: {
title: "Websites that Work as Beautifully as They Look | Webild", description: "Professional web design agency specializing in clean, modern websites that drive conversions. See our portfolio of successful projects.", url: "https://webild.com", siteName: "Webild", type: "website", images: [
{
url: "http://img.b2bpic.net/free-psd/smiley-woman-wearing-sunglasses-landing-page-template_23-2148782097.jpg", alt: "Webild Web Design Portfolio"},
],
},
twitter: {
card: "summary_large_image", title: "Web Design Agency | Webild", description: "Clean, modern websites that convert visitors into customers. 150+ successful projects.", images: ["http://img.b2bpic.net/free-psd/smiley-woman-wearing-sunglasses-landing-page-template_23-2148782097.jpg"],
},
robots: {
index: true,
follow: true,
},
};
title: "Webild - Web Design Agency | Jordan", description:
"Professional web design and development agency in Jordan. We create beautiful, modern websites that convert visitors into customers."};
export default function RootLayout({
children,
}: Readonly<{
}: {
children: React.ReactNode;
}>) {
}) {
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body
className={`${halant.variable} ${inter.variable} ${montserrat.variable} antialiased`}
>
<body className={`${interTight.variable} font-sans`}>
<ServiceWrapper>
<Tag />
{children}
</ServiceWrapper>
<script
dangerouslySetInnerHTML={{
__html: `
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
`,
}}
/>
<script
dangerouslySetInnerHTML={{
__html: `
@@ -1419,7 +1404,6 @@ export default function RootLayout({
}}
/>
</body>
</ServiceWrapper>
</html>
);
}

702
src/app/page.tsx
View File

@@ -10,296 +10,438 @@ import TestimonialCardTwelve from "@/components/sections/testimonial/Testimonial
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import MetricCardEleven from "@/components/sections/metrics/MetricCardEleven";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { CheckCircle, Sparkles, Target, TrendingUp, Users, Zap } from "lucide-react";
import { CheckCircle, Sparkles, Target, TrendingUp, Users, Zap, Globe } from "lucide-react";
import { useState } from "react";
const translations = {
en: {
navHome: "Home", navAbout: "About", navPortfolio: "Portfolio", navTeam: "Team", navContact: "Contact", brandName: "Webild", heroTitle: "Websites that work as beautifully as they look", heroDescription:
"We design clean, modern websites that convert visitors into customers. See how our team has transformed businesses like yours", heroTag: "Web Design Agency", heroBtnWork: "View Our Work", heroBtnStart: "Get Started", aboutTag: "Our Approach", aboutTitle:
"We blend strategic thinking with exceptional design to create websites that drive real business results", aboutBtn: "Learn Our Process", portfolioTitle: "Our Process", portfolioDesc:
"Every project follows a strategic three-phase approach designed to maximize results", portfolioTag: "How We Work", strategy: "Strategy", strategySubtitle: "Understanding your vision and market", strategyDesc:
"We begin by diving deep into your business goals, target audience, and competitive landscape. Through collaborative workshops and market research, we develop a comprehensive strategy that guides every design decision.", design: "Design", designSubtitle: "Crafting beautiful, functional interfaces", designDesc:
"Our design team transforms strategy into stunning visuals. We create wireframes, prototypes, and high-fidelity designs that balance aesthetics with usability, ensuring every pixel serves a purpose.", development: "Development", developmentSubtitle: "Building and optimizing for performance", developmentDesc:
"Our developers bring designs to life with clean, efficient code. We prioritize performance, accessibility, and SEO to ensure your website not only looks great but also performs exceptionally.", teamTitle: "Meet Our Team", teamDesc: "The talented designers and developers behind every successful project", teamTag: "Our People", testimonialTitle:
"Over 50+ companies have transformed their digital presence with our web design expertise", testimonialTag: "Client Success Stories", trustTitle: "Trusted by Leading Brands", trustDesc: "Partnering with innovative companies across industries", trustTag: "Our Clients", metricsTitle: "Our Impact", metricsDesc:
"Proven results that demonstrate our expertise and commitment to client success", metricsTag: "Results", designExcellence: "Design Excellence", contactEmail: "hello@webild.com"},
ar: {
navHome: "الرئيسية", navAbout: "حول", navPortfolio: "محفظة", navTeam: "الفريق", navContact: "تواصل معنا", brandName: "ويبيلد", heroTitle: "مواقع تعمل بنفس جمال مظهرها", heroDescription:
"نحن نصمم مواقع نظيفة وحديثة تحول الزوار إلى عملاء. شاهد كيف حولنا الشركات مثل شركتك", heroTag: "وكالة تصميم ويب", heroBtnWork: "عرض أعمالنا", heroBtnStart: "ابدأ الآن", aboutTag: "نهجنا", aboutTitle:
"نحن نمزج التفكير الاستراتيجي مع التصميم الاستثنائي لإنشاء مواقع ويب تحقق نتائج حقيقية", aboutBtn: "تعرف على عمليتنا", portfolioTitle: "عمليتنا", portfolioDesc:
"كل مشروع يتبع نهجًا ثلاثي المراحل مصمم لتعظيم النتائج", portfolioTag: "كيف نعمل", strategy: "الاستراتيجية", strategySubtitle: "فهم رؤيتك وسوقك", strategyDesc:
"نبدأ بالغوص العميق في أهدافك التجارية وجمهورك المستهدف والمشهد التنافسي. من خلال ورش العمل التعاونية وأبحاث السوق، نطور استراتيجية شاملة توجه كل قرار تصميمي.", design: "التصميم", designSubtitle: "صياغة واجهات جميلة وعملية", designDesc:
"يحول فريق التصميم لدينا الاستراتيجية إلى مرئيات مذهلة. نقوم بإنشاء إطارات سلكية ونماذج أولية وتصاميم عالية الدقة توازن بين الجماليات والقابلية للاستخدام.", development: "التطوير", developmentSubtitle: "البناء والتحسين للأداء", developmentDesc:
"يحضر مطورونا التصاميم إلى الحياة بكود نظيف وفعال. نولي الأولوية للأداء والوصول وتحسين محركات البحث.", teamTitle: "قابل فريقنا", teamDesc: "المصممون والمطورون الموهوبون وراء كل مشروع ناجح", teamTag: "فريقنا", testimonialTitle:
"حول أكثر من 50+ شركة وجودتها الرقمية مع خبرتنا في تصميم الويب", testimonialTag: "قصص نجاح العملاء", trustTitle: "موثوق به من قبل الشركات الرائدة", trustDesc: "الشراكة مع الشركات المبتكرة عبر الصناعات", trustTag: "عملاؤنا", metricsTitle: "تأثيرنا", metricsDesc:
"نتائج مثبتة تثبت خبرتنا والتزامنا بنجاح العميل", metricsTag: "النتائج", designExcellence: "تميز التصميم", contactEmail: "مرحبا@webild.com"},
};
export default function LandingPage() {
const [language, setLanguage] = useState<"en" | "ar">("en");
const t = translations[language];
const isRTL = language === "ar";
return (
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="compact"
sizing="large"
background="circleGradient"
cardStyle="soft-shadow"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "home" },
{ name: "About", id: "about" },
{ name: "Portfolio", id: "portfolio" },
{ name: "Team", id: "team" },
{ name: "Contact", id: "contact" },
]}
brandName="Webild"
bottomLeftText="Design Excellence"
bottomRightText="hello@webild.com"
/>
</div>
<div dir={isRTL ? "rtl" : "ltr"}>
<ThemeProvider
defaultButtonVariant="expand-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="compact"
sizing="large"
background="circleGradient"
cardStyle="soft-shadow"
primaryButtonStyle="gradient"
secondaryButtonStyle="layered"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<div className="fixed top-4 right-4 z-50 flex gap-2">
<button
onClick={() => setLanguage("en")}
className={`px-4 py-2 rounded-pill font-semibold transition-all ${
language === "en"
? "bg-primary-cta text-white"
: "bg-accent/30 text-foreground hover:bg-accent/50"
}`}
>
English
</button>
<button
onClick={() => setLanguage("ar")}
className={`px-4 py-2 rounded-pill font-semibold transition-all ${
language === "ar"
? "bg-primary-cta text-white"
: "bg-accent/30 text-foreground hover:bg-accent/50"
}`}
>
العربية
</button>
</div>
<NavbarStyleFullscreen
navItems={[
{ name: t.navHome, id: "home" },
{ name: t.navAbout, id: "about" },
{ name: t.navPortfolio, id: "portfolio" },
{ name: t.navTeam, id: "team" },
{ name: t.navContact, id: "contact" },
]}
brandName={t.brandName}
bottomLeftText={t.designExcellence}
bottomRightText={t.contactEmail}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
title="Websites that work as beautifully as they look"
description="We design clean, modern websites that convert visitors into customers. See how our team has transformed businesses like yours"
tag="Web Design Agency"
tagIcon={Sparkles}
tagAnimation="slide-up"
buttons={[
{ text: "View Our Work", href: "#portfolio" },
{ text: "Get Started", href: "#contact" },
]}
buttonAnimation="blur-reveal"
background={{ variant: "plain" }}
carouselItems={[
{
id: "1", imageSrc: "http://img.b2bpic.net/free-psd/smiley-woman-wearing-sunglasses-landing-page-template_23-2148782097.jpg", imageAlt: "Modern website design portfolio"
},
{
id: "2", imageSrc: "http://img.b2bpic.net/free-vector/mobile-tech-horizontal-banner-template_23-2148744751.jpg", imageAlt: "Modern dashboard interface design"
},
{
id: "3", imageSrc: "http://img.b2bpic.net/free-vector/furniture-shopping-app-concept_23-2148662516.jpg", imageAlt: "Minimalist ecommerce website design"
},
{
id: "4", imageSrc: "http://img.b2bpic.net/free-psd/flat-design-sale-template_23-2149844971.jpg", imageAlt: "Creative agency portfolio website"
},
{
id: "5", imageSrc: "http://img.b2bpic.net/free-vector/user-panel-dashboard-template_23-2148368822.jpg", imageAlt: "Startup website landing page"
},
{
id: "6", imageSrc: "http://img.b2bpic.net/free-vector/business-landing-page-template-with-photo_52683-19812.jpg", imageAlt: "Corporate website design showcase"
},
]}
autoPlay={true}
autoPlayInterval={4000}
className="w-full"
containerClassName="py-20 px-4"
textBoxClassName="text-center max-w-3xl mx-auto"
titleClassName="text-4xl md:text-6xl font-bold mb-6"
descriptionClassName="text-lg md:text-xl mb-8 leading-relaxed"
tagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent mb-4"
buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mb-16"
buttonClassName="px-8 py-3 rounded-pill font-semibold"
carouselClassName="w-full h-96 md:h-[500px]"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel
title={t.heroTitle}
description={t.heroDescription}
tag={t.heroTag}
tagIcon={Sparkles}
tagAnimation="slide-up"
buttons={[
{ text: t.heroBtnWork, href: "#portfolio" },
{ text: t.heroBtnStart, href: "#contact" },
]}
buttonAnimation="blur-reveal"
background={{ variant: "plain" }}
carouselItems={[
{
id: "1", imageSrc:
"http://img.b2bpic.net/free-psd/smiley-woman-wearing-sunglasses-landing-page-template_23-2148782097.jpg", imageAlt:
language === "ar"
? "محفظة تصميم الويب الحديث"
: "Modern website design portfolio"},
{
id: "2", imageSrc:
"http://img.b2bpic.net/free-vector/mobile-tech-horizontal-banner-template_23-2148744751.jpg", imageAlt:
language === "ar"
? "تصميم واجهة لوحة معلومات حديثة"
: "Modern dashboard interface design"},
{
id: "3", imageSrc:
"http://img.b2bpic.net/free-vector/furniture-shopping-app-concept_23-2148662516.jpg", imageAlt:
language === "ar"
? "تصميم موقع التجارة الإلكترونية البسيط"
: "Minimalist ecommerce website design"},
{
id: "4", imageSrc:
"http://img.b2bpic.net/free-psd/flat-design-sale-template_23-2149844971.jpg", imageAlt:
language === "ar"
? "موقع محفظة وكالة إبداعية"
: "Creative agency portfolio website"},
{
id: "5", imageSrc:
"http://img.b2bpic.net/free-vector/user-panel-dashboard-template_23-2148368822.jpg", imageAlt:
language === "ar"
? "صفحة هبوط موقع الشركات الناشئة"
: "Startup website landing page"},
{
id: "6", imageSrc:
"http://img.b2bpic.net/free-vector/business-landing-page-template-with-photo_52683-19812.jpg", imageAlt:
language === "ar"
? "عرض تصميم موقع الشركات"
: "Corporate website design showcase"},
]}
autoPlay={true}
autoPlayInterval={4000}
className="w-full"
containerClassName="py-20 px-4"
textBoxClassName="text-center max-w-3xl mx-auto"
titleClassName="text-4xl md:text-6xl font-bold mb-6"
descriptionClassName="text-lg md:text-xl mb-8 leading-relaxed"
tagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent mb-4"
buttonContainerClassName="flex flex-col sm:flex-row gap-4 justify-center mb-16"
buttonClassName="px-8 py-3 rounded-pill font-semibold"
carouselClassName="w-full h-96 md:h-[500px]"
/>
</div>
<div id="about" data-section="about">
<TextAbout
tag="Our Approach"
tagIcon={Target}
tagAnimation="opacity"
title="We blend strategic thinking with exceptional design to create websites that drive real business results"
buttons={[{ text: "Learn Our Process", href: "#portfolio" }]}
buttonAnimation="slide-up"
useInvertedBackground={false}
className="w-full"
containerClassName="py-24 px-4"
titleClassName="text-3xl md:text-5xl font-bold text-center max-w-2xl mx-auto leading-tight"
buttonContainerClassName="flex justify-center mt-12 gap-4"
buttonClassName="px-6 py-3 rounded-pill font-semibold"
/>
</div>
<div id="about" data-section="about">
<TextAbout
tag={t.aboutTag}
tagIcon={Target}
tagAnimation="opacity"
title={t.aboutTitle}
buttons={[{ text: t.aboutBtn, href: "#portfolio" }]}
buttonAnimation="slide-up"
useInvertedBackground={false}
className="w-full"
containerClassName="py-24 px-4"
titleClassName="text-3xl md:text-5xl font-bold text-center max-w-2xl mx-auto leading-tight"
buttonContainerClassName="flex justify-center mt-12 gap-4"
buttonClassName="px-6 py-3 rounded-pill font-semibold"
/>
</div>
<div id="portfolio" data-section="portfolio">
<FeatureCardNineteen
title="Our Process"
description="Every project follows a strategic three-phase approach designed to maximize results"
tag="How We Work"
tagIcon={Zap}
tagAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={true}
features={[
{
id: 1,
tag: "Discovery", title: "Strategy", subtitle: "Understanding your vision and market", description: "We begin by diving deep into your business goals, target audience, and competitive landscape. Through collaborative workshops and market research, we develop a comprehensive strategy that guides every design decision.", imageSrc: "http://img.b2bpic.net/free-photo/pregnant-businesswoman-with-male-coworkers-presentation_23-2148804406.jpg", imageAlt: "Strategy planning session"
},
{
id: 2,
tag: "Creation", title: "Design", subtitle: "Crafting beautiful, functional interfaces", description: "Our design team transforms strategy into stunning visuals. We create wireframes, prototypes, and high-fidelity designs that balance aesthetics with usability, ensuring every pixel serves a purpose.", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-coffee-examining-data_482257-119396.jpg", imageAlt: "Web design process"
},
{
id: 3,
tag: "Launch", title: "Development", subtitle: "Building and optimizing for performance", description: "Our developers bring designs to life with clean, efficient code. We prioritize performance, accessibility, and SEO to ensure your website not only looks great but also performs exceptionally.", imageSrc: "http://img.b2bpic.net/free-photo/team-it-workers-using-green-screen-computer_482257-123979.jpg", imageAlt: "Web development process"
},
]}
buttons={[]}
buttonAnimation="none"
className="w-full"
containerClassName="py-24 px-4"
textBoxClassName="text-center mb-16"
textBoxTitleClassName="text-3xl md:text-5xl font-bold mb-4"
textBoxDescriptionClassName="text-lg text-foreground/80 max-w-2xl mx-auto"
/>
</div>
<div id="portfolio" data-section="portfolio">
<FeatureCardNineteen
title={t.portfolioTitle}
description={t.portfolioDesc}
tag={t.portfolioTag}
tagIcon={Zap}
tagAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={true}
features={[
{
id: 1,
tag: language === "ar" ? "الاكتشاف" : "Discovery", title: t.strategy,
subtitle: t.strategySubtitle,
description: t.strategyDesc,
imageSrc:
"http://img.b2bpic.net/free-photo/pregnant-businesswoman-with-male-coworkers-presentation_23-2148804406.jpg", imageAlt:
language === "ar"
? "جلسة تخطيط الاستراتيجية"
: "Strategy planning session"},
{
id: 2,
tag: language === "ar" ? "الإنشاء" : "Creation", title: t.design,
subtitle: t.designSubtitle,
description: t.designDesc,
imageSrc:
"http://img.b2bpic.net/free-photo/woman-with-coffee-examining-data_482257-119396.jpg", imageAlt:
language === "ar" ? "عملية تصميم الويب" : "Web design process"},
{
id: 3,
tag: language === "ar" ? "الإطلاق" : "Launch", title: t.development,
subtitle: t.developmentSubtitle,
description: t.developmentDesc,
imageSrc:
"http://img.b2bpic.net/free-photo/team-it-workers-using-green-screen-computer_482257-123979.jpg", imageAlt:
language === "ar"
? "عملية تطوير الويب"
: "Web development process"},
]}
buttons={[]}
buttonAnimation="none"
className="w-full"
containerClassName="py-24 px-4"
textBoxClassName="text-center mb-16"
textBoxTitleClassName="text-3xl md:text-5xl font-bold mb-4"
textBoxDescriptionClassName="text-lg text-foreground/80 max-w-2xl mx-auto"
/>
</div>
<div id="team" data-section="team">
<TeamCardFive
title="Meet Our Team"
description="The talented designers and developers behind every successful project"
tag="Our People"
tagIcon={Users}
tagAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
team={[
{
id: "1", name: "Sarah Johnson", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-her-desk_23-2147636005.jpg", imageAlt: "Sarah Johnson - Creative Director"
},
{
id: "2", name: "Michael Chen", role: "Lead Designer", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-holding-tablet_23-2149927578.jpg", imageAlt: "Michael Chen - Lead Designer"
},
{
id: "3", name: "Emily Rodriguez", role: "Full Stack Developer", imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-industrial-engineer-uniform-with-clipboard-black-cup-white_114579-76954.jpg", imageAlt: "Emily Rodriguez - Full Stack Developer"
},
{
id: "4", name: "David Kim", role: "Product Strategist", imageSrc: "http://img.b2bpic.net/free-photo/closeup-happy-middle-aged-business-leader_1262-4823.jpg", imageAlt: "David Kim - Product Strategist"
},
]}
className="w-full"
containerClassName="py-24 px-4"
textBoxClassName="text-center mb-16"
textBoxTitleClassName="text-3xl md:text-5xl font-bold mb-4"
textBoxDescriptionClassName="text-lg text-foreground/80 max-w-2xl mx-auto"
gridClassName="flex flex-wrap justify-center gap-6 md:gap-8 w-full"
/>
</div>
<div id="team" data-section="team">
<TeamCardFive
title={t.teamTitle}
description={t.teamDesc}
tag={t.teamTag}
tagIcon={Users}
tagAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
animationType="slide-up"
team={[
{
id: "1", name:
language === "ar" ? "سارة جونسون" : "Sarah Johnson", role:
language === "ar" ? "مدير إبداعي" : "Creative Director", imageSrc:
"http://img.b2bpic.net/free-photo/businesswoman-her-desk_23-2147636005.jpg", imageAlt:
language === "ar"
? "سارة جونسون - مدير إبداعي"
: "Sarah Johnson - Creative Director"},
{
id: "2", name:
language === "ar" ? "مايكل تشن" : "Michael Chen", role:
language === "ar" ? "مصمم رئيسي" : "Lead Designer", imageSrc:
"http://img.b2bpic.net/free-photo/side-view-woman-holding-tablet_23-2149927578.jpg", imageAlt:
language === "ar"
? "مايكل تشن - مصمم رئيسي"
: "Michael Chen - Lead Designer"},
{
id: "3", name:
language === "ar" ? "إميلي رودريغيز" : "Emily Rodriguez", role:
language === "ar" ? "مطور ملء الكومة" : "Full Stack Developer", imageSrc:
"http://img.b2bpic.net/free-photo/smiling-woman-industrial-engineer-uniform-with-clipboard-black-cup-white_114579-76954.jpg", imageAlt:
language === "ar"
? "إميلي رودريغيز - مطور ملء الكومة"
: "Emily Rodriguez - Full Stack Developer"},
{
id: "4", name:
language === "ar" ? "ديفيد كيم" : "David Kim", role:
language === "ar" ? "استراتيجي المنتج" : "Product Strategist", imageSrc:
"http://img.b2bpic.net/free-photo/closeup-happy-middle-aged-business-leader_1262-4823.jpg", imageAlt:
language === "ar"
? "ديفيد كيم - استراتيجي المنتج"
: "David Kim - Product Strategist"},
]}
className="w-full"
containerClassName="py-24 px-4"
textBoxClassName="text-center mb-16"
textBoxTitleClassName="text-3xl md:text-5xl font-bold mb-4"
textBoxDescriptionClassName="text-lg text-foreground/80 max-w-2xl mx-auto"
gridClassName="flex flex-wrap justify-center gap-6 md:gap-8 w-full"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
cardTitle="Over 50+ companies have transformed their digital presence with our web design expertise"
cardTag="Client Success Stories"
cardTagIcon={CheckCircle}
cardAnimation="slide-up"
useInvertedBackground={false}
testimonials={[
{
id: "1", name: "Sarah Johnson", imageSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-white-shirt_23-2148095748.jpg", imageAlt: "Sarah Johnson"
},
{
id: "2", name: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/happy-bearded-man-busines-clothes-with-crossed-arms-looking-camera-gray_171337-11335.jpg", imageAlt: "Michael Chen"
},
{
id: "3", name: "Emily Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-sitting-library_273609-15843.jpg", imageAlt: "Emily Rodriguez"
},
{
id: "4", name: "David Kim", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-businessman-diplomatic-suit-looking-camera-standing-outside-front-startup-company-office-entrepreneur-man-working-marketing-presentation-outdoor-concept_482257-28140.jpg", imageAlt: "David Kim"
},
{
id: "5", name: "Jessica Martinez", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-4617.jpg", imageAlt: "Jessica Martinez"
},
{
id: "6", name: "James Wilson", imageSrc: "http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg", imageAlt: "James Wilson"
},
]}
className="w-full"
containerClassName="py-24 px-4"
cardClassName="max-w-2xl mx-auto p-12 rounded-pill text-center"
cardTitleClassName="text-2xl md:text-3xl font-bold mb-6"
cardTagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent mb-6"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTwelve
cardTitle={t.testimonialTitle}
cardTag={t.testimonialTag}
cardTagIcon={CheckCircle}
cardAnimation="slide-up"
useInvertedBackground={false}
testimonials={[
{
id: "1", name: language === "ar" ? "سارة جونسون" : "Sarah Johnson", imageSrc:
"http://img.b2bpic.net/free-photo/happy-business-woman-white-shirt_23-2148095748.jpg", imageAlt:
language === "ar" ? "سارة جونسون" : "Sarah Johnson"},
{
id: "2", name: language === "ar" ? "مايكل تشن" : "Michael Chen", imageSrc:
"http://img.b2bpic.net/free-photo/happy-bearded-man-busines-clothes-with-crossed-arms-looking-camera-gray_171337-11335.jpg", imageAlt:
language === "ar" ? "مايكل تشن" : "Michael Chen"},
{
id: "3", name:
language === "ar" ? "إميلي رودريغيز" : "Emily Rodriguez", imageSrc:
"http://img.b2bpic.net/free-photo/young-woman-sitting-library_273609-15843.jpg", imageAlt:
language === "ar"
? "إميلي رودريغيز"
: "Emily Rodriguez"},
{
id: "4", name: language === "ar" ? "ديفيد كيم" : "David Kim", imageSrc:
"http://img.b2bpic.net/free-photo/portrait-smiling-businessman-diplomatic-suit-looking-camera-standing-outside-front-startup-company-office-entrepreneur-man-working-marketing-presentation-outdoor-concept_482257-28140.jpg", imageAlt:
language === "ar" ? "ديفيد كيم" : "David Kim"},
{
id: "5", name:
language === "ar" ? "جيسيكا مارتينيز" : "Jessica Martinez", imageSrc:
"http://img.b2bpic.net/free-photo/close-up-portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-4617.jpg", imageAlt:
language === "ar"
? "جيسيكا مارتينيز"
: "Jessica Martinez"},
{
id: "6", name: language === "ar" ? "جيمس ويلسون" : "James Wilson", imageSrc:
"http://img.b2bpic.net/free-photo/close-up-entrepreneur-with-corporate-job-looking-camera-business-office-portrait-young-man-preparing-work-planning-development-industry-with-technology-computer_482257-29387.jpg", imageAlt:
language === "ar" ? "جيمس ويلسون" : "James Wilson"},
]}
className="w-full"
containerClassName="py-24 px-4"
cardClassName="max-w-2xl mx-auto p-12 rounded-pill text-center"
cardTitleClassName="text-2xl md:text-3xl font-bold mb-6"
cardTagClassName="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent mb-6"
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
title="Trusted by Leading Brands"
description="Partnering with innovative companies across industries"
tag="Our Clients"
tagIcon={CheckCircle}
tagAnimation="opacity"
textboxLayout="default"
useInvertedBackground={false}
buttons={[]}
buttonAnimation="none"
names={[
"TechFlow", "Innovate Inc", "CloudSync", "Acme Corp", "StartupXYZ", "Future Labs", "NextGen Digital"
]}
logos={[
"http://img.b2bpic.net/free-vector/gradient-technology-logo-template-collection_52683-16205.jpg", "http://img.b2bpic.net/free-vector/abstract-business-brochure-template_23-2147639039.jpg", "http://img.b2bpic.net/free-vector/gradient-rounded-abstract-business-logotype_23-2148198981.jpg", "http://img.b2bpic.net/free-vector/flat-design-fashion-accessories-logo-collection_23-2148879449.jpg", "http://img.b2bpic.net/free-vector/promotional-gift-voucher-collection_1232-32.jpg", "http://img.b2bpic.net/free-vector/industrial-company-logo-template_1071-31.jpg", "http://img.b2bpic.net/free-vector/doctor-office-logo-template_23-2149665556.jpg"
]}
speed={40}
showCard={true}
className="w-full"
containerClassName="py-24 px-4"
textBoxClassName="text-center mb-16"
textBoxTitleClassName="text-3xl md:text-4xl font-bold mb-4"
textBoxDescriptionClassName="text-lg text-foreground/80 max-w-2xl mx-auto"
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
title={t.trustTitle}
description={t.trustDesc}
tag={t.trustTag}
tagIcon={CheckCircle}
tagAnimation="opacity"
textboxLayout="default"
useInvertedBackground={false}
buttons={[]}
buttonAnimation="none"
names={[
"TechFlow", "Innovate Inc", "CloudSync", "Acme Corp", "StartupXYZ", "Future Labs", "NextGen Digital"]}
logos={[
"http://img.b2bpic.net/free-vector/gradient-technology-logo-template-collection_52683-16205.jpg", "http://img.b2bpic.net/free-vector/abstract-business-brochure-template_23-2147639039.jpg", "http://img.b2bpic.net/free-vector/gradient-rounded-abstract-business-logotype_23-2148198981.jpg", "http://img.b2bpic.net/free-vector/flat-design-fashion-accessories-logo-collection_23-2148879449.jpg", "http://img.b2bpic.net/free-vector/promotional-gift-voucher-collection_1232-32.jpg", "http://img.b2bpic.net/free-vector/industrial-company-logo-template_1071-31.jpg", "http://img.b2bpic.net/free-vector/doctor-office-logo-template_23-2149665556.jpg"]}
speed={40}
showCard={true}
className="w-full"
containerClassName="py-24 px-4"
textBoxClassName="text-center mb-16"
textBoxTitleClassName="text-3xl md:text-4xl font-bold mb-4"
textBoxDescriptionClassName="text-lg text-foreground/80 max-w-2xl mx-auto"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
title="Our Impact"
description="Proven results that demonstrate our expertise and commitment to client success"
tag="Results"
tagIcon={TrendingUp}
tagAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={true}
animationType="slide-up"
metrics={[
{
id: "1", value: "150+", title: "Projects Delivered", description: "Successful websites built and launched", imageSrc: "http://img.b2bpic.net/free-vector/template-dashboard-user-panel_23-2148375532.jpg", imageAlt: "Project success metrics"
},
{
id: "2", value: "95%", title: "Client Satisfaction", description: "Long-term partnerships and repeat clients", imageSrc: "http://img.b2bpic.net/free-photo/top-view-smiley-face-growth-chart_23-2148780650.jpg", imageAlt: "Client satisfaction rates"
},
]}
className="w-full"
containerClassName="py-24 px-4"
textBoxClassName="text-center mb-16"
textBoxTitleClassName="text-3xl md:text-5xl font-bold mb-4"
textBoxDescriptionClassName="text-lg text-foreground/80 max-w-2xl mx-auto"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
title={t.metricsTitle}
description={t.metricsDesc}
tag={t.metricsTag}
tagIcon={TrendingUp}
tagAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={true}
animationType="slide-up"
metrics={[
{
id: "1", value: "150+", title:
language === "ar"
? "المشاريع المسلمة"
: "Projects Delivered", description:
language === "ar"
? "مواقع ويب ناجحة تم بناؤها وإطلاقها"
: "Successful websites built and launched", imageSrc:
"http://img.b2bpic.net/free-vector/template-dashboard-user-panel_23-2148375532.jpg", imageAlt:
language === "ar"
? "مقاييس نجاح المشروع"
: "Project success metrics"},
{
id: "2", value: "95%", title:
language === "ar"
? "رضا العملاء"
: "Client Satisfaction", description:
language === "ar"
? "الشراكات طويلة الأجل والعملاء المتكررين"
: "Long-term partnerships and repeat clients", imageSrc:
"http://img.b2bpic.net/free-photo/top-view-smiley-face-growth-chart_23-2148780650.jpg", imageAlt:
language === "ar"
? "معدلات رضا العملاء"
: "Client satisfaction rates"},
]}
className="w-full"
containerClassName="py-24 px-4"
textBoxClassName="text-center mb-16"
textBoxTitleClassName="text-3xl md:text-5xl font-bold mb-4"
textBoxDescriptionClassName="text-lg text-foreground/80 max-w-2xl mx-auto"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="Webild"
columns={[
{
items: [
{ label: "Home", href: "#home" },
{ label: "About", href: "#about" },
{ label: "Portfolio", href: "#portfolio" },
],
},
{
items: [
{ label: "Team", href: "#team" },
{ label: "Testimonials", href: "#testimonials" },
{ label: "Contact", href: "#contact" },
],
},
{
items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
],
},
{
items: [
{ label: "Twitter", href: "https://twitter.com" },
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Instagram", href: "https://instagram.com" },
],
},
]}
className="w-full"
containerClassName="py-16 px-4 text-center"
logoClassName="text-3xl font-bold mb-12"
columnsClassName="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto"
columnClassName="flex flex-col gap-4"
itemClassName="text-foreground/70 hover:text-foreground transition-colors"
/>
</div>
</ThemeProvider>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText={t.brandName}
columns={[
{
items: [
{ label: t.navHome, href: "#home" },
{ label: t.navAbout, href: "#about" },
{ label: t.navPortfolio, href: "#portfolio" },
],
},
{
items: [
{ label: t.navTeam, href: "#team" },
{ label: t.testimonialTag, href: "#testimonials" },
{ label: t.navContact, href: "#contact" },
],
},
{
items: [
{
label:
language === "ar" ? "سياسة الخصوصية" : "Privacy Policy", href: "#"},
{
label:
language === "ar"
? "شروط الخدمة"
: "Terms of Service", href: "#"},
{
label:
language === "ar" ? "سياسة ملفات تعريف الارتباط" : "Cookie Policy", href: "#"},
],
},
{
items: [
{ label: "Twitter", href: "https://twitter.com" },
{ label: "LinkedIn", href: "https://linkedin.com" },
{ label: "Instagram", href: "https://instagram.com" },
],
},
]}
className="w-full"
containerClassName="py-16 px-4 text-center"
logoClassName="text-3xl font-bold mb-12"
columnsClassName="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto"
columnClassName="flex flex-col gap-4"
itemClassName="text-foreground/70 hover:text-foreground transition-colors"
/>
</div>
</ThemeProvider>
</div>
);
}

4
src/app/styles/base.css
View File

@@ -11,7 +11,7 @@ html {
body {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-montserrat), sans-serif;
font-family: var(--font-libre-baskerville), sans-serif;
position: relative;
min-height: 100vh;
overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
h4,
h5,
h6 {
font-family: var(--font-montserrat), sans-serif;
font-family: var(--font-libre-baskerville), sans-serif;
}

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

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #ffffff;
--card: #f9f9f9;
--foreground: #000612e6;
--primary-cta: #15479c;
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #ffffff;
--primary-cta: #a855f7;
--primary-cta-text: #ffffff;
--secondary-cta: #f9f9f9;
--secondary-cta: #010101;
--secondary-cta-text: #000612e6;
--accent: #e2e2e2;
--background-accent: #c4c4c4;
--accent: #a855f7;
--background-accent: #6b21a8;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);