Upload 35 files

.astro/content-assets.mjs

@@ -0,0 +1 @@
+export default new Map();

.astro/content-modules.mjs

@@ -0,0 +1 @@
+export default new Map();

.astro/data-store.json

@@ -0,0 +1 @@
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.10.1","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://blueprintrak.com\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":4321,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[],\"remotePatterns\":[],\"responsiveStyles\":false},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"i18n\":{\"defaultLocale\":\"ar\",\"locales\":[\"ar\",\"en\"],\"routing\":{\"prefixDefaultLocale\":false,\"redirectToDefaultLocale\":true,\"fallbackType\":\"redirect\"}},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"liveContentCollections\":false,\"csp\":false},\"legacy\":{\"collections\":false}}"]

.astro/settings.json

@@ -0,0 +1,5 @@
+{
+	"_variables": {
+		"lastUpdateCheck": 1751112608444
+	}
+}

.astro/types.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

.bolt/config.json

@@ -0,0 +1,3 @@
+{
+  "template": "astro"
+}

.codesandbox/Dockerfile

@@ -0,0 +1 @@
+FROM node:18-bullseye

.gitignore

@@ -1,41 +1,24 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# build output
+dist/
 
-# dependencies
-/node_modules
-/.pnp
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/versions
-
-# testing
-/coverage
-
-# next.js
-/.next/
-/out/
-
-# production
-/build
+# generated types
+.astro/
 
-# misc
-.DS_Store
-*.pem
+# dependencies
+node_modules/
 
-# debug
+# logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
+pnpm-debug.log*
 
-# env files (can opt-in for committing if needed)
-.env*
+# environment variables
+.env
+.env.production
 
-# vercel
-.vercel
+# macOS-specific files
+.DS_Store
 
-# typescript
-*.tsbuildinfo
-next-env.d.ts
+# jetbrains setting folder
+.idea/

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

README.md

@@ -1,22 +1,48 @@
----
-title: DeepSite v2
-emoji: 🐳
-colorFrom: blue
-colorTo: blue
-sdk: docker
-pinned: true
-app_port: 3000
-license: mit
-short_description: Generate any application with DeepSeek
-models:
-  - deepseek-ai/DeepSeek-V3-0324
-  - deepseek-ai/DeepSeek-R1-0528
----
-
-# DeepSite 🐳
-
-DeepSite is a coding platform powered by DeepSeek AI, designed to make coding smarter and more efficient. Tailored for developers, data scientists, and AI engineers, it integrates generative AI into your coding projects to enhance creativity and productivity.
-
-## How to use it locally
-
-Follow [this discussion](https://huggingface.co/spaces/enzostvs/deepsite/discussions/74)
+# Astro Starter Kit: Basics
+
+```sh
+npm create astro@latest -- --template basics
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+│   └── favicon.svg
+├── src/
+│   ├── layouts/
+│   │   └── Layout.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+To learn more about the folder structure of an Astro project, refer to [our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

astro.config.mjs

@@ -0,0 +1,30 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+import tailwind from '@astrojs/tailwind';
+import sitemap from '@astrojs/sitemap';
+
+// https://astro.build/config
+export default defineConfig({
+  site: 'https://blueprintrak.com',
+  integrations: [
+    tailwind({
+      applyBaseStyles: false,
+    }),
+    sitemap({
+      i18n: {
+        defaultLocale: 'ar',
+        locales: {
+          ar: 'ar-AE',
+          en: 'en-US'
+        }
+      }
+    })
+  ],
+  i18n: {
+    defaultLocale: 'ar',
+    locales: ['ar', 'en'],
+    routing: {
+      prefixDefaultLocale: false
+    }
+  }
+});

package.json

@@ -1,64 +1,22 @@
 {
-  "name": "deepsite-v2",
-  "version": "0.1.0",
+  "name": "blueprint-engineering-consultancy",
+  "type": "module",
+  "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbopack",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
   },
   "dependencies": {
-    "@huggingface/hub": "^2.2.0",
-    "@huggingface/inference": "^4.0.3",
-    "@monaco-editor/react": "^4.7.0-rc.0",
-    "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-collapsible": "^1.1.11",
-    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-select": "^2.2.5",
-    "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.5",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-toggle": "^1.1.9",
-    "@radix-ui/react-toggle-group": "^1.1.10",
-    "@radix-ui/react-tooltip": "^1.2.7",
-    "@tanstack/eslint-plugin-query": "^5.78.0",
-    "@tanstack/react-query": "^5.80.6",
-    "@tanstack/react-query-devtools": "^5.80.6",
-    "axios": "^1.9.0",
-    "class-variance-authority": "^0.7.1",
-    "classnames": "^2.5.1",
-    "clsx": "^2.1.1",
-    "date-fns": "^4.1.0",
-    "lucide-react": "^0.513.0",
-    "monaco-editor": "^0.52.2",
-    "mongoose": "^8.15.1",
-    "next": "15.3.3",
-    "next-themes": "^0.4.6",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-icons": "^5.5.0",
-    "react-use": "^17.6.0",
-    "redaxios": "^0.5.1",
-    "sonner": "^2.0.5",
-    "tailwind-merge": "^3.3.0",
-    "zod": "^3.25.57"
-  },
-  "devDependencies": {
-    "@eslint/eslintrc": "^3",
-    "@tailwindcss/postcss": "^4",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "15.3.3",
-    "file-loader": "^6.2.0",
-    "tailwindcss": "^4",
-    "tw-animate-css": "^1.3.4",
-    "typescript": "^5",
-    "url-loader": "^4.1.1"
+    "astro": "^5.2.5",
+    "@astrojs/tailwind": "^5.1.1",
+    "@astrojs/sitemap": "^3.2.1",
+    "tailwindcss": "^3.4.0",
+    "aos": "^2.3.4",
+    "@fontsource/cairo": "^5.0.18",
+    "@fontsource/poppins": "^5.0.8",
+    "lucide-astro": "^0.447.0"
   }
-}
+}

src/components/About.astro

@@ -0,0 +1,134 @@
+---
+import { getLangFromUrl, useTranslations } from '../i18n/ui';
+import { Target, Eye, Heart, Award } from 'lucide-astro';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+
+const values = [
+  {
+    icon: Target,
+    title: t('about.values.precision.title'),
+    description: t('about.values.precision.description')
+  },
+  {
+    icon: Heart,
+    title: t('about.values.innovation.title'),
+    description: t('about.values.innovation.description')
+  },
+  {
+    icon: Award,
+    title: t('about.values.quality.title'),
+    description: t('about.values.quality.description')
+  }
+];
+---
+
+<section id="about" class="section-padding bg-blueprint-light dark:bg-slate-900">
+  <div class="container-custom">
+    <!-- Section Header -->
+    <div class="text-center mb-16" data-aos="fade-up">
+      <h2 class="text-4xl md:text-5xl font-bold text-blueprint-primary dark:text-white mb-6">
+        {t('about.title')}
+      </h2>
+      <div class="w-24 h-1 bg-blueprint-accent mx-auto mb-8"></div>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+      <!-- Left Content -->
+      <div data-aos="fade-right">
+        <h3 class="text-3xl font-bold text-blueprint-primary dark:text-white mb-6">
+          {t('about.subtitle')}
+        </h3>
+        
+        <div class="space-y-6 text-lg text-blueprint-dark dark:text-blueprint-light leading-relaxed">
+          <p>{t('about.description.1')}</p>
+          <p>{t('about.description.2')}</p>
+          <p>{t('about.description.3')}</p>
+        </div>
+
+        <!-- Vision & Mission -->
+        <div class="mt-12 space-y-8">
+          <div class="flex items-start space-x-4 rtl:space-x-reverse">
+            <div class="flex items-center justify-center w-12 h-12 bg-blueprint-accent/20 rounded-lg flex-shrink-0">
+              <Eye class="w-6 h-6 text-blueprint-accent" />
+            </div>
+            <div>
+              <h4 class="text-xl font-bold text-blueprint-primary dark:text-white mb-2">
+                {t('about.vision.title')}
+              </h4>
+              <p class="text-blueprint-dark dark:text-blueprint-light">
+                {t('about.vision.description')}
+              </p>
+            </div>
+          </div>
+
+          <div class="flex items-start space-x-4 rtl:space-x-reverse">
+            <div class="flex items-center justify-center w-12 h-12 bg-blueprint-accent/20 rounded-lg flex-shrink-0">
+              <Target class="w-6 h-6 text-blueprint-accent" />
+            </div>
+            <div>
+              <h4 class="text-xl font-bold text-blueprint-primary dark:text-white mb-2">
+                {t('about.mission.title')}
+              </h4>
+              <p class="text-blueprint-dark dark:text-blueprint-light">
+                {t('about.mission.description')}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Right Content - Values -->
+      <div data-aos="fade-left">
+        <!-- Values -->
+        <div class="space-y-6">
+          <h4 class="text-2xl font-bold text-blueprint-primary dark:text-white text-center mb-8">
+            {t('about.values.title')}
+          </h4>
+          
+          {values.map((value, index) => (
+            <div 
+              class="flex items-center space-x-4 rtl:space-x-reverse p-6 bg-white dark:bg-blueprint-primary rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300"
+              data-aos="fade-up"
+              data-aos-delay={index * 150}
+            >
+              <div class="flex items-center justify-center w-16 h-16 bg-blueprint-accent/20 rounded-lg flex-shrink-0">
+                <value.icon class="w-8 h-8 text-blueprint-accent" />
+              </div>
+              <div>
+                <h5 class="text-xl font-bold text-blueprint-primary dark:text-white mb-2">
+                  {value.title}
+                </h5>
+                <p class="text-blueprint-dark dark:text-blueprint-light">
+                  {value.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <!-- Why Choose Blueprint -->
+        <div class="mt-12 p-6 bg-blueprint-accent/10 rounded-xl border border-blueprint-accent/20" data-aos="fade-up" data-aos-delay="600">
+          <h4 class="text-xl font-bold text-blueprint-primary dark:text-white mb-4">
+            {t('about.why.title')}
+          </h4>
+          <ul class="space-y-2 text-blueprint-dark dark:text-blueprint-light">
+            <li class="flex items-start space-x-2 rtl:space-x-reverse">
+              <span class="text-blueprint-accent mt-1">•</span>
+              <span>{t('about.why.point1')}</span>
+            </li>
+            <li class="flex items-start space-x-2 rtl:space-x-reverse">
+              <span class="text-blueprint-accent mt-1">•</span>
+              <span>{t('about.why.point2')}</span>
+            </li>
+            <li class="flex items-start space-x-2 rtl:space-x-reverse">
+              <span class="text-blueprint-accent mt-1">•</span>
+              <span>{t('about.why.point3')}</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

src/components/Contact.astro

@@ -0,0 +1,169 @@
+---
+import { getLangFromUrl, useTranslations } from '../i18n/ui';
+import { MapPin, Phone, Mail, MessageCircle, Clock } from 'lucide-astro';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+---
+
+<section id="contact" class="section-padding bg-white dark:bg-blueprint-primary">
+  <div class="container-custom">
+    <!-- Section Header -->
+    <div class="text-center mb-16" data-aos="fade-up">
+      <h2 class="text-4xl md:text-5xl font-bold text-blueprint-primary dark:text-white mb-6">
+        {t('contact.title')}
+      </h2>
+      <p class="text-xl text-blueprint-dark dark:text-blueprint-light max-w-3xl mx-auto">
+        {t('contact.description')}
+      </p>
+    </div>
+
+    <!-- Contact Information - Full Width -->
+    <div class="max-w-4xl mx-auto" data-aos="fade-up">
+      <h3 class="text-3xl font-bold text-blueprint-primary dark:text-white mb-12 text-center">
+        {t('contact.info.title')}
+      </h3>
+
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
+        <!-- Address -->
+        <div class="flex items-start space-x-4 rtl:space-x-reverse p-6 bg-blueprint-light dark:bg-slate-800 rounded-2xl shadow-lg">
+          <div class="flex items-center justify-center w-12 h-12 bg-blueprint-accent/20 rounded-lg flex-shrink-0">
+            <MapPin class="w-6 h-6 text-blueprint-accent" />
+          </div>
+          <div>
+            <h4 class="font-bold text-blueprint-primary dark:text-white mb-2">
+              {t('contact.address.title')}
+            </h4>
+            <p class="text-blueprint-dark dark:text-blueprint-light leading-relaxed" set:html={t('contact.address.text')}></p>
+            <a 
+              href="https://maps.app.goo.gl/Xys7qA59S2tpJPWS9" 
+              target="_blank"
+              class="inline-flex items-center text-blueprint-accent hover:text-blueprint-accent/80 transition-colors duration-300 mt-2"
+            >
+              {t('contact.address.map')}
+            </a>
+          </div>
+        </div>
+
+        <!-- Phone -->
+        <div class="flex items-start space-x-4 rtl:space-x-reverse p-6 bg-blueprint-light dark:bg-slate-800 rounded-2xl shadow-lg">
+          <div class="flex items-center justify-center w-12 h-12 bg-blueprint-accent/20 rounded-lg flex-shrink-0">
+            <Phone class="w-6 h-6 text-blueprint-accent" />
+          </div>
+          <div>
+            <h4 class="font-bold text-blueprint-primary dark:text-white mb-2">
+              {t('contact.phone.title')}
+            </h4>
+            <a 
+              href="tel:+971501611234" 
+              class="text-blueprint-dark dark:text-blueprint-light hover:text-blueprint-accent transition-colors duration-300 text-lg block"
+            >
+              +971 50 161 1234
+            </a>
+            <p class="text-sm text-blueprint-dark dark:text-blueprint-light mt-1">
+              {t('contact.phone.note')}
+            </p>
+          </div>
+        </div>
+
+        <!-- Email -->
+        <div class="flex items-start space-x-4 rtl:space-x-reverse p-6 bg-blueprint-light dark:bg-slate-800 rounded-2xl shadow-lg">
+          <div class="flex items-center justify-center w-12 h-12 bg-blueprint-accent/20 rounded-lg flex-shrink-0">
+            <Mail class="w-6 h-6 text-blueprint-accent" />
+          </div>
+          <div>
+            <h4 class="font-bold text-blueprint-primary dark:text-white mb-2">
+              {t('contact.email.title')}
+            </h4>
+            <a 
+              href="mailto:[email protected]" 
+              class="text-blueprint-dark dark:text-blueprint-light hover:text-blueprint-accent transition-colors duration-300 text-lg break-all"
+            >
+              [email protected]
+            </a>
+          </div>
+        </div>
+
+        <!-- Working Hours -->
+        <div class="flex items-start space-x-4 rtl:space-x-reverse p-6 bg-blueprint-light dark:bg-slate-800 rounded-2xl shadow-lg">
+          <div class="flex items-center justify-center w-12 h-12 bg-blueprint-accent/20 rounded-lg flex-shrink-0">
+            <Clock class="w-6 h-6 text-blueprint-accent" />
+          </div>
+          <div class="flex-1">
+            <h4 class="font-bold text-blueprint-primary dark:text-white mb-4">
+              {t('contact.hours.title')}
+            </h4>
+            
+            <!-- Working Hours Schedule -->
+            <div class="space-y-3">
+              <!-- Sunday to Thursday -->
+              <div>
+                <div class="font-semibold text-blueprint-primary dark:text-white mb-1">
+                  {lang === 'ar' ? 'الأحد - الخميس' : 'Sunday - Thursday'}
+                </div>
+                <div class="space-y-1 text-sm">
+                  <div class="flex items-center justify-between">
+                    <span class="text-blueprint-dark dark:text-blueprint-light">
+                      {lang === 'ar' ? 'الفترة الصباحية' : 'Morning'}
+                    </span>
+                    <span class="font-medium text-blueprint-accent">08:00 - 14:00</span>
+                  </div>
+                  <div class="flex items-center justify-between">
+                    <span class="text-blueprint-dark dark:text-blueprint-light">
+                      {lang === 'ar' ? 'الفترة المسائية' : 'Evening'}
+                    </span>
+                    <span class="font-medium text-blueprint-accent">17:00 - 20:30</span>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Friday -->
+              <div class="pt-2 border-t border-blueprint-accent/10">
+                <div class="flex items-center justify-between">
+                  <span class="font-semibold text-blueprint-primary dark:text-white">
+                    {lang === 'ar' ? 'الجمعة' : 'Friday'}
+                  </span>
+                  <span class="font-medium text-blueprint-accent">08:00 - 12:00</span>
+                </div>
+              </div>
+
+              <!-- Saturday -->
+              <div class="pt-2 border-t border-blueprint-accent/10">
+                <div class="text-center">
+                  <span class="text-blueprint-dark dark:text-blueprint-light text-sm">
+                    {lang === 'ar' ? 'السبت: عطلة' : 'Saturday: Closed'}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- WhatsApp CTA - Centered -->
+      <div class="max-w-2xl mx-auto">
+        <div class="p-8 bg-green-50 dark:bg-green-900/20 rounded-2xl border border-green-200 dark:border-green-800 text-center">
+          <div class="flex items-center justify-center mb-6">
+            <div class="flex items-center justify-center w-16 h-16 bg-green-500 rounded-full">
+              <MessageCircle class="w-8 h-8 text-white" />
+            </div>
+          </div>
+          <h4 class="text-2xl font-bold text-green-800 dark:text-green-300 mb-3">
+            {t('contact.whatsapp.title')}
+          </h4>
+          <p class="text-green-700 dark:text-green-400 mb-6 text-lg">
+            {t('contact.whatsapp.description')}
+          </p>
+          <a 
+            href="https://wa.me/971501611234?text=استشارة" 
+            target="_blank"
+            class="inline-flex items-center bg-green-500 hover:bg-green-600 text-white px-8 py-4 rounded-lg font-semibold transition-colors duration-300 text-lg"
+          >
+            <MessageCircle class="w-6 h-6 mr-3" />
+            {t('contact.whatsapp.button')}
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

src/components/Footer.astro

@@ -0,0 +1,175 @@
+---
+import { getLangFromUrl, useTranslations, languages } from '../i18n/ui';
+import { MapPin, Phone, Mail, MessageCircle, Facebook, Instagram, Linkedin } from 'lucide-astro';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+---
+
+<footer class="bg-blueprint-primary dark:bg-slate-900 text-white">
+  <!-- Main Footer Content -->
+  <div class="section-padding border-b border-blueprint-accent/20">
+    <div class="container-custom">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+        <!-- Company Info -->
+        <div class="lg:col-span-2">
+          <div class="flex items-center mb-6">
+            <img src="/logo.jpg" alt="Blueprint Engineering Consultancy Logo" class="h-20 w-auto" />
+          </div>
+          
+          <p class="text-blueprint-light leading-relaxed mb-6 max-w-md">
+            {t('footer.description')}
+          </p>
+
+          <!-- Social Media Links -->
+          <div class="flex space-x-4 rtl:space-x-reverse">
+            <a href="#" class="w-10 h-10 bg-blueprint-accent/20 rounded-lg flex items-center justify-center hover:bg-blueprint-accent transition-colors duration-300">
+              <Facebook class="w-5 h-5" />
+            </a>
+            <a href="#" class="w-10 h-10 bg-blueprint-accent/20 rounded-lg flex items-center justify-center hover:bg-blueprint-accent transition-colors duration-300">
+              <Instagram class="w-5 h-5" />
+            </a>
+            <a href="#" class="w-10 h-10 bg-blueprint-accent/20 rounded-lg flex items-center justify-center hover:bg-blueprint-accent transition-colors duration-300">
+              <Linkedin class="w-5 h-5" />
+            </a>
+          </div>
+        </div>
+
+        <!-- Quick Links -->
+        <div>
+          <h4 class="text-xl font-bold mb-6 text-blueprint-accent">
+            {t('footer.quick_links')}
+          </h4>
+          <ul class="space-y-3">
+            <li>
+              <a href="#about" class="text-blueprint-light hover:text-blueprint-accent transition-colors duration-300">
+                {t('nav.about')}
+              </a>
+            </li>
+            <li>
+              <a href="#services" class="text-blueprint-light hover:text-blueprint-accent transition-colors duration-300">
+                {t('nav.services')}
+              </a>
+            </li>
+            <li>
+              <a href="#workflow" class="text-blueprint-light hover:text-blueprint-accent transition-colors duration-300">
+                {t('nav.workflow')}
+              </a>
+            </li>
+            <li>
+              <a href="#contact" class="text-blueprint-light hover:text-blueprint-accent transition-colors duration-300">
+                {t('nav.contact')}
+              </a>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Contact Info -->
+        <div>
+          <h4 class="text-xl font-bold mb-6 text-blueprint-accent">
+            {t('footer.contact_info')}
+          </h4>
+          <ul class="space-y-4">
+            <li class="flex items-start space-x-3 rtl:space-x-reverse">
+              <MapPin class="w-5 h-5 text-blueprint-accent mt-1 flex-shrink-0" />
+              <div class="text-blueprint-light text-sm" set:html={t('contact.address.text')}></div>
+            </li>
+            <li class="flex items-center space-x-3 rtl:space-x-reverse">
+              <Phone class="w-5 h-5 text-blueprint-accent flex-shrink-0" />
+              <a href="tel:+971501611234" class="text-blueprint-light hover:text-blueprint-accent transition-colors duration-300">
+                +971 50 161 1234
+              </a>
+            </li>
+            <li class="flex items-center space-x-3 rtl:space-x-reverse">
+              <Mail class="w-5 h-5 text-blueprint-accent flex-shrink-0" />
+              <a href="mailto:[email protected]" class="text-blueprint-light hover:text-blueprint-accent transition-colors duration-300 break-all">
+                [email protected]
+              </a>
+            </li>
+          </ul>
+
+          <!-- WhatsApp CTA -->
+          <div class="mt-6">
+            <a 
+              href="https://wa.me/971501611234" 
+              target="_blank"
+              class="inline-flex items-center bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg font-semibold transition-colors duration-300"
+            >
+              <MessageCircle class="w-4 h-4 mr-2" />
+              {t('footer.whatsapp')}
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Bottom Footer -->
+  <div class="py-6">
+    <div class="container-custom">
+      <div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
+        <div class="text-sm text-blueprint-light">
+          © <span id="current-year"></span> {t('footer.rights')}
+        </div>
+        
+        <!-- Language Selector in Footer -->
+        <div class="flex items-center space-x-2 rtl:space-x-reverse text-sm">
+          <span class="text-blueprint-light">{t('footer.language')}</span>
+          <select 
+            class="bg-blueprint-primary border border-blueprint-accent/30 text-white rounded px-2 py-1 text-sm"
+            data-footer-language-selector
+          >
+            {Object.entries(languages).map(([code, name]) => (
+              <option value={code} selected={code === lang}>
+                {name}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>
+
+<!-- WhatsApp Floating Button -->
+<div class="fixed bottom-6 right-6 z-50" data-aos="zoom-in" data-aos-delay="1000">
+  <a 
+    href="https://wa.me/971501611234?text=مرحباً، أريد استشارة هندسية" 
+    target="_blank"
+    class="flex items-center justify-center w-14 h-14 bg-green-500 hover:bg-green-600 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 animate-bounce-slow"
+    title={lang === 'ar' ? 'تواصل عبر واتساب' : 'Contact via WhatsApp'}
+  >
+    <MessageCircle class="w-6 h-6" />
+  </a>
+</div>
+
+<script>
+  // Set current year dynamically
+  document.addEventListener('DOMContentLoaded', () => {
+    const currentYearElement = document.getElementById('current-year');
+    if (currentYearElement) {
+      currentYearElement.textContent = new Date().getFullYear().toString();
+    }
+  });
+
+  // Footer language selector
+  const footerLanguageSelector = document.querySelector('[data-footer-language-selector]') as HTMLSelectElement;
+  
+  if (footerLanguageSelector) {
+    footerLanguageSelector.addEventListener('change', (e) => {
+      const selectedLang = (e.target as HTMLSelectElement).value;
+      const currentPath = window.location.pathname;
+      
+      let newPath;
+      if (selectedLang === 'ar') {
+        // Going to Arabic (default) - remove /en prefix
+        newPath = currentPath === '/en' || currentPath === '/en/' ? '/' : currentPath.replace('/en', '') || '/';
+      } else {
+        // Going to English - add /en prefix
+        newPath = currentPath === '/' ? '/en' : `/en${currentPath}`;
+      }
+      
+      window.location.href = newPath;
+    });
+  }
+</script>

src/components/Header.astro

@@ -0,0 +1,142 @@
+---
+import { getLangFromUrl, useTranslations } from '../i18n/ui';
+import LanguageSelector from './LanguageSelector.astro';
+import ThemeToggle from './ThemeToggle.astro';
+import { Menu, X } from 'lucide-astro';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+---
+
+<header class="fixed top-0 left-0 right-0 z-50 transition-all duration-300" data-header>
+  <nav class="container-custom">
+    <div class="flex items-center justify-between h-20 px-4 transition-all duration-300" data-nav-container>
+      <!-- Logo -->
+      <a href={lang === 'ar' ? '/' : `/${lang}`} class="flex items-center">
+        <img 
+          src="/logo.jpg" 
+          alt="Blueprint Engineering Consultancy Logo" 
+          class="h-14 w-auto transition-all duration-300" 
+          data-logo
+        />
+      </a>
+
+      <!-- Desktop Navigation -->
+      <div class="hidden lg:flex items-center space-x-8 rtl:space-x-reverse">
+        <a href="#about" class="nav-link">{t('nav.about')}</a>
+        <a href="#services" class="nav-link">{t('nav.services')}</a>
+        <a href="#workflow" class="nav-link">{t('nav.workflow')}</a>
+        <a href="#contact" class="nav-link">{t('nav.contact')}</a>
+      </div>
+
+      <!-- Language Selector & Theme Toggle -->
+      <div class="flex items-center space-x-4 rtl:space-x-reverse">
+        <ThemeToggle />
+        <LanguageSelector />
+        
+        <!-- Mobile Menu Button -->
+        <button class="lg:hidden text-white p-2" data-mobile-menu-toggle>
+          <Menu class="w-6 h-6" data-menu-icon />
+          <X class="w-6 h-6 hidden" data-close-icon />
+        </button>
+      </div>
+    </div>
+
+    <!-- Mobile Navigation -->
+    <div class="lg:hidden hidden bg-blueprint-primary/95 backdrop-blur-md border-t border-blueprint-accent/20" data-mobile-menu>
+      <div class="px-4 py-4 space-y-4">
+        <a href="#about" class="block nav-link">{t('nav.about')}</a>
+        <a href="#services" class="block nav-link">{t('nav.services')}</a>
+        <a href="#workflow" class="block nav-link">{t('nav.workflow')}</a>
+        <a href="#contact" class="block nav-link">{t('nav.contact')}</a>
+      </div>
+    </div>
+  </nav>
+</header>
+
+<script>
+  // Mobile menu toggle
+  const mobileMenuToggle = document.querySelector('[data-mobile-menu-toggle]');
+  const mobileMenu = document.querySelector('[data-mobile-menu]');
+  const menuIcon = document.querySelector('[data-menu-icon]');
+  const closeIcon = document.querySelector('[data-close-icon]');
+
+  mobileMenuToggle?.addEventListener('click', () => {
+    mobileMenu?.classList.toggle('hidden');
+    menuIcon?.classList.toggle('hidden');
+    closeIcon?.classList.toggle('hidden');
+  });
+
+  // Header scroll effects
+  let lastScrollTop = 0;
+  const header = document.querySelector('[data-header]') as HTMLElement;
+  const navContainer = document.querySelector('[data-nav-container]') as HTMLElement;
+  const logo = document.querySelector('[data-logo]') as HTMLElement;
+
+  function updateHeader() {
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    
+    if (scrollTop > 50) {
+      // Scrolled state
+      header.classList.add('bg-blueprint-primary/95', 'backdrop-blur-md', 'border-b', 'border-blueprint-accent/20', 'shadow-lg');
+      navContainer.classList.add('h-16');
+      navContainer.classList.remove('h-20');
+      logo.classList.add('h-10');
+      logo.classList.remove('h-14');
+    } else {
+      // Top state
+      header.classList.remove('bg-blueprint-primary/95', 'backdrop-blur-md', 'border-b', 'border-blueprint-accent/20', 'shadow-lg');
+      navContainer.classList.remove('h-16');
+      navContainer.classList.add('h-20');
+      logo.classList.remove('h-10');
+      logo.classList.add('h-14');
+    }
+
+    // Hide/show header on scroll
+    if (scrollTop > lastScrollTop && scrollTop > 100) {
+      // Scrolling down
+      header.style.transform = 'translateY(-100%)';
+    } else {
+      // Scrolling up
+      header.style.transform = 'translateY(0)';
+    }
+    
+    lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
+  }
+
+  window.addEventListener('scroll', updateHeader);
+  
+  // Initial call
+  updateHeader();
+
+  // Smooth scroll for anchor links
+  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+      e.preventDefault();
+      const target = document.querySelector(this.getAttribute('href'));
+      if (target) {
+        const headerHeight = header?.offsetHeight || 0;
+        const targetPosition = target.offsetTop - headerHeight - 20;
+        window.scrollTo({
+          top: targetPosition,
+          behavior: 'smooth'
+        });
+        
+        // Close mobile menu if open
+        mobileMenu?.classList.add('hidden');
+        menuIcon?.classList.remove('hidden');
+        closeIcon?.classList.add('hidden');
+      }
+    });
+  });
+</script>
+
+<style>
+  .nav-link {
+    @apply text-white hover:text-blueprint-accent transition-colors duration-300 font-medium;
+  }
+  
+  .nav-link:hover {
+    @apply text-blueprint-accent;
+  }
+</style>

src/components/Hero.astro

@@ -0,0 +1,89 @@
+---
+import { getLangFromUrl, useTranslations } from '../i18n/ui';
+import { ArrowRight, MessageCircle } from 'lucide-astro';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+const isRtl = lang === 'ar' || lang === 'ur' || lang === 'ps';
+---
+
+<section class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-blueprint-primary via-blueprint-primary to-blue-900 dark:from-blueprint-primary dark:via-slate-900 dark:to-blueprint-primary">
+  <!-- Animated Background -->
+  <div class="absolute inset-0">
+    <div class="floating-shapes"></div>
+    <div class="blueprint-pattern opacity-10"></div>
+  </div>
+  
+  <!-- Animated Blueprint Lines -->
+  <div class="absolute inset-0 overflow-hidden">
+    <svg class="absolute top-1/4 left-1/4 w-96 h-96 opacity-5" viewBox="0 0 400 400">
+      <defs>
+        <pattern id="blueprint-grid" width="40" height="40" patternUnits="userSpaceOnUse">
+          <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#C69C49" stroke-width="1"/>
+        </pattern>
+      </defs>
+      <rect width="100%" height="100%" fill="url(#blueprint-grid)" />
+      <rect x="50" y="50" width="300" height="200" fill="none" stroke="#C69C49" stroke-width="2" opacity="0.6">
+        <animate attributeName="stroke-dasharray" values="0 800;800 0;0 800" dur="8s" repeatCount="indefinite"/>
+      </rect>
+    </svg>
+  </div>
+
+  <div class="container-custom relative z-10">
+    <div class="text-center px-4" data-aos="fade-up" data-aos-duration="1000">
+      <!-- Logo Animation -->
+      <div class="mb-8" data-aos="zoom-in" data-aos-delay="200">
+        <div class="inline-flex items-center justify-center mb-6">
+          <img src="/logo.jpg" alt="Blueprint Engineering Consultancy Logo" class="h-28 w-auto animate-pulse-slow" />
+        </div>
+      </div>
+
+      <!-- Hero Title -->
+      <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight" data-aos="fade-up" data-aos-delay="400">
+        <span class="block text-blueprint-accent animate-fade-in">{t('hero.title')}</span>
+        <span class="block text-2xl md:text-3xl lg:text-4xl font-normal mt-2 text-blueprint-accent">شركة بلو برينت للاستشارات الهندسية</span>
+      </h1>
+
+      <!-- Hero Description -->
+      <p class="text-xl md:text-2xl text-blueprint-light max-w-4xl mx-auto mb-8 leading-relaxed" data-aos="fade-up" data-aos-delay="600">
+        {t('hero.description')}
+      </p>
+
+      <!-- CTA Buttons -->
+      <div class="flex flex-col sm:flex-row gap-4 justify-center items-center" data-aos="fade-up" data-aos-delay="800">
+        <a href="#contact" class="btn-primary text-lg px-8 py-4 inline-flex items-center space-x-2 rtl:space-x-reverse group">
+          <MessageCircle class="w-5 h-5" />
+          <span>{t('hero.cta.consultation')}</span>
+        </a>
+        <a href="#services" class="btn-secondary text-lg px-8 py-4 inline-flex items-center space-x-2 rtl:space-x-reverse text-white border-white hover:bg-white hover:text-blueprint-primary group">
+          <span>{t('hero.cta.services')}</span>
+          <ArrowRight class={`w-5 h-5 transition-transform group-hover:translate-x-1 ${isRtl ? 'rtl-flip' : ''}`} />
+        </a>
+      </div>
+
+      <!-- Scroll Indicator -->
+      <div class="absolute bottom-8 left-1/2 transform -translate-x-1/2" data-aos="fade-up" data-aos-delay="1000">
+        <div class="w-6 h-10 border-2 border-white/50 rounded-full flex justify-center">
+          <div class="w-1 h-3 bg-blueprint-accent rounded-full mt-2 animate-bounce"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  @keyframes typewriter {
+    from {
+      width: 0;
+    }
+    to {
+      width: 100%;
+    }
+  }
+  
+  .typewriter {
+    overflow: hidden;
+    white-space: nowrap;
+    animation: typewriter 4s steps(40, end) 1s 1 normal both;
+  }
+</style>

src/components/LanguageSelector.astro

@@ -0,0 +1,74 @@
+---
+import { languages, getLangFromUrl } from '../i18n/ui';
+import { Globe } from 'lucide-astro';
+
+const lang = getLangFromUrl(Astro.url);
+const currentPath = Astro.url.pathname;
+---
+
+<div class="relative" data-language-selector>
+  <button class="flex items-center space-x-2 rtl:space-x-reverse text-white hover:text-blueprint-accent transition-colors duration-300 p-2 rounded-lg hover:bg-white/10" data-language-button>
+    <Globe class="w-5 h-5" />
+    <span class="text-sm font-medium hidden sm:block">{languages[lang]}</span>
+  </button>
+  
+  <div class="absolute top-full right-0 mt-2 w-32 bg-white dark:bg-blueprint-primary rounded-lg shadow-xl border border-blueprint-accent/20 hidden z-50" data-language-dropdown>
+    <div class="py-2">
+      {Object.entries(languages).map(([code, name]) => {
+        return (
+          <button 
+            class={`block w-full text-left px-4 py-2 text-sm transition-colors duration-200 ${
+              code === lang 
+                ? 'bg-blueprint-accent text-white' 
+                : 'text-blueprint-dark dark:text-white hover:bg-blueprint-light dark:hover:bg-blueprint-accent/20'
+            }`}
+            data-lang={code}
+          >
+            {name}
+          </button>
+        );
+      })}
+    </div>
+  </div>
+</div>
+
+<script>
+  // Language selector dropdown
+  const languageSelector = document.querySelector('[data-language-selector]');
+  const languageButton = document.querySelector('[data-language-button]');
+  const languageDropdown = document.querySelector('[data-language-dropdown]');
+
+  languageButton?.addEventListener('click', (e) => {
+    e.stopPropagation();
+    languageDropdown?.classList.toggle('hidden');
+  });
+
+  document.addEventListener('click', (e) => {
+    if (!languageSelector?.contains(e.target as Node)) {
+      languageDropdown?.classList.add('hidden');
+    }
+  });
+
+  // Handle language selection
+  languageDropdown?.addEventListener('click', (e) => {
+    const target = e.target as HTMLElement;
+    const selectedLang = target.getAttribute('data-lang');
+    
+    if (selectedLang) {
+      const currentPath = window.location.pathname;
+      
+      let newPath;
+      if (selectedLang === 'ar') {
+        // Going to Arabic (default) - remove /en prefix
+        newPath = currentPath === '/en' || currentPath === '/en/' ? '/' : currentPath.replace('/en', '') || '/';
+      } else {
+        // Going to English - add /en prefix
+        newPath = currentPath === '/' ? '/en' : `/en${currentPath}`;
+      }
+      
+      window.location.href = newPath;
+    }
+    
+    languageDropdown.classList.add('hidden');
+  });
+</script>

src/components/Services.astro

@@ -0,0 +1,133 @@
+---
+import { getLangFromUrl, useTranslations } from '../i18n/ui';
+import { Building, Zap, FileText, Shield, Users, CheckCircle } from 'lucide-astro';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+
+const services = [
+  {
+    icon: Building,
+    title: t('services.architectural.title'),
+    description: t('services.architectural.description'),
+    features: [
+      lang === 'ar' ? 'مخططات معمارية مبدئية ونهائية' : 'Preliminary and final architectural plans',
+      lang === 'ar' ? 'تصميم الواجهات والمقاطع' : 'Facade and section design',
+      lang === 'ar' ? 'الالتزام بكود البناء المحلي' : 'Compliance with local building codes'
+    ]
+  },
+  {
+    icon: Shield,
+    title: t('services.structural.title'),
+    description: t('services.structural.description'),
+    features: [
+      lang === 'ar' ? 'تحليل إنشائي متكامل' : 'Comprehensive structural analysis',
+      lang === 'ar' ? 'مخططات حديد التسليح' : 'Reinforcement steel plans',
+      lang === 'ar' ? 'التوافق مع شروط السلامة' : 'Compliance with safety requirements'
+    ]
+  },
+  {
+    icon: Zap,
+    title: t('services.mep.title'),
+    description: t('services.mep.description'),
+    features: [
+      lang === 'ar' ? 'أنظمة الكهرباء والإنارة' : 'Electrical and lighting systems',
+      lang === 'ar' ? 'التكييف والتهوية' : 'HVAC and ventilation',
+      lang === 'ar' ? 'المياه والصرف الصحي' : 'Water and drainage systems'
+    ]
+  },
+  {
+    icon: FileText,
+    title: t('services.permit.title'),
+    description: t('services.permit.description'),
+    features: [
+      lang === 'ar' ? 'تجهيز ملف المشروع' : 'Project file preparation',
+      lang === 'ar' ? 'التقديم الإلكتروني' : 'Electronic submission',
+      lang === 'ar' ? 'متابعة الإجراءات' : 'Procedure follow-up'
+    ]
+  },
+  {
+    icon: Users,
+    title: t('services.supervision.title'),
+    description: t('services.supervision.description'),
+    features: [
+      lang === 'ar' ? 'زيارات ميدانية دورية' : 'Regular site visits',
+      lang === 'ar' ? 'تقارير إشراف' : 'Supervision reports',
+      lang === 'ar' ? 'مراجعة المخططات' : 'Plan reviews'
+    ]
+  },
+  {
+    icon: CheckCircle,
+    title: t('services.completion.title'),
+    description: t('services.completion.description'),
+    features: [
+      lang === 'ar' ? 'مخططات As Built' : 'As-built drawings',
+      lang === 'ar' ? 'شهادة الإنجاز' : 'Completion certificate',
+      lang === 'ar' ? 'اعتماد الجهات الرسمية' : 'Official authority approval'
+    ]
+  }
+];
+---
+
+<section id="services" class="section-padding bg-white dark:bg-blueprint-primary">
+  <div class="container-custom">
+    <!-- Section Header -->
+    <div class="text-center mb-16" data-aos="fade-up">
+      <h2 class="text-4xl md:text-5xl font-bold text-blueprint-primary dark:text-white mb-6">
+        {t('services.title')}
+      </h2>
+      <p class="text-xl text-blueprint-dark dark:text-blueprint-light max-w-3xl mx-auto">
+        {t('services.description')}
+      </p>
+    </div>
+
+    <!-- Services Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+      {services.map((service, index) => (
+        <div 
+          class="group bg-blueprint-light dark:bg-blueprint-primary/50 rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 border border-transparent hover:border-blueprint-accent/30"
+          data-aos="fade-up"
+          data-aos-delay={index * 100}
+        >
+          <!-- Icon -->
+          <div class="flex items-center justify-center w-16 h-16 bg-blueprint-accent/20 rounded-xl mb-6 group-hover:bg-blueprint-accent group-hover:text-white transition-all duration-300">
+            <service.icon class="w-8 h-8 text-blueprint-accent group-hover:text-white transition-colors duration-300" />
+          </div>
+
+          <!-- Title -->
+          <h3 class="text-2xl font-bold text-blueprint-primary dark:text-white mb-4 group-hover:text-blueprint-accent transition-colors duration-300">
+            {service.title}
+          </h3>
+
+          <!-- Description -->
+          <p class="text-blueprint-dark dark:text-blueprint-light mb-6 leading-relaxed">
+            {service.description}
+          </p>
+
+          <!-- Features -->
+          <ul class="space-y-2">
+            {service.features.map((feature) => (
+              <li class="flex items-start space-x-2 rtl:space-x-reverse text-sm text-blueprint-dark dark:text-blueprint-light">
+                <CheckCircle class="w-4 h-4 text-blueprint-accent mt-0.5 flex-shrink-0" />
+                <span>{feature}</span>
+              </li>
+            ))}
+          </ul>
+
+          <!-- Hover Effect -->
+          <div class="absolute inset-0 bg-gradient-to-r from-blueprint-accent/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-2xl"></div>
+        </div>
+      ))}
+    </div>
+
+    <!-- CTA Section -->
+    <div class="text-center mt-16" data-aos="fade-up" data-aos-delay="600">
+      <p class="text-lg text-blueprint-dark dark:text-blueprint-light mb-8">
+        {t('services.cta.question')}
+      </p>
+      <a href="#contact" class="btn-primary text-lg px-8 py-4 inline-flex items-center space-x-2 rtl:space-x-reverse">
+        <span>{t('services.cta.button')}</span>
+      </a>
+    </div>
+  </div>
+</section>

src/components/ThemeToggle.astro

@@ -0,0 +1,74 @@
+---
+import { Sun, Moon } from 'lucide-astro';
+---
+
+<button 
+  class="relative p-2 text-white hover:text-blueprint-accent transition-colors duration-300 rounded-lg hover:bg-white/10 overflow-hidden"
+  data-theme-toggle
+  aria-label="Toggle dark/light theme"
+>
+  <div class="relative w-5 h-5">
+    <Sun class="w-5 h-5 absolute inset-0 transition-all duration-500 transform" data-sun-icon />
+    <Moon class="w-5 h-5 absolute inset-0 transition-all duration-500 transform" data-moon-icon />
+  </div>
+</button>
+
+<script>
+  function initTheme() {
+    const themeToggle = document.querySelector('[data-theme-toggle]');
+    const htmlElement = document.documentElement;
+    const sunIcon = document.querySelector('[data-sun-icon]') as HTMLElement;
+    const moonIcon = document.querySelector('[data-moon-icon]') as HTMLElement;
+    
+    // Get saved theme or default to dark
+    const savedTheme = localStorage.getItem('theme') || 'dark';
+    
+    // Function to update icons with animation
+    function updateIcons(isDark: boolean) {
+      if (isDark) {
+        // Dark mode - show moon, hide sun
+        sunIcon.style.transform = 'rotate(180deg) scale(0)';
+        sunIcon.style.opacity = '0';
+        moonIcon.style.transform = 'rotate(0deg) scale(1)';
+        moonIcon.style.opacity = '1';
+      } else {
+        // Light mode - show sun, hide moon
+        moonIcon.style.transform = 'rotate(-180deg) scale(0)';
+        moonIcon.style.opacity = '0';
+        sunIcon.style.transform = 'rotate(0deg) scale(1)';
+        sunIcon.style.opacity = '1';
+      }
+    }
+    
+    // Apply theme
+    if (savedTheme === 'dark') {
+      htmlElement.classList.add('dark');
+      updateIcons(true);
+    } else {
+      htmlElement.classList.remove('dark');
+      updateIcons(false);
+    }
+    
+    // Theme toggle functionality
+    themeToggle?.addEventListener('click', () => {
+      const isDark = htmlElement.classList.contains('dark');
+      
+      if (isDark) {
+        htmlElement.classList.remove('dark');
+        localStorage.setItem('theme', 'light');
+        updateIcons(false);
+      } else {
+        htmlElement.classList.add('dark');
+        localStorage.setItem('theme', 'dark');
+        updateIcons(true);
+      }
+    });
+  }
+
+  // Initialize on DOM load
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initTheme);
+  } else {
+    initTheme();
+  }
+</script>

src/components/Workflow.astro

@@ -0,0 +1,226 @@
+---
+import { getLangFromUrl, useTranslations } from '../i18n/ui';
+import { 
+  MessageCircle, 
+  Package, 
+  FileText, 
+  MapPin, 
+  Drafting, 
+  Eye, 
+  CheckCircle, 
+  Building, 
+  FileCheck, 
+  Calculator, 
+  Handshake, 
+  HardHat, 
+  Award, 
+  Wrench, 
+  ClipboardCheck 
+} from 'lucide-astro';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+
+const workflowSteps = [
+  {
+    number: '1',
+    icon: MessageCircle,
+    title: lang === 'ar' ? 'طلب الاستشارة الأولية' : 'Initial Consultation Request',
+    description: lang === 'ar' 
+      ? 'نستمع لرؤيتك، نُحلل احتياجاتك، ونقدم لك استشارة مهنية أولية توجهك للبداية الصحيحة.'
+      : 'We listen to your vision, analyze your needs, and provide you with an initial professional consultation to guide you to the right start.'
+  },
+  {
+    number: '2',
+    icon: Package,
+    title: lang === 'ar' ? 'اختيار الباقة المناسبة (تصميم + إشراف)' : 'Choosing the Right Package (Design + Supervision)',
+    description: lang === 'ar' 
+      ? 'نُقدّم لك خيارات باقات التصميم والإشراف حسب طبيعة مشروعك وميزانيتك، مع شرح الخدمات التي تتضمنها كل باقة.'
+      : 'We offer you design and supervision package options according to your project nature and budget, with explanation of services included in each package.'
+  },
+  {
+    number: '3',
+    icon: FileText,
+    title: lang === 'ar' ? 'توقيع عقد التصميم' : 'Design Contract Signing',
+    description: lang === 'ar' 
+      ? 'توقيع عقد رسمي شامل يوضح نطاق العمل، المخرجات، والجدول الزمني.'
+      : 'Signing a comprehensive official contract that clarifies the scope of work, deliverables, and timeline.'
+  },
+  {
+    number: '4',
+    icon: MapPin,
+    title: lang === 'ar' ? 'زيارة الموقع والرفع المساحي' : 'Site Visit and Survey',
+    description: lang === 'ar' 
+      ? 'إجراء رفع مساحي دقيق باستخدام أجهزة معتمدة وتوثيق معلومات الموقع.'
+      : 'Conducting accurate surveying using certified equipment and documenting site information.'
+  },
+  {
+    number: '5',
+    icon: Drafting,
+    title: lang === 'ar' ? 'إعداد التصاميم والمخططات الهندسية' : 'Preparing Designs and Engineering Plans',
+    description: lang === 'ar' 
+      ? 'تصميم معماري، إنشائي، كهربائي وميكانيكي متكامل، وفق كودات البلدية والاشتراطات البيئية والاستدامة.'
+      : 'Comprehensive architectural, structural, electrical and mechanical design, according to municipal codes and environmental and sustainability requirements.'
+  },
+  {
+    number: '6',
+    icon: Eye,
+    title: lang === 'ar' ? 'مراجعة المالك للمخططات' : 'Owner Review of Plans',
+    description: lang === 'ar' 
+      ? 'عرض المخططات للمالك لمراجعتها وإبداء الملاحظات الفنية والجمالية.'
+      : 'Presenting plans to the owner for review and providing technical and aesthetic comments.'
+  },
+  {
+    number: '7',
+    icon: CheckCircle,
+    title: lang === 'ar' ? 'الاعتماد النهائي من المالك' : 'Final Approval from Owner',
+    description: lang === 'ar' 
+      ? 'اعتماد نهائي للتصاميم المعدلة تمهيدًا للتقديم على الجهات المختصة.'
+      : 'Final approval of modified designs in preparation for submission to relevant authorities.'
+  },
+  {
+    number: '8',
+    icon: Building,
+    title: lang === 'ar' ? 'اعتماد الجهات الرسمية (بلدية رأس الخيمة)' : 'Official Authority Approval (Ras Al Khaimah Municipality)',
+    description: lang === 'ar' 
+      ? 'تقديم الملف الهندسي الكامل للبلدية ومتابعة الإجراءات حتى إصدار رخصة البناء.'
+      : 'Submitting the complete engineering file to the municipality and following up procedures until building permit issuance.'
+  },
+  {
+    number: '9',
+    icon: FileCheck,
+    title: lang === 'ar' ? 'إعداد وثائق المناقصة وطرحها' : 'Preparing and Issuing Tender Documents',
+    description: lang === 'ar' 
+      ? 'إعداد مستندات الطرح (مخططات تنفيذية، BOQ، مواصفات)، وتوزيعها على مقاولين معتمدين.'
+      : 'Preparing tender documents (shop drawings, BOQ, specifications), and distributing them to certified contractors.'
+  },
+  {
+    number: '10',
+    icon: Calculator,
+    title: lang === 'ar' ? 'تحليل العطاءات واختيار المقاول' : 'Bid Analysis and Contractor Selection',
+    description: lang === 'ar' 
+      ? 'تحليل العروض فنيًا وماليًا، وتقديم توصية مهنية للمالك لاختيار الأنسب.'
+      : 'Technical and financial analysis of offers, and providing professional recommendation to the owner for selecting the most suitable.'
+  },
+  {
+    number: '11',
+    icon: Handshake,
+    title: lang === 'ar' ? 'توقيع عقد التنفيذ وتسليم الموقع' : 'Execution Contract Signing and Site Handover',
+    description: lang === 'ar' 
+      ? 'توقيع عقد المقاولة، ثم إصدار محضر تسليم الموقع الرسمي بحضور الاستشاري.'
+      : 'Signing the contracting agreement, then issuing official site handover minutes in the presence of the consultant.'
+  },
+  {
+    number: '12',
+    icon: HardHat,
+    title: lang === 'ar' ? 'الإشراف الهندسي خلال التنفيذ' : 'Engineering Supervision During Execution',
+    description: lang === 'ar' 
+      ? 'متابعة التنفيذ ميدانيًا، إصدار تقارير إشراف، اعتماد المواد، والمطابقة مع كود البناء والسلامة.'
+      : 'Field monitoring of execution, issuing supervision reports, material approval, and compliance with building and safety codes.'
+  },
+  {
+    number: '13',
+    icon: Award,
+    title: lang === 'ar' ? 'استخراج شهادة الإنجاز' : 'Completion Certificate Issuance',
+    description: lang === 'ar' 
+      ? 'إعداد وتقديم طلب شهادة الإنجاز من بلدية رأس الخيمة، والتي تُستخدم لتوصيل الكهرباء، المياه، والاتصالات.'
+      : 'Preparing and submitting completion certificate application from Ras Al Khaimah Municipality, which is used for electricity, water, and telecommunications connection.'
+  },
+  {
+    number: '14',
+    icon: Wrench,
+    title: lang === 'ar' ? 'متابعة أعمال الصيانة خلال الضمان' : 'Maintenance Work Follow-up During Warranty',
+    description: lang === 'ar' 
+      ? 'الإشراف على تنفيذ الملاحظات المسجلة في الاستلام الابتدائي، والتأكد من جاهزية الموقع.'
+      : 'Supervising the implementation of observations recorded in preliminary handover, and ensuring site readiness.'
+  },
+  {
+    number: '15',
+    icon: ClipboardCheck,
+    title: lang === 'ar' ? 'الاستلام النهائي للمشروع' : 'Final Project Handover',
+    description: lang === 'ar' 
+      ? 'إصدار محضر استلام نهائي رسمي، وإغلاق الملف الهندسي للمشروع.'
+      : 'Issuing official final handover minutes, and closing the engineering file for the project.'
+  }
+];
+---
+
+<section id="workflow" class="section-padding bg-white dark:bg-blueprint-primary">
+  <div class="container-custom">
+    <!-- Section Header -->
+    <div class="text-center mb-16" data-aos="fade-up">
+      <h2 class="text-4xl md:text-5xl font-bold text-blueprint-primary dark:text-white mb-6">
+        {t('workflow.title')}
+      </h2>
+      <h3 class="text-2xl md:text-3xl font-semibold text-blueprint-accent mb-6">
+        {t('workflow.subtitle')}
+      </h3>
+      <div class="w-24 h-1 bg-blueprint-accent mx-auto mb-8"></div>
+      <p class="text-xl text-blueprint-dark dark:text-blueprint-light max-w-4xl mx-auto">
+        {t('workflow.description')}
+      </p>
+    </div>
+
+    <!-- Timeline -->
+    <div class="relative">
+      <!-- Timeline Line -->
+      <div class="absolute left-1/2 transform -translate-x-1/2 w-1 bg-blueprint-accent/30 h-full hidden lg:block"></div>
+      
+      <!-- Steps -->
+      <div class="space-y-12">
+        {workflowSteps.map((step, index) => (
+          <div 
+            class={`flex items-center ${index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'} flex-col lg:space-x-8 rtl:lg:space-x-reverse`}
+            data-aos="fade-up"
+            data-aos-delay={index * 100}
+          >
+            <!-- Content -->
+            <div class={`flex-1 ${index % 2 === 0 ? 'lg:text-right rtl:lg:text-left' : 'lg:text-left rtl:lg:text-right'} text-center lg:text-left`}>
+              <div class="bg-blueprint-light dark:bg-slate-800 p-6 rounded-2xl shadow-lg hover:shadow-xl transition-shadow duration-300 border border-blueprint-accent/10">
+                <div class="flex items-center justify-center lg:hidden mb-4">
+                  <div class="flex items-center justify-center w-16 h-16 bg-blueprint-accent rounded-full text-white font-bold text-xl">
+                    {step.number}
+                  </div>
+                </div>
+                
+                <h3 class="text-xl font-bold text-blueprint-primary dark:text-white mb-3">
+                  {step.title}
+                </h3>
+                <p class="text-blueprint-dark dark:text-blueprint-light leading-relaxed">
+                  {step.description}
+                </p>
+              </div>
+            </div>
+
+            <!-- Timeline Node -->
+            <div class="relative flex-shrink-0 hidden lg:flex">
+              <div class="flex items-center justify-center w-20 h-20 bg-blueprint-accent rounded-full text-white font-bold text-xl shadow-lg z-10">
+                {step.number}
+              </div>
+              <div class="absolute inset-0 flex items-center justify-center w-20 h-20 bg-blueprint-accent/20 rounded-full animate-pulse"></div>
+            </div>
+
+            <!-- Empty space for alternating layout -->
+            <div class="flex-1 hidden lg:block"></div>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <!-- Bottom CTA -->
+    <div class="text-center mt-16" data-aos="fade-up" data-aos-delay="800">
+      <div class="bg-blueprint-accent/10 rounded-2xl p-8 border border-blueprint-accent/20">
+        <h3 class="text-2xl font-bold text-blueprint-primary dark:text-white mb-4">
+          {t('workflow.cta.title')}
+        </h3>
+        <p class="text-lg text-blueprint-dark dark:text-blueprint-light mb-6">
+          {t('workflow.cta.subtitle')}
+        </p>
+        <a href="#contact" class="btn-primary text-lg px-8 py-4 inline-flex items-center space-x-2 rtl:space-x-reverse">
+          <MessageCircle class="w-5 h-5" />
+          <span>{t('workflow.cta.button')}</span>
+        </a>
+      </div>
+    </div>
+  </div>
+</section>

src/i18n/ui.ts

@@ -0,0 +1,265 @@
+export const languages = {
+  ar: 'العربية',
+  en: 'English'
+};
+
+export const defaultLang = 'ar';
+
+export const ui = {
+  ar: {
+    // Navigation
+    'nav.about': 'من نحن',
+    'nav.services': 'خدماتنا',
+    'nav.workflow': 'رحلتك مع بلو برينت',
+    'nav.contact': 'تواصل معنا',
+    
+    // Hero Section
+    'hero.title': 'الابتكار برؤية، التنفيذ بدقة',
+    'hero.subtitle': 'شركة بلو برينت للاستشارات الهندسية',
+    'hero.description': 'نقدم حلول هندسية متكاملة من التصميم المعماري إلى الإشراف على التنفيذ، مع التزام كامل بمعايير الجودة والسلامة.',
+    'hero.cta.consultation': 'احجز استشارة مجانية',
+    'hero.cta.services': 'تصفح خدماتنا',
+    
+    // About Section
+    'about.title': 'من نحن',
+    'about.subtitle': 'شركة بلو برينت للاستشارات الهندسية',
+    'about.description.1': 'في عالم تتسارع فيه التحولات العمرانية والهندسية، برزت "بلو برينت للاستشارات الهندسية" كمكتب استثنائي يجمع بين الفكر الإبداعي والدقة الفنية والالتزام التشغيلي.',
+    'about.description.2': 'نحن لسنا مجرد مكتب هندسي يضع مخططات على ورق؛ نحن نؤمن أن كل خط في المخطط هو بداية لحياة، وكل زاوية تحمل رؤية، وكل مساحة تروي حكاية تصميم متقن.',
+    'about.description.3': 'من قلب إمارة رأس الخيمة، ننطلق بشغف لتقديم حلول هندسية متكاملة تُلبي أعلى المعايير وتتفوق على التوقعات.',
+    'about.vision.title': 'رؤيتنا',
+    'about.vision.description': 'أن نصبح الاسم الأول في الاستشارات الهندسية عندما يتعلق الأمر بالثقة، الذوق، والتميز',
+    'about.mission.title': 'مهمتنا',
+    'about.mission.description': 'تقديم حلول هندسية متكاملة تجمع بين الابتكار والجودة والالتزام بالمعايير العالمية',
+    'about.values.title': 'قيمنا الأساسية',
+    'about.values.precision.title': 'الدقة',
+    'about.values.precision.description': 'التفاصيل هي ما يصنع الفارق في كل مشروع',
+    'about.values.innovation.title': 'الابتكار',
+    'about.values.innovation.description': 'لا نكرر، بل نبدع ونطور حلول جديدة',
+    'about.values.quality.title': 'الجودة',
+    'about.values.quality.description': 'التزام كامل بأعلى معايير الجودة والسلامة',
+    'about.why.title': 'لماذا تختار "بلو برينت"؟',
+    'about.why.point1': 'نُترجم الطموحات إلى تصميم والتصميم إلى قيمة',
+    'about.why.point2': 'نجمع بين أحدث التقنيات وأفضل المعايير',
+    'about.why.point3': 'نرافقك من أول فكرة حتى شهادة الإنجاز',
+    
+    // Services Section
+    'services.title': 'خدماتنا الهندسية',
+    'services.description': 'نقدم مجموعة شاملة من الخدمات الهندسية المتخصصة لضمان نجاح مشروعك من البداية إلى النهاية',
+    'services.architectural.title': 'التصميم المعماري',
+    'services.architectural.description': 'تصميم معماري احترافي يشمل المخططات والواجهات وفقاً لأحدث معايير البناء',
+    'services.structural.title': 'التصميم الإنشائي',
+    'services.structural.description': 'تحليل إنشائي متكامل وتصميم الأساسات والأعمدة والأسقف بكفاءة عالية',
+    'services.mep.title': 'التصميم الكهربائي والميكانيكي',
+    'services.mep.description': 'أنظمة كهربائية وميكانيكية متطورة تشمل التكييف والإنارة والصرف الصحي',
+    'services.permit.title': 'استخراج رخصة البناء',
+    'services.permit.description': 'تجهيز ملف المشروع ومتابعة الإجراءات حتى الحصول على الرخصة رسمياً',
+    'services.supervision.title': 'الإشراف الهندسي',
+    'services.supervision.description': 'إشراف ميداني دوري وتقارير متابعة لضمان التزام المقاول بالمخططات',
+    'services.completion.title': 'شهادة الإنجاز',
+    'services.completion.description': 'مخططات ما بعد التنفيذ وإصدار شهادة الإنجاز من الجهات المختصة',
+    'services.cta.question': 'هل تحتاج إلى استشارة مخصصة لمشروعك؟',
+    'services.cta.button': 'احجز استشارة مجانية',
+    
+    // Workflow Section
+    'workflow.title': 'رحلتك مع بلو برينت',
+    'workflow.subtitle': 'من الفكرة إلى شهادة الإنجاز',
+    'workflow.description': 'في بلو برينت للاستشارات الهندسية، نرسم لك طريقًا واضحًا وآمنًا لإنجاز مشروعك من أول استشارة حتى آخر توقيع. نتّبع خطوات معتمدة هندسيًا وإداريًا تتماشى مع أنظمة بلدية رأس الخيمة والجهات التنظيمية ذات العلاقة، ونرافقك في كل مرحلة.',
+    'workflow.cta.title': 'بلو برينت... نرسم لك مسارًا هندسيًا واضحًا',
+    'workflow.cta.subtitle': 'ونرافقك خطوة بخطوة حتى الإنجاز',
+    'workflow.cta.button': 'ابدأ رحلتك معنا',
+    
+    // Contact Section
+    'contact.title': 'تواصل معنا',
+    'contact.description': 'نحن هنا لنرسم لك البداية. تواصل معنا للحصول على استشارة مجانية أو لمناقشة مشروعك',
+    'contact.info.title': 'معلومات التواصل',
+    'contact.address.title': 'العنوان',
+    'contact.address.text': 'سدروه بلو برينت – طابق الميزان – مكتب رقم M-01<br>إمارة رأس الخيمة – الإمارات العربية المتحدة',
+    'contact.address.map': 'عرض على الخريطة',
+    'contact.phone.title': 'الهاتف',
+    'contact.phone.note': '(متاح عبر الاتصال أو الواتساب)',
+    'contact.email.title': 'البريد الإلكتروني',
+    'contact.hours.title': 'أوقات العمل',
+    'contact.whatsapp.title': 'احجز استشارتك المجانية',
+    'contact.whatsapp.description': 'أرسل كلمة "استشارة" وسيتواصل معك أحد مهندسينا خلال 24 ساعة',
+    'contact.whatsapp.button': 'تواصل واتساب',
+    'contact.form.title': 'أرسل لنا رسالة',
+    'contact.form.name': 'الاسم الكامل',
+    'contact.form.name.placeholder': 'أدخل اسمك الكامل',
+    'contact.form.phone': 'رقم الهاتف',
+    'contact.form.email': 'البريد الإلكتروني',
+    'contact.form.project_type': 'نوع المشروع',
+    'contact.form.project_type.placeholder': 'اختر نوع المشروع',
+    'contact.form.project_type.residential': 'سكني',
+    'contact.form.project_type.commercial': 'تجاري',
+    'contact.form.project_type.industrial': 'صناعي',
+    'contact.form.project_type.renovation': 'تجديد',
+    'contact.form.project_type.consultation': 'استشارة',
+    'contact.form.message': 'تفاصيل المشروع',
+    'contact.form.message.placeholder': 'اكتب تفاصيل مشروعك أو استفسارك هنا...',
+    'contact.form.submit': 'إرسال الرسالة',
+    'contact.form.sending': 'جاري الإرسال...',
+    'contact.form.success.title': 'تم إرسال رسالتك بنجاح!',
+    'contact.form.success.message': 'شكراً لتواصلك معنا. سيقوم فريقنا بالرد عليك خلال 24 ساعة.',
+    'contact.form.error.title': 'حدث خطأ في الإرسال',
+    'contact.form.error.message': 'يرجى المحاولة مرة أخرى أو التواصل معنا عبر الواتساب.',
+    
+    // Footer
+    'footer.description': 'نقدم حلول هندسية متكاملة من التصميم المعماري إلى الإشراف على التنفيذ، مع التزام كامل بمعايير الجودة والسلامة.',
+    'footer.quick_links': 'روابط سريعة',
+    'footer.contact_info': 'معلومات التواصل',
+    'footer.whatsapp': 'واتساب',
+    'footer.rights': 'جميع الحقوق محفوظة لشركة بلو برينت للاستشارات الهندسية',
+    'footer.language': 'اللغة:',
+    
+    // Common
+    'common.read_more': 'اقرأ المزيد',
+    'common.learn_more': 'تعرف أكثر',
+    'common.get_started': 'ابدأ الآن',
+    'common.contact_us': 'تواصل معنا',
+    'common.view_all': 'عرض الكل',
+    'common.back_to_top': 'العودة للأعلى'
+  },
+  en: {
+    // Navigation
+    'nav.about': 'About Us',
+    'nav.services': 'Our Services',
+    'nav.workflow': 'Your Journey with Blueprint',
+    'nav.contact': 'Contact Us',
+    
+    // Hero Section
+    'hero.title': 'Innovation with Vision, Execution with Precision',
+    'hero.subtitle': 'Blueprint Engineering Consultancy',
+    'hero.description': 'We provide comprehensive engineering solutions from architectural design to construction supervision, with full commitment to quality and safety standards.',
+    'hero.cta.consultation': 'Book Free Consultation',
+    'hero.cta.services': 'Explore Our Services',
+    
+    // About Section
+    'about.title': 'About Us',
+    'about.subtitle': 'Blueprint Engineering Consultancy',
+    'about.description.1': 'In a world where urban and engineering transformations are accelerating, "Blueprint Engineering Consultancy" has emerged as an exceptional office that combines creative thinking, technical precision, and operational commitment.',
+    'about.description.2': 'We are not just an engineering office that puts plans on paper; we believe that every line in the plan is the beginning of life, every angle carries a vision, and every space tells the story of meticulous design.',
+    'about.description.3': 'From the heart of Ras Al Khaimah Emirate, we passionately deliver comprehensive engineering solutions that meet the highest standards and exceed expectations.',
+    'about.vision.title': 'Our Vision',
+    'about.vision.description': 'To become the first name in engineering consultancy when it comes to trust, taste, and excellence',
+    'about.mission.title': 'Our Mission',
+    'about.mission.description': 'Providing comprehensive engineering solutions that combine innovation, quality, and commitment to international standards',
+    'about.values.title': 'Our Core Values',
+    'about.values.precision.title': 'Precision',
+    'about.values.precision.description': 'Details make the difference in every project',
+    'about.values.innovation.title': 'Innovation',
+    'about.values.innovation.description': 'We don\'t repeat, we innovate and develop new solutions',
+    'about.values.quality.title': 'Quality',
+    'about.values.quality.description': 'Full commitment to highest quality and safety standards',
+    'about.why.title': 'Why Choose "Blueprint"?',
+    'about.why.point1': 'We translate ambitions into design and design into value',
+    'about.why.point2': 'We combine the latest technologies with the best standards',
+    'about.why.point3': 'We accompany you from the first idea to the completion certificate',
+    
+    // Services Section
+    'services.title': 'Our Engineering Services',
+    'services.description': 'We provide a comprehensive range of specialized engineering services to ensure your project success from start to finish',
+    'services.architectural.title': 'Architectural Design',
+    'services.architectural.description': 'Professional architectural design including plans and facades according to latest building standards',
+    'services.structural.title': 'Structural Design',
+    'services.structural.description': 'Comprehensive structural analysis and design of foundations, columns and slabs with high efficiency',
+    'services.mep.title': 'MEP Design',
+    'services.mep.description': 'Advanced electrical and mechanical systems including HVAC, lighting and drainage',
+    'services.permit.title': 'Building Permit',
+    'services.permit.description': 'Project file preparation and procedure follow-up until obtaining official permit',
+    'services.supervision.title': 'Engineering Supervision',
+    'services.supervision.description': 'Regular field supervision and follow-up reports to ensure contractor compliance',
+    'services.completion.title': 'Completion Certificate',
+    'services.completion.description': 'As-built drawings and completion certificate issuance from relevant authorities',
+    'services.cta.question': 'Need a customized consultation for your project?',
+    'services.cta.button': 'Book Free Consultation',
+    
+    // Workflow Section
+    'workflow.title': 'Your Journey with Blueprint',
+    'workflow.subtitle': 'From Idea to Completion Certificate',
+    'workflow.description': 'At Blueprint Engineering Consultancy, we draw you a clear and safe path to complete your project from the first consultation to the last signature. We follow engineering and administrative approved steps that align with Ras Al Khaimah Municipality systems and related regulatory bodies, and we accompany you at every stage.',
+    'workflow.cta.title': 'Blueprint... We draw you a clear engineering path',
+    'workflow.cta.subtitle': 'And we accompany you step by step until completion',
+    'workflow.cta.button': 'Start Your Journey With Us',
+    
+    // Contact Section
+    'contact.title': 'Contact Us',
+    'contact.description': 'We are here to draw your beginning. Contact us for a free consultation or to discuss your project',
+    'contact.info.title': 'Contact Information',
+    'contact.address.title': 'Address',
+    'contact.address.text': 'Sadroh Blue Print - Mezzanine Floor - Office No. M-01<br>Ras Al Khaimah Emirate - United Arab Emirates',
+    'contact.address.map': 'View on Map',
+    'contact.phone.title': 'Phone',
+    'contact.phone.note': '(Available via call or WhatsApp)',
+    'contact.email.title': 'Email',
+    'contact.hours.title': 'Working Hours',
+    'contact.whatsapp.title': 'Book Your Free Consultation',
+    'contact.whatsapp.description': 'Send "Consultation" and one of our engineers will contact you within 24 hours',
+    'contact.whatsapp.button': 'WhatsApp Contact',
+    'contact.form.title': 'Send us a Message',
+    'contact.form.name': 'Full Name',
+    'contact.form.name.placeholder': 'Enter your full name',
+    'contact.form.phone': 'Phone Number',
+    'contact.form.email': 'Email Address',
+    'contact.form.project_type': 'Project Type',
+    'contact.form.project_type.placeholder': 'Select project type',
+    'contact.form.project_type.residential': 'Residential',
+    'contact.form.project_type.commercial': 'Commercial',
+    'contact.form.project_type.industrial': 'Industrial',
+    'contact.form.project_type.renovation': 'Renovation',
+    'contact.form.project_type.consultation': 'Consultation',
+    'contact.form.message': 'Project Details',
+    'contact.form.message.placeholder': 'Write your project details or inquiry here...',
+    'contact.form.submit': 'Send Message',
+    'contact.form.sending': 'Sending...',
+    'contact.form.success.title': 'Message sent successfully!',
+    'contact.form.success.message': 'Thank you for contacting us. Our team will respond within 24 hours.',
+    'contact.form.error.title': 'Error sending message',
+    'contact.form.error.message': 'Please try again or contact us via WhatsApp.',
+    
+    // Footer
+    'footer.description': 'We provide comprehensive engineering solutions from architectural design to construction supervision, with full commitment to quality and safety standards.',
+    'footer.quick_links': 'Quick Links',
+    'footer.contact_info': 'Contact Info',
+    'footer.whatsapp': 'WhatsApp',
+    'footer.rights': 'All rights reserved to Blueprint Engineering Consultancy',
+    'footer.language': 'Language:',
+    
+    // Common
+    'common.read_more': 'Read More',
+    'common.learn_more': 'Learn More',
+    'common.get_started': 'Get Started',
+    'common.contact_us': 'Contact Us',
+    'common.view_all': 'View All',
+    'common.back_to_top': 'Back to Top'
+  }
+} as const;
+
+export function getLangFromUrl(url: URL) {
+  const [, lang] = url.pathname.split('/');
+  if (lang in ui) return lang as keyof typeof ui;
+  return defaultLang;
+}
+
+export function useTranslations(lang: keyof typeof ui) {
+  return function t(key: keyof typeof ui[typeof defaultLang]) {
+    return ui[lang][key] || ui[defaultLang][key];
+  }
+}
+
+export function getRouteFromUrl(url: URL): string | undefined {
+  const pathname = new URL(url).pathname;
+  const parts = pathname?.split('/');
+  const path = parts.pop() || parts.pop();
+
+  if (path === undefined) {
+    return '/';
+  }
+
+  const currentLang = getLangFromUrl(url);
+
+  if (currentLang === defaultLang) {
+    return path ? `/${path}` : '/';
+  }
+
+  return `/${currentLang}${path ? `/${path}` : ''}`;
+}

src/layouts/Layout.astro

@@ -0,0 +1,142 @@
+---
+import '../styles/global.css';
+
+export interface Props {
+  title: string;
+  description?: string;
+  lang?: string;
+}
+
+const { title, description = "Blueprint Engineering Consultancy - Professional engineering services in Ras Al Khaimah", lang = "ar" } = Astro.props;
+
+const isRtl = lang === 'ar' || lang === 'ur' || lang === 'ps';
+---
+
+<!DOCTYPE html>
+<html lang={lang} dir={isRtl ? 'rtl' : 'ltr'} class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content={description} />
+    <meta name="generator" content={Astro.generator} />
+    
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={Astro.url} />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:image" content="/og-image.jpg" />
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content={Astro.url} />
+    <meta property="twitter:title" content={title} />
+    <meta property="twitter:description" content={description} />
+    <meta property="twitter:image" content="/og-image.jpg" />
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    
+    <!-- AOS CSS -->
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/aos.css" />
+    
+    <title>{title}</title>
+  </head>
+  <body class="bg-white dark:bg-blueprint-primary text-blueprint-dark dark:text-white">
+    <!-- Loading Screen -->
+    <div class="loading-overlay" id="loading">
+      <div class="blueprint-logo-loading">
+        <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+          <rect x="10" y="10" width="80" height="60" stroke-width="3" fill="none"/>
+          <rect x="20" y="20" width="25" height="20" stroke-width="2" fill="none"/>
+          <rect x="55" y="20" width="25" height="20" stroke-width="2" fill="none"/>
+          <rect x="20" y="45" width="60" height="15" stroke-width="2" fill="none"/>
+          <circle cx="25" cy="85" r="3"/>
+          <circle cx="50" cy="85" r="3"/>
+          <circle cx="75" cy="85" r="3"/>
+        </svg>
+      </div>
+    </div>
+
+    <slot />
+    
+    <!-- AOS JavaScript -->
+    <script src="https://unpkg.com/[email protected]/dist/aos.js" is:inline></script>
+    
+    <script is:inline>
+      // Initialize AOS
+      AOS.init({
+        duration: 800,
+        easing: 'ease-out-cubic',
+        once: true,
+        offset: 50
+      });
+
+      // Loading screen
+      window.addEventListener('load', () => {
+        const loading = document.getElementById('loading');
+        if (loading) {
+          setTimeout(() => {
+            loading.classList.add('fade-out');
+            setTimeout(() => {
+              loading.style.display = 'none';
+            }, 500);
+          }, 1500);
+        }
+      });
+
+      // Smooth scrolling for anchor links
+      document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+          e.preventDefault();
+          const target = document.querySelector(this.getAttribute('href'));
+          if (target) {
+            target.scrollIntoView({
+              behavior: 'smooth',
+              block: 'start'
+            });
+          }
+        });
+      });
+
+      // Auto-detect browser language and redirect if needed
+      function detectAndRedirectLanguage() {
+        const currentPath = window.location.pathname;
+        const supportedLangs = ['ar', 'en', 'zh', 'ja', 'ru', 'hi', 'ur', 'bn', 'ml', 'fr', 'fil', 'es', 'ta', 'ne', 'ps', 'si', 'id', 'te'];
+        const browserLang = navigator.language.split('-')[0];
+        
+        // Check if we're on the root path and browser language is supported but not Arabic
+        if (currentPath === '/' && supportedLangs.includes(browserLang) && browserLang !== 'ar') {
+          // Don't redirect automatically, let user choose
+          return;
+        }
+      }
+
+      // Run language detection
+      detectAndRedirectLanguage();
+
+      // Add scroll-based header effects
+      let lastScrollY = window.scrollY;
+      const header = document.querySelector('header');
+      
+      window.addEventListener('scroll', () => {
+        const currentScrollY = window.scrollY;
+        
+        if (header) {
+          if (currentScrollY > 100) {
+            header.classList.add('bg-blueprint-primary/95');
+          } else {
+            header.classList.remove('bg-blueprint-primary/95');
+          }
+        }
+        
+        lastScrollY = currentScrollY;
+      });
+    </script>
+  </body>
+</html>

src/pages/[...lang]/index.astro

@@ -0,0 +1,35 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import Header from '../../components/Header.astro';
+import Hero from '../../components/Hero.astro';
+import About from '../../components/About.astro';
+import Services from '../../components/Services.astro';
+import Workflow from '../../components/Workflow.astro';
+import Contact from '../../components/Contact.astro';
+import Footer from '../../components/Footer.astro';
+import { getLangFromUrl, useTranslations, languages } from '../../i18n/ui';
+
+export function getStaticPaths() {
+  return Object.keys(languages).filter(lang => lang !== 'ar').map(lang => ({
+    params: { lang }
+  }));
+}
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+
+const title = t('hero.title') + ' - Blueprint Engineering Consultancy';
+const description = t('hero.description');
+---
+
+<Layout title={title} description={description} lang={lang}>
+  <Header />
+  <main>
+    <Hero />
+    <About />
+    <Services />
+    <Workflow />
+    <Contact />
+  </main>
+  <Footer />
+</Layout>

src/pages/en/index.astro

@@ -0,0 +1,29 @@
+---
+import Layout from '../../layouts/Layout.astro';
+import Header from '../../components/Header.astro';
+import Hero from '../../components/Hero.astro';
+import About from '../../components/About.astro';
+import Services from '../../components/Services.astro';
+import Workflow from '../../components/Workflow.astro';
+import Contact from '../../components/Contact.astro';
+import Footer from '../../components/Footer.astro';
+import { getLangFromUrl, useTranslations } from '../../i18n/ui';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+
+const title = 'Blueprint Engineering Consultancy - Ras Al Khaimah | Architectural Design & Engineering Supervision';
+const description = 'Blueprint Engineering Consultancy in Ras Al Khaimah. We provide architectural, structural, electrical and mechanical design services, building permit extraction, and engineering supervision. Engineering with expertise, innovation with vision, execution with precision.';
+---
+
+<Layout title={title} description={description} lang={lang}>
+  <Header />
+  <main>
+    <Hero />
+    <About />
+    <Services />
+    <Workflow />
+    <Contact />
+  </main>
+  <Footer />
+</Layout>

src/pages/index.astro

@@ -0,0 +1,34 @@
+---
+import Layout from '../layouts/Layout.astro';
+import Header from '../components/Header.astro';
+import Hero from '../components/Hero.astro';
+import About from '../components/About.astro';
+import Services from '../components/Services.astro';
+import Workflow from '../components/Workflow.astro';
+import Contact from '../components/Contact.astro';
+import Footer from '../components/Footer.astro';
+import { getLangFromUrl, useTranslations } from '../i18n/ui';
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+
+const title = lang === 'ar' 
+  ? 'بلو برينت للاستشارات الهندسية - رأس الخيمة | تصميم معماري وإشراف هندسي'
+  : 'Blueprint Engineering Consultancy - Ras Al Khaimah | Architectural Design & Engineering Supervision';
+
+const description = lang === 'ar'
+  ? 'شركة بلو برينت للاستشارات الهندسية في رأس الخيمة. نقدم خدمات التصميم المعماري، الإنشائي، الكهربائي والميكانيكي، استخراج رخص البناء، والإشراف الهندسي. الهندسة بخبرة، الابتكار برؤية، التنفيذ بدقة.'
+  : 'Blueprint Engineering Consultancy in Ras Al Khaimah. We provide architectural, structural, electrical and mechanical design services, building permit extraction, and engineering supervision. Engineering with expertise, innovation with vision, execution with precision.';
+---
+
+<Layout title={title} description={description} lang={lang}>
+  <Header />
+  <main>
+    <Hero />
+    <About />
+    <Services />
+    <Workflow />
+    <Contact />
+  </main>
+  <Footer />
+</Layout>

src/styles/global.css

@@ -0,0 +1,159 @@
+@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+@import 'aos/dist/aos.css';
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  html {
+    font-family: 'Cairo', 'Poppins', system-ui, sans-serif;
+    scroll-behavior: smooth;
+  }
+  
+  body {
+    @apply transition-colors duration-300;
+  }
+  
+  [dir="rtl"] {
+    font-family: 'Cairo', system-ui, sans-serif;
+  }
+  
+  [dir="ltr"] {
+    font-family: 'Poppins', system-ui, sans-serif;
+  }
+}
+
+@layer components {
+  .btn-primary {
+    @apply bg-blueprint-accent hover:bg-opacity-90 text-white px-6 py-3 rounded-lg font-semibold transition-all duration-300 hover:shadow-lg hover:scale-105;
+  }
+  
+  .btn-secondary {
+    @apply border-2 border-blueprint-accent text-blueprint-accent hover:bg-blueprint-accent hover:text-white px-6 py-3 rounded-lg font-semibold transition-all duration-300;
+  }
+  
+  .section-padding {
+    @apply py-16 px-4 sm:px-6 lg:px-8;
+  }
+  
+  .container-custom {
+    @apply max-w-7xl mx-auto;
+  }
+  
+  .blueprint-pattern {
+    background-image: 
+      linear-gradient(45deg, transparent 24%, rgba(199, 156, 73, 0.05) 25%, rgba(199, 156, 73, 0.05) 26%, transparent 27%, transparent 74%, rgba(199, 156, 73, 0.05) 75%, rgba(199, 156, 73, 0.05) 76%, transparent 77%, transparent),
+      linear-gradient(-45deg, transparent 24%, rgba(199, 156, 73, 0.05) 25%, rgba(199, 156, 73, 0.05) 26%, transparent 27%, transparent 74%, rgba(199, 156, 73, 0.05) 75%, rgba(199, 156, 73, 0.05) 76%, transparent 77%, transparent);
+    background-size: 50px 50px;
+  }
+  
+  .floating-shapes {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    overflow: hidden;
+    pointer-events: none;
+  }
+  
+  .floating-shapes::before {
+    content: '';
+    position: absolute;
+    width: 200px;
+    height: 200px;
+    background: linear-gradient(45deg, rgba(199, 156, 73, 0.1), rgba(27, 47, 92, 0.1));
+    border-radius: 50%;
+    top: 10%;
+    left: 10%;
+    animation: float 8s ease-in-out infinite;
+  }
+  
+  .floating-shapes::after {
+    content: '';
+    position: absolute;
+    width: 150px;
+    height: 150px;
+    background: linear-gradient(-45deg, rgba(199, 156, 73, 0.08), rgba(27, 47, 92, 0.08));
+    border-radius: 20px;
+    top: 60%;
+    right: 15%;
+    animation: float 6s ease-in-out infinite reverse;
+  }
+}
+
+/* Arabic text improvements */
+[dir="rtl"] {
+  text-align: right;
+}
+
+[dir="rtl"] .rtl-flip {
+  transform: scaleX(-1);
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-blueprint-light dark:bg-blueprint-dark;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-blueprint-accent rounded-full;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  @apply bg-opacity-80;
+}
+
+/* Loading animation */
+.loading-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(135deg, #1B2F5C 0%, #2a4a7a 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  transition: opacity 0.5s ease-out;
+}
+
+.loading-overlay.fade-out {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.blueprint-logo-loading {
+  width: 120px;
+  height: 120px;
+  position: relative;
+}
+
+.blueprint-logo-loading svg {
+  width: 100%;
+  height: 100%;
+  stroke: #C69C49;
+  stroke-width: 2;
+  fill: none;
+  stroke-dasharray: 1000;
+  stroke-dashoffset: 1000;
+  animation: draw 3s ease-in-out infinite;
+}
+
+@keyframes draw {
+  0% {
+    stroke-dashoffset: 1000;
+  }
+  50% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: -1000;
+  }
+}

tailwind.config.mjs

@@ -0,0 +1,45 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        blueprint: {
+          primary: '#1B2F5C',
+          secondary: '#FFFFFF',
+          accent: '#C69C49',
+          dark: '#3A3A3A',
+          light: '#F5F7FA',
+          gray: '#EDEDED'
+        }
+      },
+      fontFamily: {
+        cairo: ['Cairo', 'ui-sans-serif', 'system-ui'],
+        poppins: ['Poppins', 'ui-sans-serif', 'system-ui'],
+      },
+      animation: {
+        'fade-in': 'fadeIn 0.6s ease-out',
+        'slide-up': 'slideUp 0.8s ease-out',
+        'bounce-slow': 'bounce 2s infinite',
+        'pulse-slow': 'pulse 3s infinite',
+        'float': 'float 6s ease-in-out infinite',
+      },
+      keyframes: {
+        fadeIn: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+        slideUp: {
+          '0%': { transform: 'translateY(30px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        float: {
+          '0%, 100%': { transform: 'translateY(0px)' },
+          '50%': { transform: 'translateY(-20px)' },
+        }
+      }
+    },
+  },
+  plugins: [],
+}

tsconfig.json

@@ -1,27 +1,5 @@
 {
-  "compilerOptions": {
-    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
-    "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "@/*": ["./*"]
-    }
-  },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
 }