change ui

index.html

@@ -49,13 +49,22 @@
 						<span class="tag">⚡ Real-time Detection</span>
 						<span class="tag">👾 LLM</span>
 						<span class="tag">🔈 TTS</span>
-						<span class="tag">😌 Personalities</span>
+						<span class="tag">😌 9 Personalities</span>
 						<span class="tag">⚙️ Customizable</span>
 						<span class="tag">🔒 100% Local Mode or API</span>
 					</div>
 
-					<div class="hero-tech">
-						<div class="hero-tech-label">Built with</div>
+				</div>
+
+				<div class="hero-right">
+					<div style="border-radius: 16px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); margin-top: 5rem;">
+						<video controls autoplay muted loop style="width: 100%; display: block;">
+							<source src="quick_demo.mp4" type="video/mp4">
+							Your browser does not support the video tag.
+						</video>
+					</div>
+
+					<div class="hero-tech" style="margin-top: 1.5rem;">
 						<div class="hero-tech-stack">
 							<span class="tech-pill">YOLO26n</span>
 							<span class="tech-pill">OpenCV</span>
@@ -65,19 +74,6 @@
 						</div>
 					</div>
 				</div>
-
-				<div class="hero-right">
-					<div class="callout-box">
-						<div class="callout-icon">🎉</div>
-						<h2 class="callout-title">No Limits.<br>No Sign-ups.<br>No Barriers.</h2>
-						<p class="callout-text">
-							The app is <strong>fully functional without any API keys</strong>. Everyone can try it immediately with local detection, pre-written lines, unlimited TTS, and all 9 personalities.
-						</p>
-						<p class="callout-text" style="margin-top: 1rem; font-size: 0.95rem;">
-							APIs are purely optional for dynamic LLM responses or premium voices.
-						</p>
-					</div>
-				</div>
 			</div>
 		</div>
 	</section>

style.css

@@ -46,7 +46,7 @@ body {
 .container {
 	max-width: 1200px;
 	margin: 0 auto;
-	padding: 0 2rem;
+	padding: 0 1rem;
 }
 
 /* Decorative Background */
@@ -162,7 +162,7 @@ body::after {
 
 /* Hero Section */
 .hero-section {
-	padding: 3rem 0 5rem;
+	padding: 3rem 0 3rem;
 	position: relative;
 }
 
@@ -170,7 +170,7 @@ body::after {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
 	gap: 3rem;
-	align-items: center;
+	align-items: start;
 }
 
 .hero-left {
@@ -179,8 +179,9 @@ body::after {
 
 .hero-right {
 	display: flex;
-	align-items: center;
-	justify-content: center;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 1.5rem;
 }
 
 .hero-label {
@@ -224,7 +225,7 @@ body::after {
 }
 
 .hero-description {
-	font-size: 1.25rem;
+	font-size: 1.1rem;
 	line-height: 1.7;
 	color: var(--text-body);
 	max-width: 600px;
@@ -239,7 +240,7 @@ body::after {
 }
 
 .tag {
-	padding: 0.6rem 1.25rem;
+	padding: 0.5rem 0.5rem;
 	background: var(--bg-card);
 	border: 2px solid var(--border-soft);
 	border-radius: 100px;
@@ -278,7 +279,7 @@ body::after {
 }
 
 .tech-pill {
-	padding: 0.5rem 1rem;
+	padding: 0.5rem 0.5rem;
 	background: linear-gradient(135deg, rgba(255, 107, 74, 0.1), rgba(155, 126, 232, 0.08));
 	border: 1px solid rgba(255, 107, 74, 0.3);
 	border-radius: 100px;
@@ -296,7 +297,7 @@ body::after {
 
 /* Section Styles */
 section {
-	padding: 5rem 0;
+	padding: 3rem 0;
 }
 
 .section-label {