feat: initialize k-tv-frontend with Next.js and Tailwind CSS

- Added package.json with dependencies and scripts for development, build, and linting.
- Created postcss.config.mjs for Tailwind CSS integration.
- Added SVG assets for UI components including file, globe, next, vercel, and window icons.
- Configured TypeScript with tsconfig.json for strict type checking and module resolution.

k-tv-frontend/app/(main)/tv/components/channel-info.tsx

@@ -0,0 +1,62 @@
+interface ChannelInfoProps {
+  channelNumber: number;
+  channelName: string;
+  showTitle: string;
+  showStartTime: string; // "HH:MM"
+  showEndTime: string; // "HH:MM"
+  /** Progress through the current show, 0–100 */
+  progress: number;
+  description?: string;
+}
+
+export function ChannelInfo({
+  channelNumber,
+  channelName,
+  showTitle,
+  showStartTime,
+  showEndTime,
+  progress,
+  description,
+}: ChannelInfoProps) {
+  const clampedProgress = Math.min(100, Math.max(0, progress));
+
+  return (
+    <div className="flex flex-col gap-2 rounded-lg bg-black/60 p-4 backdrop-blur-md w-80">
+      {/* Channel badge */}
+      <div className="flex items-center gap-2">
+        <span className="flex h-7 min-w-9 items-center justify-center rounded bg-white px-1.5 font-mono text-xs font-bold text-black">
+          {channelNumber}
+        </span>
+        <span className="truncate text-sm font-medium text-zinc-300">
+          {channelName}
+        </span>
+      </div>
+
+      {/* Show title */}
+      <p className="text-base font-semibold leading-tight text-white">
+        {showTitle}
+      </p>
+
+      {/* Description */}
+      {description && (
+        <p className="line-clamp-2 text-xs text-zinc-400">{description}</p>
+      )}
+
+      {/* Progress bar */}
+      <div className="flex flex-col gap-1">
+        <div className="h-1 w-full overflow-hidden rounded-full bg-zinc-700">
+          <div
+            className="h-full rounded-full bg-white transition-all duration-500"
+            style={{ width: `${clampedProgress}%` }}
+          />
+        </div>
+        <div className="flex justify-between font-mono text-[10px] text-zinc-500">
+          <span>{showStartTime}</span>
+          <span>{showEndTime}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export type { ChannelInfoProps };