mega-security
monish rajCreate a full-screen dark hero landing page for a security company called "SENTINEL AI" using React, Vite, TypeScript, Tailwind CSS, shadcn/ui, and an embedded Spline 3D scene as the background. The tech stack uses @splinetool/react-spline and @splinetool/runtime for the 3D embed. Here is every detail: FONT: Google Fonts "Sora" with weights 300, 400, 500, 600, 700. Load it in index.html: <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap" rel="stylesheet"> Set font-sora as the body font via Tailwind config: fontFamily: { sora: ["Sora", "sans-serif"] } and apply font-sora antialiased on body. COLOR THEME (all HSL CSS custom properties, dark only, no light mode): --background: 0 0% 10% (dark charcoal) --foreground: 0 0% 96% (near-white) --primary: 119 99% 46% (vivid green) --primary-foreground: 0 0% 4% (near-black) --secondary: 0 0% 18% --secondary-foreground: 0 0% 96% --muted: 0 0% 16% --muted-foreground: 0 0% 60% --accent: 119 99% 46% (same vivid green as primary) --accent-foreground: 0 0% 4% --destructive: 0 84% 60% --border: 0 0% 20% --input: 0 0% 20% --ring: 119 99% 46% --radius: 0.5rem --nav-button: 0 0% 18% --hero-bg: 0 0% 8% (the darkest background, nearly black) Map these in Tailwind config using hsl(var(--variable)) pattern. Add custom color tokens: nav-button and hero-bg. CUSTOM ANIMATIONS (Tailwind config keyframes + animation): fade-up keyframe: 0%: opacity: 0, transform: translateY(20px), filter: blur(4px) 100%: opacity: 1, transform: translateY(0), filter: blur(0) Animation: fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards fade-in keyframe: 0%: opacity: 0 100%: opacity: 1 Animation: fade-in 0.5s ease-out forwards NAVBAR (fixed, transparent, floating over the Spline scene): fixed top-0 left-0 right-0 z-50, horizontal flex, justify-between, padding px-8 lg:px-16 py-5 Left: Logo text "SENTINEL" -- text-foreground text-xl font-semibold tracking-tight Center: Nav links array: ["Services", "About Us", "Projects", "Team", "Contacts"] -- each is text-sm text-muted-foreground hover:text-foreground transition-colors uppercase tracking-widest. Links use href={#section-name}. Hidden on mobile (hidden md:flex), with gap-8. Right: "Get Quote" button using shadcn Button with a custom navCta variant: text-foreground bg-nav-button hover:bg-nav-button/80 active:scale-[0.97] transition-all. Size lg, with classes hidden md:inline-flex rounded-lg uppercase text-xs tracking-widest px-6. HERO SECTION (full-screen, content at bottom-left): Structure: Outer <section>: relative min-h-screen flex items-end bg-hero-bg overflow-hidden Spline 3D Background (absolute, full-size): Lazy-loaded via React.lazy(() => import("@splinetool/react-spline")) wrapped in <Suspense> with a fallback <div className="absolute inset-0 bg-hero-bg" />. The Spline component uses scene="https://prod.spline.design/Slk6b8kz3LRlKiyk/scene.splinecode" and className="w-full h-full". Placed inside <div className="absolute inset-0">. Dark overlay: <div className="absolute inset-0 bg-black/30 z-[1] pointer-events-none" /> Content container: relative z-10 pointer-events-none w-full max-w-[90%] sm:max-w-md lg:max-w-2xl px-6 md:px-10 pb-10 md:pb-10 pt-32 Content elements (all with staggered animate-fade-up, starting opacity-0): Heading (delay 0.2s): <h1> with text "SENTINEL" in white + " AI" in primary green. Classes: text-[clamp(3rem,8vw,6rem)] font-bold leading-[1.05] tracking-[-0.05em] text-foreground mb-2 md:mb-4 uppercase. The "AI" part is wrapped in <span className="text-primary">. Subheading (delay 0.4s): <p> -- "We implement security correctly." -- text-foreground/80 text-[clamp(1.125rem,2.5vw,1.875rem)] font-light mb-3 md:mb-6 Description (delay 0.55s): <p> -- "Enterprise security systems built in days. AI-powered surveillance deployed with zero-trust architecture. Smart access control set up for your entire facility. All of it done right, not just fast." -- text-muted-foreground text-[clamp(0.875rem,1.5vw,1.25rem)] font-light mb-4 md:mb-8 Two CTA buttons (delay 0.7s): Wrapped in flex flex-wrap gap-3 font-bold. Both are plain <button> elements (not shadcn Button) with pointer-events-auto (to re-enable clicks since parent is pointer-events-none): "Book a Call": bg-primary text-primary-foreground px-6 py-3 md:px-8 md:py-4 text-sm rounded-sm cursor-pointer hover:brightness-110 transition-all active:scale-[0.97] "Our Work": bg-white text-background px-6 py-3 md:px-8 md:py-4 text-sm rounded-sm cursor-pointer hover:brightness-90 transition-all active:scale-[0.97] Trust line (delay 0.85s): <p> -- "Trusted security partner. Columbus, OH. 12 systems deployed." -- text-muted-foreground/60 text-xs font-light mt-4 md:mt-6 All animated elements use style={{ animationDelay: "Xs" }} for the stagger, combined with the opacity-0 animate-fade-up classes. PAGE WRAPPER (Index.tsx): Simple wrapper: <div className="bg-hero-bg min-h-screen"> containing <Navbar /> and <HeroSection />. KEY DEPENDENCIES: @splinetool/react-spline and @splinetool/runtime for the 3D Spline embed tailwindcss-animate plugin shadcn/ui Button component with custom variants (navCta, hero, heroOutline) class-variance-authority for button variants IMPORTANT NOTES: The Spline scene URL is https://prod.spline.design/Slk6b8kz3LRlKiyk/scene.splinecode -- this is the exact 3D scene used The entire content area has pointer-events-none so clicks pass through to the Spline scene, but buttons re-enable with pointer-events-auto Responsive fluid typography uses clamp() for the heading, subheading, and description The content is anchored to the bottom-left of the viewport (flex items-end on the section + padding-bottom on the content) No hamburger menu on mobile -- the nav links and CTA simply hide (hidden md:flex / hidden md:inline-flex)
Comments (0)
Sign in to leave a comment
System Requirements
System Requirements Document (SRD)
Project Name: Mega-Security
1. Introduction
The Mega-Security project is a cutting-edge security platform designed to provide enterprise-grade security solutions, leveraging AI-powered surveillance, zero-trust architecture, and smart access control systems. This document outlines the system requirements for the development of the Mega-Security platform, ensuring it meets the needs of its users and stakeholders.
This SRD is tailored for Monish Raj, based in India (IN), and incorporates locale-specific considerations such as time zones (IST), currency (INR), and user expectations for high-performance, scalable, and secure systems.
2. System Overview
The Mega-Security platform aims to deliver a seamless and secure experience for enterprises seeking robust security solutions. The system will feature:
- AI-powered surveillance for real-time monitoring.
- Zero-trust architecture to ensure secure access control.
- A responsive, visually stunning user interface with a 3D interactive landing page.
- Scalable backend infrastructure to handle enterprise-level demands.
- Integration with advanced AI models for intelligent decision-making.
The platform will be built using modern web technologies, ensuring high performance, scalability, and maintainability.
3. Functional Requirements
The functional requirements are outlined as user stories to ensure clarity and alignment with user needs:
- As a User, I should be able to view a full-screen dark hero landing page with a 3D Spline background.
- As a User, I should be able to navigate through the platform using a fixed, transparent navbar with links to "Services," "About Us," "Projects," "Team," and "Contacts."
- As a User, I should be able to click on a "Get Quote" button in the navbar for quick access to services.
- As a User, I should see staggered animations for headings, subheadings, descriptions, and CTA buttons on the landing page.
- As a User, I should be able to interact with two CTA buttons: "Book a Call" and "Our Work."
- As an Admin, I should be able to manage the content of the landing page, including headings, subheadings, and descriptions.
- As an Admin, I should be able to update the 3D Spline scene embedded in the hero section.
4. User Personas
4.1 Admin
- Role: Manages the platform's content and configuration.
- Responsibilities:
- Update the 3D Spline scene.
- Manage text content for the landing page.
- Monitor user interactions and analytics.
4.2 User
- Role: Interacts with the platform to explore services and solutions.
- Responsibilities:
- Navigate through the platform.
- Interact with CTA buttons to book calls or view work.
- Experience the 3D interactive landing page.
5. Visuals Colors and Theme
Custom Color Palette (HSL-based)
| Element | HSL Value | Hex Code |
|---|---|---|
| Background | 0 0% 10% | #1A1A1A |
| Foreground | 0 0% 96% | #F5F5F5 |
| Primary | 119 99% 46% | #00FF88 |
| Primary Foreground | 0 0% 4% | #0A0A0A |
| Secondary | 0 0% 18% | #2E2E2E |
| Secondary Foreground | 0 0% 96% | #F5F5F5 |
| Muted | 0 0% 16% | #292929 |
| Muted Foreground | 0 0% 60% | #999999 |
| Accent | 119 99% 46% | #00FF88 |
| Accent Foreground | 0 0% 4% | #0A0A0A |
| Destructive | 0 84% 60% | #FF4D4D |
| Border | 0 0% 20% | #333333 |
| Input | 0 0% 20% | #333333 |
| Ring | 119 99% 46% | #00FF88 |
| Nav Button | 0 0% 18% | #2E2E2E |
| Hero Background | 0 0% 8% | #141414 |
6. Signature Design Concept
Interactive 3D Hero Landing Page
The Mega-Security homepage will feature a full-screen 3D interactive hero section powered by Spline. Here’s what users will experience:
- 3D Background: A dynamic, immersive 3D scene embedded using Spline. The scene will feature a futuristic security control room with glowing elements, rotating objects, and subtle animations.
- Dark Overlay: A semi-transparent black overlay (30% opacity) to enhance text readability while maintaining the immersive 3D effect.
- Staggered Animations: All text elements (headings, subheadings, descriptions) will fade in with a smooth upward motion, creating a polished and professional feel.
- Interactive Buttons: Two prominent CTA buttons—"Book a Call" and "Our Work"—with hover effects that brighten the buttons and slightly scale them for a tactile feel.
- Trust Line: A subtle, animated trust line at the bottom-left corner, showcasing the company’s credibility (e.g., "Trusted security partner. Columbus, OH. 12 systems deployed.").
- Responsive Design: The layout will adapt seamlessly across devices, ensuring a consistent experience on desktops, tablets, and smartphones.
7. Non-Functional Requirements
- Performance: The platform must load within 3 seconds on a standard broadband connection.
- Scalability: The backend must support up to 1 million concurrent users.
- Security: All user data must be encrypted in transit and at rest.
- Accessibility: The platform must comply with WCAG 2.1 AA standards.
- Localization: Support for Indian time zones (IST) and currency (INR).
8. Tech Stack
Frontend
- React (Web)
- Tailwind CSS
- TypeScript
- @splinetool/react-spline
Backend
- Python
- FastAPI
Database
- MySQL (with Alembic for migrations)
AI Models
- GPT 5.4 for user-friendly responses
- Claude 4.6 Opas for coding assistance
AI Tools
- LangChain
- LiteLLM for LLM routing
Orchestration
- Docker
- Kubernetes
9. Assumptions and Constraints
- The platform will primarily target enterprise users in India.
- The 3D Spline scene will be hosted externally and embedded via URL.
- The platform will not include a mobile app in the initial phase.
10. Glossary
- Spline: A 3D design tool used for creating interactive web experiences.
- Zero-Trust Architecture: A security model that requires strict identity verification for every person and device attempting to access resources.
- WCAG: Web Content Accessibility Guidelines, a set of standards for ensuring web accessibility.
This concludes the updated System Requirements Document for the Mega-Security project. Let me know if you need further refinements, Monish!
AI-Powered Enterprise Security Platform
Securing the Future with Intelligent Surveillance
Mega-Security delivers enterprise-grade protection through AI-powered surveillance, zero-trust architecture, and smart access control. Real-time threat detection meets seamless integration for uncompromising security.
Enterprise-grade AI-powered security solutions you can rely on
Built for Enterprise Security
Mega-Security delivers a comprehensive suite of AI-driven tools designed to protect, monitor, and manage your enterprise infrastructure.
AI-Powered Surveillance
Real-time intelligent monitoring with advanced threat detection algorithms that analyze video feeds, detect anomalies, and alert your team instantly.
Learn more →Zero-Trust Architecture
Every access request is verified, authenticated, and authorized. No implicit trust is granted to any user, device, or network segment.
Explore security →Smart Access Control
Biometric and multi-factor authentication combined with AI-driven behavioral analysis to manage facility access seamlessly.
See how it works →Real-Time Analytics
Comprehensive dashboards providing live metrics, incident tracking, and actionable insights powered by machine learning models.
View dashboard →Automated Threat Response
Intelligent incident response that automatically escalates, isolates, and mitigates threats before they can cause damage to your infrastructure.
Discover more →Enterprise Integration
Seamless integration with your existing security stack, SIEM tools, and cloud infrastructure through our robust API ecosystem.
See integrations →Enterprise-Grade Protection for Modern Threats
Mega-Security combines AI surveillance, zero-trust architecture, and smart access control to deliver comprehensive protection trusted by enterprises across 12 deployed systems.
AI-Powered Threat Detection
Our advanced machine learning algorithms analyze surveillance feeds in real time, identifying potential threats with 99.7% accuracy before they escalate. The system continuously learns from new data, adapting to evolving security landscapes across your entire infrastructure.
Multi-Layer Access Control
Implement enterprise-grade zero-trust architecture with biometric verification and context-aware authentication. Every access request is verified, validated, and logged regardless of origin, ensuring no implicit trust is ever granted within your network perimeter.
Intelligent Perimeter Defense
Deploy smart sensor networks powered by edge computing that process 12 million data points daily, creating an adaptive security mesh around your facilities. Automated incident response protocols reduce human error and ensure consistent protection around the clock.
Intelligence Built Into Every Layer
Mega-Security integrates advanced artificial intelligence across the entire platform — from real-time surveillance analysis to predictive threat modeling — delivering autonomous protection that evolves with every interaction.
Neural Threat Analysis
Deep learning models detect and classify threats in real-time across all surveillance feeds.
Predictive Monitoring
AI anticipates security incidents before they occur using behavioral pattern recognition.
Adaptive Access Control
Intelligent authentication that adjusts security levels based on contextual risk scoring.
Instant Response
Automated incident response protocols triggered within milliseconds of threat detection.
Smart Analytics
AI-driven dashboards surface actionable insights from millions of security data points.
Self-Learning Systems
Models continuously improve accuracy by learning from new data and evolving threat landscapes.
Deployed Across Industries
From enterprise campuses to critical infrastructure, Mega-Security adapts to the unique demands of every environment with precision-engineered solutions.
Enterprise Monitoring
Centralized AI-driven surveillance across multiple facilities with real-time anomaly detection, automated alerts, and intelligent camera routing for 24/7 enterprise-grade monitoring.
Smart Access Control
Zero-trust biometric authentication combined with role-based access policies. Deploy facial recognition, badge scanning, and behavioral analysis at every entry point.
Threat Detection & Response
Machine learning models trained on millions of threat patterns to identify and neutralize risks before they escalate. Automated incident response workflows reduce reaction time by 94%.
Perimeter Defense Systems
Intelligent perimeter monitoring using thermal imaging, motion analytics, and drone integration. Automated fence-line tracking with geo-fenced alert zones for comprehensive boundary security.
Compliance & Audit Intelligence
Automated compliance tracking against ISO 27001, SOC 2, and GDPR frameworks. Generate audit-ready reports with complete evidence trails and policy adherence dashboards.
Trusted by Security Leaders Worldwide
See how enterprises across industries rely on Mega-Security to protect their critical infrastructure and streamline operations.
Mega-Security transformed our entire surveillance infrastructure. The AI-powered threat detection reduced false alarms by 87% in just three months, saving us thousands of hours.
Arjun Mehta
CTO, NexGen Industries
Seamless Integration Ecosystem
Mega-Security connects with industry-leading tools and frameworks to deliver a unified, AI-powered security infrastructure tailored for enterprise-scale deployments.
Take Control of Your Security Infrastructure
Join hundreds of enterprises that trust Mega-Security for AI-powered surveillance, zero-trust architecture, and smart access control. Get started in minutes.
No comments yet. Be the first!