Add TunaOS branding, logos, and hero graphics section

Co-authored-by: hanthor <[email protected]>

Author: Copilot

docusaurus.config.ts

@@ -7,7 +7,7 @@ import type * as Preset from '@docusaurus/preset-classic';
 const config: Config = {
   title: 'TunaOS',
   tagline: 'A Collection of Cloud-Native Enterprise Linux OS Images',
-  favicon: 'img/favicon.ico',
+  favicon: 'img/favicon.svg',
 
   // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future
   future: {
@@ -62,7 +62,7 @@ const config: Config = {
       title: 'TunaOS',
       logo: {
         alt: 'TunaOS Logo',
-        src: 'img/tuna-logo.png',
+        src: 'img/tuna-logo.svg',
       },
       items: [
         {

src/components/HeroGraphics/index.tsx

@@ -0,0 +1,34 @@
+import type {ReactNode} from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+
+function HeroGraphics(): ReactNode {
+  return (
+    <section className={styles.heroGraphics}>
+      <div className="container">
+        <div className="row">
+          <div className="col col--12">
+            <div className={styles.graphicsContainer}>
+              <div className={styles.fishGraphic}>
+                <div className={styles.fishEmoji}>🐟</div>
+                <div className={styles.fishName}>TunaOS</div>
+              </div>
+              <div className={styles.powerSection}>
+                <div className={styles.powerText}>Powered by</div>
+                <div className={styles.bootcContainer}>
+                  <img 
+                    src="/docs/img/bootc-logo.png" 
+                    alt="Bootc Logo" 
+                    className={styles.bootcLogo}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default HeroGraphics;

src/components/HeroGraphics/styles.module.css

@@ -0,0 +1,81 @@
+.heroGraphics {
+  padding: 2rem 0;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  text-align: center;
+}
+
+.graphicsContainer {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2rem;
+}
+
+.fishGraphic {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.fishEmoji {
+  font-size: 4rem;
+  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
+  animation: float 3s ease-in-out infinite;
+}
+
+.fishName {
+  font-size: 1.5rem;
+  font-weight: bold;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.powerSection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.powerText {
+  font-size: 1.2rem;
+  opacity: 0.9;
+}
+
+.bootcContainer {
+  background: white;
+  padding: 1rem;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.bootcLogo {
+  height: 80px;
+  width: auto;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .graphicsContainer {
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+  
+  .fishEmoji {
+    font-size: 3rem;
+  }
+  
+  .bootcLogo {
+    height: 60px;
+  }
+}

src/pages/index.tsx

@@ -4,6 +4,7 @@ import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
 import HomepageFeatures from '@site/src/components/HomepageFeatures';
+import HeroGraphics from '@site/src/components/HeroGraphics';
 import Heading from '@theme/Heading';
 
 import styles from './index.module.css';
@@ -137,6 +138,7 @@ export default function Home(): ReactNode {
       description="A collection of cloud-native Enterprise Linux OS images based on Bluefin LTS">
       <HomepageHeader />
       <main>
+        <HeroGraphics />
         <HomepageFeatures />
         <DownloadSection />
       </main>