chore: add social post and demo

index.html

@@ -516,6 +516,105 @@
 			border-radius: 4px;
 			font-size: 0.875em;
 		}
+
+		/* Demo & Social Section */
+		.demo-content {
+			max-width: 800px;
+			margin: 0 auto;
+		}
+
+		.demo-video-section {
+			margin-bottom: 2rem;
+		}
+
+		.demo-video-label {
+			font-size: 0.75rem;
+			color: var(--color-text-tertiary);
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+			margin-bottom: 0.75rem;
+		}
+
+		.demo-social-section {
+			text-align: center;
+			padding: 1.5rem;
+			background: var(--color-surface);
+			border: 1px solid var(--color-border-subtle);
+			border-radius: 8px;
+		}
+
+		.demo-social-label {
+			font-size: 0.875rem;
+			color: var(--color-text-secondary);
+			margin-bottom: 1rem;
+		}
+
+		/* Video Container */
+		.video-container {
+			position: relative;
+			width: 100%;
+			padding-bottom: 56.25%;
+			height: 0;
+			overflow: hidden;
+			border-radius: 6px;
+			background: var(--color-bg);
+			border: 1px solid var(--color-border-subtle);
+		}
+
+		.video-container iframe {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			border: none;
+		}
+
+		.video-placeholder {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			color: var(--color-text-tertiary);
+			font-size: 0.875rem;
+		}
+
+		.video-placeholder-icon {
+			font-size: 3rem;
+			margin-bottom: 0.5rem;
+		}
+
+		/* Social Link */
+		.social-link {
+			display: inline-flex;
+			align-items: center;
+			gap: 0.5rem;
+			color: var(--color-accent);
+			text-decoration: none;
+			font-size: 0.875rem;
+			padding: 0.75rem 1.25rem;
+			border: 1px solid var(--color-accent);
+			border-radius: 6px;
+			transition: all 0.15s ease;
+		}
+
+		.social-link:hover {
+			background: var(--color-accent-subtle);
+			transform: translateY(-2px);
+		}
+
+		.social-placeholder {
+			color: var(--color-text-tertiary);
+			font-size: 0.875rem;
+			padding: 0.75rem 1.25rem;
+			border: 1px dashed var(--color-border);
+			border-radius: 6px;
+		}
 	</style>
 </head>
 
@@ -557,6 +656,38 @@
 			</div>
 		</section>
 
+		<!-- Demo & Social -->
+		<section id="demo">
+			<div class="container">
+				<h2 class="section-title">See it in action</h2>
+				<p class="section-subtitle">
+					Watch the demo and follow along on social media.
+				</p>
+
+				<div class="demo-content">
+					<!-- Video Demo -->
+					<div class="demo-video-section">
+						<div class="demo-video-label">Demo Video</div>
+						<div class="video-container">
+							<iframe width="560" height="315"
+								src="https://www.youtube.com/embed/hP_-wTk-yTA?si=iFMJUXNIQrRDE176"
+								title="YouTube video player" frameborder="0"
+								allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+								referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+						</div>
+					</div>
+
+					<!-- Social Post -->
+					<div class="demo-social-section">
+						<div class="demo-social-label">Follow the announcement</div>
+						<a href="https://bsky.app/profile/paolo.ricciuti.me/post/3m6aq3eeirk2i" class="social-link">
+							View social post &#8594;
+						</a>
+					</div>
+				</div>
+			</div>
+		</section>
+
 		<!-- Features -->
 		<section id="features">
 			<div class="container">
@@ -605,10 +736,9 @@
 					</div>
 					<div class="feature-card">
 						<div class="feature-icon">&#9889;</div>
-						<h3 class="feature-title">Instant Access</h3>
+						<h3 class="feature-title">Dynamic variable extraction</h3>
 						<p class="feature-description">
-							No installation required. Deploy once and access your prompts from anywhere via the web
-							interface.
+							Just use <span class="variable">{{variables}}</span> in your prompt, we do the rest.
 						</p>
 					</div>
 				</div>