<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Digitaladin.in - Smart Business Solutions for Contractors & Designers</title> <style> :root { --primary: #2563eb; --secondary: #1e40af; --accent: #f59e0b; --dark: #1f2937; --light: #f9fafb; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; } body { background-color: var(--light); color: var(--dark); line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Sticky Header */ .flash-banner { background: linear-gradient(90deg, #2563eb, #1e40af); color: white; padding: 12px 0; position: sticky; top: 0; z-index: 100; box-shadow: 0 4px 6px rgba(0,0,0,0.1); text-align: center; } /* Hero Section */ .hero { background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); background-size: cover; background-position: center; color: white; padding: 80px 0; text-align: center; } /* Panorama Viewer */ .panorama-container { height: 500px; border-radius: 12px; overflow: hidden; margin: 40px auto; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); } /* Calendar Section */ .calendar-container { height: 600px; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.1); margin: 40px auto; } /* Self-Branding Poster */ .poster-container { max-width: 800px; margin: 40px auto; border-radius: 12px; overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); } /* CRM Features */ .crm-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin: 60px 0; } .crm-card { background: white; border-radius: 8px; padding: 30px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); border-top: 4px solid var(--accent); } /* Branding Section */ .branding-section { text-align: center; padding: 80px 0; background-color: var(--dark); color: white; } .logo-display { max-width: 400px; margin: 0 auto 40px; } </style> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> </head> <body> <!-- Sticky Header --> <div class="flash-banner"> <div class="container"> <p>🚀 <strong>EXCLUSIVE OFFER:</strong> Get our premium branding package with 360° portfolio - <a href="#offer" style="color:white;text-decoration:underline;">Claim Now</a></p> </div> </div> <!-- Hero Section --> <section class="hero"> <div class="container"> <h1 style="font-size:2.8rem;margin-bottom:20px;">Transform Your Business Presentations with Immersive 360° Technology</h1> <p style="font-size:1.25rem;max-width:800px;margin:0 auto 30px;">Showcase your projects, schedule meetings, and manage clients - all in one powerful platform</p> <a href="#panorama" style="background:var(--accent);color:var(--dark);padding:16px 32px;border-radius:8px;font-weight:700;text-decoration:none;">See 360° Demo →</a> </div> </section> <!-- 360° Panorama Section --> <section id="panorama" class="container"> <h2 style="text-align:center;font-size:2rem;margin:60px 0 20px;">Experience Your Projects in Stunning 360°</h2> <p style="text-align:center;max-width:700px;margin:0 auto 40px;font-size:1.1rem;">Impress clients with interactive walkthroughs of your designs and constructions</p> <div class="panorama-container"> <!-- Replace with your actual panorama embed code --> <iframe src="https://panoraven.com/en/embed/sample-panorama" width="100%" height="100%" frameborder="0" allowfullscreen></iframe> </div> </section> <!-- Calendar Meeting Section --> <section class="container"> <h2 style="text-align:center;font-size:2rem;margin:60px 0 20px;">Seamless Meeting Scheduling</h2> <p style="text-align:center;max-width:700px;margin:0 auto 40px;font-size:1.1rem;">Let clients book consultations directly with your availability</p> <div class="calendar-container"> <!-- Replace with your Calendly embed code --> <iframe src="https://calendly.com/your-calendar" width="100%" height="100%" frameborder="0"></iframe> </div> </section> <!-- CRM Features --> <section class="container"> <h2 style="text-align:center;font-size:2rem;margin:60px 0 20px;">Powerful Client Management</h2> <p style="text-align:center;max-width:700px;margin:0 auto 40px;font-size:1.1rem;">Everything you need to organize leads and projects</p> <div class="crm-features"> <div class="crm-card"> <h3 style="margin-bottom:15px;"><i class="fas fa-users" style="color:var(--accent);margin-right:10px;"></i> Client Database</h3> <p>Track all client interactions, project details, and communication history in one place</p> </div> <div class="crm-card"> <h3 style="margin-bottom:15px;"><i class="fas fa-chart-line" style="color:var(--accent);margin-right:10px;"></i> Project Analytics</h3> <p>Monitor which projects get the most engagement and optimize your pitches</p> </div> <div class="crm-card"> <h3 style="margin-bottom:15px;"><i class="fas fa-file-contract" style="color:var(--accent);margin-right:10px;"></i> Proposal Tools</h3> <p>Create stunning, professional proposals with your branding in minutes</p> </div> </div> </section> <!-- Self-Branding Poster --> <section class="container"> <h2 style="text-align:center;font-size:2rem;margin:60px 0 20px;">Professional Branding Materials</h2> <p style="text-align:center;max-width:700px;margin:0 auto 40px;font-size:1.1rem;">Download ready-to-use templates to elevate your brand</p> <div class="poster-container"> <!-- Replace with your poster image --> <img src="https://via.placeholder.com/800x1200?text=Professional+Branding+Poster" alt="Digitaladin Branding Poster" style="width:100%;"> </div> <div style="text-align:center;margin-top:30px;"> <a href="#download" style="background:var(--primary);color:white;padding:16px 32px;border-radius:8px;font-weight:700;text-decoration:none;display:inline-block;">Download Branding Kit</a> </div> </section> <!-- Company Branding Section --> <section class="branding-section"> <div class="container"> <div class="logo-display"> <!-- Replace with your logo --> <img src="https://via.placeholder.com/400x200?text=Digitaladin+Logo" alt="Digitaladin Logo" style="width:100%;"> </div> <h2 style="font-size:1.8rem;margin-bottom:20px;">Digital Business Solutions for Modern Professionals</h2> <p style="max-width:600px;margin:0 auto 30px;font-size:1.1rem;">Helping architects, contractors, and designers showcase their work and grow their business with cutting-edge digital tools</p> <div style="display:flex;justify-content:center;gap:20px;margin-top:30px;"> <a href="#" style="color:white;"><i class="fab fa-facebook-f" style="font-size:1.5rem;"></i></a> <a href="#" style="color:white;"><i class="fab fa-linkedin-in" style="font-size:1.5rem;"></i></a> <a href="#" style="color:white;"><i class="fab fa-instagram" style="font-size:1.5rem;"></i></a> </div> </div> </section> <script> // Simple animation for elements when they come into view const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.style.opacity = 1; entry.target.style.transform = 'translateY(0)'; } }); }, { threshold: 0.1 }); document.querySelectorAll('.panorama-container, .calendar-container, .poster-container, .crm-card').forEach(el => { el.style.opacity = 0; el.style.transform = 'translateY(20px)'; el.style.transition = 'all 0.6s ease'; observer.observe(el); }); </script> </body> </html> - Initial Deployment
28f5e96
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Digitaladin.in - Smart Business Solutions for Contractors & Designers</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .animate-fadeInUp { | |
| animation: fadeInUp 0.6s ease forwards; | |
| } | |
| .panorama-iframe { | |
| filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)); | |
| transition: all 0.3s ease; | |
| } | |
| .panorama-iframe:hover { | |
| filter: drop-shadow(0 20px 25px rgba(0, 0, 0, 0.2)); | |
| } | |
| .crm-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .gradient-text { | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| color: transparent; | |
| background-image: linear-gradient(90deg, #3b82f6, #1d4ed8); | |
| } | |
| </style> | |
| </head> | |
| <body class="font-inter bg-gray-50 text-gray-800"> | |
| <!-- Sticky Header --> | |
| <div class="sticky top-0 z-50 bg-gradient-to-r from-blue-600 to-blue-800 text-white shadow-md"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex items-center justify-center"> | |
| <span class="mr-2 animate-pulse">🚀</span> | |
| <p class="text-sm md:text-base"> | |
| <strong>EXCLUSIVE OFFER:</strong> Get our premium branding package with 360° portfolio - | |
| <a href="#offer" class="font-bold underline hover:text-yellow-300 transition-colors">Claim Now</a> | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section class="relative bg-gray-900 text-white"> | |
| <div class="absolute inset-0 bg-black opacity-70"></div> | |
| <div | |
| class="bg-cover bg-center absolute inset-0" | |
| style="background-image: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')"> | |
| </div> | |
| <div class="container mx-auto px-4 py-28 md:py-36 relative z-10"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold mb-6 leading-tight"> | |
| Transform Your Business Presentations with | |
| <span class="gradient-text">Immersive 360° Technology</span> | |
| </h1> | |
| <p class="text-lg md:text-xl mb-8 text-gray-300"> | |
| Showcase your projects, schedule meetings, and manage clients - all in one powerful platform | |
| </p> | |
| <div class="flex flex-col sm:flex-row gap-4 justify-center"> | |
| <a href="#panorama" class="bg-amber-500 hover:bg-amber-600 text-gray-900 font-bold py-4 px-8 rounded-lg transition-all transform hover:scale-105 shadow-lg"> | |
| See 360° Demo <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| <a href="#calendar" class="bg-transparent hover:bg-blue-800 text-white font-semibold py-4 px-8 border border-blue-600 rounded-lg transition-all"> | |
| Book a Demo | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-xl shadow-lg border-t-4 border-blue-500 transform transition-all hover:shadow-xl"> | |
| <div class="text-blue-600 mb-4"> | |
| <i class="fas fa-vr-cardboard text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">360° Project Showcase</h3> | |
| <p class="text-gray-600"> | |
| Immersive virtual tours that let clients explore your designs as if they were there. | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-lg border-t-4 border-amber-500 transform transition-all hover:shadow-xl"> | |
| <div class="text-amber-500 mb-4"> | |
| <i class="fas fa-calendar-check text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Smart Scheduling</h3> | |
| <p class="text-gray-600"> | |
| Automated booking system that syncs with your calendar and eliminates back-and-forth emails. | |
| </p> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-lg border-t-4 border-green-500 transform transition-all hover:shadow-xl"> | |
| <div class="text-green-500 mb-4"> | |
| <i class="fas fa-chart-network text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Client CRM</h3> | |
| <p class="text-gray-600"> | |
| Track all client interactions, project details, and follow-ups in one organized system. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- 360° Panorama Section --> | |
| <section id="panorama" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| Experience Your Projects in <span class="gradient-text">Stunning 360°</span> | |
| </h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Impress clients with interactive walkthroughs of your designs and constructions | |
| </p> | |
| </div> | |
| <div class="max-w-5xl mx-auto rounded-2xl overflow-hidden shadow-2xl animate-fadeInUp"> | |
| <div class="aspect-w-16 aspect-h-9"> | |
| <iframe | |
| src="https://panoraven.com/en/embed/sample-panorama" | |
| class="w-full h-[500px] panorama-iframe" | |
| frameborder="0" | |
| allowfullscreen> | |
| </iframe> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <p class="text-gray-600 mb-6"> | |
| Want to see your own projects in 360°? We can help! | |
| </p> | |
| <a href="#contact" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg transition-all transform hover:scale-105"> | |
| Get Started <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Calendar Meeting Section --> | |
| <section id="calendar" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| Seamless <span class="gradient-text">Meeting Scheduling</span> | |
| </h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Let clients book consultations directly with your availability | |
| </p> | |
| </div> | |
| <div class="max-w-4xl mx-auto rounded-2xl overflow-hidden shadow-lg animate-fadeInUp"> | |
| <div class="aspect-w-16 aspect-h-9"> | |
| <iframe | |
| src="https://calendly.com/your-calendar" | |
| class="w-full h-[600px]" | |
| frameborder="0"> | |
| </iframe> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CRM Features --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| Powerful <span class="gradient-text">Client Management</span> | |
| </h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Everything you need to organize leads and projects | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg border-t-4 border-amber-500 transition-all duration-300 crm-card"> | |
| <div class="text-amber-500 mb-4"> | |
| <i class="fas fa-users text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Client Database</h3> | |
| <p class="text-gray-600"> | |
| Track all client interactions, project details, and communication history in one place with our intuitive CRM system. | |
| </p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-lg border-t-4 border-blue-500 transition-all duration-300 crm-card"> | |
| <div class="text-blue-500 mb-4"> | |
| <i class="fas fa-chart-line text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Project Analytics</h3> | |
| <p class="text-gray-600"> | |
| Monitor which projects get the most engagement and optimize your pitches with detailed analytics. | |
| </p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-lg border-t-4 border-green-500 transition-all duration-300 crm-card"> | |
| <div class="text-green-500 mb-4"> | |
| <i class="fas fa-file-contract text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Proposal Tools</h3> | |
| <p class="text-gray-600"> | |
| Create stunning, professional proposals with your branding in minutes using our templates. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Self-Branding Poster --> | |
| <section id="offer" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| Professional <span class="gradient-text">Branding Materials</span> | |
| </h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Download ready-to-use templates to elevate your brand | |
| </p> | |
| </div> | |
| <div class="max-w-4xl mx-auto rounded-2xl overflow-hidden shadow-2xl animate-fadeInUp"> | |
| <img | |
| src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1064&q=80" | |
| alt="Digitaladin Branding Poster" | |
| class="w-full h-auto object-cover"> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a | |
| href="#download" | |
| class="inline-block bg-gradient-to-r from-blue-600 to-blue-800 hover:from-blue-700 hover:to-blue-900 text-white font-bold py-4 px-10 rounded-lg transition-all transform hover:scale-105 shadow-lg"> | |
| Download Complete Branding Kit <i class="fas fa-download ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-16 bg-gray-900 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4"> | |
| What Our <span class="text-amber-400">Clients Say</span> | |
| </h2> | |
| <p class="text-lg text-gray-300 max-w-2xl mx-auto"> | |
| Professionals who transformed their business with our solutions | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <div class="bg-gray-800 p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-amber-400 text-2xl mr-2"> | |
| <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> | |
| <p class="text-gray-300 mb-6"> | |
| "The 360° presentations have completely changed how we pitch to clients. We're closing deals faster than ever before." | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gray-700 mr-4 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sarah K." class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Sarah K.</h4> | |
| <p class="text-sm text-gray-400">Interior Designer</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-amber-400 text-2xl mr-2"> | |
| <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> | |
| <p class="text-gray-300 mb-6"> | |
| "The CRM system saved me hours every week. Now I can focus on design instead of admin work." | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gray-700 mr-4 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael T." class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Michael T.</h4> | |
| <p class="text-sm text-gray-400">Architect</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-amber-400 text-2xl mr-2"> | |
| <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> | |
| <p class="text-gray-300 mb-6"> | |
| "Our branding materials look so professional now. Clients take us more seriously and our rates have increased." | |
| </p> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-gray-700 mr-4 overflow-hidden"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Priya M." class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Priya M.</h4> | |
| <p class="text-sm text-gray-400">Contractor</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Company Branding Section --> | |
| <section class="py-16 bg-gradient-to-br from-blue-900 to-blue-700 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col items-center text-center"> | |
| <div class="mb-8 max-w-md"> | |
| <img | |
| src="https://via.placeholder.com/400x200?text=Digitaladin+Logo" | |
| alt="Digitaladin Logo" | |
| class="w-full h-auto"> | |
| </div> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6"> | |
| Digital Business Solutions for Modern Professionals | |
| </h2> | |
| <p class="text-xl text-blue-100 max-w-3xl mb-8"> | |
| Helping architects, contractors, and designers showcase their work and grow their business with cutting-edge digital tools | |
| </p> | |
| <div class="flex space-x-6 mb-8"> | |
| <a href="#" class="text-white hover:text-amber-400 transition-colors text-2xl"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-white hover:text-amber-400 transition-colors text-2xl"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-white hover:text-amber-400 transition-colors text-2xl"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-white hover:text-amber-400 transition-colors text-2xl"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| <div class="w-full max-w-2xl border-t border-blue-600 pt-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> | |
| <div> | |
| <h4 class="font-bold mb-3">Solutions</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-blue-200 hover:text-white transition-colors">360° Portfolio</a></li> | |
| <li><a href="#" class="text-blue-200 hover:text-white transition-colors">Client CRM</a></li> | |
| <li><a href="#" class="text-blue-200 hover:text-white transition-colors">Branding</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-3">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-blue-200 hover:text-white transition-colors">Blog</a></li> | |
| <li><a href="#" class="text-blue-200 hover:text-white transition-colors">Tutorials</a></li> | |
| <li><a href="#" class="text-blue-200 hover:text-white transition-colors">Templates</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-3">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-blue-200 hover:text-white transition-colors">About</a></li> | |
| <li><a href="#" class="text-blue-200 hover:text-white transition-colors">Careers</a></li> | |
| <li><a href="#" class="text-blue-200 hover:text-white transition-colors">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-3">Legal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-blue-200 hover:text-white transition-colors">Privacy</a></li> | |
| <li><a href="#" class="text-blue-200 hover:text-white transition-colors">Terms</a></li> | |
| <li><a href="#" class="text-blue-200 hover:text-white transition-colors">Security</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-blue-950 text-blue-300 py-8"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <p>© 2023 Digitaladin.in. All rights reserved.</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-white transition-colors">Privacy Policy</a> | |
| <a href="#" class="hover:text-white transition-colors">Terms of Service</a> | |
| <a href="#" class="hover:text-white transition-colors">Contact Us</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Intersection Observer for scroll animations | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.classList.add('animate-fadeInUp'); | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| document.querySelectorAll('.animate-fadeInUp').forEach(el => { | |
| el.style.opacity = 0; | |
| observer.observe(el); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| </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=nasar37/good-web" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |