Update README.md

README.md

@@ -1,10 +1,151 @@
 ---
 title: README
-emoji: 📊
+emoji: 🌖
 colorFrom: purple
 colorTo: purple
 sdk: static
 pinned: false
 ---
+<head>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            background-color: #010409;
+            font-family: sans-serif;
+        }
+        .banner-container {
+            width: 95%;
+            max-width: 1000px;
+            box-shadow: 0 20px 50px rgba(0,0,0,0.5);
+            border-radius: 12px;
+            overflow: hidden;
+        }
+        .text-main {
+            font-family: 'Google Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+            font-weight: 700;
+            text-anchor: middle;
+            fill: white;
+            pointer-events: none;
+        }
+        .emoji-text { 
+            user-select: none; 
+        }
+    </style>
+</head>
+<body>
+    <div class="banner-container">
+        <svg viewBox="0 0 900 300" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" style="width: 100%; height: auto; display: block; background: #020617;">
+          <defs>
+            <radialGradient id="planetGradient" cx="50%" cy="50%" r="50%">
+              <stop offset="0%" stop-color="#3b82f6" />
+              <stop offset="70%" stop-color="#1e3a8a" />
+              <stop offset="100%" stop-color="#020617" />
+            </radialGradient>
+            <filter id="planetGlow">
+              <feGaussianBlur stdDeviation="20" />
+            </filter>
+          </defs>
+          <g id="static-stars">
+            <text x="50" y="40" font-size="12" fill="#94a3b8" opacity="0.8" class="emoji-text">✦</text>
+            <text x="820" y="60" font-size="8" fill="#94a3b8" opacity="0.4" class="emoji-text">✦</text>
+            <text x="150" y="250" font-size="14" fill="#94a3b8" opacity="0.6" class="emoji-text">✦</text>
+            <text x="740" y="240" font-size="10" fill="#94a3b8" opacity="0.3" class="emoji-text">✦</text>
+            <text x="450" y="25" font-size="12" fill="#94a3b8" opacity="0.7" class="emoji-text">✦</text>
+            <text x="250" y="70" font-size="7" fill="#94a3b8" opacity="0.2" class="emoji-text">✦</text>
+            <text x="650" y="50" font-size="9" fill="#94a3b8" opacity="0.5" class="emoji-text">✦</text>
+            <text x="50" y="180" font-size="10" fill="#94a3b8" opacity="0.4" class="emoji-text">✦</text>
+            <text x="850" y="200" font-size="8" fill="#94a3b8" opacity="0.6" class="emoji-text">✦</text>
+            <text x="320" y="270" font-size="11" fill="#94a3b8" opacity="0.3" class="emoji-text">✦</text>
+            <text x="580" y="275" font-size="9" fill="#94a3b8" opacity="0.5" class="emoji-text">✦</text>
+          </g>
+          <g transform="translate(450, 150)">
+            <circle r="125" fill="url(#planetGradient)" filter="url(#planetGlow)" opacity="0.4" />
+            <circle r="85" fill="url(#planetGradient)" />
+          </g>
+          <g>
+            <path id="p-bolt" fill="none" d="M 10,150 A 440,140 0 1 1 890,150 A 440,140 0 1 1 10,150 Z" />
+            <text class="emoji-text" font-size="32" text-anchor="middle" dominant-baseline="middle">
+              ⚡
+              <animateMotion dur="35s" repeatCount="indefinite" rotate="0"><mpath href="#p-bolt" /></animateMotion>
+              <animate attributeName="opacity" values="1;1;1;0.1;1" dur="35s" repeatCount="indefinite" />
+              <animate attributeName="font-size" values="32;36;32;15;32" dur="35s" repeatCount="indefinite" />
+            </text>
+          </g>
+          <g>
+            <path id="p-laptop" fill="none" d="M 60,150 A 390,125 0 1 1 840,150 A 390,125 0 1 1 60,150 Z" />
+            <text class="emoji-text" font-size="30" text-anchor="middle" dominant-baseline="middle">
+              💻
+              <animateMotion dur="28s" repeatCount="indefinite" rotate="0" begin="-5s"><mpath href="#p-laptop" /></animateMotion>
+              <animate attributeName="opacity" values="1;1;1;0.1;1" dur="28s" repeatCount="indefinite" begin="-5s" />
+              <animate attributeName="font-size" values="30;34;30;15;30" dur="28s" repeatCount="indefinite" begin="-5s" />
+            </text>
+          </g>
+          <g>
+            <path id="p-robot" fill="none" d="M 110,150 A 340,105 0 1 1 790,150 A 340,105 0 1 1 110,150 Z" />
+            <text class="emoji-text" font-size="32" text-anchor="middle" dominant-baseline="middle">
+              🤖
+              <animateMotion dur="22s" repeatCount="indefinite" rotate="0" begin="-10s"><mpath href="#p-robot" /></animateMotion>
+              <animate attributeName="opacity" values="1;1;1;0.1;1" dur="22s" repeatCount="indefinite" begin="-10s" />
+              <animate attributeName="font-size" values="32;36;32;18;32" dur="22s" repeatCount="indefinite" begin="-10s" />
+            </text>
+          </g>
+          <g>
+            <path id="p-hug" fill="none" d="M 160,150 A 290,95 0 1 1 740,150 A 290,95 0 1 1 160,150 Z" />
+            <text class="emoji-text" font-size="32" text-anchor="middle" dominant-baseline="middle">
+              🤗
+              <animateMotion dur="18s" repeatCount="indefinite" rotate="0" begin="-15s"><mpath href="#p-hug" /></animateMotion>
+              <animate attributeName="opacity" values="1;1;1;0.1;1" dur="18s" repeatCount="indefinite" begin="-15s" />
+              <animate attributeName="font-size" values="32;36;32;18;32" dur="18s" repeatCount="indefinite" begin="-15s" />
+            </text>
+          </g>
+          <g>
+            <path id="p-phone" fill="none" d="M 220,150 A 230,80 0 1 1 680,150 A 230,80 0 1 1 220,150 Z" />
+            <text class="emoji-text" font-size="30" text-anchor="middle" dominant-baseline="middle">
+              📱
+              <animateMotion dur="15s" repeatCount="indefinite" rotate="0" begin="-3s"><mpath href="#p-phone" /></animateMotion>
+              <animate attributeName="opacity" values="1;1;1;0.1;1" dur="15s" repeatCount="indefinite" begin="-3s" />
+            </text>
+          </g>
+          <g>
+            <path id="p-rocket" fill="none" d="M 280,150 A 170,65 0 1 1 620,150 A 170,65 0 1 1 280,150 Z" />
+            <text class="emoji-text" font-size="34" text-anchor="middle" dominant-baseline="middle">
+              🚀
+              <animateMotion dur="11s" repeatCount="indefinite" rotate="0" begin="-1s"><mpath href="#p-rocket" /></animateMotion>
+              <animate attributeName="opacity" values="1;1;1;0.1;1" dur="11s" repeatCount="indefinite" begin="-1s" />
+              <animate attributeName="font-size" values="34;38;34;20;34" dur="11s" repeatCount="indefinite" begin="-1s" />
+            </text>
+          </g>
+          <g>
+            <path id="p-spark" fill="none" d="M 340,150 A 110,40 0 1 1 560,150 A 110,40 0 1 1 340,150 Z" />
+            <text class="emoji-text" font-size="26" text-anchor="middle" dominant-baseline="middle">
+              ✨
+              <animateMotion dur="13s" repeatCount="indefinite" rotate="0" begin="-6s"><mpath href="#p-spark" /></animateMotion>
+              <animate attributeName="opacity" values="1;1;1;0.1;1" dur="13s" repeatCount="indefinite" begin="-6s" />
+            </text>
+          </g>
+          <g>
+            <text x="50%" y="125" class="text-main" style="font-size: 20px; opacity: 0.7; letter-spacing: 5px; text-transform: uppercase;">Welcome to the</text>
+            <text x="50%" y="190" class="text-main" style="font-size: 68px; letter-spacing: -2px; filter: drop-shadow(0 0 10px rgba(255,255,255,0.4));">Gemmaverse</text>
+          </g>
+        </svg>
+</div>
 
-Edit this `README.md` markdown file to author your organization card.
+**Welcome to the Gemmaverse on Hugging Face!** The Gemmaverse is a place where together, we push the boundaries of what’s possible with AI.
+
+Explore our collections of Gemma model variants and tools built by [Google](https://huggingface.co/google) and the community:
+* [Vision](https://huggingface.co/collections/Gemmaverse/vision) - Vision Language Models (VLMs) for multimodal understanding
+* [Audio](https://huggingface.co/collections/Gemmaverse/audio) - Models with speech and/or audio processing
+* [Multilingual](https://huggingface.co/collections/Gemmaverse/multilingual) - Models that improve linguistic capabilities beyond English
+* [Health](https://huggingface.co/collections/Gemmaverse/health) - Models for medical or healthcare domains
+* [Embeddings](https://huggingface.co/collections/Gemmaverse/embeddings) - Models for semantic search, Retrieval-Augmented Generation (RAG), and data clustering
+* [Responsible AI](https://huggingface.co/collections/Gemmaverse/responsible-ai) - Models and tools for enhancing safety, privacy, and security
+* [Performance](https://huggingface.co/collections/Gemmaverse/performance) - Optimized versions for mobile and edge devices
+* [Demos](https://huggingface.co/collections/Gemmaverse/demos) - Try out Gemma models, no setup required
+
+Learn more about Gemma at [deepmind.google/models/gemma](https://deepmind.google/models/gemma/).
+</body>