nasar37/good-web at main

Ctrl+K

1 contributor

<!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>  <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>  <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>  <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">  <iframe src="https://panoraven.com/en/embed/sample-panorama" width="100%" height="100%" frameborder="0" allowfullscreen></iframe> </div> </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">  <iframe src="https://calendly.com/your-calendar" width="100%" height="100%" frameborder="0"></iframe> </div> </section>  <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>  <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">  <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>  <section class="branding-section"> <div class="container"> <div class="logo-display">  <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 about 1 month ago