ohcnetwork · nandu-99 · Nov 12, 2025
diff --git a/public/logos/yt-logo-red.svg b/public/logos/yt-logo-red.svg
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import '@/styles/tailwind.css'
 import type { Metadata } from 'next'
+import localFont from 'next/font/local'
 
 import { Bricolage_Grotesque } from 'next/font/google'
 
@@ -9,6 +10,33 @@ const bricolage = Bricolage_Grotesque({
   variable: '--font-bricolage',
 })
 
+const switzer = localFont({
+  src: [
+    {
+      path: '../fonts/Switzer-Regular.woff2',
+      weight: '400',
+      style: 'normal',
+    },
+    {
+      path: '../fonts/Switzer-Medium.woff2',
+      weight: '500',
+      style: 'normal',
+    },
+    {
+      path: '../fonts/Switzer-Semibold.woff2',
+      weight: '600',
+      style: 'normal',
+    },
+    {
+      path: '../fonts/Switzer-Bold.woff2',
+      weight: '700',
+      style: 'normal',
+    },
+  ],
+  variable: '--font-switzer',
+  display: 'swap',
+})
+
 export const metadata: Metadata = {
   title: {
     template: '%s - Open Healthcare Network',
@@ -58,12 +86,8 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en" className={`${bricolage.variable} antialiased`}>
+    <html lang="en" className={`${bricolage.variable} ${switzer.variable} antialiased`}>
       <head>
-        <link
-          rel="stylesheet"
-          href="https://api.fontshare.com/css?f%5B%5D=switzer@400,500,600,700&amp;display=swap"
-        />
         <link
           rel="alternate"
           type="application/rss+xml"

diff --git a/src/components/youtube-video.tsx b/src/components/youtube-video.tsx
@@ -1,5 +1,9 @@
 'use client'
 
+import { useState } from 'react'
+import Image from 'next/image'
+import { Button } from './button'
+
 interface YouTubeVideoProps {
   videoId: string
   title: string
@@ -15,18 +19,50 @@ export function YouTubeVideo({
   width = 560,
   height = 315,
 }: YouTubeVideoProps) {
+  const [isLoaded, setIsLoaded] = useState(false)
+
+  const handleClick = () => {
+    setIsLoaded(true)
+  }
+
   return (
     <div className={`relative w-full ${className}`}>
       <div className="relative w-full" style={{ paddingBottom: '56.25%' }}>
-        <iframe
-          src={`https://www.youtube.com/embed/${videoId}`}
-          title={title}
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          allowFullScreen
-          className="absolute top-0 left-0 h-full w-full rounded-lg"
-          width={width}
-          height={height}
-        />
+        {!isLoaded ? (
+          <Button
+            variant="secondary"
+            onClick={handleClick}
+            className="absolute top-0 left-0 w-full h-full cursor-pointer rounded-lg overflow-hidden group"
+            aria-label={`Play ${title}`}
+          >
+            <Image
+              src={`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`}
+              alt={title}
+              fill
+              className="object-cover"
+            />
+
+            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+              <Image
+                src="/logos/yt-logo-red.svg"
+                alt="Play"
+                width={80}
+                height={80}
+                className="w-12 h-12 md:w-20 md:h-20 group-hover:scale-110 transition-transform duration-200"
+              />
+            </div>
+          </Button>
+        ) : (
+          <iframe
+            src={`https://www.youtube.com/embed/${videoId}?autoplay=1`}
+            title={title}
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+            className="absolute top-0 left-0 h-full w-full rounded-lg"
+            width={width}
+            height={height}
+          />
+        )}
       </div>
     </div>
   )

diff --git a/src/fonts/Switzer-Bold.woff2 b/src/fonts/Switzer-Bold.woff2
diff --git a/src/fonts/Switzer-Medium.woff2 b/src/fonts/Switzer-Medium.woff2
diff --git a/src/fonts/Switzer-Regular.woff2 b/src/fonts/Switzer-Regular.woff2
diff --git a/src/fonts/Switzer-Semibold.woff2 b/src/fonts/Switzer-Semibold.woff2
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -1,7 +1,7 @@
 @import 'tailwindcss';
 
 @theme {
-  --font-sans: Switzer, system-ui, sans-serif;
+  --font-sans: var(--font-switzer);
   --font-display: var(--font-bricolage);
 
   --radius-4xl: 2rem;