clean up

components.json

@@ -1,14 +1,14 @@
 {
 	"$schema": "https://shadcn-svelte.com/schema.json",
-	"style": "new-york",
+	"style": "default",
 	"tailwind": {
 		"config": "tailwind.config.ts",
 		"css": "src/app.css",
-		"baseColor": "slate"
+		"baseColor": "zinc"
 	},
 	"aliases": {
 		"components": "$lib/components",
 		"utils": "$lib/utils"
 	},
 	"typescript": true
-}
+}

src/app.css

@@ -5,66 +5,66 @@
 @layer base {
 	:root {
 		--background: 0 0% 100%;
-		--foreground: 222.2 84% 4.9%;
+		--foreground: 240 10% 3.9%;
 
-		--muted: 210 40% 96.1%;
-		--muted-foreground: 215.4 16.3% 46.9%;
+		--muted: 240 4.8% 95.9%;
+		--muted-foreground: 240 3.8% 46.1%;
 
 		--popover: 0 0% 100%;
-		--popover-foreground: 222.2 84% 4.9%;
+		--popover-foreground: 240 10% 3.9%;
 
 		--card: 0 0% 100%;
-		--card-foreground: 222.2 84% 4.9%;
+		--card-foreground: 240 10% 3.9%;
 
-		--border: 214.3 31.8% 91.4%;
-		--input: 214.3 31.8% 91.4%;
+		--border: 240 5.9% 90%;
+		--input: 240 5.9% 90%;
 
-		--primary: 222.2 47.4% 11.2%;
-		--primary-foreground: 210 40% 98%;
+		--primary: 240 5.9% 10%;
+		--primary-foreground: 0 0% 98%;
 
-		--secondary: 210 40% 96.1%;
-		--secondary-foreground: 222.2 47.4% 11.2%;
+		--secondary: 240 4.8% 95.9%;
+		--secondary-foreground: 240 5.9% 10%;
 
-		--accent: 210 40% 96.1%;
-		--accent-foreground: 222.2 47.4% 11.2%;
+		--accent: 240 4.8% 95.9%;
+		--accent-foreground: 240 5.9% 10%;
 
-		--destructive: 0 72.2% 50.6%;
-		--destructive-foreground: 210 40% 98%;
+		--destructive: 0 84.2% 60.2%;
+		--destructive-foreground: 0 0% 98%;
 
-		--ring: 222.2 84% 4.9%;
+		--ring: 240 5% 64.9%;
 
 		--radius: 0.5rem;
 	}
 
 	.dark {
-		--background: 222.2 84% 4.9%;
-		--foreground: 210 40% 98%;
+		--background: 240 10% 3.9%;
+		--foreground: 0 0% 98%;
 
-		--muted: 217.2 32.6% 17.5%;
-		--muted-foreground: 215 20.2% 65.1%;
+		--muted: 240 3.7% 15.9%;
+		--muted-foreground: 240 5% 64.9%;
 
-		--popover: 222.2 84% 4.9%;
-		--popover-foreground: 210 40% 98%;
+		--popover: 240 10% 3.9%;
+		--popover-foreground: 0 0% 98%;
 
-		--card: 222.2 84% 4.9%;
-		--card-foreground: 210 40% 98%;
+		--card: 240 10% 3.9%;
+		--card-foreground: 0 0% 98%;
 
-		--border: 217.2 32.6% 17.5%;
-		--input: 217.2 32.6% 17.5%;
+		--border: 240 3.7% 15.9%;
+		--input: 240 3.7% 15.9%;
 
-		--primary: 210 40% 98%;
-		--primary-foreground: 222.2 47.4% 11.2%;
+		--primary: 0 0% 98%;
+		--primary-foreground: 240 5.9% 10%;
 
-		--secondary: 217.2 32.6% 17.5%;
-		--secondary-foreground: 210 40% 98%;
+		--secondary: 240 3.7% 15.9%;
+		--secondary-foreground: 0 0% 98%;
 
-		--accent: 217.2 32.6% 17.5%;
-		--accent-foreground: 210 40% 98%;
+		--accent: 240 3.7% 15.9%;
+		--accent-foreground: 0 0% 98%;
 
 		--destructive: 0 62.8% 30.6%;
-		--destructive-foreground: 210 40% 98%;
+		--destructive-foreground: 0 85.7% 97.3%;
 
-		--ring: 212.7 26.8% 83.9%;
+		--ring: 240 3.7% 15.9%;
 	}
 }
 
@@ -74,5 +74,8 @@
 	}
 	body {
 		@apply bg-background text-foreground;
+		font-feature-settings:
+			'rlig' 1,
+			'calt' 1;
 	}
 }

src/routes/(home)/+page.svelte

@@ -46,7 +46,7 @@
 	}
 </script>
 
-<div class="min-h-screen bg-[#0a0f1a] text-white">
+<div class="min-h-screen">
 	<div class="container mx-auto px-4">
 		<main class="py-16">
 			<div class="mb-12 text-center">
@@ -60,7 +60,7 @@
 				</p>
 			</div>
 
-			<Card class="mx-auto mb-16 max-w-2xl border-none bg-[#1a2332] shadow-lg">
+			<Card class="mx-auto mb-16 max-w-2xl border-none shadow-lg">
 				<CardContent class="p-6">
 					<h2 class="mb-4 text-xl font-semibold">Get Started</h2>
 					<p class="mb-4 text-gray-400">Enter your YouTube video URL below to begin the analysis</p>
@@ -69,12 +69,12 @@
 							type="text"
 							placeholder="Paste your YouTube video URL here..."
 							bind:value={videoUrl}
-							class="flex-grow border-gray-700 bg-[#0a0f1a]"
+							class="flex-grow"
 						/>
 						<Button
 							on:click={handleTranscript}
+							variant="destructive"
 							disabled={transcriptLoading || !videoUrl}
-							class="bg-red-600 hover:bg-red-700"
 						>
 							{#if transcriptLoading}
 								Processing...
@@ -83,7 +83,7 @@
 							{/if}
 						</Button>
 					</div>
-					
+
 					<div class="mt-4 flex items-center text-sm text-gray-400">
 						<AlertCircle class="mr-2 h-4 w-4" />
 						<p>The video must be public and have closed captions available.</p>
@@ -93,7 +93,7 @@
 
 			<div class="grid gap-8 md:grid-cols-3">
 				{#each features as feature}
-					<Card class="border-none bg-[#1a2332]">
+					<Card class="border-none">
 						<CardContent class="p-6">
 							<svelte:component this={feature.icon} class="mb-4 h-10 w-10 text-red-600" />
 							<h3 class="mb-2 text-xl font-semibold">{feature.title}</h3>

src/routes/(main)/dashboard/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import type { PageData } from './$types';
 </script>
 
 <h1>Dashboard</h1>