From 7e12d50cb70d303d485380e8329c33f0e2e09048 Mon Sep 17 00:00:00 2001
From: v0 <v0[bot]@users.noreply.github.com>
Date: Tue, 2 Dec 2025 20:36:04 +0000
Subject: [PATCH] feat: add custom solidarity fist icon component

Replace generic hand icon with new custom design in key section.

#VERCEL_SKIP

Co-authored-by: Jeff Emmett <46964190+Jeff-Emmett@users.noreply.github.com>
---
 app/page.tsx                        | 10 +++++++--
 components/solidarity-fist-icon.tsx | 33 +++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 components/solidarity-fist-icon.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 7e69a57..6e881f4 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,6 @@
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
-import { Film, Music, Server, Users, Heart, Rocket, Tv } from "lucide-react"
+import { Film, Music, Server, Users, Heart, Rocket, Tv, Home, FolderGitIcon as SolidarityFistIcon } from "lucide-react"
 import Image from "next/image"
 import { JefflixLogo } from "@/components/jefflix-logo"
 
@@ -99,6 +99,9 @@ export default function JefflixPage() {
         <div className="container mx-auto px-4 py-16 md:py-24">
           <div className="max-w-5xl mx-auto">
             <div className="text-center mb-12">
+              <div className="inline-block p-6 bg-primary/10 rounded-full mb-6">
+                <Home className="h-12 w-12 text-primary" strokeWidth={2.5} />
+              </div>
               <h2 className="text-3xl md:text-3xl font-black text-balance mb-4 font-marker">Why Self-Host?</h2>
               <p className="text-xl text-muted-foreground max-w-2xl mx-auto leading-relaxed">
                 Technology promised abundance, but corporations chose artificial scarcity. Let's build the alternative.
@@ -157,6 +160,9 @@ export default function JefflixPage() {
         <div className="container mx-auto px-4">
           <div className="max-w-4xl mx-auto space-y-12">
             <div className="text-center space-y-4">
+              <div className="inline-block p-6 bg-primary/10 rounded-full mb-2">
+                <SolidarityFistIcon className="h-12 w-12 text-primary" />
+              </div>
               <h2 className="text-3xl md:text-3xl font-black text-balance font-marker">Beyond Digital Feudalism</h2>
               <p className="text-xl text-muted-foreground leading-relaxed">
                 Streaming platforms aren't just bad business—they're architecture for extraction.
@@ -200,7 +206,7 @@ export default function JefflixPage() {
                 <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent" />
                 <div className="absolute bottom-0 left-0 right-0 p-6">
                   <p className="text-white text-xl font-bold text-center font-marker text-shadow">
-                    See through artificial scarcity
+                    See through the illusion - the world is more free than it looks ;P
                   </p>
                 </div>
               </div>
diff --git a/components/solidarity-fist-icon.tsx b/components/solidarity-fist-icon.tsx
new file mode 100644
index 0000000..9ade0b0
--- /dev/null
+++ b/components/solidarity-fist-icon.tsx
@@ -0,0 +1,33 @@
+export function SolidarityFistIcon({ className = "h-12 w-12" }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+    >
+      {/* Wrist base */}
+      <path d="M9 22 L9 16" />
+      <path d="M15 22 L15 16" />
+      {/* Palm/base of fist */}
+      <path
+        d="M7 16 L7 12 C7 11 7.5 10 9 10 L15 10 C16.5 10 17 11 17 12 L17 16 L7 16 Z"
+        fill="currentColor"
+        opacity="0.3"
+      />
+      {/* Index finger */}
+      <rect x="13" y="4" width="2.5" height="7" rx="1" fill="currentColor" />
+      {/* Middle finger */} <rect x="10.75" y="3" width="2.5" height="8" rx="1" fill="currentColor" />
+      {/* Ring finger */}
+      <rect x="8.5" y="4" width="2.5" height="7" rx="1" fill="currentColor" />
+      {/* Pinky finger */}
+      <rect x="6.5" y="5" width="2" height="6" rx="1" fill="currentColor" />
+      {/* Thumb wrapping around */}
+      <path d="M6 12 L4 13 L4 15 C4 16 5 17 6 17 L7 17" fill="currentColor" />
+      <path d="M6 12 L4 13 L4 15 C4 16 5 17 6 17 L7 17" strokeWidth="1.5" />
+    </svg>
+  )
+}