Spaces:

molosh17
/

nileflow-express-logistics

Running

App Files Files Community

molosh17 commited on Dec 2, 2025

Commit

3577aec

verified ·

1 Parent(s): becf67b

Create a homepage for a shipping and logistics company named Africa Logistics Corp. Egypt

Browse files

Files changed (6) hide show

README.md +8 -5
components/footer.js +117 -0
components/navigation.js +90 -0
index.html +167 -19
script.js +122 -0
style.css +75 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Nileflow Express Logistics
-emoji: 📈
-colorFrom: indigo
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: NileFlow Express Logistics 🚢
+colorFrom: purple
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js ADDED Viewed

	@@ -0,0 +1,117 @@

+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .footer-link {
+                    transition: color 0.3s ease;
+                }
+                .footer-link:hover {
+                    color: #dc2626;
+                }
+            </style>
+            <footer class="bg-gray-800 text-white">
+                <div class="container mx-auto px-6 py-12">
+                    <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                        <!-- Company Info -->
+                        <div class="col-span-1">
+                            <div class="flex items-center space-x-3 mb-4">
+                                <div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center">
+                                    <i data-feather="truck" class="text-white w-4 h-4"></i>
+                                </div>
+                                <span class="text-xl font-bold">NileFlow Express</span>
+                            </div>
+                            <p class="text-gray-400 mb-4">
+                                Premium logistics solutions connecting Africa to global markets with speed and reliability.
+                            </p>
+                            <div class="flex space-x-4">
+                                <a href="#" class="text-gray-400 hover:text-white transition duration-300">
+                                    <i data-feather="facebook"></i>
+                                </a>
+                                <a href="#" class="text-gray-400 hover:text-white transition duration-300">
+                                    <i data-feather="twitter"></i>
+                                </a>
+                                <a href="#" class="text-gray-400 hover:text-white transition duration-300">
+                                    <i data-feather="linkedin"></i>
+                                </a>
+                                <a href="#" class="text-gray-400 hover:text-white transition duration-300">
+                                    <i data-feather="instagram"></i>
+                                </a>
+                            </div>
+                        </div>
+                        <!-- Quick Links -->
+                        <div>
+                            <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
+                            <ul class="space-y-2">
+                                <li><a href="/" class="footer-link text-gray-400">Home</a></li>
+                                <li><a href="/services" class="footer-link text-gray-400">Services</a></li>
+                                <li><a href="/tracking" class="footer-link text-gray-400">Tracking</a></li>
+                                <li><a href="/about" class="footer-link text-gray-400">About Us</a></li>
+                                <li><a href="/contact" class="footer-link text-gray-400">Contact</a></li>
+                            </ul>
+                        </div>
+                        <!-- Services -->
+                        <div>
+                            <h3 class="text-lg font-semibold mb-4">Services</h3>
+                            <ul class="space-y-2">
+                                <li><a href="/air-freight" class="footer-link text-gray-400">Air Freight</a></li>
+                                <li><a href="/sea-freight" class="footer-link text-gray-400">Sea Freight</a></li>
+                                <li><a href="/land-transport" class="footer-link text-gray-400">Land Transport</a></li>
+                                <li><a href="/warehousing" class="footer-link text-gray-400">Warehousing</a></li>
+                                <li><a href="/customs-clearance" class="footer-link text-gray-400">Customs Clearance</a></li>
+                            </ul>
+                        </div>
+                        <!-- Contact Info -->
+                        <div>
+                            <h3 class="text-lg font-semibold mb-4">Contact</h3>
+                            <ul class="space-y-3 text-gray-400">
+                                <li class="flex items-center space-x-2">
+                                    <i data-feather="map-pin" class="w-4 h-4"></i>
+                                    <span>Cairo, Egypt</span>
+                                </li>
+                                <li class="flex items-center space-x-2">
+                                    <i data-feather="phone" class="w-4 h-4"></i>
+                                    <span>+20 123 456 7890</span>
+                                </li>
+                                <li class="flex items-center space-x-2">
+                                    <i data-feather="mail" class="w-4 h-4"></i>
+                                    <span>info@nileflowexpress.com</span>
+                                </li>
+                                <li class="flex items-center space-x-2">
+                                    <i data-feather="clock" class="w-4 h-4"></i>
+                                    <span>24/7 Customer Support</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    <!-- Bottom Bar -->
+                    <div class="border-t border-gray-700 pt-8 mt-8">
+                        <div class="flex flex-col md:flex-row justify-between items-center">
+                            <p class="text-gray-400 text-sm">
+                                © 2024 NileFlow Express Logistics. All rights reserved.
+                            </p>
+                            <div class="flex space-x-6 mt-4 md:mt-0">
+                                <a href="/privacy" class="footer-link text-gray-400 text-sm">Privacy Policy</a>
+                                <a href="/terms" class="footer-link text-gray-400 text-sm">Terms of Service</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        `;
+        // Initialize feather icons in shadow DOM
+        setTimeout(() => {
+            if (this.shadowRoot.querySelector('[data-feather]')) {
+                feather.replace();
+            }
+        }, 100);
+    }
+}
+customElements.define('custom-footer', CustomFooter);

components/navigation.js ADDED Viewed

	@@ -0,0 +1,90 @@

+class CustomNavigation extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .nav-link {
+                    position: relative;
+                    transition: color 0.3s ease;
+                }
+                .nav-link::after {
+                    content: '';
+                    position: absolute;
+                    width: 0;
+                    height: 2px;
+                    bottom: -5px;
+                    left: 0;
+                    background-color: #dc2626;
+                    transition: width 0.3s ease;
+                }
+                .nav-link:hover::after {
+                    width: 100%;
+                }
+                .mobile-menu {
+                    transition: all 0.3s ease-in-out;
+                }
+            </style>
+            <nav class="bg-white shadow-lg sticky top-0 z-50">
+                <div class="container mx-auto px-6">
+                    <div class="flex justify-between items-center py-4">
+                        <!-- Logo -->
+                        <a href="/" class="flex items-center space-x-3">
+                            <div class="w-10 h-10 bg-primary rounded-full flex items-center justify-center">
+                                <i data-feather="truck" class="text-white"></i>
+                            </div>
+                            <span class="text-2xl font-bold text-gray-800">NileFlow Express</span>
+                        </a>
+                        <!-- Desktop Menu -->
+                        <div class="hidden md:flex items-center space-x-8">
+                            <a href="/" class="nav-link text-gray-700 hover:text-primary font-medium">Home</a>
+                            <a href="/services" class="nav-link text-gray-700 hover:text-primary font-medium">Services</a>
+                            <a href="/tracking" class="nav-link text-gray-700 hover:text-primary font-medium">Tracking</a>
+                            <a href="/about" class="nav-link text-gray-700 hover:text-primary font-medium">About</a>
+                            <a href="/contact" class="nav-link text-gray-700 hover:text-primary font-medium">Contact</a>
+                            <a href="/quote" class="bg-primary hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium transition duration-300">
+                                Get Quote
+                            </a>
+                        </div>
+                        <!-- Mobile Menu Button -->
+                        <button class="md:hidden text-gray-700 focus:outline-none" onclick="this.getRootNode().host.toggleMobileMenu()">
+                                <i data-feather="menu"></i>
+                            </button>
+                        </div>
+                    <!-- Mobile Menu -->
+                    <div id="mobile-menu" class="mobile-menu hidden md:hidden py-4 border-t border-gray-200">
+                        <a href="/" class="block py-2 text-gray-700 hover:text-primary font-medium">Home</a>
+                        <a href="/services" class="block py-2 text-gray-700 hover:text-primary font-medium">Services</a>
+                        <a href="/tracking" class="block py-2 text-gray-700 hover:text-primary font-medium">Tracking</a>
+                        <a href="/about" class="block py-2 text-gray-700 hover:text-primary font-medium">About</a>
+                        <a href="/contact" class="block py-2 text-gray-700 hover:text-primary font-medium">Contact</a>
+                        <a href="/quote" class="block mt-4 bg-primary hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-medium text-center transition duration-300">
+                            Get Quote
+                        </a>
+                    </div>
+                </div>
+            </nav>
+        `;
+        // Initialize feather icons in shadow DOM
+        setTimeout(() => {
+            if (this.shadowRoot.querySelector('[data-feather]')) {
+                feather.replace();
+            }
+        }, 100);
+    }
+    toggleMobileMenu() {
+        const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
+        if (mobileMenu) {
+            mobileMenu.classList.toggle('hidden');
+        }
+    }
+}
+customElements.define('custom-navigation', CustomNavigation);

index.html CHANGED Viewed

@@ -1,19 +1,167 @@
-<!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>NileFlow Express Logistics - Premium Shipping Solutions</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <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: '#1e40af',
+                        secondary: '#dc2626'
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-50">
+    <!-- Navigation Component -->
+    <custom-navigation></custom-navigation>
+    <!-- Hero Section -->
+    <section class="relative bg-gradient-to-r from-primary to-blue-800 text-white py-20">
+        <div class="absolute inset-0 bg-black opacity-20"></div>
+        <div class="container mx-auto px-6 relative z-10">
+            <div class="max-w-3xl">
+                <h1 class="text-5xl md:text-6xl font-bold mb-6 leading-tight">
+                    Connecting Africa to the World
+                </h1>
+                <p class="text-xl md:text-2xl mb-8 opacity-90">
+                    Premium logistics solutions powered by NileFlow Express. Fast, reliable, and efficient shipping across continents.
+                </p>
+                <div class="flex flex-col sm:flex-row gap-4">
+                    <a href="/tracking" class="bg-secondary hover:bg-red-700 text-white px-8 py-4 rounded-lg font-semibold text-lg transition duration-300 transform hover:scale-105 text-center">
+                        Track Your Shipment
+                    </a>
+                    <a href="/services" class="border-2 border-white hover:bg-white hover:text-primary text-white px-8 py-4 rounded-lg font-semibold text-lg transition duration-300 text-center">
+                        Our Services
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="absolute bottom-0 right-0 w-1/3 h-full overflow-hidden">
+            <img src="http://static.photos/technology/1200x630/42" alt="Logistics Technology" class="w-full h-full object-cover opacity-20">
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section class="py-20 bg-white">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold text-gray-800 mb-4">Why Choose NileFlow Express?</h2>
+                <p class="text-xl text-gray-600 max-w-2xl mx-auto">We deliver excellence in every shipment with cutting-edge technology and decades of experience.</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <div class="bg-gray-50 p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
+                    <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-6">
+                        <i data-feather="clock" class="text-white w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold text-gray-800 mb-4">Fast Delivery</h3>
+                    <p class="text-gray-600">Express shipping solutions with real-time tracking and guaranteed delivery times.</p>
+                </div>
+                <div class="bg-gray-50 p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
+                    <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-6">
+                        <i data-feather="shield" class="text-white w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold text-gray-800 mb-4">Secure Handling</h3>
+                    <p class="text-gray-600">Advanced security measures and insurance options for complete peace of mind.</p>
+                </div>
+                <div class="bg-gray-50 p-8 rounded-xl shadow-lg hover:shadow-xl transition duration-300">
+                    <div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mb-6">
+                        <i data-feather="globe" class="text-white w-8 h-8"></i>
+                    </div>
+                    <h3 class="text-2xl font-bold text-gray-800 mb-4">Global Network</h3>
+                    <p class="text-gray-600">Extensive network covering major African ports and international destinations worldwide.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Services Preview -->
+    <section class="py-20 bg-gradient-to-br from-gray-100 to-gray-200">
+        <div class="container mx-auto px-6">
+            <div class="text-center mb-16">
+                <h2 class="text-4xl font-bold text-gray-800 mb-4">Our Premium Services</h2>
+                <p class="text-xl text-gray-600">Comprehensive logistics solutions tailored to your business needs.</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:transform hover:scale-105 transition duration-300">
+                    <img src="http://static.photos/industry/640x360/1" alt="Air Freight" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-3">Air Freight</h3>
+                        <p class="text-gray-600 mb-4">Express air cargo services for time-sensitive shipments.</p>
+                        <a href="/air-freight" class="text-primary font-semibold hover:text-blue-700 transition duration-300">Learn More →</a>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:transform hover:scale-105 transition duration-300">
+                    <img src="http://static.photos/industry/640x360/2" alt="Sea Freight" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-3">Sea Freight</h3>
+                        <p class="text-gray-600 mb-4">Cost-effective container shipping for bulk cargo.</p>
+                        <a href="/sea-freight" class="text-primary font-semibold hover:text-blue-700 transition duration-300">Learn More →</a>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:transform hover:scale-105 transition duration-300">
+                    <img src="http://static.photos/industry/640x360/3" alt="Land Transport" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-3">Land Transport</h3>
+                        <p class="text-gray-600 mb-4">Reliable trucking and rail services across Africa.</p>
+                        <a href="/land-transport" class="text-primary font-semibold hover:text-blue-700 transition duration-300">Learn More →</a>
+                    </div>
+                </div>
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden hover:transform hover:scale-105 transition duration-300">
+                    <img src="http://static.photos/technology/640x360/4" alt="Warehousing" class="w-full h-48 object-cover">
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-800 mb-3">Warehousing</h3>
+                        <p class="text-gray-600 mb-4">Secure storage solutions with inventory management.</p>
+                        <a href="/warehousing" class="text-primary font-semibold hover:text-blue-700 transition duration-300">Learn More →</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section class="py-20 bg-primary text-white">
+        <div class="container mx-auto px-6 text-center">
+            <h2 class="text-4xl font-bold mb-6">Ready to Ship with Confidence?</h2>
+            <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of satisfied clients who trust NileFlow Express for their logistics needs.</p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <a href="/quote" class="bg-secondary hover:bg-red-700 text-white px-8 py-4 rounded-lg font-semibold text-lg transition duration-300">
+                    Get Free Quote
+                </a>
+                <a href="/contact" class="border-2 border-white hover:bg-white hover:text-primary text-white px-8 py-4 rounded-lg font-semibold text-lg transition duration-300">
+                    Contact Us
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Footer Component -->
+    <custom-footer></custom-footer>
+    <!-- Include Components -->
+    <script src="components/navigation.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>

script.js ADDED Viewed

	@@ -0,0 +1,122 @@

+// Main JavaScript for NileFlow Express Logistics
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', function() {
+    initializeAnimations();
+    initializeTrackingForm();
+    initializeServiceCards();
+});
+// Initialize scroll animations
+function initializeAnimations() {
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+    const observer = new IntersectionObserver(function(entries) {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('fade-in-up');
+                observer.unobserve(entry.target);
+            }
+        });
+    }, observerOptions);
+    // Observe all sections for animation
+    document.querySelectorAll('section').forEach(section => {
+        observer.observe(section);
+    });
+}
+// Initialize tracking form functionality
+function initializeTrackingForm() {
+    const trackingForm = document.querySelector('#tracking-form');
+    if (trackingForm) {
+        trackingForm.addEventListener('submit', function(e) {
+            e.preventDefault();
+            const trackingNumber = this.querySelector('input[type="text"]').value;
+            if (trackingNumber.trim()) {
+                window.location.href = `/tracking?number=${encodeURIComponent(trackingNumber)}`;
+            }
+        });
+    }
+}
+// Initialize service cards interactions
+function initializeServiceCards() {
+    const serviceCards = document.querySelectorAll('.service-card');
+    serviceCards.forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            this.style.transform = 'translateY(-10px)';
+            this.style.boxShadow = '0 20px 40px rgba(0,0,0,0.1)';
+        });
+        card.addEventListener('mouseleave', function() {
+            this.style.transform = 'translateY(0)';
+            this.style.boxShadow = '0 10px 30px rgba(0,0,0,0.08)';
+        });
+    });
+}
+// API integration for tracking (placeholder)
+async function fetchTrackingInfo(trackingNumber) {
+    try {
+        // This would be replaced with actual API endpoint
+        const response = await fetch(`/api/tracking/${trackingNumber}`);
+        const data = await response.json();
+        return data;
+    } catch (error) {
+        console.error('Error fetching tracking info:', error);
+        return null;
+    }
+}
+// Smooth scroll to section
+function scrollToSection(sectionId) {
+    const element = document.getElementById(sectionId);
+    if (element) {
+        element.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start'
+        });
+    }
+}
+// Mobile menu toggle (for navigation component)
+function toggleMobileMenu() {
+    const mobileMenu = document.querySelector('#mobile-menu');
+    if (mobileMenu) {
+        mobileMenu.classList.toggle('hidden');
+    }
+}
+// Form validation for contact forms
+function validateForm(form) {
+    const inputs = form.querySelectorAll('input[required], textarea[required]');
+    let isValid = true;
+    inputs.forEach(input => {
+        if (!input.value.trim()) {
+            input.classList.add('border-red-500');
+            isValid = false;
+        } else {
+            input.classList.remove('border-red-500');
+        }
+    });
+    return isValid;
+}
+// Debounce function for search inputs
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}

style.css CHANGED Viewed

@@ -1,28 +1,84 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Custom Styles for NileFlow Express Logistics */
+/* Smooth scrolling */
+html {
+    scroll-behavior: smooth;
+}
+/* Custom animations */
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+.fade-in-up {
+    animation: fadeInUp 0.6s ease-out;
+}
+/* Gradient text */
+.gradient-text {
+    background: linear-gradient(135deg, #1e40af 0%, #dc2626 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+/* Custom button hover effects */
+.btn-hover-effect {
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s ease;
+}
+.btn-hover-effect::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+    transition: left 0.5s;
+}
+.btn-hover-effect:hover::before {
+    left: 100%;
+}
+/* Loading animation for tracking */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
 }
+.pulse {
+    animation: pulse 2s infinite;
 }
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
 }
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
 }
+::-webkit-scrollbar-thumb {
+    background: #1e40af;
+    border-radius: 4px;
 }
+::-webkit-scrollbar-thumb:hover {
+    background: #1e3a8a;
+}