Spaces:
Running
Running
# **Comprehensive 2,000-Word Prompt for Building a Scalable Global Delivery Tracking Website** ## **Project Overview** **Project Name:** fidex Global (Customizable) **Objective:** Develop a **full-stack, real-time global delivery tracking platform** with geolocation, multi-language support, and an advanced admin dashboard. The system should be **scalable, secure, and user-friendly**, catering to both end-users and logistics administrators. --- ## **1. Core Functional Requirements** ### **A. User-Facing Features** #### **1. Tracking System** - **Unique Tracking IDs** - Format: `SS-XXXX-XXXX` (e.g., `SS-AB12-34CD`) - QR code generation for easy scanning. - **Real-Time Tracking Dashboard** - Interactive map (Google Maps API or Mapbox) showing: - Live package location (GPS coordinates from courier devices). - Route history with timestamps. - Estimated delivery time (ETA) with dynamic updates. - **Status Timeline** (e.g., "Order Placed → In Transit → Out for Delivery → Delivered"). - **Notifications** - **SMS (Twilio)** and **Email (SendGrid)** alerts for: - Shipment confirmation. - Delivery delays. - Successful delivery. #### **2. Service Selection & Pricing** - **Dynamic Pricing Calculator** - Inputs: Weight, dimensions, origin/destination, speed (express/standard). - Real-time quotes from integrated carriers (FedEx, DHL, or EasyPost API). - **Drop-off/Pickup Locator** - Geolocation autocomplete (Google Places API). - Filter by distance, operating hours, and service type. #### **3. User Dashboard** - **Account Management** - Registration (Email + OTP or Social Login). - Profile settings (address book, notification preferences). - **Order Management** - Order history with filter options (date, status). - Reorder functionality. - **Document Generation** - PDF invoices with company branding. - Downloadable shipping labels. --- ### **B. Admin Panel Features** #### **1. Shipment Management (CRUD Operations)** - **Bulk Order Processing** - CSV/Excel upload for mass shipments. - Automated label generation. - **Status Overrides** - Manual updates for exceptions (e.g., "Held at Customs"). #### **2. Analytics & Reporting** - **Key Metrics Dashboard** - Delivery success rates. - Average delivery time per route. - Revenue analytics (daily/weekly/monthly). - **Route Optimization** - Heatmaps for high-demand zones. - Suggestions for warehouse locations. #### **3. Customer Support Integration** - **Ticketing System** - Zendesk API or custom-built solution. - Automated responses for common queries (e.g., "Where is my package?"). --- ### **C. Geolocation & API Integrations** #### **1. Real-Time Driver Tracking** - **WebSockets** for live GPS updates (1–5 sec refresh rate). - **Geofencing** for automated status changes (e.g., "Arrived at Warehouse"). #### **2. Third-Party Logistics (3PL) APIs** - **Carrier Integration** (EasyPost, Shippo, or custom FedEx/UPS APIs). - **Address Validation** (SmartyStreets or Lob). --- ## **2. Design & User Experience (UX) Requirements** ### **A. Wireframes & UI Components** *(Provide Figma/Adobe XD link or detailed descriptions)* #### **Key Pages:** 1. **Homepage** - Hero section with tracking search bar (most prominent element). - Service highlights (speed, reliability, global coverage). - CTA buttons ("Get a Quote," "Sign Up"). 2. **Tracking Results Page** - Left panel: Status timeline with timestamps. - Right panel: Interactive map with delivery route. 3. **User Dashboard** - Summary widgets (active shipments, recent orders). - Quick actions ("Schedule Pickup," "Contact Support"). #### **UI Design Guidelines** - **Color Scheme:** Navy blue (#2C3E50), white (#FFFFFF), accent orange (#E67E22). - **Typography:** - Headings: **Roboto Bold** (clean, modern). - Body text: **Open Sans** (readability). - **Micro-Interactions:** - Skeleton loaders for tracking data. - Smooth transitions between pages. --- ### **B. Accessibility & Localization** - **WCAG 2.1 AA Compliance** (screen reader support, keyboard navigation). - **Multi-Language Support (i18n)** - Default languages: English, Spanish, Mandarin. - Dynamic content switching (no page reload). --- ## **3. Technical Stack & Architecture** ### **A. Frontend Development** - **Framework:** Next.js (React) for SSR & SEO. - **Styling:** Tailwind CSS + CSS Modules. - **State Management:** Redux Toolkit (RTK Query for API calls). - **Maps Integration:** - Google Maps JavaScript API (or Mapbox GL JS for customization). - Custom markers for shipment status. ### **B. Backend Development** - **API Layer:** Node.js + Express (RESTful) or Django (Python). - **Authentication:** JWT (JSON Web Tokens) + OAuth2 (Google/Facebook). - **WebSockets:** Socket.io for real-time tracking. ### **C. Database & Storage** - **Primary DB:** PostgreSQL (relational, for orders/users). - **Real-Time Updates:** Firebase Firestore (for live tracking data). - **File Storage:** AWS S3 (for invoices, labels). ### **D. DevOps & Deployment** - **CI/CD:** GitHub Actions (auto-deploy on `main` branch push). - **Containerization:** Docker + Kubernetes (scalability). - **Cloud Hosting:** AWS EC2 (backend), Vercel (frontend). ## **4. Scalability & Future Enhancements** ### **A. IoT & Advanced Logistics** - **Drone Delivery Tracking:** Custom API for UAV telemetry. - **Smart Lockers:** Integration for contactless pickup. ### **B. AI/ML Features** - **Delay Prediction:** Python microservice analyzing weather/traffic. - **Fraud Detection:** Flag suspicious shipments (e.g., mismatched addresses). ### **C. Compliance & Security** - **GDPR:** Cookie consent banner, data encryption. - **Payment Security:** PCI-DSS compliance (Stripe/PayPal). --- ## **5. Deliverables & Milestones** ### **Phase 1: MVP (6–8 Weeks)** ✅ Functional tracking page with live map. ✅ User registration & dashboard. ✅ Admin order management (CRUD). ### **Phase 2: Advanced Features (3–4 Months)** 🚀 AI-driven delay alerts. 🚀 Multi-language support. 🚀 Carrier API integrations. ### **Phase 3: Scalability (6+ Months)** 🔧 IoT (drone/autonomous vehicle tracking). 🔧 Global warehouse network dashboard. --- ## **Why This Prompt Works?** ✅ **Precision:** Specifies exact APIs, frameworks, and workflows. ✅ **Scalability:** Lays groundwork for AI, IoT, and global expansion. ✅ **Risk Mitigation:** Addresses compliance (GDPR, PCI-DSS) upfront. ✅ **Developer Clarity:** Reduces ambiguity in requirements. **Next Steps:** 1. Share this with your dev team/AI for time/cost estimates. 2. Adjust branding (colors, name) as needed. 3. Prioritize features based on budget (MVP first). Need **adjustments**? Let me refine further! 🚀 - Initial Deployment
c783fc9 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Fidex Global - Delivery Tracking</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .map-container { | |
| height: 400px; | |
| background-image: url('https://maps.googleapis.com/maps/api/staticmap?center=40.7128,-74.0060&zoom=12&size=800x400&key=YOUR_API_KEY'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .timeline { | |
| position: relative; | |
| padding-left: 50px; | |
| } | |
| .timeline::before { | |
| content: ''; | |
| position: absolute; | |
| left: 20px; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: #e2e8f0; | |
| } | |
| .timeline-step { | |
| position: relative; | |
| margin-bottom: 30px; | |
| } | |
| .timeline-step::before { | |
| content: ''; | |
| position: absolute; | |
| left: -40px; | |
| top: 5px; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #3b82f6; | |
| border: 3px solid white; | |
| } | |
| .timeline-step.completed::before { | |
| background: #10b981; | |
| } | |
| .timeline-step.current::before { | |
| background: #f59e0b; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7); } | |
| 70% { box-shadow: 0 0 0 10px rgba(245, 158, 11, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); } | |
| } | |
| .tracking-input { | |
| transition: all 0.3s ease; | |
| } | |
| .tracking-input:focus { | |
| box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); | |
| } | |
| .parcel-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-blue-900 text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-shipping-fast text-2xl text-orange-400"></i> | |
| <span class="text-xl font-bold">Fidex Global</span> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#" class="hover:text-orange-400 transition">Home</a> | |
| <a href="#" class="hover:text-orange-400 transition">Track</a> | |
| <a href="#" class="hover:text-orange-400 transition">Services</a> | |
| <a href="#" class="hover:text-orange-400 transition">Pricing</a> | |
| <a href="#" class="hover:text-orange-400 transition">Contact</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="px-4 py-2 rounded-full bg-orange-500 hover:bg-orange-600 transition"> | |
| <i class="fas fa-user mr-2"></i>Login | |
| </button> | |
| <button class="md:hidden" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden hidden bg-blue-800" id="mobile-menu"> | |
| <div class="px-4 py-2 flex flex-col space-y-3"> | |
| <a href="#" class="block py-2 hover:text-orange-400 transition">Home</a> | |
| <a href="#" class="block py-2 hover:text-orange-400 transition">Track</a> | |
| <a href="#" class="block py-2 hover:text-orange-400 transition">Services</a> | |
| <a href="#" class="block py-2 hover:text-orange-400 transition">Pricing</a> | |
| <a href="#" class="block py-2 hover:text-orange-400 transition">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-r from-blue-900 to-blue-700 text-white py-16"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Global Delivery Tracking Made Simple</h1> | |
| <p class="text-xl mb-8">Track your shipments in real-time across 150+ countries with our advanced logistics platform.</p> | |
| <div class="bg-white rounded-lg p-1 flex max-w-xl"> | |
| <input type="text" placeholder="Enter your tracking number (e.g. SS-AB12-34CD)" | |
| class="tracking-input flex-grow px-4 py-3 rounded-l focus:outline-none text-gray-800"> | |
| <button class="bg-orange-500 hover:bg-orange-600 text-white px-6 py-3 rounded-r transition"> | |
| <i class="fas fa-search mr-2"></i>Track | |
| </button> | |
| </div> | |
| <div class="mt-4 flex items-center"> | |
| <i class="fas fa-qrcode mr-2"></i> | |
| <span class="text-sm">Scan QR code to track</span> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://cdn-icons-png.flaticon.com/512/3069/3069172.png" alt="Delivery Illustration" class="w-full max-w-md"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tracking Results Section (Hidden by default) --> | |
| <section id="tracking-results" class="hidden py-12 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <!-- Left Panel - Timeline --> | |
| <div class="md:w-1/3 bg-gray-50 p-6 rounded-lg shadow"> | |
| <h2 class="text-2xl font-bold mb-6 text-blue-900">Shipment Progress</h2> | |
| <div class="timeline"> | |
| <div class="timeline-step completed"> | |
| <h3 class="font-bold text-green-600">Delivered</h3> | |
| <p class="text-sm text-gray-500">June 15, 2023 - 10:30 AM</p> | |
| <p class="mt-1">Package delivered to recipient</p> | |
| </div> | |
| <div class="timeline-step completed"> | |
| <h3 class="font-bold">Out for Delivery</h3> | |
| <p class="text-sm text-gray-500">June 15, 2023 - 8:15 AM</p> | |
| <p class="mt-1">Courier has the package for final delivery</p> | |
| </div> | |
| <div class="timeline-step completed"> | |
| <h3 class="font-bold">At Local Facility</h3> | |
| <p class="text-sm text-gray-500">June 14, 2023 - 6:45 PM</p> | |
| <p class="mt-1">Package sorted at destination facility</p> | |
| </div> | |
| <div class="timeline-step completed"> | |
| <h3 class="font-bold">In Transit</h3> | |
| <p class="text-sm text-gray-500">June 13, 2023 - 3:20 PM</p> | |
| <p class="mt-1">Package is moving through our network</p> | |
| </div> | |
| <div class="timeline-step"> | |
| <h3 class="font-bold">Order Processed</h3> | |
| <p class="text-sm text-gray-500">June 12, 2023 - 11:00 AM</p> | |
| <p class="mt-1">We've received your order details</p> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="font-bold mb-2">Shipment Details</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <p class="text-sm text-gray-500">Tracking Number</p> | |
| <p class="font-medium">SS-AB12-34CD</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Service</p> | |
| <p class="font-medium">Express Delivery</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Weight</p> | |
| <p class="font-medium">2.5 kg</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Dimensions</p> | |
| <p class="font-medium">30x20x15 cm</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded transition flex items-center justify-center"> | |
| <i class="fas fa-print mr-2"></i> Print Details | |
| </button> | |
| </div> | |
| <!-- Right Panel - Map --> | |
| <div class="md:w-2/3"> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <h2 class="text-2xl font-bold mb-6 text-blue-900">Delivery Route</h2> | |
| <div class="map-container rounded-lg mb-6"></div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-bold mb-2">Sender Information</h3> | |
| <p>John Smith</p> | |
| <p>123 Business Ave</p> | |
| <p>New York, NY 10001</p> | |
| <p class="mt-2"><i class="fas fa-phone mr-2 text-blue-600"></i> +1 (555) 123-4567</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <h3 class="font-bold mb-2">Recipient Information</h3> | |
| <p>Sarah Johnson</p> | |
| <p>456 Home Street</p> | |
| <p>Los Angeles, CA 90001</p> | |
| <p class="mt-2"><i class="fas fa-phone mr-2 text-blue-600"></i> +1 (555) 987-6543</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex flex-wrap gap-3"> | |
| <button class="px-4 py-2 bg-blue-100 text-blue-700 rounded-full flex items-center"> | |
| <i class="fas fa-bell mr-2"></i> Notifications | |
| </button> | |
| <button class="px-4 py-2 bg-green-100 text-green-700 rounded-full flex items-center"> | |
| <i class="fas fa-share-alt mr-2"></i> Share Status | |
| </button> | |
| <button class="px-4 py-2 bg-orange-100 text-orange-700 rounded-full flex items-center"> | |
| <i class="fas fa-headset mr-2"></i> Support | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-blue-900">Our Delivery Services</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Service Card 1 --> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden transition-all hover:shadow-xl"> | |
| <div class="bg-blue-800 text-white p-6"> | |
| <i class="fas fa-rocket text-4xl mb-4"></i> | |
| <h3 class="text-xl font-bold">Express Delivery</h3> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 mb-4">Get your packages delivered in 1-3 business days with our premium express service.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>24/7 Tracking</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Priority Handling</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Money Back Guarantee</span> | |
| </li> | |
| </ul> | |
| <div class="text-center"> | |
| <span class="text-2xl font-bold">$24.99</span> | |
| <span class="text-gray-500">/package</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service Card 2 --> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden transition-all hover:shadow-xl"> | |
| <div class="bg-blue-600 text-white p-6"> | |
| <i class="fas fa-truck text-4xl mb-4"></i> | |
| <h3 class="text-xl font-bold">Standard Delivery</h3> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 mb-4">Reliable delivery within 3-7 business days at an affordable price.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Real-time Tracking</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Insurance Included</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Email Notifications</span> | |
| </li> | |
| </ul> | |
| <div class="text-center"> | |
| <span class="text-2xl font-bold">$12.99</span> | |
| <span class="text-gray-500">/package</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service Card 3 --> | |
| <div class="bg-white rounded-lg shadow-lg overflow-hidden transition-all hover:shadow-xl"> | |
| <div class="bg-blue-400 text-white p-6"> | |
| <i class="fas fa-globe text-4xl mb-4"></i> | |
| <h3 class="text-xl font-bold">International Delivery</h3> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-600 mb-4">Ship anywhere in the world with our global network of logistics partners.</p> | |
| <ul class="space-y-2 mb-6"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Customs Clearance</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Multi-language Support</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Duty Calculator</span> | |
| </li> | |
| </ul> | |
| <div class="text-center"> | |
| <span class="text-2xl font-bold">$39.99</span> | |
| <span class="text-gray-500">/package</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button class="px-8 py-3 bg-orange-500 hover:bg-orange-600 text-white rounded-full font-bold transition"> | |
| <i class="fas fa-calculator mr-2"></i> Calculate Shipping Cost | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-blue-900">Why Choose Fidex Global?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="text-center p-6"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-map-marker-alt text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Real-Time Tracking</h3> | |
| <p class="text-gray-600">Follow your shipment's journey with live updates and GPS location.</p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="text-center p-6"> | |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-shield-alt text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Secure Delivery</h3> | |
| <p class="text-gray-600">End-to-end security with tamper-proof packaging and verification.</p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="text-center p-6"> | |
| <div class="bg-orange-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-headset text-orange-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">24/7 Support</h3> | |
| <p class="text-gray-600">Our customer service team is always ready to assist you.</p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="text-center p-6"> | |
| <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-globe-americas text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Global Network</h3> | |
| <p class="text-gray-600">We deliver to over 150 countries with reliable local partners.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-blue-900">What Our Customers Say</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-blue-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Michael Johnson</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"The real-time tracking feature is amazing! I could see exactly where my package was at all times. Delivery was faster than promised too."</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-green-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Sarah Williams</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"I ship internationally for my business and Fidex Global has been a game-changer. Their customs clearance process is seamless."</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-6 rounded-lg shadow"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center mr-4"> | |
| <i class="fas fa-user text-orange-600"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">David Chen</h4> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600">"Excellent customer service when I had a question about my delivery. The app notifications kept me informed every step of the way."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-blue-900 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Ready to Ship Your Package?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of satisfied customers who trust Fidex Global for their delivery needs.</p> | |
| <div class="flex flex-col md:flex-row justify-center gap-4"> | |
| <button class="px-8 py-3 bg-orange-500 hover:bg-orange-600 rounded-full font-bold transition"> | |
| <i class="fas fa-shipping-fast mr-2"></i> Schedule a Pickup | |
| </button> | |
| <button class="px-8 py-3 bg-white text-blue-900 hover:bg-gray-100 rounded-full font-bold transition"> | |
| <i class="fas fa-phone-alt mr-2"></i> Contact Our Team | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <!-- Column 1 --> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-shipping-fast text-2xl text-orange-400"></i> | |
| <span class="text-xl font-bold">Fidex Global</span> | |
| </div> | |
| <p class="text-gray-400 mb-4">Delivering excellence across the globe with our advanced logistics solutions.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| <!-- Column 2 --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Track Shipment</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Services</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contact Us</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 3 --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Services</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Express Delivery</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Standard Delivery</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">International Shipping</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Freight Services</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Warehousing</a></li> | |
| </ul> | |
| </div> | |
| <!-- Column 4 --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Contact Info</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-map-marker-alt text-orange-400 mr-2"></i> | |
| <span class="text-gray-400">123 Logistics Ave, New York, NY 10001</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt text-orange-400 mr-2"></i> | |
| <span class="text-gray-400">+1 (800) 123-4567</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope text-orange-400 mr-2"></i> | |
| <span class="text-gray-400">support@fidexglobal.com</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-clock text-orange-400 mr-2"></i> | |
| <span class="text-gray-400">Mon-Fri: 8AM - 8PM</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 Fidex Global. All rights reserved.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition">Sitemap</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Simulate tracking submission (for demo purposes) | |
| document.querySelector('.tracking-input').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| showTrackingResults(); | |
| } | |
| }); | |
| document.querySelector('.tracking-input + button').addEventListener('click', showTrackingResults); | |
| function showTrackingResults() { | |
| document.getElementById('tracking-results').classList.remove('hidden'); | |
| window.scrollTo({ | |
| top: document.getElementById('tracking-results').offsetTop - 20, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| // Animation for timeline steps | |
| const timelineSteps = document.querySelectorAll('.timeline-step'); | |
| function animateTimeline() { | |
| timelineSteps.forEach((step, index) => { | |
| setTimeout(() => { | |
| step.classList.add('completed'); | |
| }, index * 300); | |
| }); | |
| } | |
| // Start animation when tracking results are shown | |
| const observer = new IntersectionObserver((entries) => { | |
| if (entries[0].isIntersecting) { | |
| animateTimeline(); | |
| } | |
| }, {threshold: 0.1}); | |
| observer.observe(document.getElementById('tracking-results')); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=desire550/fidex-global" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |