The next-generation Open Source Intelligence visualization tool for security researchers, analysts, and developers.
SPECTRA is a state-of-the-art landing page and frontend template designed for high-end Cybersecurity, OSINT, and SaaS applications. It combines a premium "hacker" aesthetic with modern web technologies to deliver an immersive user experience.
Built with Nuxt 4 and Tailwind CSS 4, it features reactive animations, a terminal-style UI, real-time data visualization mocks, and a fully responsive layout that looks stunning on any device.
- Terminal Simulation: Realistic typing effects and command execution visuals in the Hero section.
- Glassmorphism: Premium backdrop-blur effects (
backdrop-blur-xl) used throughout for a modern, depth-filled look. - Cyber Aesthetic: Custom color palette featuring specialized neons (
#00DC82,#3B82F6) against deepgray-950backgrounds.
- Nuxt 4 Architecture: Leveraging the latest server-side rendering and edge deployment capabilities.
- Tailwind CSS v4: Utilizing the newest engine for lightning-fast HMR and zero-runtime CSS generation.
- Motion System: Integration of
@vueuse/motionfor complex, physics-based entrance and scroll animations. - Responsive Design: Mobile-first approach with custom breakpoints for specific layouts (Mobile Grid fixes, flexible Navigation).
- Global Map Visualization: Animated map indicating server/node locations with pulsating beacons.
- Live Demo Console: Interactive code block and terminal outputs showcasing API usage.
- Compliance & Trust Section: Grid layout displaying security certifications (ISO, SOC2, GDPR).
- Dynamic 404 Page: A fully animated, cyber-themed error page with glitch effects and particles.
| Category | Technology | Description |
|---|---|---|
| Core | Nuxt 4 | The Hybrid Vue Framework |
| UI | Vue 3 | The Progressive JavaScript Framework |
| Styling | Tailwind CSS 4 | Utility-first CSS Framework (Vite Native) |
| Components | Nuxt UI | Official UI Component Library for Nuxt |
| Animation | VueUse Motion | Composable motion library for Vue |
| Icons | Lucide / Simple Icons | Beautiful & consistent open-source icons |
| Fonts | Google Fonts | JetBrains Mono (Code) & Outfit (UI) |
Follow these steps to set up the project locally.
- Node.js: v18.0.0 or higher
- npm (recommended) or pnpm/yarn
# Clone the repository
git clone https://github.com/JonniTech/NextGen-Cyber-LandingPage
# Navigate to the project directory
cd NextGen-Cyber-LandingPage
# Install dependencies
npm installStart the development server with hot-module replacement (HMR).
npm run dev
# Server running at http://localhost:3000Build the application for production deployment.
npm run build
# Preview the production build
npm run previewspectra/
├── app/
│ ├── components/ # Reusable UI components (Hero, Feature, Compliance...)
│ ├── layouts/ # Application layouts (default.vue)
│ ├── pages/ # File-based routing (index.vue)
│ ├── app.vue # Root application component
│ └── error.vue # Custom 404/Error page
├── public/ # Static assets (images, favicon)
├── server/ # API routes and server middleware
├── nuxt.config.ts # Nuxt configuration file
├── package.json # Dependency management
└── README.md # Project documentationThe project uses Tailwind CSS v4. You can customize the theme in your CSS or Tailwind config.
- Primary Color: Defaults to Nuxt Green shade.
- Dark Mode: Enabled by default with
class="dark".
Animations are powered by @vueuse/motion directives (e.g., v-motion-slide-visible-once-bottom).
Check app/components/HeroSection.vue for examples of:
v-motionenter/initialstates- Delay and duration configuration
Distributed under the MIT License. See LICENSE for more information.
Built with 💚 by Jonni