knuthtimo-lab
1a85f0eb2d
Sets up the project structure with Vite, React, and essential libraries like GSAP and Framer Motion. Configures Tailwind CSS for styling, including dark mode and custom color schemes. Includes basic component structure for the application, laying the groundwork for UI development.
86 lines
3.1 KiB
HTML
86 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" class="dark">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Bay Area Affiliates, Inc. - Modern IT Solutions</title>
|
|
|
|
<!-- Fonts -->
|
|
<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=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,typography"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: "#FFFFFF",
|
|
"background-light": "#F3F4F6",
|
|
"background-dark": "#0a0a0a",
|
|
"surface-dark": "#121212",
|
|
"text-muted": "#888888",
|
|
},
|
|
fontFamily: {
|
|
display: ['"Space Grotesk"', 'sans-serif'],
|
|
sans: ['"Inter"', 'sans-serif'],
|
|
},
|
|
borderRadius: {
|
|
DEFAULT: "4px",
|
|
'lg': "8px",
|
|
'xl': "12px",
|
|
},
|
|
backgroundImage: {
|
|
'grain': "url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22 opacity=%220.05%22/%3E%3C/svg%3E')",
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style>
|
|
html {
|
|
height: auto;
|
|
overflow-y: auto;
|
|
}
|
|
body {
|
|
background-color: #0a0a0a;
|
|
color: white;
|
|
overflow-x: hidden;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
}
|
|
.lenis.lenis-smooth {
|
|
scroll-behavior: auto !important;
|
|
}
|
|
.lenis.lenis-smooth [data-lenis-prevent] {
|
|
overscroll-behavior: contain;
|
|
}
|
|
.lenis.lenis-stopped {
|
|
overflow: hidden;
|
|
}
|
|
.lenis.lenis-scrolling iframe {
|
|
pointer-events: none;
|
|
}
|
|
</style>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"react": "https://esm.sh/react@^19.2.3",
|
|
"react-dom/": "https://esm.sh/react-dom@^19.2.3/",
|
|
"react/": "https://esm.sh/react@^19.2.3/",
|
|
"framer-motion": "https://esm.sh/framer-motion@^12.26.2",
|
|
"gsap": "https://esm.sh/gsap@^3.14.2",
|
|
"gsap/": "https://esm.sh/gsap@^3.14.2/",
|
|
"@studio-freight/lenis": "https://esm.sh/@studio-freight/lenis@^1.0.42"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-background-light dark:bg-background-dark text-gray-900 dark:text-white font-sans antialiased selection:bg-white selection:text-black transition-colors duration-300">
|
|
<div id="root"></div>
|
|
</body>
|
|
</html> |