SaaSCommand - Dashboard Analitik Presisi

by oktaviardi pratama

HTML

<!-- Google Fonts: Inter -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&amp;display=swap" rel="stylesheet">
<!-- Material Symbols -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&amp;display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,[email protected],0..1&amp;display=swap" rel="stylesheet">
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>

<!-- TopNavBar: Execution of Shared Component JSON -->
<header class="w-full top-0 sticky bg-surface-container/10 backdrop-blur-md border-b border-outline-variant/10 flex justify-between items-center px-margin-mobile md:px-margin-desktop py-base max-w-full mx-auto z-50 transition-all duration-200">
<div class="flex items-center gap-sm">
<span class="font-display-lg text-headline-md md:text-display-lg text-primary tracking-tighter transition-all duration-200 active:scale-95">SaaSCommand</span>
</div>
<nav class="hidden md:flex gap-md items-center">
<a class="font-body-md text-body-md text-secondary font-bold border-b-2 border-secondary pb-1 transition-all duration-200" href="#" style="color: rgb(242, 96, 118); border-color: rgb(242, 96, 118);">Features</a>
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors hover:opacity-80 transition-opacity" href="#">Pricing</a>
<a class="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors hover:opacity-80 transition-opacity" href="#">About</a>
</nav>
<div class="flex items-center gap-sm">
<button class="bg-primary text-on-primary px-md py-xs rounded-full font-label-sm text-label-sm hover:opacity-80 transition-all duration-200 active:scale-95">
                Login
            </button>
</div>
</header>
<main class="relative">
<!-- Background Animation Layer -->
<div...

CSS

.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        /* Custom noise overlay for enterprise feel */
        .bg-noise {
            background-image: url("https://www.transparenttextures.com/patterns/carbon-fibre.png");
            opacity: 0.03;
            background-color: #333;
        }

@keyframes slide-up {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-slide-up {
            animation: slide-up 0.6s ease-out forwards;
        }
        @keyframes fade-in {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .animate-fade-in {
            animation: fade-in 1s ease-out forwards;
        }

JavaScript

tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            "colors": {
                    "secondary-fixed-dim": "#ffb68f",
                    "outline-variant": "#3f4945",
                    "surface-bright": "#2f3c38",
                    "tertiary-fixed-dim": "#d3ca51",
                    "inverse-primary": "#22695a",
                    "on-surface": "#d8e6e0",
                    "on-secondary": "#542100",
                    "primary": "#8fd4c1",
                    "on-tertiary-fixed": "#1f1c00",
                    "surface-container-lowest": "#05100e",
                    "error-container": "#93000a",
                    "inverse-on-surface": "#273330",
                    "on-primary": "#00382e",
                    "secondary": "#ffb68f",
                    "tertiary": "#d3ca51",
                    "inverse-surface": "#d8e6e0",
                    "on-secondary-container": "#ff9d66",
                    "surface-variant": "#2b3734",
                    "on-error": "#690005",
                    "on-secondary-fixed": "#331100",
                    "on-tertiary-fixed-variant": "#4d4800",
                    "primary-container": "#599d8c",
                    "on-secondary-fixed-variant": "#773202",
                    "secondary-fixed": "#ffdbca",
                    "tertiary-container": "#b7ae37",
                    "tertiary-fixed": "#f0e669",
                    "secondary-container": "#773202",
                    "on-tertiary-container": "#454100",
                    "on-tertiary": "#353100",
                    "background": "#0a1613",
                    "surface-container-highest": "#2b3734",
                    "surface-container-low": "#121e1b",
                    "surface-dim": "#0a1613",
                    "on-surface-variant": "#bfc9c4",
                    "surface-tint": "#8fd4c1",
                    "surface": "#0a1613",
                   ...