Update src/components/LanguageSwitcher.tsx

Merge version_2 into main

src/app/MASTER_PROMPT.md

@@ -0,0 +1,85 @@
+# Enkidu Soft Website Generation Master Prompt
+
+This prompt is designed to generate comprehensive, high-quality website code based on the established Enkidu Soft design system, ensuring consistency, responsiveness, and premium aesthetics.
+
+## Project Details:
+- **Business Type**: [Business Type, e.g., AI Solutions Provider, FinTech Startup, E-commerce Platform]
+- **Brand Name**: [Brand Name]
+- **Target Audience & Personas**: [Detailed description of target audience and key user personas, including demographics, needs, pain points, and goals]
+
+## Design System & Brand Guidelines (Strictly Enforced):
+- **Design System**: Adhere strictly to the established Enkidu Soft premium design system.
+- **Color Palette**:
+    - Primary Brand Blue: `[Primary Brand Blue, e.g., #0046FF]` (Use for main CTAs, prominent highlights)
+    - Accent Electric Blue: `[Accent Electric Blue, e.g., #E6ECF5]` (Use for secondary highlights, interactive elements)
+    - Vibrant Coral/Orange: `[Vibrant Coral/Orange, e.g., #FF8040]` (Use for complementary accents, attention-grabbing elements)
+    - Premium Cream/Off-White: `[Premium Cream/Off-White, e.g., #F5F1DC]` (Use for backgrounds, subtle UI elements)
+    - Ensure excellent contrast and harmonious blending of these colors.
+- **Typography**: Utilize the "Public Sans" typography system exclusively for all text elements.
+- **Layouts**: Implement 8px-based editorial layouts for consistent spacing and alignment.
+- **Border-Radius**: Maintain the defined 'pill' border-radius for all interactive and card-like elements.
+- **Box Shadows**: Apply subtle box-shadows to card and elevated elements to enhance depth and visual hierarchy.
+- **Animations**: Implement 200-300ms ease-in-out animation standards for all interactive elements and transitions, ensuring smooth user experiences.
+
+## Core Website Sections:
+
+### 1. Header/Navigation:
+- **Brand Name**: [Brand Name]
+- **CTA Label (Navigation Button)**: [CTA Label, e.g., "Get in Touch", "Start Project"]
+- **Navigation Items**:
+    - Home: `/en` (and `/ar` for Arabic)
+    - Vision (About Us): `/en#vision` (and `/ar#vision-ar`)
+    - Services (Features): `/en#services` (and `/ar#services-ar`)
+    - Portfolio (Products/Projects): `/en#portfolio` (and `/ar#portfolio-ar`)
+    - Clients (Social Proof): `/en#clients` (and `/ar#clients-ar`)
+    - Contact: `/en#contact` (and `/ar#contact-ar`)
+
+### 2. Hero Section:
+- **Hero Headline**: [Hero Headline, e.g., "Engineering Excellence Delivered Reliably"]
+- **Supporting Subhead**: [Supporting Subhead, e.g., "We combine rigorous engineering discipline with deep market insight to turn ambitious visions into market-ready products."]
+- **CTA Label**: [CTA Label for hero button, e.g., "Explore Our Work"]
+- **Visuals**: Use dynamic and modern imagery or video reflecting [Business Type]'s cutting-edge nature.
+
+### 3. About/Vision Section:
+- **Vision/About Title**: [Vision/About Title, e.g., "Our Corporate Vision & Engineering Philosophy"]
+- **Vision/About Description**: [Detailed description of the company's vision, mission, and core values.]
+- **Key Bullet Points (if applicable)**: [List of 3-5 key values or differentiators.]
+- **Visuals**: Abstract representation of corporate strategy, growth, or a relevant team image.
+
+### 4. Services/Features Section:
+- **Services/Features Title**: [Services & Expertise List, e.g., "Elite Software Development Capabilities"]
+- **Services/Features Description**: [Overall description of the services provided.]
+- **Individual Services/Features**: [Provide a list of 3-5 distinct services/features, each with a title, detailed description, and a relevant Lucide icon (e.g., Cog, Cloud, ShieldCheck).]
+- **Visuals for each service**: Pair each service with 1-2 modern, abstract, or tech-related images.
+
+### 5. Portfolio/Projects Section:
+- **Portfolio Title**: [Portfolio Project Examples, e.g., "Our Flagship Projects & Impact"]
+- **Portfolio Description**: [Overview of the company's project showcase.]
+- **Individual Projects**: [Provide 3-6 specific project examples, each with a name, category (FinTech, Supply Chain, HealthTech, etc.), variants (Web, API, Cloud, Mobile, IoT, AI/ML), and a relevant, high-quality image. Focus on enterprise-level solutions.]
+
+### 6. Clients/Social Proof Section:
+- **Clients Title**: [Client Logos/Partnerships, e.g., "Trusted by Industry Leaders"]
+- **Clients Description**: [Text emphasizing trust and partnerships with leading companies.]
+- **Client/Partner Names**: [List of 5-8 example client/partner names.]
+
+### 7. Contact Section:
+- **Contact Section Goal**: [Specific goal for the contact section, e.g., "Transform Your Vision Into Reality"]
+- **Contact Tag**: "Partner with Us"
+- **Contact Title**: "Transform Your Vision Into Reality"
+- **Contact Description**: "Ready to discuss your next ambitious software project? Fill out the form below, and our expert team will reach out to schedule a consultation and explore how [Brand Name] can accelerate your success."
+- **Input Placeholder**: "Your business email"
+- **Button Text**: "Start a Project"
+- **Terms Text**: "By clicking 'Start a Project' you're confirming that you agree with our Privacy Policy and Terms of Service."
+- **Icon**: `Mail` from `lucide-react`.
+
+## Technical & Localization Requirements:
+- **Dual-Language Support**: The generated website MUST include full dual-language (Arabic/English) detection and layout configuration.
+    - English content for `/en` pages.
+    - Arabic content for `/ar` pages, including appropriate right-to-left (RTL) layout adjustments where necessary.
+    - Navigation links should correctly point to the respective language versions (e.g., `/en#vision` for English, `/ar#vision-ar` for Arabic).
+- **SEO/Metadata**: Ensure appropriate metadata is generated for each page (title, description, openGraph, twitter, robots), including language-specific URLs.
+- **Responsiveness**: The entire website must be fully responsive and optimized for all device sizes (mobile, tablet, desktop).
+- **Performance**: Prioritize performance optimization for fast loading times and smooth interactions.
+
+## Specific Feature or Section Request (Optional):
+- **Specific Feature or Section Request**: [Describe any additional specific feature or section desired, e.g., "Add a 'Pricing' page with 3 plans", "Integrate a blog section with recent posts", "Include a 'Careers' page with job listings."]

src/app/[locale]/layout.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import ProductCart from '@/components/ecommerce/cart/ProductCart';
+import { useParams } from 'next/navigation';
+import { LanguageSwitcher } from '@/components/LanguageSwitcher';
+import { Locale } from '@/lib/i18nConfig';
+
+export default function LocaleLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>)
+{
+  const params = useParams();
+  const locale = params.locale as Locale;
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-shift"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="largeSmallSizeMediumTitles"
+      background="blurBottom"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="solid"
+      headingFontWeight="bold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: `/${locale}` },
+              { name: "Vision", id: `#about` },
+              { name: "Services", id: `#product` },
+              { name: "Portfolio", id: `#team` },
+              { name: "Clients", id: `#testimonial` },
+              { name: "Contact", id: `#contact` },
+            ]}
+            brandName="Enkidu Soft"
+            button={{
+              text: "Get in Touch",              href: `#contact`
+            }}
+            animateOnLoad={true}
+          >
+            <LanguageSwitcher currentLocale={locale} />
+          </NavbarLayoutFloatingInline>
+        </div>
+        {children}
+        {/* The ProductCart is a global component, typically rendered within a layout. Moved here. */}
+        <div id="ecommerce" data-section="ecommerce">
+          <ProductCart
+            isOpen={false}
+            onClose={() => {}}
+            items={[
+              {
+                id: "item1",                name: "Sample Product",                price: "99.99",                quantity: 1,
+                imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241207.jpg",                imageAlt: "Sample Product Image"
+              }
+            ]}
+            total="99.99"
+            buttons={[
+              { text: "Checkout", onClick: () => console.log("Checkout clicked") }
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/[locale]/page.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
+import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+
+export default function LocalizedLandingPage() {
+  return (
+    <>
+      <div id="about" data-section="about">
+        <SplitAbout
+          textboxLayout="default"
+          useInvertedBackground={false}
+          imageSrc="http://img.b2bpic.net/free-photo/network-connections_1048-7667.jpg"
+          imageAlt="Network connections"
+          title="Our Story & Mission"
+          description="We are a company dedicated to innovation and excellence, striving to deliver cutting-edge solutions for our clients."
+          bulletPoints={[
+            { title: "Innovation driven", description: "Driving innovation across all our solutions." },
+            { title: "Client-focused", description: "Prioritizing client needs and delivering tailored results." },
+            { title: "Excellence in execution", description: "Committing to high-quality execution in every project." }
+          ]}
+        />
+      </div>
+
+      <div id="product" data-section="product">
+        <ProductCardThree
+          animationType="slide-up"
+          textboxLayout="default"
+          gridVariant="uniform-all-items-equal"
+          useInvertedBackground={false}
+          title="Our Featured Products"
+          description="Explore our range of innovative products designed to meet your needs."
+        />
+      </div>
+
+      <div id="team" data-section="team">
+        <TeamCardTwo
+          animationType="slide-up"
+          textboxLayout="default"
+          gridVariant="uniform-all-items-equal"
+          useInvertedBackground={false}
+          title="Meet Our Team"
+          description="A dedicated group of professionals passionate about technology and innovation."
+          members={[
+            {
+              id: "john-doe",              name: "John Doe",              role: "CEO",              imageSrc: "http://img.b2bpic.net/free-photo/focused-woman-working-with-ai-chatbot-her-desktop-computer_482257-120813.jpg",              imageAlt: "John Doe, CEO", description: "Leading our company with vision and expertise."
+            },
+            {
+              id: "jane-smith",              name: "Jane Smith",              role: "CTO",              imageSrc: "http://img.b2bpic.net/free-photo/african-american-software-developer-does-visual-coding-creating-software_482257-127024.jpg",              imageAlt: "Jane Smith, CTO", description: "Pioneering our technological advancements."
+            }
+          ]}
+        />
+      </div>
+
+      <div id="testimonial" data-section="testimonial">
+        <TestimonialCardFifteen
+          useInvertedBackground={false}
+          testimonial="Working with this team has been a game-changer for our business. Their expertise and dedication are unmatched."
+          rating={5}
+          ratingAnimation="slide-up"
+          author="Alice Johnson"
+          avatars={[
+            {
+              src: "http://img.b2bpic.net/free-photo/focused-woman-working-with-ai-chatbot-her-desktop-computer_482257-120813.jpg",              alt: "Alice Johnson"
+            }
+          ]}
+          avatarsAnimation="slide-up"
+        />
+      </div>
+    </>
+  );
+}

src/app/layout.tsx

@@ -1,36 +1,25 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
-import { Inter } from "next/font/google";
+import { Public_Sans } from "next/font/google";
 import "./globals.css";
 import "@/lib/gsap-setup";
 import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
-import { Public_Sans } from "next/font/google";
-
-
+import { i18n } from '@/lib/i18nConfig'; // New import
 
 export const metadata: Metadata = {
   title: 'Enkidu Soft - Engineering Excellence',
   description: 'Enkidu Soft partners with enterprise leaders to architect, build, and scale transformative software solutions with rigorous engineering and deep market insight.',
   openGraph: {
-    "title": "Enkidu Soft - Engineering Excellence",
-    "description": "Enkidu Soft partners with enterprise leaders to architect, build, and scale transformative software solutions with rigorous engineering and deep market insight.",
-    "url": "https://www.enkidusoft.com/en",
-    "siteName": "Enkidu Soft",
-    "images": [
+    "title": "Enkidu Soft - Engineering Excellence",    "description": "Enkidu Soft partners with enterprise leaders to architect, build, and scale transformative software solutions with rigorous engineering and deep market insight.",    "url": "https://www.enkidusoft.com/en",    "siteName": "Enkidu Soft",    "images": [
       {
-        "url": "http://img.b2bpic.net/free-photo/geometric-abstract-background-technology-concept-connecting-dots-design_53876-153353.jpg",
-        "alt": "Abstract data flow and secure connections"
+        "url": "http://img.b2bpic.net/free-photo/geometric-abstract-background-technology-concept-connecting-dots-design_53876-153353.jpg",        "alt": "Abstract data flow and secure connections"
       }
     ],
     "type": "website"
   },
   twitter: {
-    "card": "summary_large_image",
-    "title": "Enkidu Soft - Engineering Excellence",
-    "description": "Enkidu Soft partners with enterprise leaders to architect, build, and scale transformative software solutions with rigorous engineering and deep market insight.",
-    "images": [
+    "card": "summary_large_image",    "title": "Enkidu Soft - Engineering Excellence",    "description": "Enkidu Soft partners with enterprise leaders to architect, build, and scale transformative software solutions with rigorous engineering and deep market insight.",    "images": [
       "http://img.b2bpic.net/free-photo/geometric-abstract-background-technology-concept-connecting-dots-design_53876-153353.jpg"
     ]
   },
@@ -41,17 +30,23 @@ export const metadata: Metadata = {
 };
 
 const publicSans = Public_Sans({
-  variable: "--font-public-sans",
-  subsets: ["latin"],
+  variable: "--font-public-sans",  subsets: ["latin"],
 });
 
+// Generate static params for all locales
+export function generateStaticParams() {
+  return i18n.locales.map((locale) => ({ locale }));
+}
+
 export default function RootLayout({
   children,
+  params: { locale }, // Accept locale from the URL
 }: Readonly<{
   children: React.ReactNode;
+  params: { locale: string }; // Type definition for params
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang={locale} dir={locale === 'ar' ? 'rtl' : 'ltr'} suppressHydrationWarning>
       <ServiceWrapper>
         <body className={`${publicSans.variable} antialiased`}>
           <Tag />

src/app/page.tsx

@@ -4,10 +4,11 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import ProductCart from '@/components/ecommerce/cart/ProductCart';
 import SplitAbout from '@/components/sections/about/SplitAbout';
 import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
 import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 
 export default function LandingPage() {
   return (
@@ -63,14 +64,34 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="product" data-section="product">
+  <div id="portfolio" data-section="portfolio">
       <ProductCardThree
       animationType="slide-up"
       textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
+      gridVariant="bento-grid"
       useInvertedBackground={false}
-      title="Our Featured Products"
-      description="Explore our range of innovative products designed to meet your needs."
+      title="Our Portfolio Showcase"
+      description="Discover our diverse projects and the impact we've made."
+      products={[
+        { id: "p1", name: "Enterprise CRM", price: "Software Development", imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241207.jpg", imageAlt: "Enterprise CRM project" },
+        { id: "p2", name: "AI-Powered Analytics", price: "AI & Data Science", imageSrc: "http://img.b2bpic.net/free-photo/network-connections_1048-7667.jpg", imageAlt: "AI-Powered Analytics project" },
+        { id: "p3", name: "Fintech Platform", price: "Fintech Solutions", imageSrc: "http://img.b2bpic.net/free-photo/geometric-abstract-background-technology-concept-connecting-dots-design_53876-153353.jpg", imageAlt: "Fintech Platform project" },
+        { id: "p4", name: "Mobile E-commerce App", price: "Mobile Development", imageSrc: "http://img.b2bpic.net/free-photo/close-up-of-business-man-using-laptop_1048-18305.jpg", imageAlt: "Mobile E-commerce App project" }
+      ]}
+    />
+  </div>
+
+  <div id="clients" data-section="clients">
+      <SocialProofOne
+      textboxLayout="default"
+      useInvertedBackground={false}
+      title="Trusted by Industry Leaders"
+      description="We partner with leading organizations to drive innovation and growth."
+      names={[
+        "TechCorp",        "Innovate Global",        "Future Solutions",        "Dynamic Systems",        "Quantum Leap",        "Synergy Corp",        "Global Dynamics"
+      ]}
+      showCard={false}
+      speed={30}
     />
   </div>
 
@@ -108,19 +129,20 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="ecommerce" data-section="ecommerce">
-      <ProductCart
-      isOpen={false}
-      onClose={() => {}}
-      items={[
-        {
-          id: "item1",          name: "Sample Product",          price: "99.99",          quantity: 1,
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241207.jpg",          imageAlt: "Sample Product Image"}
-      ]}
-      total="99.99"
-      buttons={[
-        { text: "Checkout", onClick: () => console.log("Checkout clicked") }
+  <div id="contact" data-section="contact">
+      <ContactSplitForm
+      title="Partner with Us"
+      description="Ready to transform your enterprise? Get in touch with our experts today."
+      inputs={[
+        { name: "name", type: "text", placeholder: "Your Name", required: true },
+        { name: "email", type: "email", placeholder: "Your Email", required: true },
+        { name: "company", type: "text", placeholder: "Your Company" }
       ]}
+      textarea={{ name: "message", placeholder: "Your message...", rows: 5, required: false }}
+      buttonText="Send Message"
+      imageSrc="http://img.b2bpic.net/free-photo/contact-us-customer-service-concept-man-using-laptop_23-2149454178.jpg"
+      imageAlt="Contact us"
+      useInvertedBackground={false}
     />
   </div>
       </ReactLenis>

src/components/LanguageSwitcher.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { useRouter, usePathname } from 'next/navigation';
+import { i18n, Locale } from '@/lib/i18nConfig';
+import { useState, useEffect } from 'react';
+
+interface LanguageSwitcherProps {
+  currentLocale: Locale;
+}
+
+export function LanguageSwitcher({ currentLocale }: LanguageSwitcherProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) {
+    return null; // Or a loading spinner
+  }
+
+  const onSelectChange = (newLocale: Locale) => {
+    // Replace the current locale in the pathname with the new one
+    const newPath = `/${newLocale}${pathname.substring(3)}`; // Assuming /en, /fr, /es are 3 chars
+    router.push(newPath);
+
+    // Set cookie for middleware to remember preferred locale
+    document.cookie = `NEXT_LOCALE=${newLocale}; path=/; max-age=31536000;`;
+  };
+
+  return (
+    <select
+      onChange={(e) => onSelectChange(e.target.value as Locale)}
+      value={currentLocale}
+      className="w-[100px] bg-background-accent text-foreground p-2 rounded-md border border-gray-300 dark:border-gray-700"
+    >
+      {i18n.locales.map((locale) => (
+        <option key={locale} value={locale}>
+          {locale.toUpperCase()}
+        </option>
+      ))}
+    </select>
+  );
+}

src/lib/i18nConfig.ts

@@ -0,0 +1,6 @@
+export const i18n = {
+  defaultLocale: 'en',
+  locales: ['en', 'fr', 'es'], // Define your supported locales
+} as const;
+
+export type Locale = (typeof i18n)['locales'][number];

src/middleware.ts

@@ -0,0 +1,38 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { i18n } from './lib/i18nConfig';
+
+const PUBLIC_FILE_REGEX = /\.(.*)$/;
+
+export function middleware(request: NextRequest) {
+  const locale = request.cookies.get('NEXT_LOCALE')?.value || i18n.defaultLocale;
+  const { pathname } = request.nextUrl;
+
+  // Skip internal Next.js paths and static files
+  if (
+    pathname.startsWith('/_next') ||
+    pathname.startsWith('/api') ||
+    PUBLIC_FILE_REGEX.test(pathname)
+  ) {
+    return;
+  }
+
+  // Check if there is any supported locale in the pathname
+  const pathnameHasLocale = i18n.locales.some(
+    (loc) => pathname.startsWith(`/${loc}/`) || pathname === `/${loc}`
+  );
+
+  if (pathnameHasLocale) {
+    return NextResponse.next();
+  }
+
+  // Rewrite to include the default locale if no locale is present
+  request.nextUrl.pathname = `/${locale}${pathname}`;
+  return NextResponse.redirect(request.nextUrl);
+}
+
+export const config = {
+  matcher: [
+    '/((?!api|_next/static|_next/image|favicon.ico).*)',
+    '/',
+  ],
+};