Initial commit: Synapse OS v1.0

.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+.env
+.env.server
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

DEPLOY.md

@@ -0,0 +1,45 @@
+# Deploy Synapse OS
+
+Poiché l'applicazione ha due componenti (Frontend React e Backend Stripe Node.js), la soluzione migliore e gratuita è usare due servizi separati.
+
+## 1. Backend (Stripe Server) -> Hugging Face Spaces
+Il servizio pagamenti vive qui.
+
+1.  Vai su [Hugging Face Spaces](https://huggingface.co/spaces) -> **Create new Space**.
+    *   **Space Name**: `synapse-backend` (o simile).
+    *   **SDK**: **Docker** (Molto importante! Non scegliere "Static" o "Gradio").
+    *   **License**: MIT.
+2.  Clona il repo dello Space sul tuo PC o usa l'interfaccia web "Files" per caricare SOLO questi 3 file:
+    *   `server.js`
+    *   `package.json`
+    *   `Dockerfile` (l'ho appena creato per te)
+3.  Vai su **Settings** dello Space -> **Variables and secrets**.
+    *   Crea un **New Secret**: `STRIPE_SECRET_KEY` con valore `sk_test_...` (prendilo dal tuo .env).
+4.  Attendi che lo Space diventi "Running". Copia l'URL in alto (es. `https://huggingface.co/spaces/tuonome/synapse-backend` -> che diventa un link diretto tipo `https://tuonome-synapse-backend.hf.space`).
+
+**Importante**: L'URL API sarà `https://[TUO-SPACE].hf.space/create-payment-intent`. Usalo nel passaggio sotto.
+
+## 2. Frontend (React Site) -> Vercel / Netlify
+Il sito web vero e proprio.
+
+1.  Nel file `src/App.jsx`, cerca la riga dove facciamo la `fetch` al server locale:
+    ```javascript
+    // MODIFICA QUESTO:
+    fetch('http://localhost:4242/create-payment-intent', ...)
+    
+    // CON QUESTO (L'URL che ti ha dato Render):
+    fetch('https://synapse-backend.onrender.com/create-payment-intent', ...)
+    ```
+2.  Crea un repo GitHub "synapse-frontend".
+3.  Vai su [Vercel](https://vercel.com) -> Add New Project.
+4.  Collega il repo.
+5.  Inserisci le Variabili d'Ambiente (da `.env`):
+    *   `VITE_SUPABASE_URL`
+    *   `VITE_SUPABASE_ANON_KEY`
+    *   `VITE_STRIPE_PUBLISHABLE_KEY`
+    *   `VITE_OPENROUTER_API_KEY`
+    *   `VITE_YOUTUBE_API_KEY`
+6.  Deploy.
+
+## Alternativa Rapida (Solo Frontend)
+Se non vuoi deployare il server, i pagamenti NON funzioneranno online, ma tutto il resto (AI, Auth) sì. In quel caso basta fare il punto 2 su Vercel.

Dockerfile

@@ -0,0 +1,18 @@
+FROM node:18
+
+WORKDIR /app
+
+# Copy package files
+COPY package.json ./
+
+# Install ONLY dependencies needed for the server
+RUN npm install express cors stripe dotenv
+
+# Copy server code
+COPY server.js .
+
+# Expose Hugging Face default port
+EXPOSE 7860
+
+# Run the server
+CMD ["node", "server.js"]

README.md

@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

eslint.config.js

@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])

index.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="it">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>SYNAPSE OS — The Ultimate Student Interface</title>
+  <meta name="description"
+    content="L'interfaccia neurale definitiva per lo studio. Synapse OS trasforma qualsiasi argomento in conoscenza cristallina attraverso l'intelligenza artificiale." />
+  <meta name="keywords"
+    content="studio, AI, intelligenza artificiale, apprendimento, scuola, università, neural, synapse" />
+  <meta name="theme-color" content="#030014" />
+
+  <!-- Google Fonts: Inter (Black) + JetBrains Mono -->
+  <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@400;500;600;700;900&family=JetBrains+Mono:wght@400;500;600&display=swap"
+    rel="stylesheet">
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "landing-page",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "server": "node server.js"
+  },
+  "dependencies": {
+    "@stripe/react-stripe-js": "^5.6.0",
+    "@stripe/stripe-js": "^8.7.0",
+    "@supabase/supabase-js": "^2.93.3",
+    "cors": "^2.8.6",
+    "dotenv": "^17.2.3",
+    "express": "^5.2.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "stripe": "^20.3.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "lucide-react": "^0.563.0",
+    "tailwindcss": "^4.1.18",
+    "vite": "^7.2.4"
+  }
+}

server.js

@@ -0,0 +1,37 @@
+import express from 'express';
+import cors from 'cors';
+import Stripe from 'stripe';
+import dotenv from 'dotenv';
+
+dotenv.config();
+
+const app = express();
+const stripe = new Stripe(process.env.STRIPE_SECRET_KEY);
+
+app.use(cors());
+app.use(express.json());
+
+app.post('/create-payment-intent', async (req, res) => {
+    try {
+        const paymentIntent = await stripe.paymentIntents.create({
+            amount: 999, // €9.99
+            currency: 'eur',
+            automatic_payment_methods: {
+                enabled: true,
+            },
+        });
+
+        res.send({
+            clientSecret: paymentIntent.client_secret,
+        });
+    } catch (e) {
+        res.status(400).send({
+            error: {
+                message: e.message,
+            }
+        });
+    }
+});
+
+const PORT = process.env.PORT || 4242;
+app.listen(PORT, () => console.log(`Node server listening on port ${PORT}!`));

src/index.css

@@ -0,0 +1,615 @@
+@import "tailwindcss";
+
+/* ============================================
+   SYNAPSE OS - Neural Glass Design System
+   ============================================ */
+
+:root {
+  /* Deep Space Palette */
+  --synapse-void: #030014;
+  --synapse-deep: #020617;
+  --synapse-surface: #0f172a;
+
+  /* Neon Accent Colors */
+  --synapse-violet: #8B5CF6;
+  --synapse-violet-glow: rgba(139, 92, 246, 0.5);
+  --synapse-cyan: #06B6D4;
+  --synapse-cyan-glow: rgba(6, 182, 212, 0.5);
+  --synapse-rose: #F43F5E;
+  --synapse-rose-glow: rgba(244, 63, 94, 0.5);
+
+  /* Neutral */
+  --synapse-zinc: #e4e4e7;
+  --synapse-dark: #18181b;
+
+  /* Fonts */
+  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
+}
+
+/* ============================================
+   BASE STYLES
+   ============================================ */
+
+@layer base {
+  * {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    font-family: var(--font-display);
+    background: radial-gradient(ellipse at 50% 0%, var(--synapse-surface) 0%, var(--synapse-deep) 50%, var(--synapse-void) 100%);
+    color: var(--synapse-zinc);
+    overflow-x: hidden;
+    line-height: 1.6;
+    min-height: 100vh;
+  }
+
+  /* Digital Noise Overlay */
+  body::before {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 9999;
+    opacity: 0.03;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+  }
+
+  /* Scrollbar */
+  ::-webkit-scrollbar {
+    width: 4px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--synapse-void);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, var(--synapse-violet), var(--synapse-cyan));
+    border-radius: 2px;
+  }
+
+  /* Selection */
+  ::selection {
+    background: var(--synapse-violet);
+    color: white;
+  }
+}
+
+/* ============================================
+   TYPOGRAPHY
+   ============================================ */
+
+.font-display {
+  font-family: var(--font-display);
+}
+
+.font-mono {
+  font-family: var(--font-mono);
+}
+
+.text-headline {
+  font-family: var(--font-display);
+  font-weight: 900;
+  letter-spacing: -0.03em;
+  line-height: 1.05;
+}
+
+.text-terminal {
+  font-family: var(--font-mono);
+  font-weight: 500;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: rgba(255, 255, 255, 0.5);
+}
+
+/* ============================================
+   GLASSMORPHISM 2.0
+   ============================================ */
+
+@layer utilities {
+  .glass {
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  .glass-strong {
+    background: rgba(255, 255, 255, 0.06);
+    backdrop-filter: blur(40px);
+    -webkit-backdrop-filter: blur(40px);
+    border: 1px solid rgba(255, 255, 255, 0.12);
+  }
+
+  .glass-panel {
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
+    backdrop-filter: blur(30px);
+    -webkit-backdrop-filter: blur(30px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow:
+      0 8px 32px rgba(0, 0, 0, 0.3),
+      inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  }
+
+  /* Spotlight border effect */
+  .glass-spotlight {
+    position: relative;
+    background: rgba(255, 255, 255, 0.03);
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    transition: all 0.3s ease;
+  }
+
+  .glass-spotlight:hover {
+    border-color: rgba(139, 92, 246, 0.4);
+    box-shadow:
+      0 0 30px rgba(139, 92, 246, 0.15),
+      0 8px 32px rgba(0, 0, 0, 0.3);
+  }
+
+  /* ============================================
+     GRADIENTS & COLORS
+     ============================================ */
+
+  .gradient-text {
+    background: linear-gradient(135deg, var(--synapse-violet) 0%, var(--synapse-cyan) 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .gradient-bg {
+    background: linear-gradient(135deg, var(--synapse-violet) 0%, var(--synapse-cyan) 100%);
+  }
+
+  .gradient-border {
+    position: relative;
+    background: var(--synapse-void);
+  }
+
+  .gradient-border::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    padding: 1px;
+    border-radius: inherit;
+    background: linear-gradient(135deg, var(--synapse-violet), var(--synapse-cyan));
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+  }
+
+  /* ============================================
+     GLOW EFFECTS
+     ============================================ */
+
+  .glow-violet {
+    box-shadow:
+      0 0 20px var(--synapse-violet-glow),
+      0 0 40px rgba(139, 92, 246, 0.3),
+      0 0 60px rgba(139, 92, 246, 0.15);
+  }
+
+  .glow-cyan {
+    box-shadow:
+      0 0 20px var(--synapse-cyan-glow),
+      0 0 40px rgba(6, 182, 212, 0.3);
+  }
+
+  .glow-rose {
+    box-shadow:
+      0 0 20px var(--synapse-rose-glow),
+      0 0 40px rgba(244, 63, 94, 0.3);
+  }
+
+  .text-glow {
+    text-shadow:
+      0 0 20px var(--synapse-violet-glow),
+      0 0 40px rgba(139, 92, 246, 0.3),
+      0 0 80px rgba(6, 182, 212, 0.2);
+  }
+
+  .text-glow-cyan {
+    text-shadow:
+      0 0 20px var(--synapse-cyan-glow),
+      0 0 40px rgba(6, 182, 212, 0.3);
+  }
+
+  /* ============================================
+     COLOR UTILITIES
+     ============================================ */
+
+  .text-violet {
+    color: var(--synapse-violet);
+  }
+
+  .text-cyan {
+    color: var(--synapse-cyan);
+  }
+
+  .text-rose {
+    color: var(--synapse-rose);
+  }
+
+  .text-zinc {
+    color: var(--synapse-zinc);
+  }
+
+  .bg-void {
+    background-color: var(--synapse-void);
+  }
+
+  .bg-dark {
+    background-color: var(--synapse-dark);
+  }
+
+  .border-violet {
+    border-color: var(--synapse-violet);
+  }
+
+  .border-cyan {
+    border-color: var(--synapse-cyan);
+  }
+
+  /* ============================================
+     ANIMATIONS
+     ============================================ */
+
+  .animate-float {
+    animation: float 6s ease-in-out infinite;
+  }
+
+  .animate-pulse-slow {
+    animation: pulse-slow 4s ease-in-out infinite;
+  }
+
+  .animate-pulse-glow {
+    animation: pulse-glow 2s ease-in-out infinite;
+  }
+
+  .animate-shimmer {
+    animation: shimmer 2s linear infinite;
+    background-size: 200% 100%;
+  }
+
+  .animate-typewriter {
+    overflow: hidden;
+    border-right: 2px solid var(--synapse-cyan);
+    white-space: nowrap;
+    animation:
+      typing 3.5s steps(40, end),
+      blink-caret 0.75s step-end infinite;
+  }
+
+  .animate-scan {
+    animation: scan 8s linear infinite;
+  }
+
+  .animate-ripple {
+    animation: ripple 0.6s ease-out;
+  }
+
+  .animate-node-pulse {
+    animation: node-pulse 3s ease-in-out infinite;
+  }
+
+  /* Fade In Up */
+  .fade-in-up {
+    opacity: 0;
+    transform: translateY(40px);
+    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .fade-in-up.visible {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  /* Stagger delays */
+  .delay-100 {
+    animation-delay: 100ms;
+  }
+
+  .delay-200 {
+    animation-delay: 200ms;
+  }
+
+  .delay-300 {
+    animation-delay: 300ms;
+  }
+
+  .delay-400 {
+    animation-delay: 400ms;
+  }
+
+  .delay-500 {
+    animation-delay: 500ms;
+  }
+}
+
+/* ============================================
+   KEYFRAME ANIMATIONS
+   ============================================ */
+
+@keyframes float {
+
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes pulse-slow {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes pulse-glow {
+
+  0%,
+  100% {
+    box-shadow:
+      0 0 20px var(--synapse-violet-glow),
+      0 0 40px rgba(139, 92, 246, 0.2);
+  }
+
+  50% {
+    box-shadow:
+      0 0 30px var(--synapse-violet-glow),
+      0 0 60px rgba(139, 92, 246, 0.4),
+      0 0 80px rgba(6, 182, 212, 0.2);
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: -200% 0;
+  }
+
+  100% {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes typing {
+  from {
+    width: 0;
+  }
+
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes blink-caret {
+
+  from,
+  to {
+    border-color: transparent;
+  }
+
+  50% {
+    border-color: var(--synapse-cyan);
+  }
+}
+
+@keyframes scan {
+  0% {
+    transform: translateY(-100%);
+  }
+
+  100% {
+    transform: translateY(100vh);
+  }
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+
+  100% {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
+@keyframes node-pulse {
+
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+
+  50% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+}
+
+@keyframes hud-flicker {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  92% {
+    opacity: 1;
+  }
+
+  93% {
+    opacity: 0.3;
+  }
+
+  94% {
+    opacity: 1;
+  }
+
+  96% {
+    opacity: 0.5;
+  }
+
+  97% {
+    opacity: 1;
+  }
+}
+
+@keyframes border-glow {
+
+  0%,
+  100% {
+    border-color: rgba(139, 92, 246, 0.3);
+  }
+
+  50% {
+    border-color: rgba(139, 92, 246, 0.6);
+  }
+}
+
+/* ============================================
+   3D PERSPECTIVE SYSTEM
+   ============================================ */
+
+.perspective-container {
+  perspective: 1000px;
+  perspective-origin: center;
+}
+
+.preserve-3d {
+  transform-style: preserve-3d;
+}
+
+.card-3d {
+  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.card-3d:hover {
+  transform: translateZ(20px) rotateX(2deg) rotateY(-2deg);
+}
+
+/* ============================================
+   HUD ELEMENTS
+   ============================================ */
+
+.hud-line {
+  position: absolute;
+  background: linear-gradient(90deg, transparent 0%, var(--synapse-violet) 50%, transparent 100%);
+  height: 1px;
+  opacity: 0.3;
+}
+
+.hud-corner {
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-color: rgba(139, 92, 246, 0.4);
+  border-style: solid;
+}
+
+.hud-corner-tl {
+  top: 20px;
+  left: 20px;
+  border-width: 1px 0 0 1px;
+}
+
+.hud-corner-tr {
+  top: 20px;
+  right: 20px;
+  border-width: 1px 1px 0 0;
+}
+
+.hud-corner-bl {
+  bottom: 20px;
+  left: 20px;
+  border-width: 0 0 1px 1px;
+}
+
+.hud-corner-br {
+  bottom: 20px;
+  right: 20px;
+  border-width: 0 1px 1px 0;
+}
+
+/* ============================================
+   INTERACTIVE ELEMENTS
+   ============================================ */
+
+.btn-neon {
+  position: relative;
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.btn-neon::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.btn-neon:hover::before {
+  opacity: 1;
+}
+
+.btn-neon:active {
+  transform: scale(0.98);
+}
+
+/* Input HUD Style */
+.input-hud {
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(139, 92, 246, 0.3);
+  transition: all 0.3s ease;
+}
+
+.input-hud:focus {
+  border-color: var(--synapse-violet);
+  box-shadow:
+    0 0 20px var(--synapse-violet-glow),
+    inset 0 0 20px rgba(139, 92, 246, 0.05);
+  outline: none;
+}
+
+/* ============================================
+   RESPONSIVE UTILITIES
+   ============================================ */
+
+@media (max-width: 768px) {
+  .text-headline {
+    letter-spacing: -0.02em;
+  }
+
+  .hud-corner {
+    display: none;
+  }
+}

src/lib/supabase.js

@@ -0,0 +1,8 @@
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+export const supabase = supabaseUrl && supabaseAnonKey
+    ? createClient(supabaseUrl, supabaseAnonKey)
+    : null;

src/main.jsx

@@ -0,0 +1,16 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+// Add Inter font
+const link = document.createElement('link');
+link.href = 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap';
+link.rel = 'stylesheet';
+document.head.appendChild(link);
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})