Spaces:
Running
Running
| <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SBSCRPT | Integrated Business Solutions</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"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| obsidian: '#0a0a0a', | |
| primary: '#6d28d9', | |
| secondary: '#10b981', | |
| accent: '#3b82f6', | |
| }, | |
| animation: { | |
| 'float': 'float 6s ease-in-out infinite', | |
| 'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| }, | |
| keyframes: { | |
| float: { | |
| '0%, 100%': { transform: 'translateY(0)' }, | |
| '50%': { transform: 'translateY(-10px)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .gradient-text { | |
| background: linear-gradient(90deg, #6d28d9, #3b82f6, #10b981); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .chatbox { | |
| box-shadow: 0 0 30px rgba(59, 130, 246, 0.3); | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| display: block; | |
| width: 0; | |
| height: 2px; | |
| background: #6d28d9; | |
| transition: width .3s; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .fade-in { | |
| animation: fadeIn 1s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-obsidian text-gray-200 min-h-screen font-sans antialiased"> | |
| <!-- Navigation --> | |
| <nav class="sticky top-0 z-50 bg-gray-900/80 backdrop-blur-md border-b border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <span class="text-2xl font-bold gradient-text">SBSCRPT</span> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-10 flex items-baseline space-x-4"> | |
| <a href="#services" class="nav-link px-3 py-2 rounded-md text-sm font-medium">Services</a> | |
| <a href="#products" class="nav-link px-3 py-2 rounded-md text-sm font-medium">Products</a> | |
| <a href="#showcase" class="nav-link px-3 py-2 rounded-md text-sm font-medium">Showcase</a> | |
| <a href="#about" class="nav-link px-3 py-2 rounded-md text-sm font-medium">About</a> | |
| <a href="#subsidiaries" class="nav-link px-3 py-2 rounded-md text-sm font-medium">Subsidiaries</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="ml-4 flex items-center md:ml-6"> | |
| <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none"> | |
| <span class="sr-only">View notifications</span> | |
| <i class="fas fa-bell h-6 w-6"></i> | |
| </button> | |
| <button class="ml-3 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none" onclick="toggleChat()"> | |
| <span class="sr-only">Open chat</span> | |
| <i class="fas fa-comment-dots h-6 w-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="-mr-2 flex md:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false" onclick="toggleMobileMenu()"> | |
| <span class="sr-only">Open main menu</span> | |
| <i class="fas fa-bars h-6 w-6" id="menu-icon"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden" id="mobile-menu"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium">Services</a> | |
| <a href="#products" class="block px-3 py-2 rounded-md text-base font-medium">Products</a> | |
| <a href="#showcase" class="block px-3 py-2 rounded-md text-base font-medium">Showcase</a> | |
| <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium">About</a> | |
| <a href="#subsidiaries" class="block px-3 py-2 rounded-md text-base font-medium">Subsidiaries</a> | |
| </div> | |
| <div class="pt-4 pb-3 border-t border-gray-700"> | |
| <div class="flex items-center px-5"> | |
| <button class="ml-auto p-1 rounded-full text-gray-400 hover:text-white focus:outline-none" onclick="toggleChat()"> | |
| <span class="sr-only">Open chat</span> | |
| <i class="fas fa-comment-dots h-6 w-6"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <header class="relative bg-gradient-to-br from-gray-900 to-gray-800 overflow-hidden"> | |
| <div class="absolute inset-0 opacity-20"> | |
| <div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1IiBoZWlnaHQ9IjUiPgo8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiBmaWxsPSIjMDAwMDAwIj48L3JlY3Q+CjxwYXRoIGQ9Ik0wIDVMNSAwWk02IDRMNCA2Wk0tMSAxTDEgLTFaIiBzdHJva2U9IiMxMTExMTEiIHN0cm9rZS13aWR0aD0iMSI+PC9wYXRoPgo8L3N2Zz4=')]"></div> | |
| </div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32 relative z-10"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl md:text-6xl font-extrabold tracking-tight mb-6"> | |
| <span class="gradient-text">Tailored Solutions</span> <br>For Your Business Needs | |
| </h1> | |
| <p class="mt-6 max-w-2xl mx-auto text-xl text-gray-300"> | |
| SBSCRPT delivers integrated services, products, and multimedia solutions with FMV pricing plus a 9% service fee. | |
| </p> | |
| <div class="mt-10 flex justify-center gap-4"> | |
| <a href="#services" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-purple-700 md:py-4 md:text-lg md:px-10 transition-colors"> | |
| Explore Services | |
| </a> | |
| <button onclick="toggleChat()" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-accent hover:bg-blue-700 md:py-4 md:text-lg md:px-10 transition-colors"> | |
| Get a Quote | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-gray-900 to-transparent"></div> | |
| </header> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| Our <span class="gradient-text">Integrated Services</span> | |
| </h2> | |
| <p class="mt-4 max-w-2xl mx-auto text-gray-300"> | |
| Comprehensive solutions tailored to your specific requirements | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service Cards will be autopopulated from database --> | |
| <div class="service-card bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:border-l-4 border-primary"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0 bg-primary/10 p-3 rounded-lg"> | |
| <i class="fas fa-code text-primary text-xl"></i> | |
| </div> | |
| <h3 class="ml-3 text-lg font-medium text-white">Custom Software Development</h3> | |
| </div> | |
| <p class="mt-2 text-gray-300"> | |
| Bespoke applications built to your exact specifications with OPSEC-focused security. | |
| </p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-sm text-gray-400">Starting at $5,000</span> | |
| <button class="text-sm text-accent hover:text-blue-400">Learn more →</button> | |
| </div> | |
| </div> | |
| <div class="service-card bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:border-l-4 border-secondary"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0 bg-secondary/10 p-3 rounded-lg"> | |
| <i class="fas fa-brain text-secondary text-xl"></i> | |
| </div> | |
| <h3 class="ml-3 text-lg font-medium text-white">AI Integration Services</h3> | |
| </div> | |
| <p class="mt-2 text-gray-300"> | |
| Implement cutting-edge AI solutions tailored to your business processes. | |
| </p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-sm text-gray-400">Starting at $3,500</span> | |
| <button class="text-sm text-accent hover:text-blue-400">Learn more →</button> | |
| </div> | |
| </div> | |
| <div class="service-card bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:border-l-4 border-accent"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0 bg-accent/10 p-3 rounded-lg"> | |
| <i class="fas fa-film text-accent text-xl"></i> | |
| </div> | |
| <h3 class="ml-3 text-lg font-medium text-white">Multimedia Production</h3> | |
| </div> | |
| <p class="mt-2 text-gray-300"> | |
| Professional video, audio, and graphic design services for your brand. | |
| </p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-sm text-gray-400">Starting at $2,000</span> | |
| <button class="text-sm text-accent hover:text-blue-400">Learn more →</button> | |
| </div> | |
| </div> | |
| <div class="service-card bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:border-l-4 border-primary"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0 bg-primary/10 p-3 rounded-lg"> | |
| <i class="fas fa-lock text-primary text-xl"></i> | |
| </div> | |
| <h3 class="ml-3 text-lg font-medium text-white">Security Compliance</h3> | |
| </div> | |
| <p class="mt-2 text-gray-300"> | |
| Full compliance with all major security standards and regulations. | |
| </p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-sm text-gray-400">Starting at $4,500</span> | |
| <button class="text-sm text-accent hover:text-blue-400">Learn more →</button> | |
| </div> | |
| </div> | |
| <div class="service-card bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:border-l-4 border-secondary"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0 bg-secondary/10 p-3 rounded-lg"> | |
| <i class="fas fa-store text-secondary text-xl"></i> | |
| </div> | |
| <h3 class="ml-3 text-lg font-medium text-white">E-Commerce Solutions</h3> | |
| </div> | |
| <p class="mt-2 text-gray-300"> | |
| Complete online store setup with payment processing and inventory management. | |
| </p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-sm text-gray-400">Starting at $3,000</span> | |
| <button class="text-sm text-accent hover:text-blue-400">Learn more →</button> | |
| </div> | |
| </div> | |
| <div class="service-card bg-gray-800 rounded-lg p-6 transition-all duration-300 hover:border-l-4 border-accent"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0 bg-accent/10 p-3 rounded-lg"> | |
| <i class="fas fa-chart-line text-accent text-xl"></i> | |
| </div> | |
| <h3 class="ml-3 text-lg font-medium text-white">Business Consulting</h3> | |
| </div> | |
| <p class="mt-2 text-gray-300"> | |
| Strategic guidance to optimize your operations and maximize growth. | |
| </p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-sm text-gray-400">Starting at $250/hr</span> | |
| <button class="text-sm text-accent hover:text-blue-400">Learn more →</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Products Section --> | |
| <section id="products" class="py-20 bg-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| Our <span class="gradient-text">Product Portfolio</span> | |
| </h2> | |
| <p class="mt-4 max-w-2xl mx-auto text-gray-300"> | |
| Digital goods and physical products designed for excellence | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <!-- Product Cards will be autopopulated from database --> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden transition-transform duration-300 hover:scale-105"> | |
| <div class="h-48 bg-gradient-to-r from-primary to-accent flex items-center justify-center"> | |
| <i class="fas fa-box-open text-white text-5xl"></i> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold text-white">Subcult Streetwear</h3> | |
| <p class="mt-2 text-gray-300 text-sm">Premium urban apparel from our Subcult collective</p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-primary font-medium">$29 - $99</span> | |
| <button class="text-xs bg-primary hover:bg-purple-700 text-white px-3 py-1 rounded-full">View Collection</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden transition-transform duration-300 hover:scale-105"> | |
| <div class="h-48 bg-gradient-to-r from-secondary to-accent flex items-center justify-center"> | |
| <i class="fas fa-mobile-alt text-white text-5xl"></i> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold text-white">ValueScope App</h3> | |
| <p class="mt-2 text-gray-300 text-sm">Patent-pending valuation tool for business assets</p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-secondary font-medium">$49/month</span> | |
| <button class="text-xs bg-secondary hover:bg-green-700 text-white px-3 py-1 rounded-full">Try Demo</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden transition-transform duration-300 hover:scale-105"> | |
| <div class="h-48 bg-gradient-to-r from-accent to-primary flex items-center justify-center"> | |
| <i class="fas fa-book text-white text-5xl"></i> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold text-white">VentureHub Reports</h3> | |
| <p class="mt-2 text-gray-300 text-sm">Market analysis and business opportunity packages</p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-accent font-medium">$99 - $499</span> | |
| <button class="text-xs bg-accent hover:bg-blue-700 text-white px-3 py-1 rounded-full">Browse Reports</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden transition-transform duration-300 hover:scale-105"> | |
| <div class="h-48 bg-gradient-to-r from-primary to-secondary flex items-center justify-center"> | |
| <i class="fas fa-headphones text-white text-5xl"></i> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="text-lg font-semibold text-white">SBSCRPT Media</h3> | |
| <p class="mt-2 text-gray-300 text-sm">Exclusive multimedia content and production templates</p> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <span class="text-primary font-medium">$19 - $199</span> | |
| <button class="text-xs bg-primary hover:bg-purple-700 text-white px-3 py-1 rounded-full">View Library</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Showcase Section --> | |
| <section id="showcase" class="py-20 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| Our <span class="gradient-text">Work Showcase</span> | |
| </h2> | |
| <p class="mt-4 max-w-2xl mx-auto text-gray-300"> | |
| Explore our portfolio of past projects and client successes | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Showcase items will be autopopulated from database --> | |
| <div class="relative group overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Project" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white font-bold text-xl">E-Commerce Platform</h3> | |
| <p class="text-gray-300 mt-2">Custom-built online store with AI recommendations</p> | |
| <button class="mt-3 text-sm bg-primary hover:bg-purple-700 text-white px-4 py-2 rounded-full">View Case Study</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative group overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Project" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white font-bold text-xl">Corporate Branding</h3> | |
| <p class="text-gray-300 mt-2">Complete visual identity for tech startup</p> | |
| <button class="mt-3 text-sm bg-primary hover:bg-purple-700 text-white px-4 py-2 rounded-full">View Case Study</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative group overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Project" class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-110"> | |
| <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6"> | |
| <div> | |
| <h3 class="text-white font-bold text-xl">Mobile Application</h3> | |
| <p class="text-gray-300 mt-2">Fitness tracking app with social features</p> | |
| <button class="mt-3 text-sm bg-primary hover:bg-purple-700 text-white px-4 py-2 rounded-full">View Case Study</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button class="px-6 py-3 border-2 border-primary text-primary font-medium rounded-md hover:bg-primary hover:text-white transition-colors"> | |
| View Full Portfolio | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- AI Blog Preview --> | |
| <section class="py-20 bg-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| <span class="gradient-text">AI-Generated Insights</span> | |
| </h2> | |
| <p class="mt-4 max-w-2xl mx-auto text-gray-300"> | |
| Our autonomous blog delivers fresh, SEO-optimized content daily | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Blog posts will be autogenerated --> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-primary to-accent flex items-center justify-center"> | |
| <i class="fas fa-robot text-white text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-400 mb-2"> | |
| <span>Today</span> | |
| <span class="mx-2">•</span> | |
| <span>AI Generated</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white">The Future of AI in Business Operations</h3> | |
| <p class="mt-3 text-gray-300"> | |
| Exploring how artificial intelligence is transforming traditional business models and creating new opportunities... | |
| </p> | |
| <button class="mt-4 text-sm text-accent hover:text-blue-400 flex items-center"> | |
| Read more <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-secondary to-primary flex items-center justify-center"> | |
| <i class="fas fa-chart-pie text-white text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-400 mb-2"> | |
| <span>Yesterday</span> | |
| <span class="mx-2">•</span> | |
| <span>AI Generated</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white">Market Trends in Tech for 2023</h3> | |
| <p class="mt-3 text-gray-300"> | |
| Analysis of emerging technologies that are shaping industries and how businesses can adapt to stay competitive... | |
| </p> | |
| <button class="mt-4 text-sm text-accent hover:text-blue-400 flex items-center"> | |
| Read more <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg overflow-hidden"> | |
| <div class="h-48 bg-gradient-to-r from-accent to-secondary flex items-center justify-center"> | |
| <i class="fas fa-lock text-white text-5xl"></i> | |
| </div> | |
| <div class="p-6"> | |
| <div class="flex items-center text-sm text-gray-400 mb-2"> | |
| <span>2 days ago</span> | |
| <span class="mx-2">•</span> | |
| <span>AI Generated</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white">OPSEC Best Practices for Startups</h3> | |
| <p class="mt-3 text-gray-300"> | |
| Essential security measures every growing business should implement to protect their data and intellectual property... | |
| </p> | |
| <button class="mt-4 text-sm text-accent hover:text-blue-400 flex items-center"> | |
| Read more <i class="fas fa-arrow-right ml-1"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button class="px-6 py-3 border-2 border-secondary text-secondary font-medium rounded-md hover:bg-secondary hover:text-white transition-colors"> | |
| Visit Our Blog | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Subsidiaries Section --> | |
| <section id="subsidiaries" class="py-20 bg-gray-900"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| Our <span class="gradient-text">Subsidiary Companies</span> | |
| </h2> | |
| <p class="mt-4 max-w-2xl mx-auto text-gray-300"> | |
| Specialized divisions focusing on specific market segments | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <div class="bg-gray-800 rounded-lg p-6 text-center hover:shadow-lg transition-shadow"> | |
| <div class="w-20 h-20 mx-auto bg-primary/10 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-paint-brush text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white mb-2">SBSCRPT Media & Design</h3> | |
| <p class="text-gray-300 mb-4">Creative solutions for branding and multimedia production</p> | |
| <a href="#" class="text-sm text-primary hover:text-purple-400">Visit Site →</a> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-6 text-center hover:shadow-lg transition-shadow"> | |
| <div class="w-20 h-20 mx-auto bg-secondary/10 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-tshirt text-secondary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white mb-2">Subcult Collective</h3> | |
| <p class="text-gray-300 mb-4">Streetwear and urban culture apparel brand</p> | |
| <a href="#" class="text-sm text-secondary hover:text-green-400">Visit Site →</a> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-6 text-center hover:shadow-lg transition-shadow"> | |
| <div class="w-20 h-20 mx-auto bg-accent/10 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-lightbulb text-accent text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white mb-2">VentureHub</h3> | |
| <p class="text-gray-300 mb-4">Business idea marketplace and startup incubator</p> | |
| <a href="#" class="text-sm text-accent hover:text-blue-400">Visit Site →</a> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-6 text-center hover:shadow-lg transition-shadow"> | |
| <div class="w-20 h-20 mx-auto bg-primary/10 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-chart-bar text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-white mb-2">ValueScope</h3> | |
| <p class="text-gray-300 mb-4">Patent-pending valuation tools and analytics</p> | |
| <a href="#" class="text-sm text-primary hover:text-purple-400">Visit Site →</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="lg:grid lg:grid-cols-2 lg:gap-16 items-center"> | |
| <div class="mb-12 lg:mb-0"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl mb-6"> | |
| About <span class="gradient-text">SBSCRPT</span> | |
| </h2> | |
| <p class="text-gray-300 mb-4"> | |
| SBSCRPT is an integrated business solutions provider specializing in technology, multimedia, and tailored services. | |
| We combine multiple disciplines to deliver comprehensive solutions to our clients. | |
| </p> | |
| <p class="text-gray-300 mb-4"> | |
| Our unique pricing model offers Fair Market Value (FMV) pricing plus a 9% service fee, ensuring transparency | |
| and value for our clients. | |
| </p> | |
| <p class="text-gray-300 mb-6"> | |
| With a strong focus on OPSEC and compliance, we prioritize the security of your data and intellectual property | |
| throughout all our engagements. | |
| </p> | |
| <div class="flex flex-wrap gap-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-primary/10 p-2 rounded-full"> | |
| <i class="fas fa-check text-primary"></i> | |
| </div> | |
| <span class="ml-2 text-white">NDA Protection</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-secondary/10 p-2 rounded-full"> | |
| <i class="fas fa-check text-secondary"></i> | |
| </div> | |
| <span class="ml-2 text-white">Full Compliance</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-accent/10 p-2 rounded-full"> | |
| <i class="fas fa-check text-accent"></i> | |
| </div> | |
| <span class="ml-2 text-white">Tailored Solutions</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="relative z-10 bg-gray-700 rounded-xl overflow-hidden p-1"> | |
| <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80" alt="Team" class="w-full h-auto rounded-lg"> | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-primary rounded-full opacity-20"></div> | |
| <div class="absolute -top-6 -left-6 w-24 h-24 bg-secondary rounded-full opacity-20"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 bg-gradient-to-r from-gray-900 to-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl mb-6"> | |
| Ready to Transform Your Business? | |
| </h2> | |
| <p class="max-w-2xl mx-auto text-gray-300 mb-8"> | |
| Get started with SBSCRPT today and experience integrated solutions tailored to your needs. | |
| </p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <button onclick="toggleChat()" class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-purple-700 md:py-4 md:text-lg md:px-10 transition-colors"> | |
| Get a Custom Quote | |
| </button> | |
| <a href="#contact" class="px-8 py-3 border border-primary text-base font-medium rounded-md text-primary hover:bg-gray-800 md:py-4 md:text-lg md:px-10 transition-colors"> | |
| Contact Our Team | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 border-t border-gray-800"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4">SBSCRPT</h3> | |
| <p class="text-gray-400 text-sm"> | |
| Integrated business solutions with a focus on technology, multimedia, and tailored services. | |
| </p> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4">Services</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Custom Development</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">AI Integration</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Multimedia Production</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Security Compliance</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4">Products</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">Subcult Apparel</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">ValueScope Tools</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">VentureHub Reports</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white text-sm">SBSCRPT Media</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-semibold mb-4">Connect</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| <div class="mt-4"> | |
| <p class="text-gray-400 text-sm">info@sbscrpt.com</p> | |
| <p class="text-gray-400 text-sm">+1 (555) 123-4567</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm"> | |
| © 2023 SBSCRPT. All rights reserved. | |
| </p> | |
| <div class="mt-4 md:mt-0"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm mr-4">Privacy Policy</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm mr-4">Terms of Service</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">NDA Agreement</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Chatbox --> | |
| <div id="chatbox" class="fixed bottom-6 right-6 w-80 bg-gray-800 rounded-t-xl shadow-xl border border-gray-700 hidden transform transition-all duration-300 ease-in-out"> | |
| <div class="bg-gray-700 px-4 py-3 rounded-t-xl flex justify-between items-center"> | |
| <h3 class="text-white font-medium">SBSCRPT Assistant</h3> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-gray-300 hover:text-white"> | |
| <i class="fas fa-minus"></i> | |
| </button> | |
| <button onclick="toggleChat()" class="text-gray-300 hover:text-white"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="h-64 overflow-y-auto p-4 bg-gray-800"> | |
| <div class="mb-4"> | |
| <div class="flex items-start mb-2"> | |
| <div class="flex-shrink-0 h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-primary text-sm"></i> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-3 text-sm text-gray-200"> | |
| Hello! I'm your SBSCRPT assistant. How can I help you today? You can ask about our services, products, or request a custom quote. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Messages will appear here --> | |
| </div> | |
| <div class="p-3 border-t border-gray-700 bg-gray-800"> | |
| <div class="flex"> | |
| <input type="text" id="chat-input" placeholder="Type your message..." class="flex-1 bg-gray-700 rounded-l-lg px-4 py-2 text-sm text-white focus:outline-none focus:ring-1 focus:ring-primary"> | |
| <button onclick="sendMessage()" class="bg-primary hover:bg-purple-700 text-white px-4 py-2 rounded-r-lg text-sm"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-2"> | |
| By using this chat, you agree to our <a href="#" class="text-primary hover:underline">privacy policy</a>. | |
| </p> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| function toggleMobileMenu() { | |
| const menu = document.getElementById('mobile-menu'); | |
| const icon = document.getElementById('menu-icon'); | |
| if (menu.classList.contains('hidden')) { | |
| menu.classList.remove('hidden'); | |
| icon.classList.remove('fa-bars'); | |
| icon.classList.add('fa-times'); | |
| } else { | |
| menu.classList.add('hidden'); | |
| icon.classList.remove('fa-times'); | |
| icon.classList.add('fa-bars'); | |
| } | |
| } | |
| // Chatbox toggle | |
| function toggleChat() { | |
| const chatbox = document.getElementById('chatbox'); | |
| if (chatbox.classList.contains('hidden')) { | |
| chatbox.classList.remove('hidden'); | |
| setTimeout(() => { | |
| chatbox.classList.add('fade-in'); | |
| }, 10); | |
| } else { | |
| chatbox.classList.add('hidden'); | |
| chatbox.classList.remove('fade-in'); | |
| } | |
| } | |
| // Send message function | |
| function sendMessage() { | |
| const input = document.getElementById('chat-input'); | |
| const message = input.value.trim(); | |
| if (message) { | |
| const chatArea = document.querySelector('#chatbox > div.h-64'); | |
| // Add user message | |
| const userMessage = document.createElement('div'); | |
| userMessage.className = 'mb-4 flex justify-end'; | |
| userMessage.innerHTML = ` | |
| <div class="bg-primary rounded-lg p-3 text-sm text-white max-w-xs"> | |
| ${message} | |
| </div> | |
| `; | |
| chatArea.appendChild(userMessage); | |
| // Clear input | |
| input.value = ''; | |
| // Scroll to bottom | |
| chatArea.scrollTop = chatArea.scrollHeight; | |
| // Simulate response after delay | |
| setTimeout(() => { | |
| const responses = [ | |
| "I can help with that! Our team specializes in tailored solutions. Would you like me to generate a quote?", | |
| "That's one of our popular services. Our FMV pricing plus 9% service fee applies. Can you share more details?", | |
| "We have several options for that. Let me connect you with the right team member.", | |
| "Thanks for your inquiry! Our typical turnaround time is 2-4 weeks depending on complexity.", | |
| "That's a great question! Our ValueScope tool might be perfect for your needs." | |
| ]; | |
| const randomResponse = responses[Math.floor(Math.random() * responses.length)]; | |
| const botMessage = document.createElement('div'); | |
| botMessage.className = 'mb-4'; | |
| botMessage.innerHTML = ` | |
| <div class="flex items-start mb-2"> | |
| <div class="flex-shrink-0 h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center mr-3"> | |
| <i class="fas fa-robot text-primary text-sm"></i> | |
| </div> | |
| <div class="bg-gray-700 rounded-lg p-3 text-sm text-gray-200"> | |
| ${randomResponse} | |
| </div> | |
| </div> | |
| `; | |
| chatArea.appendChild(botMessage); | |
| // Scroll to bottom again | |
| chatArea.scrollTop = chatArea.scrollHeight; | |
| }, 1000); | |
| } | |
| } | |
| // Allow sending message with Enter key | |
| document.getElementById('chat-input').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| // 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) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| toggleMobileMenu(); | |
| } | |
| } | |
| }); | |
| }); | |
| // Animation for service cards on scroll | |
| function animateOnScroll() { | |
| const cards = document.querySelectorAll('.service-card'); | |
| cards.forEach(card => { | |
| const cardPosition = card.getBoundingClientRect().top; | |
| const screenPosition = window.innerHeight / 1.3; | |
| if (cardPosition < screenPosition) { | |
| card.classList.add('fade-in'); | |
| } | |
| }); | |
| } | |
| window.addEventListener('scroll', animateOnScroll); | |
| document.addEventListener('DOMContentLoaded', animateOnScroll); | |
| </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=SVINT/sbscprt-v1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |