Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AD Software Dev | Web & App Development Experts</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#22968C', | |
| dark: '#0a0a0a', | |
| light: '#f5f5f5', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script> | |
| <style> | |
| /* Custom gradient background */ | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #171717 0%, #0a0a0a 100%); | |
| } | |
| .premium-bg { | |
| background: linear-gradient(135deg, #22968C 0%, #1A7F77 100%); | |
| } | |
| /* Custom form styling */ | |
| .form-input { | |
| transition: all 0.3s ease; | |
| background-color: #262626; | |
| border-color: #404040; | |
| color: #f5f5f5; | |
| } | |
| .form-input:focus { | |
| box-shadow: 0 0 0 3px rgba(34, 150, 140, 0.3); | |
| border-color: #22968C; | |
| } | |
| .service-card { | |
| background-color: #171717; | |
| border: 1px solid #262626; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2); | |
| border-color: #22968C; | |
| } | |
| .price-tag { | |
| position: absolute; | |
| top: -10px; | |
| right: -10px; | |
| background: #22968C; | |
| color: white; | |
| padding: 5px 10px; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: bold; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); | |
| } | |
| .tech-stack { | |
| display: inline-block; | |
| background: rgba(34, 150, 140, 0.1); | |
| color: #22968C; | |
| padding: 2px 8px; | |
| border-radius: 10px; | |
| font-size: 0.75rem; | |
| margin-right: 4px; | |
| margin-bottom: 4px; | |
| border: 1px solid rgba(34, 150, 140, 0.3); | |
| } | |
| /* Animation classes */ | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .hidden-initially { | |
| opacity: 0; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #171717; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #22968C; | |
| border-radius: 4px; | |
| } | |
| /* Selection color */ | |
| ::selection { | |
| background: #22968C; | |
| color: white; | |
| } | |
| /* Placeholder color */ | |
| ::placeholder { | |
| color: #737373 ; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-light bg-dark"> | |
| <!-- Navigation --> | |
| <nav class="bg-dark border-b border-gray-800 sticky top-0 z-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-code text-primary text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-light">AD Software Dev</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#services" class="text-light hover:text-primary inline-flex items-center px-1 pt-1 border-b-2 border-primary text-sm font-medium">Services</a> | |
| <a href="#solutions" class="text-gray-400 hover:text-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-400 text-sm font-medium">Solutions</a> | |
| <a href="#developer" class="text-gray-400 hover:text-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-400 text-sm font-medium">Developer</a> | |
| <a href="#contact" class="text-gray-400 hover:text-primary inline-flex items-center px-1 pt-1 border-b-2 border-transparent hover:border-gray-400 text-sm font-medium">Contact</a> | |
| <a href="#contact" class="text-white bg-primary hover:bg-teal-700 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-300"> | |
| Get a Quote | |
| </a> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-primary hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Premium Services Banner --> | |
| <div class="premium-bg text-white"> | |
| <div class="max-w-7xl mx-auto py-3 px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between flex-wrap"> | |
| <div class="w-0 flex-1 flex items-center"> | |
| <span class="flex p-2 rounded-lg bg-teal-800"> | |
| <i class="fas fa-crown"></i> | |
| </span> | |
| <p class="ml-3 font-medium truncate"> | |
| <span class="md:hidden">Premium development services</span> | |
| <span class="hidden md:inline">We build premium web & mobile applications for businesses ready to invest in quality</span> | |
| </p> | |
| </div> | |
| <div class="order-2 flex-shrink-0 sm:order-3 sm:ml-3"> | |
| <button type="button" class="-mr-1 flex p-2 rounded-md hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-white sm:-mr-2"> | |
| <span class="sr-only">Dismiss</span> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Hero Section --> | |
| <section id="services" class="gradient-bg py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-16"> | |
| <h2 class="text-base text-primary font-semibold tracking-wide uppercase hidden-initially">Core Services</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-light sm:text-4xl hidden-initially"> | |
| Professional Web & App Development | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-400 lg:mx-auto hidden-initially"> | |
| We specialize in building high-performance digital products for businesses that demand excellence. | |
| </p> | |
| </div> | |
| <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-2"> | |
| <!-- Web Development Service --> | |
| <div class="relative p-8 rounded-lg shadow-md service-card transition-all duration-300 hidden-initially"> | |
| <div class="price-tag">From $50 - $500</div> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white mb-4"> | |
| <i class="fas fa-globe text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-light mb-2">Custom Web Development</h3> | |
| <p class="text-gray-400"> | |
| Bespoke websites and web applications built with modern technologies tailored to your specific business needs. | |
| </p> | |
| <div class="mt-4"> | |
| <span class="tech-stack">React</span> | |
| <span class="tech-stack">Next.js</span> | |
| <span class="tech-stack">Node.js</span> | |
| <span class="tech-stack">TypeScript</span> | |
| <span class="tech-stack">Tailwind CSS</span> | |
| </div> | |
| <div class="mt-6"> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| <span>Responsive, mobile-first design</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| <span>Custom CMS solutions</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| <span>E-commerce platforms</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| <span>API integrations</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mt-8"> | |
| <a href="#contact" class="text-primary hover:text-teal-700 font-medium transition-colors duration-300"> | |
| Get a custom quote <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- App Development Service --> | |
| <div class="relative p-8 rounded-lg shadow-md service-card transition-all duration-300 hidden-initially"> | |
| <div class="price-tag">From $100 - $5000</div> | |
| <div class="flex items-center justify-center h-12 w-12 rounded-md bg-primary text-white mb-4"> | |
| <i class="fas fa-mobile-alt text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-light mb-2">Mobile App Development</h3> | |
| <p class="text-gray-400"> | |
| Native and cross-platform mobile applications designed to engage your customers and streamline operations. | |
| </p> | |
| <div class="mt-4"> | |
| <span class="tech-stack">React Native</span> | |
| <span class="tech-stack">Flutter</span> | |
| <span class="tech-stack">Swift</span> | |
| <span class="tech-stack">Kotlin</span> | |
| <span class="tech-stack">Firebase</span> | |
| </div> | |
| <div class="mt-6"> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| <span>iOS & Android development</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| <span>User-centered UX/UI design</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| <span>Backend API integration</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-primary mr-2"></i> | |
| <span>App Store deployment</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="mt-8"> | |
| <a href="#contact" class="text-primary hover:text-teal-700 font-medium transition-colors duration-300"> | |
| Get a custom quote <i class="fas fa-arrow-right ml-1"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 text-center"> | |
| <div class="inline-flex rounded-md shadow hidden-initially"> | |
| <a href="#contact" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-teal-700 transition-colors duration-300"> | |
| Get a Personalized Proposal | |
| <i class="fas fa-arrow-right ml-3"></i> | |
| </a> | |
| </div> | |
| <p class="mt-3 text-gray-400 hidden-initially"> | |
| All projects begin with a technical consultation to understand your exact requirements. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Solutions Section --> | |
| <section id="solutions" class="py-20 bg-dark"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-16"> | |
| <h2 class="text-base text-primary font-semibold tracking-wide uppercase hidden-initially">Our Solutions</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-light sm:text-4xl hidden-initially"> | |
| Tailored Development for Your Business Needs | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-400 lg:mx-auto hidden-initially"> | |
| We build custom digital products that solve real business challenges. | |
| </p> | |
| </div> | |
| <div class="grid gap-8 md:grid-cols-2"> | |
| <div class="bg-gray-900 p-8 rounded-lg border border-gray-800 hidden-initially"> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex-shrink-0 bg-primary rounded-md p-3 text-white"> | |
| <i class="fas fa-briefcase text-xl"></i> | |
| </div> | |
| <h3 class="ml-4 text-xl font-bold text-light">Enterprise Web Applications</h3> | |
| </div> | |
| <p class="text-gray-400 mb-6"> | |
| Scalable web solutions for established businesses looking to modernize their operations and customer experiences. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-400"> | |
| <span class="font-medium text-light">Custom business portals</span> - Streamline internal operations | |
| </p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-400"> | |
| <span class="font-medium text-light">Data visualization dashboards</span> - Make informed business decisions | |
| </p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-400"> | |
| <span class="font-medium text-light">Workflow automation</span> - Increase operational efficiency | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <a href="#contact" class="inline-flex items-center text-primary hover:text-teal-700 font-medium transition-colors duration-300"> | |
| Discuss enterprise solutions | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 p-8 rounded-lg border border-gray-800 hidden-initially"> | |
| <div class="flex items-center mb-6"> | |
| <div class="flex-shrink-0 bg-primary rounded-md p-3 text-white"> | |
| <i class="fas fa-rocket text-xl"></i> | |
| </div> | |
| <h3 class="ml-4 text-xl font-bold text-light">Startup Mobile Solutions</h3> | |
| </div> | |
| <p class="text-gray-400 mb-6"> | |
| Accelerated development packages for startups needing rapid, high-quality product development. | |
| </p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-400"> | |
| <span class="font-medium text-light">MVP development</span> - Validate your business idea quickly | |
| </p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-400"> | |
| <span class="font-medium text-light">Investor-ready prototypes</span> - Secure your next funding round | |
| </p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <p class="ml-3 text-gray-400"> | |
| <span class="font-medium text-light">Technical co-founder support</span> - Bridge your expertise gap | |
| </p> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <a href="#contact" class="inline-flex items-center text-primary hover:text-teal-700 font-medium transition-colors duration-300"> | |
| Explore startup packages | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-16 bg-gray-900 rounded-lg p-8 md:p-12 border border-gray-800 hidden-initially"> | |
| <div class="md:flex items-center"> | |
| <div class="md:flex-shrink-0 mb-6 md:mb-0 md:mr-8"> | |
| <img class="h-32 w-32 rounded-full object-cover animate-float border-2 border-primary" src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="Development process"> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-light">Our Development Process</h3> | |
| <p class="mt-3 text-gray-400"> | |
| We follow an agile methodology to ensure we deliver high-quality products on time and within budget. | |
| Our process includes discovery, design, development, testing, and deployment phases with regular client check-ins. | |
| </p> | |
| <div class="mt-6"> | |
| <a href="#contact" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-primary hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors duration-300"> | |
| Learn about our process | |
| <i class="fas fa-book-open ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Lead Developer Section --> | |
| <section id="developer" class="py-20 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-primary font-semibold tracking-wide uppercase hidden-initially">Our Expert</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-light sm:text-4xl hidden-initially"> | |
| Meet Our Lead Developer | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-400 lg:mx-auto hidden-initially"> | |
| With deep technical expertise in web and mobile development. | |
| </p> | |
| </div> | |
| <div class="flex justify-center"> | |
| <div class="flex flex-col items-center text-center bg-gray-800 p-8 rounded-lg shadow-md transform transition hover:scale-105 duration-300 w-full max-w-lg border border-gray-700 hidden-initially"> | |
| <img class="h-40 w-40 rounded-full object-cover mb-6 border-2 border-primary" src="https://res.cloudinary.com/dzvswbe1z/image/upload/v1747740393/Abiye_PP_koejen.jpg" alt="Lead developer"> | |
| <h3 class="text-2xl font-bold text-light">Abiye O.</h3> | |
| <p class="text-primary">Lead Developer & Technical Director</p> | |
| <p class="mt-4 text-gray-400"> | |
| 5+ years experience building web and mobile applications. | |
| </p> | |
| <div class="mt-6 grid grid-cols-2 gap-4 w-full"> | |
| <div class="bg-gray-700 p-4 rounded-lg border border-gray-600"> | |
| <i class="fas fa-globe text-primary text-2xl mb-2"></i> | |
| <h4 class="font-medium text-light">Web Expertise</h4> | |
| <p class="text-sm text-gray-400 mt-1">React, Node.js, Next.js</p> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg border border-gray-600"> | |
| <i class="fas fa-mobile-alt text-primary text-2xl mb-2"></i> | |
| <h4 class="font-medium text-light">Mobile Expertise</h4> | |
| <p class="text-sm text-gray-400 mt-1">React Native, Swift, Kotlin</p> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300"> | |
| <i class="fab fa-linkedin-in text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300"> | |
| <i class="fab fa-github text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center hidden-initially"> | |
| <p class="text-gray-400"> | |
| Supported by a team of specialized developers and designers. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Client Section (Contact Form) --> | |
| <section id="contact" class="py-20 bg-dark border-t border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:text-center mb-12"> | |
| <h2 class="text-base text-primary font-semibold tracking-wide uppercase hidden-initially">Get in touch</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-light sm:text-4xl hidden-initially"> | |
| Ready to build your digital product? | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-400 lg:mx-auto hidden-initially"> | |
| Complete the form below and we'll schedule a technical consultation. | |
| </p> | |
| </div> | |
| <div class="mt-10 sm:mt-12"> | |
| <div class="bg-gray-900 shadow-xl rounded-lg overflow-hidden border border-gray-800 hidden-initially"> | |
| <div class="md:grid md:grid-cols-2"> | |
| <div class="p-8 sm:p-10 md:border-r border-gray-800 bg-gray-800"> | |
| <h3 class="text-lg font-medium text-light">Development Inquiry</h3> | |
| <p class="mt-2 text-gray-400"> | |
| We respond to all serious project inquiries within 24 hours. | |
| </p> | |
| <div class="mt-8"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary rounded-md p-2"> | |
| <i class="fas fa-envelope text-white"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-light">Email us</p> | |
| <p class="text-sm text-gray-400">dev@adsoftwares.example</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center mt-4"> | |
| <div class="flex-shrink-0 bg-primary rounded-md p-2"> | |
| <i class="fas fa-phone-alt text-white"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-light">Call us</p> | |
| <p class="text-sm text-gray-400">+1 (555) 123-4567</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center mt-4"> | |
| <div class="flex-shrink-0 bg-primary rounded-md p-2"> | |
| <i class="fas fa-map-marker-alt text-white"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-light">Visit us</p> | |
| <p class="text-sm text-gray-400">123 Business Ave, San Francisco, CA</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="text-sm font-medium text-light">Our Development Hours</h4> | |
| <p class="mt-2 text-sm text-gray-400"> | |
| Monday - Friday: 9:00 AM - 6:00 PM PST<br> | |
| Saturday - Sunday: Closed | |
| </p> | |
| </div> | |
| </div> | |
| <div class="p-8 sm:p-10"> | |
| <form id="contactForm" class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-light">Full Name *</label> | |
| <div class="mt-1"> | |
| <input type="text" name="name" id="name" autocomplete="name" required | |
| class="form-input py-3 px-4 block w-full rounded-md focus:ring-primary"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-light">Email Address *</label> | |
| <div class="mt-1"> | |
| <input type="email" name="email" id="email" autocomplete="email" required | |
| class="form-input py-3 px-4 block w-full rounded-md focus:ring-primary"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="company" class="block text-sm font-medium text-light">Company Name</label> | |
| <div class="mt-1"> | |
| <input type="text" name="company" id="company" | |
| class="form-input py-3 px-4 block w-full rounded-md focus:ring-primary"> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="project" class="block text-sm font-medium text-light">Project Type *</label> | |
| <div class="mt-1"> | |
| <select id="project" name="project" required | |
| class="form-input py-3 px-4 block w-full rounded-md focus:ring-primary"> | |
| <option value="">Select project type</option> | |
| <option>Web Application</option> | |
| <option>Mobile Application</option> | |
| <option>Website Development</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="message", class="block text-sm font-medium text-light">Project Details *</label> | |
| <div class="mt-1"> | |
| <textarea id="message" name="message" rows="4" required | |
| class="form-input py-3 px-4 block w-full rounded-md focus:ring-primary" placeholder="Describe your project requirements, timeline, and any technical specifications"></textarea> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <input id="agree-terms" name="agree-terms" type="checkbox" required | |
| class="h-4 w-4 text-primary focus:ring-primary border-gray-600 rounded bg-gray-700"> | |
| <label for="agree-terms" class="ml-2 block text-sm text-gray-400"> | |
| I agree to the <a href="#" class="text-primary hover:text-teal-700">privacy policy</a> and understand this is a development inquiry | |
| </label> | |
| </div> | |
| <div> | |
| <button type="submit" | |
| class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors duration-300"> | |
| Request Technical Consultation | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 border-t border-gray-800"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-light text-sm font-semibold tracking-wider uppercase">Services</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="#services" class="text-gray-400 hover:text-primary transition-colors duration-300">Web Development</a></li> | |
| <li><a href="#services" class="text-gray-400 hover:text-primary transition-colors duration-300">App Development</a></li> | |
| <li><a href="#solutions" class="text-gray-400 hover:text-primary transition-colors duration-300">Enterprise Solutions</a></li> | |
| <li><a href="#solutions" class="text-gray-400 hover:text-primary transition-colors duration-300">Startup Packages</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-light text-sm font-semibold tracking-wider uppercase">Legal</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300">Privacy</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300">Terms</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300">Cookie Policy</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-light text-sm font-semibold tracking-wider uppercase">Connect</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300">Twitter</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300">LinkedIn</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300">GitHub</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-light text-sm font-semibold tracking-wider uppercase">Contact</h3> | |
| <ul class="mt-4 space-y-2"> | |
| <li class="text-gray-400">dev@adsoftwares.example</li> | |
| <li class="text-gray-400">+1 (555) 123-4567</li> | |
| <li class="text-gray-400">123 Business Ave, San Francisco, CA</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-8 border-t border-gray-800 pt-8 md:flex md:items-center md:justify-between"> | |
| <div class="flex space-x-6 md:order-2"> | |
| <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-primary transition-colors duration-300"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| <p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1"> | |
| © 2023 AD Softwares. Premium web and app development services. | |
| </p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize animations when page loads | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.querySelector('button[aria-controls="mobile-menu"]'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| alert('Mobile menu would open here. Add your menu structure and JavaScript to toggle it.'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 70, | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Animate elements with anime.js | |
| const animateElements = () => { | |
| // Header animation | |
| anime({ | |
| targets: '.hidden-initially', | |
| opacity: [0, 1], | |
| translateY: [20, 0], | |
| duration: 800, | |
| delay: anime.stagger(100), | |
| easing: 'easeOutExpo' | |
| }); | |
| // Service cards hover effect | |
| const serviceCards = document.querySelectorAll('.service-card'); | |
| serviceCards.forEach(card => { | |
| card.addEventListener('mouseenter', () => { | |
| anime({ | |
| targets: card, | |
| scale: 1.02, | |
| duration: 300, | |
| easing: 'easeOutQuad' | |
| }); | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| anime({ | |
| targets: card, | |
| scale: 1, | |
| duration: 300, | |
| easing: 'easeOutQuad' | |
| }); | |
| }); | |
| }); | |
| // Floating tech icons animation | |
| const techIcons = document.querySelectorAll('.tech-stack'); | |
| techIcons.forEach((icon, index) => { | |
| anime({ | |
| targets: icon, | |
| translateY: [0, -5], | |
| opacity: [0.8, 1], | |
| duration: 1000, | |
| delay: index * 100, | |
| direction: 'alternate', | |
| loop: true, | |
| easing: 'easeInOutSine' | |
| }); | |
| }); | |
| // Contact form inputs animation | |
| const formInputs = document.querySelectorAll('.form-input'); | |
| formInputs.forEach(input => { | |
| input.addEventListener('focus', () => { | |
| anime({ | |
| targets: input, | |
| scale: 1.02, | |
| duration: 200, | |
| easing: 'easeOutQuad' | |
| }); | |
| }); | |
| input.addEventListener('blur', () => { | |
| anime({ | |
| targets: input, | |
| scale: 1, | |
| duration: 200, | |
| easing: 'easeOutQuad' | |
| }); | |
| }); | |
| }); | |
| // Button hover effect | |
| const buttons = document.querySelectorAll('button, a[href="#contact"]'); | |
| buttons.forEach(button => { | |
| button.addEventListener('mouseenter', () => { | |
| anime({ | |
| targets: button, | |
| scale: 1.05, | |
| duration: 200, | |
| easing: 'easeOutQuad' | |
| }); | |
| }); | |
| button.addEventListener('mouseleave', () => { | |
| anime({ | |
| targets: button, | |
| scale: 1, | |
| duration: 200, | |
| easing: 'easeOutQuad' | |
| }); | |
| }); | |
| }); | |
| }; | |
| // Wait for fonts to load before animating | |
| document.fonts.ready.then(() => { | |
| animateElements(); | |
| }); | |
| // Form submission handling | |
| const contactForm = document.getElementById('contactForm'); | |
| if (contactForm) { | |
| contactForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| // Create a confetti effect on form submission | |
| anime({ | |
| targets: '.confetti', | |
| translateY: [0, -100], | |
| opacity: [1, 0], | |
| duration: 1500, | |
| easing: 'easeOutExpo', | |
| complete: function() { | |
| document.querySelectorAll('.confetti').forEach(el => el.remove()); | |
| } | |
| }); | |
| // Show success message | |
| alert('Thank you for your development inquiry! Our technical team will contact you within 24 hours to discuss your project.'); | |
| contactForm.reset(); | |
| }); | |
| } | |
| }); | |
| </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=Han0101/ad-software-webpage" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |