Create a professional, modern, and trustworthy website.

Website Name: BavulumKatar’da
Slogan: “Shop From the World, Receive in Qatar with One Bag!”

GOAL:
Build a platform that allows users in Qatar to shop from any online store worldwide, ship their orders to our warehouse, store them, combine them into one package, and receive them with lower shipping costs and better convenience.

DESIGN STYLE:
- Very modern, clean, and premium
- White + navy blue + gold accents
- Large hero section with global shopping / delivery visuals
- Clear typography, high trust-factor layout
- Fully responsive (mobile friendly)

------------------------------------

# 1. HOME PAGE

## HERO SECTION
- Large center headline (the slogan)
- Premium background image: Qatar skyline, suitcase, airplane, global shopping theme
- Call-to-action buttons: “Get Started”, “Our Services”, “Sign Up”
- Top-right navigation: “Login” and “Sign Up”

## SHORT INTRO SECTION
Title: “The World Is Your Store — We Deliver for You.”
Text:
“We simplify global shopping for people living in Qatar. Ship your orders to our warehouse, store them safely, combine them, and receive everything in one single delivery.”

## HOW IT WORKS (4 Steps)
Use icons + short descriptions:

1. **Place Your Orders**
Shop from any website worldwide and send your items to our warehouse.

2. **Store Safely**
We keep your packages secure until you’re ready.

3. **Combine Into One Shipment**
Save money by grouping all items into one package.

4. **Receive in Qatar**
Faster, easier, and more affordable delivery.

## FEATURES / ADVANTAGES SECTION
Create clean cards with icons:
- Tax advantage
- Lower shipping cost
- Secure warehouse
- Real-time tracking
- Customer support

## OPTIONAL PRICING SECTION
- Use clear price boxes
- Emphasize: “Transparent pricing, no hidden fees.”

## TRUST / ABOUT SECTION
Title: “Why Choose Us?”
Text:
“Our service helps customers in Qatar receive global products more easily through secure storage, combined shipments, and cost-efficient delivery options.”

## FOOTER
Includes:
- Email and contact information
- Social media icons
- Privacy Policy
- Terms of Service

------------------------------------

# 2. SIGN UP PAGE (Registration)

Form Fields:
- First Name
- Last Name
- Email
- Phone Number (optional)
- Password
- Confirm Password

Button:
- **Sign Up**

Below the form:
“Already have an account? Login”

Design:
- Centered form
- Minimal, clean, card-style layout with soft shadow

------------------------------------

# 3. LOGIN PAGE

Form Fields:
- Email
- Password

Button:
- **Login**

Additional links:
- “Forgot Password?”
- “Don’t have an account? Sign Up”

Background:
- Subtle blurred Qatar skyline (optional)

------------------------------------

# 4. SEO & STRUCTURE GUIDELINES
- H1: “Shop From the World, Receive in Qatar with One Bag!”
- H2: “How It Works”
- H2: “Why Choose Us?”
- Include SEO keywords: “global shopping”, “Qatar delivery”, “warehouse service”, “combined shipment”
- Optimized layout for fast loading performance

------------------------------------

Using all the instructions above, generate a complete website:
A premium Home Page + Functional Sign Up Page + Login Page + clean navigation.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Global Shopper Express Qatar Edition
-emoji: 🐢
-colorFrom: purple
-colorTo: gray
+title: Global Shopper Express - Qatar Edition ✈️
+colorFrom: blue
+colorTo: green
+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,72 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .footer-link:hover {
+                    color: #D4AF37;
+                }
+            </style>
+            <footer class="bg-primary text-white pt-16 pb-8">
+                <div class="container mx-auto px-6">
+                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12">
+                        <div>
+                            <h3 class="text-xl font-bold mb-6">BavulumKatar'da</h3>
+                            <p class="text-white/80 mb-4">Your trusted partner for global shopping and delivery in Qatar.</p>
+                            <div class="flex space-x-4">
+                                <a href="#" class="text-white/80 hover:text-secondary transition duration-300">
+                                    <i data-feather="facebook" class="w-5 h-5"></i>
+                                </a>
+                                <a href="#" class="text-white/80 hover:text-secondary transition duration-300">
+                                    <i data-feather="twitter" class="w-5 h-5"></i>
+                                </a>
+                                <a href="#" class="text-white/80 hover:text-secondary transition duration-300">
+                                    <i data-feather="instagram" class="w-5 h-5"></i>
+                                </a>
+                                <a href="#" class="text-white/80 hover:text-secondary transition duration-300">
+                                    <i data-feather="linkedin" class="w-5 h-5"></i>
+                                </a>
+                            </div>
+                        </div>
+                        <div>
+                            <h4 class="text-lg font-semibold mb-6">Services</h4>
+                            <ul class="space-y-3">
+                                <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Package Forwarding</a></li>
+                                <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Consolidation</a></li>
+                                <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Warehouse Storage</a></li>
+                                <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Personal Shopper</a></li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h4 class="text-lg font-semibold mb-6">Company</h4>
+                            <ul class="space-y-3">
+                                <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">About Us</a></li>
+                                <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Contact</a></li>
+                                <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Careers</a></li>
+                                <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Blog</a></li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h4 class="text-lg font-semibold mb-6">Support</h4>
+                            <ul class="space-y-3">
+                                <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Help Center</a></li>
+                                <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Shipping Info</a></li>
+                                <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Returns</a></li>
+                                <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Privacy Policy</a></li>
+                                <li><a href="#" class="footer-link text-white/80 hover:underline transition duration-300">Terms of Service</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="border-t border-white/20 mt-12 pt-8 text-center text-white/80">
+                        <p>&copy; ${new Date().getFullYear()} BavulumKatar'da. All rights reserved.</p>
+                    </div>
+                </div>
+                <script>
+                    feather.replace();
+                </script>
+            </footer>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/nav.js

@@ -0,0 +1,97 @@
+class CustomNav extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .nav-link {
+                    position: relative;
+                }
+                .nav-link:after {
+                    content: '';
+                    position: absolute;
+                    width: 0;
+                    height: 2px;
+                    bottom: -2px;
+                    left: 0;
+                    background-color: #D4AF37;
+                    transition: width 0.3s ease;
+                }
+                .nav-link:hover:after {
+                    width: 100%;
+                }
+                .mobile-menu {
+                    max-height: 0;
+                    overflow: hidden;
+                    transition: max-height 0.3s ease-out;
+                }
+                .mobile-menu.open {
+                    max-height: 500px;
+                }
+                @media (min-width: 768px) {
+                    .mobile-menu {
+                        max-height: none !important;
+                    }
+                }
+            </style>
+            <nav class="bg-white shadow-md sticky top-0 z-50">
+                <div class="container mx-auto px-6 py-4">
+                    <div class="flex justify-between items-center">
+                        <a href="index.html" class="flex items-center">
+                            <span class="text-primary font-bold text-2xl">BavulumKatar'da</span>
+                        </a>
+                        
+                        <!-- Desktop Navigation -->
+                        <div class="hidden md:flex items-center space-x-8">
+                            <a href="index.html" class="nav-link text-gray-700 hover:text-primary">Home</a>
+                            <a href="#services" class="nav-link text-gray-700 hover:text-primary">Services</a>
+                            <a href="#pricing" class="nav-link text-gray-700 hover:text-primary">Pricing</a>
+                            <a href="#" class="nav-link text-gray-700 hover:text-primary">Help</a>
+                            <a href="login.html" class="text-primary font-medium">Login</a>
+                            <a href="signup.html" class="bg-secondary text-primary font-bold py-2 px-6 rounded-full hover:bg-yellow-600 transition duration-300">Sign Up</a>
+                        </div>
+                        
+                        <!-- Mobile menu button -->
+                        <div class="md:hidden">
+                            <button class="mobile-menu-button outline-none">
+                                <i data-feather="menu" class="text-gray-700 w-6 h-6"></i>
+                            </button>
+                        </div>
+                    </div>
+                    
+                    <!-- Mobile Navigation -->
+                    <div class="mobile-menu md:hidden">
+                        <div class="pt-4 pb-2 space-y-3">
+                            <a href="index.html" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100">Home</a>
+                            <a href="#services" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100">Services</a>
+                            <a href="#pricing" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100">Pricing</a>
+                            <a href="#" class="block px-3 py-2 rounded-md text-gray-700 hover:bg-gray-100">Help</a>
+                            <div class="pt-2 space-y-2">
+                                <a href="login.html" class="block px-3 py-2 rounded-md text-primary font-medium hover:bg-gray-100">Login</a>
+                                <a href="signup.html" class="block bg-secondary text-primary text-center font-bold py-2 px-4 rounded-full hover:bg-yellow-600 transition duration-300">Sign Up</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+            <script>
+                feather.replace();
+                
+                // Mobile menu toggle
+                const mobileMenuButton = this.shadowRoot.querySelector('.mobile-menu-button');
+                const mobileMenu = this.shadowRoot.querySelector('.mobile-menu');
+                
+                mobileMenuButton.addEventListener('click', function() {
+                    mobileMenu.classList.toggle('open');
+                    const icon = mobileMenuButton.querySelector('i');
+                    if (mobileMenu.classList.contains('open')) {
+                        feather.icons['x'].replace(icon);
+                    } else {
+                        feather.icons['menu'].replace(icon);
+                    }
+                });
+            </script>
+        `;
+    }
+}
+
+customElements.define('custom-nav', CustomNav);

index.html

@@ -1,19 +1,312 @@
-<!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">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>BavulumKatar'da - Shop Globally, Receive in Qatar</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#002366',
+                        secondary: '#D4AF37',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="font-sans bg-white">
+    <!-- Navigation Component -->
+    <custom-nav></custom-nav>
+
+    <!-- Hero Section -->
+    <section class="relative h-screen flex items-center justify-center bg-primary text-white overflow-hidden">
+        <div class="absolute inset-0 bg-black/30 z-10"></div>
+        <img src="http://static.photos/cityscape/1200x630/10" alt="Qatar skyline" class="absolute w-full h-full object-cover">
+        <div class="container mx-auto px-6 relative z-20 text-center">
+            <h1 class="text-4xl md:text-6xl font-bold mb-6">Shop From the World, Receive in Qatar with One Bag!</h1>
+            <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">Your global shopping concierge service based in Qatar</p>
+            <div class="flex flex-wrap justify-center gap-4">
+                <a href="signup.html" class="bg-secondary hover:bg-yellow-600 text-primary font-bold py-3 px-8 rounded-full transition duration-300">Get Started</a>
+                <a href="#services" class="border-2 border-white hover:bg-white/10 text-white font-bold py-3 px-8 rounded-full transition duration-300">Our Services</a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Intro Section -->
+    <section class="py-20 bg-gray-50">
+        <div class="container mx-auto px-6">
+            <div class="max-w-4xl mx-auto text-center">
+                <h2 class="text-3xl md:text-4xl font-bold text-primary mb-6">The World Is Your Store — We Deliver for You</h2>
+                <p class="text-lg text-gray-700 leading-relaxed">
+                    We simplify global shopping for people living in Qatar. Ship your orders to our warehouse, store them safely, 
+                    combine them, and receive everything in one single delivery. Enjoy the freedom to shop worldwide with the 
+                    convenience of local delivery.
+                </p>
+            </div>
+        </div>
+    </section>
+
+    <!-- How It Works -->
+    <section id="services" class="py-20">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center text-primary mb-16">How It Works</h2>
+            <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <!-- Step 1 -->
+                <div class="bg-white p-8 rounded-xl shadow-lg text-center hover:transform hover:scale-105 transition duration-300">
+                    <div class="bg-primary/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <i data-feather="shopping-cart" class="text-primary w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-primary mb-3">1. Place Your Orders</h3>
+                    <p class="text-gray-600">Shop from any website worldwide and send your items to our warehouse.</p>
+                </div>
+                
+                <!-- Step 2 -->
+                <div class="bg-white p-8 rounded-xl shadow-lg text-center hover:transform hover:scale-105 transition duration-300">
+                    <div class="bg-primary/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <i data-feather="shield" class="text-primary w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-primary mb-3">2. Store Safely</h3>
+                    <p class="text-gray-600">We keep your packages secure until you're ready.</p>
+                </div>
+                
+                <!-- Step 3 -->
+                <div class="bg-white p-8 rounded-xl shadow-lg text-center hover:transform hover:scale-105 transition duration-300">
+                    <div class="bg-primary/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <i data-feather="package" class="text-primary w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-primary mb-3">3. Combine Shipment</h3>
+                    <p class="text-gray-600">Save money by grouping all items into one package.</p>
+                </div>
+                
+                <!-- Step 4 -->
+                <div class="bg-white p-8 rounded-xl shadow-lg text-center hover:transform hover:scale-105 transition duration-300">
+                    <div class="bg-primary/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
+                        <i data-feather="truck" class="text-primary w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-primary mb-3">4. Receive in Qatar</h3>
+                    <p class="text-gray-600">Faster, easier, and more affordable delivery.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Features Section -->
+    <section class="py-20 bg-primary text-white">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center mb-16">Why Choose Our Service?</h2>
+            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <div class="flex items-start">
+                    <div class="bg-secondary/20 p-3 rounded-lg mr-4">
+                        <i data-feather="dollar-sign" class="text-secondary w-6 h-6"></i>
+                    </div>
+                    <div>
+                        <h3 class="text-xl font-bold mb-2">Cost Savings</h3>
+                        <p class="text-gray-300">Up to 70% savings on international shipping by combining packages</p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="bg-secondary/20 p-3 rounded-lg mr-4">
+                        <i data-feather="lock" class="text-secondary w-6 h-6"></i>
+                    </div>
+                    <div>
+                        <h3 class="text-xl font-bold mb-2">Secure Storage</h3>
+                        <p class="text-gray-300">24/7 monitored warehouse with climate control</p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="bg-secondary/20 p-3 rounded-lg mr-4">
+                        <i data-feather="clock" class="text-secondary w-6 h-6"></i>
+                    </div>
+                    <div>
+                        <h3 class="text-xl font-bold mb-2">Flexible Timing</h3>
+                        <p class="text-gray-300">Store items for up to 60 days while you shop more</p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="bg-secondary/20 p-3 rounded-lg mr-4">
+                        <i data-feather="map" class="text-secondary w-6 h-6"></i>
+                    </div>
+                    <div>
+                        <h3 class="text-xl font-bold mb-2">Real-time Tracking</h3>
+                        <p class="text-gray-300">Monitor your packages every step of the way</p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="bg-secondary/20 p-3 rounded-lg mr-4">
+                        <i data-feather="globe" class="text-secondary w-6 h-6"></i>
+                    </div>
+                    <div>
+                        <h3 class="text-xl font-bold mb-2">Global Reach</h3>
+                        <p class="text-gray-300">Shop from any country with our international addresses</p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="bg-secondary/20 p-3 rounded-lg mr-4">
+                        <i data-feather="headphones" class="text-secondary w-6 h-6"></i>
+                    </div>
+                    <div>
+                        <h3 class="text-xl font-bold mb-2">Dedicated Support</h3>
+                        <p class="text-gray-300">Qatar-based customer service team</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Pricing Section -->
+    <section class="py-20 bg-gray-50">
+        <div class="container mx-auto px-6">
+            <h2 class="text-3xl font-bold text-center text-primary mb-4">Simple, Transparent Pricing</h2>
+            <p class="text-center text-gray-600 mb-12">No hidden fees, no surprises</p>
+            
+            <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+                <!-- Basic Plan -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200 hover:border-secondary transition duration-300">
+                    <div class="bg-primary text-white p-6">
+                        <h3 class="text-xl font-bold">Basic</h3>
+                        <p class="text-gray-200">For occasional shoppers</p>
+                    </div>
+                    <div class="p-6">
+                        <div class="text-4xl font-bold text-primary mb-4">25 QAR<span class="text-sm font-normal text-gray-500">/package</span></div>
+                        <ul class="space-y-3 mb-8">
+                            <li class="flex items-center">
+                                <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
+                                <span>Up to 2kg per package</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
+                                <span>15 days free storage</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
+                                <span>Basic tracking</span>
+                            </li>
+                        </ul>
+                        <a href="signup.html" class="block w-full bg-primary hover:bg-primary/90 text-white text-center py-3 rounded-lg font-medium transition duration-300">Get Started</a>
+                    </div>
+                </div>
+                
+                <!-- Popular Plan -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-secondary transform scale-105 z-10">
+                    <div class="bg-secondary text-primary p-6">
+                        <h3 class="text-xl font-bold">Premium</h3>
+                        <p class="text-primary/80">Most popular choice</p>
+                    </div>
+                    <div class="p-6">
+                        <div class="text-4xl font-bold text-primary mb-4">50 QAR<span class="text-sm font-normal text-gray-500">/package</span></div>
+                        <ul class="space-y-3 mb-8">
+                            <li class="flex items-center">
+                                <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
+                                <span>Up to 5kg per package</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
+                                <span>30 days free storage</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
+                                <span>Advanced tracking</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
+                                <span>Priority customer support</span>
+                            </li>
+                        </ul>
+                        <a href="signup.html" class="block w-full bg-secondary hover:bg-secondary/90 text-primary text-center py-3 rounded-lg font-medium transition duration-300">Get Started</a>
+                    </div>
+                </div>
+                
+                <!-- Business Plan -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200 hover:border-secondary transition duration-300">
+                    <div class="bg-primary text-white p-6">
+                        <h3 class="text-xl font-bold">Business</h3>
+                        <p class="text-gray-200">For frequent shoppers</p>
+                    </div>
+                    <div class="p-6">
+                        <div class="text-4xl font-bold text-primary mb-4">100 QAR<span class="text-sm font-normal text-gray-500">/package</span></div>
+                        <ul class="space-y-3 mb-8">
+                            <li class="flex items-center">
+                                <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
+                                <span>Up to 10kg per package</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
+                                <span>60 days free storage</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
+                                <span>Premium tracking</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
+                                <span>24/7 VIP support</span>
+                            </li>
+                            <li class="flex items-center">
+                                <i data-feather="check" class="text-secondary mr-2 w-4 h-4"></i>
+                                <span>Discounts on bulk shipments</span>
+                            </li>
+                        </ul>
+                        <a href="signup.html" class="block w-full bg-primary hover:bg-primary/90 text-white text-center py-3 rounded-lg font-medium transition duration-300">Get Started</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Trust Section -->
+    <section class="py-20">
+        <div class="container mx-auto px-6">
+            <div class="max-w-4xl mx-auto text-center">
+                <h2 class="text-3xl font-bold text-primary mb-6">Why Trust BavulumKatar'da?</h2>
+                <p class="text-lg text-gray-700 leading-relaxed mb-10">
+                    With years of experience in logistics and international shipping, we've perfected the art of making global 
+                    shopping accessible to residents of Qatar. Our secure facilities, transparent pricing, and dedicated customer 
+                    service team ensure you get the best possible experience.
+                </p>
+                <div class="flex flex-wrap justify-center gap-6">
+                    <div class="flex items-center bg-gray-100 rounded-full px-6 py-3">
+                        <i data-feather="award" class="text-secondary mr-2 w-5 h-5"></i>
+                        <span>Trusted by 10,000+ customers</span>
+                    </div>
+                    <div class="flex items-center bg-gray-100 rounded-full px-6 py-3">
+                        <i data-feather="clock" class="text-secondary mr-2 w-5 h-5"></i>
+                        <span>Quick 3-5 day delivery</span>
+                    </div>
+                    <div class="flex items-center bg-gray-100 rounded-full px-6 py-3">
+                        <i data-feather="shield" class="text-secondary mr-2 w-5 h-5"></i>
+                        <span>100% secure transactions</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- CTA Section -->
+    <section class="py-16 bg-primary text-white">
+        <div class="container mx-auto px-6 text-center">
+            <h2 class="text-3xl font-bold mb-6">Ready to Start Shopping Globally?</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of happy customers who enjoy hassle-free international shopping</p>
+            <a href="signup.html" class="inline-block bg-secondary hover:bg-secondary/90 text-primary font-bold py-3 px-8 rounded-full transition duration-300">Sign Up Now - It's Free</a>
+        </div>
+    </section>
+
+    <!-- Footer Component -->
+    <custom-footer></custom-footer>
+
+    <!-- Components -->
+    <script src="components/nav.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

login.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login - BavulumKatar'da</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#002366',
+                        secondary: '#D4AF37',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="font-sans bg-gray-50">
+    <!-- Navigation Component -->
+    <custom-nav></custom-nav>
+
+    <!-- Login Form -->
+    <section class="min-h-screen flex items-center justify-center p-4">
+        <div class="bg-white rounded-xl shadow-lg overflow-hidden w-full max-w-md">
+            <div class="bg-primary text-white p-6 text-center">
+                <h1 class="text-2xl font-bold">Welcome Back</h1>
+                <p class="text-white/80">Access your global shopping account</p>
+            </div>
+            <form class="p-6">
+                <div class="mb-4">
+                    <label for="email" class="block text-gray-700 text-sm font-medium mb-1">Email Address</label>
+                    <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary" required>
+                </div>
+                <div class="mb-6">
+                    <label for="password" class="block text-gray-700 text-sm font-medium mb-1">Password</label>
+                    <input type="password" id="password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary" required>
+                    <div class="text-right mt-1">
+                        <a href="#" class="text-sm text-primary hover:underline">Forgot password?</a>
+                    </div>
+                </div>
+                <button type="submit" class="w-full bg-secondary hover:bg-secondary/90 text-primary font-bold py-3 px-4 rounded-lg transition duration-300">
+                    Log In
+                </button>
+                <div class="text-center mt-4">
+                    <p class="text-gray-600">Don't have an account? <a href="signup.html" class="text-primary font-medium hover:underline">Sign Up</a></p>
+                </div>
+                <div class="flex items-center my-6">
+                    <div class="flex-grow border-t border-gray-300"></div>
+                    <span class="mx-4 text-gray-500">or</span>
+                    <div class="flex-grow border-t border-gray-300"></div>
+                </div>
+                <button type="button" class="w-full flex items-center justify-center bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-3 px-4 rounded-lg transition duration-300 mb-3">
+                    <i data-feather="facebook" class="w-5 h-5 mr-2 text-blue-600"></i>
+                    Continue with Facebook
+                </button>
+                <button type="button" class="w-full flex items-center justify-center bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-3 px-4 rounded-lg transition duration-300">
+                    <i data-feather="twitter" class="w-5 h-5 mr-2 text-blue-400"></i>
+                    Continue with Twitter
+                </button>
+            </form>
+        </div>
+    </section>
+
+    <!-- Footer Component -->
+    <custom-footer></custom-footer>
+
+    <!-- Components -->
+    <script src="components/nav.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

script.js

@@ -0,0 +1,52 @@
+// Main JavaScript for BavulumKatar'da
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize animations
+    const animateElements = document.querySelectorAll('.animate-fade-in');
+    
+    animateElements.forEach((element, index) => {
+        element.style.animationDelay = `${index * 0.1}s`;
+    });
+    
+    // Form validation for signup
+    const signupForm = document.getElementById('signup-form');
+    if (signupForm) {
+        signupForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            const password = document.getElementById('password').value;
+            const confirmPassword = document.getElementById('confirmPassword').value;
+            
+            if (password !== confirmPassword) {
+                alert('Passwords do not match!');
+                return;
+            }
+            
+            if (password.length < 8) {
+                alert('Password must be at least 8 characters long!');
+                return;
+            }
+            
+            // Form is valid, proceed with submission
+            alert('Account created successfully! Redirecting...');
+            window.location.href = 'dashboard.html'; // This would be replaced with actual form submission
+        });
+    }
+    
+    // Form validation for login
+    const loginForm = document.getElementById('login-form');
+    if (loginForm) {
+        loginForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            const email = document.getElementById('email').value;
+            const password = document.getElementById('password').value;
+            
+            if (!email || !password) {
+                alert('Please fill in all fields!');
+                return;
+            }
+            
+            // Form is valid, proceed with submission
+            alert('Login successful! Redirecting...');
+            window.location.href = 'dashboard.html'; // This would be replaced with actual form submission
+        });
+    }
+});

signup.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sign Up - BavulumKatar'da</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#002366',
+                        secondary: '#D4AF37',
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="font-sans bg-gray-50">
+    <!-- Navigation Component -->
+    <custom-nav></custom-nav>
+
+    <!-- Sign Up Form -->
+    <section class="min-h-screen flex items-center justify-center p-4">
+        <div class="bg-white rounded-xl shadow-lg overflow-hidden w-full max-w-md">
+            <div class="bg-primary text-white p-6 text-center">
+                <h1 class="text-2xl font-bold">Create Your Account</h1>
+                <p class="text-white/80">Join our global shopping community</p>
+            </div>
+            <form class="p-6">
+                <div class="grid grid-cols-2 gap-4 mb-4">
+                    <div>
+                        <label for="firstName" class="block text-gray-700 text-sm font-medium mb-1">First Name</label>
+                        <input type="text" id="firstName" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary" required>
+                    </div>
+                    <div>
+                        <label for="lastName" class="block text-gray-700 text-sm font-medium mb-1">Last Name</label>
+                        <input type="text" id="lastName" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary" required>
+                    </div>
+                </div>
+                <div class="mb-4">
+                    <label for="email" class="block text-gray-700 text-sm font-medium mb-1">Email Address</label>
+                    <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary" required>
+                </div>
+                <div class="mb-4">
+                    <label for="phone" class="block text-gray-700 text-sm font-medium mb-1">Phone Number (Optional)</label>
+                    <input type="tel" id="phone" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary">
+                </div>
+                <div class="mb-4">
+                    <label for="password" class="block text-gray-700 text-sm font-medium mb-1">Password</label>
+                    <input type="password" id="password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary" required>
+                    <p class="text-xs text-gray-500 mt-1">Minimum 8 characters with at least one number</p>
+                </div>
+                <div class="mb-6">
+                    <label for="confirmPassword" class="block text-gray-700 text-sm font-medium mb-1">Confirm Password</label>
+                    <input type="password" id="confirmPassword" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary" required>
+                </div>
+                <button type="submit" class="w-full bg-secondary hover:bg-secondary/90 text-primary font-bold py-3 px-4 rounded-lg transition duration-300">
+                    Create Account
+                </button>
+                <div class="text-center mt-4">
+                    <p class="text-gray-600">Already have an account? <a href="login.html" class="text-primary font-medium hover:underline">Log In</a></p>
+                </div>
+                <div class="flex items-center my-6">
+                    <div class="flex-grow border-t border-gray-300"></div>
+                    <span class="mx-4 text-gray-500">or</span>
+                    <div class="flex-grow border-t border-gray-300"></div>
+                </div>
+                <button type="button" class="w-full flex items-center justify-center bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-3 px-4 rounded-lg transition duration-300 mb-3">
+                    <i data-feather="facebook" class="w-5 h-5 mr-2 text-blue-600"></i>
+                    Continue with Facebook
+                </button>
+                <button type="button" class="w-full flex items-center justify-center bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-3 px-4 rounded-lg transition duration-300">
+                    <i data-feather="twitter" class="w-5 h-5 mr-2 text-blue-400"></i>
+                    Continue with Twitter
+                </button>
+            </form>
+        </div>
+    </section>
+
+    <!-- Footer Component -->
+    <custom-footer></custom-footer>
+
+    <!-- Components -->
+    <script src="components/nav.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

style.css

@@ -1,28 +1,67 @@
+/* Custom CSS for BavulumKatar'da */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Poppins', sans-serif;
+    line-height: 1.6;
+}
+
+/* Custom animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.animate-fade-in {
+    animation: fadeIn 0.8s ease-out forwards;
+}
+
+/* Hero section overlay */
+.hero-overlay {
+    background: linear-gradient(135deg, rgba(0, 35, 102, 0.8) 0%, rgba(212, 175, 55, 0.2) 100%);
+}
+
+/* Custom button styles */
+.btn-primary {
+    background-color: #002366;
+    color: white;
+    transition: all 0.3s ease;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+.btn-primary:hover {
+    background-color: #001a4d;
+    transform: translateY(-2px);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.btn-secondary {
+    background-color: #D4AF37;
+    color: #002366;
+    transition: all 0.3s ease;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.btn-secondary:hover {
+    background-color: #c19d30;
+    transform: translateY(-2px);
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Pricing card hover effect */
+.pricing-card:hover {
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+    transform: translateY(-5px);
 }
+
+/* Form input focus */
+.form-input:focus {
+    border-color: #D4AF37;
+    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .hero-title {
+        font-size: 2.5rem;
+    }
+    .hero-subtitle {
+        font-size: 1.25rem;
+    }
+}