I am super engineer and I want you to make a website. Is this to display my service like my apps and the projects I do before I want this web with modern Callum and scene modern colour and scene I have Arabic and English and light mode and dark mode. I have more than five years experience. I do a lot of projects with high school and complex projects my language flutter Python new GS the back in service super base GS this is the major reviews you'll get review from it.https://mostaql.com/u/flutter_dev201/reviews. Use the fruit and the reviews from that I work in Mostar and at work must kill and Upwork this project must work on desktop tablet and mobile make it beautiful you are who is a beautiful phone in Arabic use Cairo phone

README.md

@@ -1,10 +1,13 @@
 ---
-title: Codecraft Studio
-emoji: ⚡
-colorFrom: pink
-colorTo: pink
+title: CodeCraft Studio 🚀
+colorFrom: blue
+colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,138 @@
+class SiteFooter extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    
+    let currentLang = 'en';
+    
+    window.addEventListener('langChanged', (e) => {
+        currentLang = e.detail;
+        this.render();
+    });
+
+    if(typeof localStorage !== 'undefined') {
+        currentLang = localStorage.getItem('lang') || 'en';
+    }
+
+    this.render();
+  }
+
+  render() {
+    const isArabic = currentLang === 'ar';
+    const dir = isArabic ? 'rtl' : 'ltr';
+    const copyTxt = isArabic ? 'جميع الحقوق محفوظة 2023' : 'All rights reserved 2023';
+    const builtTxt = isArabic ? 'صنع بكل حب' : 'Built with love';
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+            display: block;
+            background-color: #0f172a;
+            color: #94a3b8;
+            padding: 4rem 1.5rem;
+            text-align: center;
+        }
+        .footer-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            display: grid;
+            grid-template-columns: 1fr;
+            gap: 2rem;
+        }
+        .logo-area h3 {
+            color: #ffffff;
+            font-size: 1.5rem;
+            font-weight: bold;
+            margin-bottom: 1rem;
+        }
+        .social-links {
+            display: flex;
+            justify-content: center;
+            gap: 1rem;
+            margin-top: 1rem;
+        }
+        .social-icon {
+            color: #94a3b8;
+            transition: color 0.3s;
+        }
+        .social-icon:hover {
+            color: #3b82f6;
+        }
+        .links-area h4 {
+            color: #ffffff;
+            margin-bottom: 1rem;
+        }
+        .links-area ul {
+            list-style: none;
+            padding: 0;
+        }
+        .links-area li {
+            margin-bottom: 0.5rem;
+        }
+        .links-area a {
+            color: #94a3b8;
+            text-decoration: none;
+            transition: color 0.3s;
+        }
+        .links-area a:hover {
+            color: #3b82f6;
+        }
+        .copyright {
+            margin-top: 3rem;
+            padding-top: 2rem;
+            border-top: 1px solid #1e293b;
+            font-size: 0.875rem;
+        }
+        @media (min-width: 768px) {
+            .footer-content {
+                grid-template-columns: repeat(3, 1fr);
+                text-align: left;
+            }
+            /* RTL Adjustments */
+            [dir="rtl"] .footer-content {
+                text-align: right;
+            }
+            .social-links {
+                justify-content: flex-start;
+            }
+            [dir="rtl"] .social-links {
+                justify-content: flex-end;
+            }
+        }
+      </style>
+      <div dir="${dir}">
+        <div class="footer-content">
+            <div class="logo-area">
+                <h3>Super Engineer</h3>
+                <p>${isArabic ? 'مطور متكامل للحلول البرمجية الحديثة' : 'Full-stack Developer for Modern Solutions'}</p>
+                <div class="social-links">
+                    <a href="#" class="social-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg></a>
+                    <a href="#" class="social-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg></a>
+                    <a href="#" class="social-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a>
+                </div>
+            </div>
+            <div class="links-area">
+                <h4>${isArabic ? 'روابط سريعة' : 'Quick Links'}</h4>
+                <ul>
+                    <li><a href="#home">${isArabic ? 'الرئيسية' : 'Home'}</a></li>
+                    <li><a href="#projects">${isArabic ? 'المشاريع' : 'Projects'}</a></li>
+                    <li><a href="#contact">${isArabic ? 'اتصل بي' : 'Contact'}</a></li>
+                </ul>
+            </div>
+            <div class="links-area">
+                <h4>${isArabic ? 'المنصات' : 'Platforms'}</h4>
+                <ul>
+                    <li><a href="#">Mostaql</a></li>
+                    <li><a href="#">Khamsat</a></li>
+                    <li><a href="#">Upwork</a></li>
+                </ul>
+            </div>
+        </div>
+        <div class="copyright">
+            <p>&copy; ${copyTxt}. ${builtTxt} ❤️</p>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('site-footer', SiteFooter);

components/header.js

@@ -0,0 +1,161 @@
+class SiteHeader extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    
+    // Initial State
+    let currentLang = 'en';
+    let currentTheme = 'light';
+
+    // Listen for global state changes
+    window.addEventListener('langChanged', (e) => {
+        currentLang = e.detail;
+        this.render();
+    });
+
+    window.addEventListener('themeChanged', (e) => {
+        currentTheme = e.detail;
+        this.render();
+    });
+
+    // Load initial state from localStorage if possible (fallback)
+    if(typeof localStorage !== 'undefined') {
+        currentLang = localStorage.getItem('lang') || 'en';
+        currentTheme = localStorage.getItem('theme') || 'light';
+    }
+
+    this.render();
+  }
+
+  render() {
+    const isArabic = this.getAttribute('lang') === 'ar' || currentLang === 'ar';
+    const isDark = currentTheme === 'dark';
+    
+    // Text Content
+    const homeTxt = isArabic ? 'الرئيسية' : 'Home';
+    const servicesTxt = isArabic ? 'خدماتي' : 'Services';
+    const portfolioTxt = isArabic ? 'أعمالي' : 'Portfolio';
+    const reviewsTxt = isArabic ? 'تقييماتي' : 'Reviews';
+    const contactTxt = isArabic ? 'تواصل معي' : 'Contact';
+
+    // Theme Icon
+    const themeIcon = isDark ? 'sun' : 'moon';
+    
+    // Lang Text
+    const langTxt = isArabic ? 'English' : 'العربية';
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+            display: block;
+            position: sticky;
+            top: 0;
+            z-index: 50;
+            background-color: ${isDark ? '#1e293b' : '#ffffff'};
+            border-bottom: 1px solid ${isDark ? '#334155' : '#e2e8f0'};
+            transition: all 0.3s ease;
+        }
+        nav {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 1rem 1.5rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .logo {
+            font-weight: 900;
+            font-size: 1.5rem;
+            color: #2563eb; /* Primary 600 */
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+        }
+        .nav-links {
+            display: none;
+        }
+        .nav-links a {
+            margin: 0 1rem;
+            text-decoration: none;
+            color: ${isDark ? '#f1f5f9' : '#334155'};
+            font-weight: 500;
+            transition: color 0.2s;
+        }
+        .nav-links a:hover {
+            color: #2563eb;
+        }
+        .controls {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+        }
+        .btn-icon {
+            background: none;
+            border: 1px solid ${isDark ? '#475569' : '#e2e8f0'};
+            border-radius: 0.5rem;
+            padding: 0.5rem;
+            cursor: pointer;
+            color: ${isDark ? '#f1f5f9' : '#334155'};
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .btn-icon:hover {
+            background-color: ${isDark ? '#334155' : '#f1f5f9'};
+            border-color: #2563eb;
+        }
+        .lang-btn {
+            font-size: 0.875rem;
+            font-weight: 600;
+            padding: 0.5rem 0.75rem;
+        }
+
+        @media (min-width: 768px) {
+            .nav-links {
+                display: flex;
+            }
+        }
+      </style>
+      <nav>
+        <a href="#" class="logo">
+            <span style="font-size: 1.8rem; margin-right: 0.5rem; margin-left: 0.5rem;">🚀</span>
+            <span>SuperEng</span>
+        </a>
+        <div class="nav-links">
+            <a href="#home">${homeTxt}</a>
+            <a href="#projects">${portfolioTxt}</a>
+            <a href="#contact">${contactTxt}</a>
+        </div>
+        <div class="controls">
+            <button class="btn-icon" id="lang-toggle" aria-label="Toggle Language">
+                ${langTxt}
+            </button>
+            <button class="btn-icon" id="theme-toggle" aria-label="Toggle Theme">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    ${this.getIconSvg(themeIcon)}
+                </svg>
+            </button>
+        </div>
+      </nav>
+    `;
+
+    // Add Event Listeners
+    this.shadowRoot.getElementById('lang-toggle').addEventListener('click', () => {
+        window.toggleLanguage();
+    });
+    
+    this.shadowRoot.getElementById('theme-toggle').addEventListener('click', () => {
+        window.toggleTheme();
+    });
+  }
+
+  getIconSvg(name) {
+      const icons = {
+          sun: '<circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>',
+          moon: '<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>'
+      };
+      return icons[name] || '';
+  }
+}
+
+customElements.define('site-header', SiteHeader);

index.html

@@ -1,19 +1,314 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Super Engineer | Portfolio</title>
+    
+    <!-- Google Fonts: Cairo (Arabic) and Inter (English) -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&family=Inter:wght@300;400;600;700;900&display=swap" rel="stylesheet">
+    
+    <link rel="stylesheet" href="style.css">
+    
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    fontFamily: {
+                        sans: ['Inter', 'Cairo', 'sans-serif'],
+                    },
+                    colors: {
+                        primary: {
+                            50: '#eff6ff',
+                            100: '#dbeafe',
+                            200: '#bfdbfe',
+                            300: '#93c5fd',
+                            400: '#60a5fa',
+                            500: '#3b82f6',
+                            600: '#2563eb', // Primary Brand Color
+                            700: '#1d4ed8',
+                            800: '#1e40af',
+                            900: '#1e3a8a',
+                        },
+                        secondary: {
+                            50: '#ecfdf5',
+                            100: '#d1fae5',
+                            200: '#a7f3d0',
+                            300: '#6ee7b7',
+                            400: '#34d399',
+                            500: '#10b981', // Secondary Brand Color
+                            600: '#059669',
+                            700: '#047857',
+                            800: '#065f46',
+                            900: '#064e3b',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+
+    <!-- Feather Icons -->
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+</head>
+<body class="bg-gray-50 text-gray-900 dark:bg-slate-900 dark:text-gray-100 transition-colors duration-300 font-sans">
+
+    <!-- Web Components -->
+    <site-header></site-header>
+
+    <main>
+        <!-- Hero Section -->
+        <section id="home" class="relative pt-20 pb-32 overflow-hidden">
+            <div class="absolute inset-0 z-0 opacity-10 dark:opacity-20">
+                <img src="http://static.photos/technology/1200x630/10" alt="Background" class="w-full h-full object-cover">
+            </div>
+            <div class="container mx-auto px-6 relative z-10 text-center">
+                <span class="inline-block py-1 px-3 rounded-full bg-primary-100 dark:bg-primary-900 text-primary-600 dark:text-primary-300 text-sm font-semibold mb-4 animate-bounce">
+                    <i data-feather="code" class="w-4 h-4 inline mr-1"></i> Available for hire
+                </span>
+                <h1 class="text-5xl md:text-7xl font-black mb-6 tracking-tight leading-tight" data-i18n="heroTitle">
+                    Super Engineer
+                </h1>
+                <p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 max-w-2xl mx-auto mb-10" data-i18n="heroSubtitle">
+                    Expert in Flutter, Python, Node.js & Supabase. Building complex, high-performance apps with 5+ years of experience.
+                </p>
+                <div class="flex flex-col sm:flex-row justify-center gap-4">
+                    <a href="#projects" class="px-8 py-4 bg-primary-600 hover:bg-primary-700 text-white rounded-xl font-bold transition-all shadow-lg hover:shadow-primary-500/30 flex items-center justify-center gap-2">
+                        <i data-feather="folder"></i> <span data-i18n="viewProjects">View Projects</span>
+                    </a>
+                    <a href="#contact" class="px-8 py-4 bg-white dark:bg-slate-800 border border-gray-200 dark:border-slate-700 hover:border-primary-500 text-gray-800 dark:text-white rounded-xl font-bold transition-all flex items-center justify-center gap-2">
+                        <i data-feather="mail"></i> <span data-i18n="contactMe">Contact Me</span>
+                    </a>
+                </div>
+            </div>
+        </section>
+
+        <!-- Skills Section -->
+        <section class="py-20 bg-white dark:bg-slate-800">
+            <div class="container mx-auto px-6">
+                <div class="text-center mb-16">
+                    <h2 class="text-3xl font-bold mb-4" data-i18n="mySkills">My Tech Stack</h2>
+                    <div class="w-20 h-1 bg-secondary-500 mx-auto rounded"></div>
+                </div>
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+                    <!-- Skill Items -->
+                    <div class="p-6 bg-gray-50 dark:bg-slate-700 rounded-2xl text-center hover:transform hover:-translate-y-2 transition-transform duration-300 shadow-sm">
+                        <div class="w-16 h-16 mx-auto mb-4 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center">
+                            <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/flutter/flutter-original.svg" class="w-10 h-10" alt="Flutter">
+                        </div>
+                        <h3 class="font-bold text-lg">Flutter</h3>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Cross-platform Apps</p>
+                    </div>
+                    <div class="p-6 bg-gray-50 dark:bg-slate-700 rounded-2xl text-center hover:transform hover:-translate-y-2 transition-transform duration-300 shadow-sm">
+                        <div class="w-16 h-16 mx-auto mb-4 bg-yellow-100 text-yellow-600 rounded-full flex items-center justify-center">
+                            <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg" class="w-10 h-10" alt="Python">
+                        </div>
+                        <h3 class="font-bold text-lg">Python</h3>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">AI & Backend</p>
+                    </div>
+                    <div class="p-6 bg-gray-50 dark:bg-slate-700 rounded-2xl text-center hover:transform hover:-translate-y-2 transition-transform duration-300 shadow-sm">
+                        <div class="w-16 h-16 mx-auto mb-4 bg-green-100 text-green-600 rounded-full flex items-center justify-center">
+                            <img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg" class="w-10 h-10" alt="Node.js">
+                        </div>
+                        <h3 class="font-bold text-lg">Node.js</h3>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Backend Services</p>
+                    </div>
+                    <div class="p-6 bg-gray-50 dark:bg-slate-700 rounded-2xl text-center hover:transform hover:-translate-y-2 transition-transform duration-300 shadow-sm">
+                        <div class="w-16 h-16 mx-auto mb-4 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center">
+                             <!-- Supabase SVG Icon approximation -->
+                             <svg class="w-10 h-10" viewBox="0 0 24 24" fill="currentColor"><path d="M12.005 2.009c-5.525 0-10 4.475-10 10s4.475 10 10 10c5.525 0 10-4.475 10-10s-4.475-10-10-10zm-.496 16.496H7.507v-4.002h4.002v4.002zm0-5.503H7.507V8.999h4.002v4.003zm5.503 5.503h-4.002v-4.002h4.002v4.002zm0-5.503h-4.002V8.999h4.002v4.003z"/></svg>
+                        </div>
+                        <h3 class="font-bold text-lg">Supabase</h3>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Database & Auth</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Stats Section -->
+        <section class="py-16 bg-primary-600 text-white">
+            <div class="container mx-auto px-6">
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+                    <div>
+                        <div class="text-4xl font-black mb-1">5+</div>
+                        <div class="text-primary-100 text-sm" data-i18n="yearsExp">Years Experience</div>
+                    </div>
+                    <div>
+                        <div class="text-4xl font-black mb-1">50+</div>
+                        <div class="text-primary-100 text-sm" data-i18n="projectsDone">Projects Done</div>
+                    </div>
+                    <div>
+                        <div class="text-4xl font-black mb-1">100%</div>
+                        <div class="text-primary-100 text-sm" data-i18n="satisfaction">Client Satisfaction</div>
+                    </div>
+                    <div>
+                        <div class="text-4xl font-black mb-1">24/7</div>
+                        <div class="text-primary-100 text-sm" data-i18n="support">Support</div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Projects Section -->
+        <section id="projects" class="py-20 bg-gray-50 dark:bg-slate-900">
+            <div class="container mx-auto px-6">
+                <div class="flex flex-col md:flex-row justify-between items-end mb-12">
+                    <div>
+                        <h2 class="text-3xl font-bold mb-4" data-i18n="featuredProjects">Featured Projects</h2>
+                        <div class="w-20 h-1 bg-primary-500 rounded"></div>
+                    </div>
+                    <div class="mt-4 md:mt-0">
+                        <span class="text-sm text-gray-500 dark:text-gray-400" data-i18n="projectsDesc">High complexity mobile and web apps</span>
+                    </div>
+                </div>
+
+                <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8" id="projects-grid">
+                    <!-- Project 1 -->
+                    <div class="bg-white dark:bg-slate-800 rounded-2xl overflow-hidden shadow-lg group">
+                        <div class="relative overflow-hidden h-48">
+                            <img src="http://static.photos/mobile/640x360/1" alt="E-commerce App" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
+                            <div class="absolute top-4 right-4 bg-white/90 dark:bg-black/80 px-3 py-1 rounded-full text-xs font-bold text-primary-600">Flutter</div>
+                        </div>
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold mb-2" data-i18n="proj1Title">Giant E-commerce App</h3>
+                            <p class="text-gray-600 dark:text-gray-400 mb-4 text-sm" data-i18n="proj1Desc">A complete shopping platform with payment gateways, admin panel, and real-time tracking.</p>
+                            <a href="#" class="text-primary-600 font-bold text-sm hover:underline inline-flex items-center">
+                                <span data-i18n="viewDetails">View Details</span> <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
+                            </a>
+                        </div>
+                    </div>
+
+                    <!-- Project 2 -->
+                    <div class="bg-white dark:bg-slate-800 rounded-2xl overflow-hidden shadow-lg group">
+                        <div class="relative overflow-hidden h-48">
+                            <img src="http://static.photos/technology/640x360/2" alt="Dashboard" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
+                            <div class="absolute top-4 right-4 bg-white/90 dark:bg-black/80 px-3 py-1 rounded-full text-xs font-bold text-green-600">Python + Supabase</div>
+                        </div>
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold mb-2" data-i18n="proj2Title">SaaS Analytics Dashboard</h3>
+                            <p class="text-gray-600 dark:text-gray-400 mb-4 text-sm" data-i18n="proj2Desc">Data visualization tool handling large datasets with complex queries and reporting.</p>
+                            <a href="#" class="text-primary-600 font-bold text-sm hover:underline inline-flex items-center">
+                                <span data-i18n="viewDetails">View Details</span> <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
+                            </a>
+                        </div>
+                    </div>
+
+                    <!-- Project 3 -->
+                    <div class="bg-white dark:bg-slate-800 rounded-2xl overflow-hidden shadow-lg group">
+                        <div class="relative overflow-hidden h-48">
+                            <img src="http://static.photos/office/640x360/3" alt="Delivery App" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500">
+                            <div class="absolute top-4 right-4 bg-white/90 dark:bg-black/80 px-3 py-1 rounded-full text-xs font-bold text-orange-600">Node.js</div>
+                        </div>
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold mb-2" data-i18n="proj3Title">On-Demand Delivery Service</h3>
+                            <p class="text-gray-600 dark:text-gray-400 mb-4 text-sm" data-i18n="proj3Desc">Real-time location tracking, driver app, and customer interface with socket.io.</p>
+                            <a href="#" class="text-primary-600 font-bold text-sm hover:underline inline-flex items-center">
+                                <span data-i18n="viewDetails">View Details</span> <i data-feather="arrow-right" class="w-4 h-4 ml-1"></i>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Reviews Section -->
+        <section class="py-20 bg-white dark:bg-slate-800 relative overflow-hidden">
+            <div class="container mx-auto px-6 relative z-10">
+                <div class="text-center mb-16">
+                    <h2 class="text-3xl font-bold mb-4" data-i18n="clientReviews">Client Reviews</h2>
+                    <p class="text-gray-500 dark:text-gray-400">Trusted by clients on Mostaql, Khamsat, and Upwork</p>
+                    <div class="w-20 h-1 bg-secondary-500 mx-auto mt-4 rounded"></div>
+                </div>
+                
+                <!-- Platforms -->
+                <div class="flex justify-center gap-6 mb-12 opacity-70 grayscale hover:grayscale-0 transition-all duration-300">
+                     <!-- Placeholders for platform logos using text/icons since SVGs might be bulky -->
+                     <div class="flex items-center font-bold text-xl"><i data-feather="briefcase" class="mr-2"></i> Mostaql</div>
+                     <div class="flex items-center font-bold text-xl"><i data-feather="star" class="mr-2"></i> Khamsat</div>
+                     <div class="flex items-center font-bold text-xl"><i data-feather="layers" class="mr-2"></i> Upwork</div>
+                </div>
+
+                <div id="reviews-container" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <!-- Reviews will be injected here via JS -->
+                    <div class="col-span-full text-center py-10 animate-pulse">
+                        <span data-i18n="loadingReviews">Loading reviews...</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Contact Section -->
+        <section id="contact" class="py-20 bg-gray-50 dark:bg-slate-900">
+            <div class="container mx-auto px-6 max-w-4xl">
+                <div class="bg-white dark:bg-slate-800 rounded-3xl shadow-2xl overflow-hidden">
+                    <div class="grid md:grid-cols-5">
+                        <div class="md:col-span-2 bg-primary-600 p-10 text-white flex flex-col justify-between">
+                            <div>
+                                <h3 class="text-2xl font-bold mb-6" data-i18n="contactInfo">Contact Info</h3>
+                                <ul class="space-y-6">
+                                    <li class="flex items-start">
+                                        <i data-feather="map-pin" class="w-5 h-5 mt-1 mr-3"></i>
+                                        <span>Remote / Worldwide</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i data-feather="mail" class="w-5 h-5 mt-1 mr-3"></i>
+                                        <span>contact@flutterdev.com</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i data-feather="check-circle" class="w-5 h-5 mt-1 mr-3"></i>
+                                        <span data-i18n="availStatus">Available for freelance</span>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div class="flex gap-4 mt-10">
+                                <a href="#" class="p-2 bg-white/20 rounded-full hover:bg-white/40 transition"><i data-feather="github" class="w-5 h-5"></i></a>
+                                <a href="#" class="p-2 bg-white/20 rounded-full hover:bg-white/40 transition"><i data-feather="linkedin" class="w-5 h-5"></i></a>
+                                <a href="#" class="p-2 bg-white/20 rounded-full hover:bg-white/40 transition"><i data-feather="twitter" class="w-5 h-5"></i></a>
+                            </div>
+                        </div>
+                        <div class="md:col-span-3 p-10">
+                            <h3 class="text-2xl font-bold mb-6 text-gray-800 dark:text-white" data-i18n="sendMessage">Send a Message</h3>
+                            <form class="space-y-6" onsubmit="event.preventDefault(); alert('Message sent! (Demo)');">
+                                <div class="grid md:grid-cols-2 gap-6">
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" data-i18n="name">Name</label>
+                                        <input type="text" class="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-slate-700 border-none focus:ring-2 focus:ring-primary-500 transition">
+                                    </div>
+                                    <div>
+                                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" data-i18n="email">Email</label>
+                                        <input type="email" class="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-slate-700 border-none focus:ring-2 focus:ring-primary-500 transition">
+                                    </div>
+                                </div>
+                                <div>
+                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" data-i18n="message">Message</label>
+                                    <textarea rows="4" class="w-full px-4 py-3 rounded-lg bg-gray-50 dark:bg-slate-700 border-none focus:ring-2 focus:ring-primary-500 transition"></textarea>
+                                </div>
+                                <button type="submit" class="w-full py-4 bg-primary-600 hover:bg-primary-700 text-white font-bold rounded-lg transition shadow-lg hover:shadow-primary-500/30">
+                                    <span data-i18n="sendBtn">Send Message</span> <i data-feather="send" class="w-4 h-4 inline ml-2"></i>
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <site-footer></site-footer>
+
+    <!-- Web Component Scripts -->
+    <script src="components/header.js"></script>
+    <script src="components/footer.js"></script>
+    
+    <!-- Main Logic -->
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,190 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // --- Translations Data ---
+    const translations = {
+        en: {
+            heroTitle: "Super Engineer",
+            heroSubtitle: "Expert in Flutter, Python, Node.js & Supabase. Building complex, high-performance apps with 5+ years of experience.",
+            viewProjects: "View Projects",
+            contactMe: "Contact Me",
+            mySkills: "My Tech Stack",
+            yearsExp: "Years Experience",
+            projectsDone: "Projects Done",
+            satisfaction: "Client Satisfaction",
+            support: "Support",
+            featuredProjects: "Featured Projects",
+            projectsDesc: "High complexity mobile and web apps",
+            proj1Title: "Giant E-commerce App",
+            proj1Desc: "A complete shopping platform with payment gateways, admin panel, and real-time tracking.",
+            proj2Title: "SaaS Analytics Dashboard",
+            proj2Desc: "Data visualization tool handling large datasets with complex queries and reporting.",
+            proj3Title: "On-Demand Delivery Service",
+            proj3Desc: "Real-time location tracking, driver app, and customer interface with socket.io.",
+            viewDetails: "View Details",
+            clientReviews: "Client Reviews",
+            loadingReviews: "Loading reviews...",
+            contactInfo: "Contact Info",
+            availStatus: "Available for freelance",
+            sendMessage: "Send a Message",
+            name: "Name",
+            email: "Email",
+            message: "Message",
+            sendBtn: "Send Message"
+        },
+        ar: {
+            heroTitle: "المهندس الخارق",
+            heroSubtitle: "خبير في Flutter، Python، Node.js و Supabase. بناء تطبيقات معقدة وعالية الأداء بخبرة تزيد عن 5 سنوات.",
+            viewProjects: "شاهد المشاريع",
+            contactMe: "تواصل معي",
+            mySkills: "مهاراتي التقنية",
+            yearsExp: "سنوات خبرة",
+            projectsDone: "مشاريع منجزة",
+            satisfaction: "رضا العملاء",
+            support: "دعم فني",
+            featuredProjects: "أبرز المشاريع",
+            projectsDesc: "تطبيقات ومواقع ويب عالية التعقيد",
+            proj1Title: "تطبيق تجارة إلكترونية عملاق",
+            proj1Desc: "منصة تسوق كاملة مع بوابات دفع، لوحة تحكم، وتتبع فوري.",
+            proj2Title: "لوحة تحليلات SaaS",
+            proj2Desc: "أداة تصور بيانات تتعامل مع مجموعات بيانات ضخمة وتقارير معقدة.",
+            proj3Title: "خدمة التوصيل عند الطلب",
+            proj3Desc: "تتبع موقع فوري، تطبيق للسائقين، وواجهة للعملاء باستخدام socket.io.",
+            viewDetails: "عرض التفاصيل",
+            clientReviews: "آراء العملاء",
+            loadingReviews: "جاري تحميل التقييمات...",
+            contactInfo: "معلومات الاتصال",
+            availStatus: "متاح للعمل الحر",
+            sendMessage: "أرسل رسالة",
+            name: "الاسم",
+            email: "البريد الإلكتروني",
+            message: "الرسالة",
+            sendBtn: "إرسال الرسالة"
+        }
+    };
+
+    // --- State Management ---
+    let currentLang = localStorage.getItem('lang') || 'en';
+    let currentTheme = localStorage.getItem('theme') || 'light';
+
+    // --- Theme Logic ---
+    function applyTheme(theme) {
+        const html = document.documentElement;
+        if (theme === 'dark') {
+            html.classList.add('dark');
+        } else {
+            html.classList.remove('dark');
+        }
+        localStorage.setItem('theme', theme);
+        
+        // Dispatch event for components
+        window.dispatchEvent(new CustomEvent('themeChanged', { detail: theme }));
+    }
+
+    // Toggle Theme
+    window.toggleTheme = () => {
+        currentTheme = currentTheme === 'dark' ? 'light' : 'dark';
+        applyTheme(currentTheme);
+    };
+
+    // Initialize Theme
+    applyTheme(currentTheme);
+
+    // --- Language Logic ---
+    function applyLanguage(lang) {
+        currentLang = lang;
+        const html = document.documentElement;
+        html.setAttribute('lang', lang);
+        html.setAttribute('dir', lang === 'ar' ? 'rtl' : 'ltr');
+        
+        // Update text content
+        const elements = document.querySelectorAll('[data-i18n]');
+        elements.forEach(el => {
+            const key = el.getAttribute('data-i18n');
+            if (translations[lang][key]) {
+                el.textContent = translations[lang][key];
+            }
+        });
+
+        // Dispatch event for components
+        window.dispatchEvent(new CustomEvent('langChanged', { detail: lang }));
+    }
+
+    // Toggle Language
+    window.toggleLanguage = () => {
+        const newLang = currentLang === 'en' ? 'ar' : 'en';
+        applyLanguage(newLang);
+    };
+
+    // Initialize Language
+    applyLanguage(currentLang);
+
+    // --- Mock Reviews Fetching (Since CORS likely blocks direct Mostaql HTML parsing) ---
+    async function fetchReviews() {
+        const container = document.getElementById('reviews-container');
+        
+        // Simulating API delay
+        await new Promise(resolve => setTimeout(resolve, 1500));
+
+        // Mock Data based on Mostaql/Khamsat style
+        const mockReviews = [
+            {
+                name: "Ahmed Al-Sayed",
+                role: "CEO, TechStart",
+                content: "مطور محترف جداً، صبره وتفانيه في العمل كان مذهلاً. التطبيق تم تسليمه في الوقت المحدد وبجودة عالية.",
+                rating: 5,
+                imgSeed: 101
+            },
+            {
+                name: "John Doe",
+                role: "Product Manager, AppCorp",
+                content: "Excellent Flutter developer. Handled complex backend integration with Supabase flawlessly. Highly recommended!",
+                rating: 5,
+                imgSeed: 102
+            },
+            {
+                name: "Sarah Smith",
+                role: "Founder, ShopEasy",
+                content: "Great communication and technical skills. The Python script saved us hours of manual work.",
+                rating: 4,
+                imgSeed: 103
+            }
+        ];
+
+        container.innerHTML = ''; // Clear loading
+
+        mockReviews.forEach(review => {
+            const card = document.createElement('div');
+            card.className = "bg-gray-50 dark:bg-slate-700 p-6 rounded-2xl border border-gray-100 dark:border-slate-600";
+            
+            // Generate Stars
+            let stars = '';
+            for(let i=0; i<5; i++) {
+                stars += `<i data-feather="star" class="w-4 h-4 ${i < review.rating ? 'text-yellow-400 fill-current' : 'text-gray-300'}"></i>`;
+            }
+
+            const avatar = `http://static.photos/people/100x100/${review.imgSeed}`;
+
+            card.innerHTML = `
+                <div class="flex items-center mb-4">
+                    <img src="${avatar}" class="w-12 h-12 rounded-full mr-3 rtl:mr-0 rtl:ml-3 object-cover">
+                    <div>
+                        <h4 class="font-bold text-gray-900 dark:text-white">${review.name}</h4>
+                        <p class="text-xs text-gray-500 dark:text-gray-400">${review.role}</p>
+                    </div>
+                </div>
+                <div class="flex mb-3 gap-1">
+                    ${stars}
+                </div>
+                <p class="text-gray-600 dark:text-gray-300 text-sm italic">"${review.content}"</p>
+                <div class="mt-4 pt-4 border-t border-gray-200 dark:border-slate-600 text-xs text-gray-400 flex items-center">
+                     <i data-feather="check-circle" class="w-3 h-3 mr-1"></i> Verified Review
+                </div>
+            `;
+            container.appendChild(card);
+        });
+        
+        // Re-initialize feather icons for new content
+        feather.replace();
+    }
+
+    fetchReviews();
+});

style.css

@@ -1,28 +1,52 @@
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 10px;
+}
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+.dark ::-webkit-scrollbar-track {
+    background: #1e293b;
+}
+::-webkit-scrollbar-thumb {
+    background: #cbd5e1;
+    border-radius: 5px;
+}
+.dark ::-webkit-scrollbar-thumb {
+    background: #475569;
+}
+::-webkit-scrollbar-thumb:hover {
+    background: #94a3b8;
+}
+
+/* Base Styles */
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+/* RTL Handling Helpers */
+[dir="rtl"] {
+    direction: rtl;
+    text-align: right;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+[dir="rtl"] .feather {
+    margin-left: 0.5rem;
+    margin-right: 0;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+[dir="ltr"] .feather {
+    margin-right: 0.5rem;
+    margin-left: 0;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Animation Classes */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
 }
+
+.animate-fade-in {
+    animation: fadeIn 0.8s ease-out forwards;
+}