diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 964c599..1c0f3ef 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -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 ( - - + + {children} - + + + - ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index 30bfe80..239a2f7 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -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 ( - - - - + + + + + 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 + + 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" + }`} + > + العربية + + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - + + + ); } diff --git a/src/app/styles/base.css b/src/app/styles/base.css index aa7fd03..8b2eae7 100644 --- a/src/app/styles/base.css +++ b/src/app/styles/base.css @@ -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; } diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css index 4fd73bf..77dd1b0 100644 --- a/src/app/styles/variables.css +++ b/src/app/styles/variables.css @@ -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);