feat: Revamp homepage and features section with new design and content

docs/docusaurus.config.ts

@@ -5,8 +5,8 @@ import type * as Preset from '@docusaurus/preset-classic';
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
 
 const config: Config = {
-  title: 'DebrosFramework',
+  title: 'Debros Network',
-  tagline: 'Build scalable decentralized applications with ease',
+  tagline: 'Next-Generation Decentralized Web Framework',
   favicon: 'img/favicon.ico',
 
   // Future flags, see https://docusaurus.io/docs/api/docusaurus-config#future
@@ -71,13 +71,20 @@ const config: Config = {
 
   themeConfig: {
     // Replace with your project's social card
-    image: 'img/docusaurus-social-card.jpg',
+    image: 'img/debros-social-card.jpg',
-    navbar: {
+    colorMode: {
-      title: 'DebrosFramework',
+      defaultMode: 'dark',
-      logo: {
+      disableSwitch: false,
-        alt: 'DebrosFramework Logo',
+      respectPrefersColorScheme: false,
-        src: 'img/logo.svg',
     },
+    navbar: {
+      title: 'Debros Network',
+      // logo: {
+      //   alt: 'Debros Network Logo',
+      //   src: 'img/logo.svg',
+      //   srcDark: 'img/logo-dark.svg',
+      // },
+      hideOnScroll: true,
       items: [
         {
           type: 'docSidebar',
@@ -91,10 +98,14 @@ const config: Config = {
           position: 'left',
           label: 'API Reference',
         },
-        {to: '/blog', label: 'Blog', position: 'left'},
+        {
+          href: 'https://git.debros.io/DeBros/network',
+          label: 'Gitea',
+          position: 'right',
+        },
         {
           href: 'https://github.com/debros/network',
-          label: 'GitHub',
+          label: 'GitHub Mirror',
           position: 'right',
         },
       ],
@@ -103,11 +114,23 @@ const config: Config = {
       style: 'dark',
       links: [
         {
-          title: 'Docs',
+          title: 'Documentation',
           items: [
             {
-              label: 'Tutorial',
+              label: 'Getting Started',
-              to: '/docs/intro',
+              to: '/docs/getting-started',
+            },
+            {
+              label: 'Core Concepts',
+              to: '/docs/core-concepts/architecture',
+            },
+            {
+              label: 'API Reference',
+              to: '/docs/api/overview',
+            },
+            {
+              label: 'Contributing',
+              to: '/docs/contributing/overview',
             },
           ],
         },
@@ -115,34 +138,34 @@ const config: Config = {
           title: 'Community',
           items: [
             {
-              label: 'Stack Overflow',
+              label: 'Gitea Repository',
-              href: 'https://stackoverflow.com/questions/tagged/docusaurus',
+              href: 'https://git.debros.io/DeBros/network',
             },
             {
-              label: 'Discord',
+              label: 'GitHub Mirror',
-              href: 'https://discordapp.com/invite/docusaurus',
+              href: 'https://github.com/debros/network',
             },
             {
-              label: 'X',
+              label: 'Issues & Support',
-              href: 'https://x.com/docusaurus',
+              href: 'https://git.debros.io/DeBros/network/issues',
             },
           ],
         },
         {
-          title: 'More',
+          title: 'Resources',
           items: [
             {
-              label: 'Blog',
+              label: 'Examples',
-              to: '/blog',
+              to: '/docs/examples/basic-usage',
             },
             {
-              label: 'GitHub',
+              label: 'License',
-              href: 'https://github.com/facebook/docusaurus',
+              href: 'https://git.debros.io/DeBros/network/src/branch/main/LICENSE',
             },
           ],
         },
       ],
-      copyright: `Copyright © ${new Date().getFullYear()} DebrosFramework. Built with Docusaurus.`,
+      copyright: `Copyright © ${new Date().getFullYear()} Debros Network. Empowering the decentralized web.`,
     },
     prism: {
       theme: prismThemes.github,

docs/src/components/HomepageFeatures/index.tsx

@@ -5,52 +5,86 @@ import styles from './styles.module.css';
 
 type FeatureItem = {
   title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+  icon: string;
   description: ReactNode;
+  highlight?: boolean;
 };
 
 const FeatureList: FeatureItem[] = [
   {
-    title: 'Easy to Use',
+    title: 'Decentralized by Design',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    icon: '🌐',
     description: (
       <>
-        Docusaurus was designed from the ground up to be easily installed and
+        Built on <strong>OrbitDB</strong> and <strong>IPFS</strong>, DebrosFramework 
-        used to get your website up and running quickly.
+        creates truly decentralized applications that don't rely on centralized servers 
+        or single points of failure.
+      </>
+    ),
+    highlight: true,
+  },
+  {
+    title: 'Developer Experience First',
+    icon: '⚡',
+    description: (
+      <>
+        Full <strong>TypeScript</strong> support with intelligent auto-completion, 
+        decorator-based models, and intuitive APIs that make building complex 
+        applications feel effortless.
       </>
     ),
   },
   {
-    title: 'Focus on What Matters',
+    title: 'Infinite Scalability',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+    icon: '🚀',
     description: (
       <>
-        Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
+        Automatic sharding, efficient queries, and built-in caching ensure your 
-        ahead and move your docs into the <code>docs</code> directory.
+        applications can scale to millions of users without architectural changes.
       </>
     ),
   },
   {
-    title: 'Powered by React',
+    title: 'Zero Configuration',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+    icon: '🎯',
     description: (
       <>
-        Extend or customize your website layout by reusing React. Docusaurus can
+        Start building immediately with sensible defaults. No complex setup, 
-        be extended while reusing the same header and footer.
+        no configuration files, no DevOps headaches—just pure development focus.
+      </>
+    ),
+  },
+  {
+    title: 'Real-time Sync',
+    icon: '🔄',
+    description: (
+      <>
+        Built-in real-time synchronization across all peers. Changes propagate 
+        instantly across the network with conflict resolution and offline support.
+      </>
+    ),
+  },
+  {
+    title: 'Enterprise Ready',
+    icon: '🔒',
+    description: (
+      <>
+        Production-grade security, comprehensive testing, detailed documentation, 
+        and enterprise support make DebrosFramework ready for mission-critical applications.
       </>
     ),
   },
 ];
 
-function Feature({title, Svg, description}: FeatureItem) {
+function Feature({title, icon, description, highlight}: FeatureItem) {
   return (
-    <div className={clsx('col col--4')}>
+    <div className={clsx(styles.featureCard, highlight && styles.featureCardHighlight)}>
-      <div className="text--center">
+      <div className={styles.featureIcon}>
-        <Svg className={styles.featureSvg} role="img" />
+        <span className={styles.iconEmoji}>{icon}</span>
       </div>
-      <div className="text--center padding-horiz--md">
+      <div className={styles.featureContent}>
-        <Heading as="h3">{title}</Heading>
+        <Heading as="h3" className={styles.featureTitle}>{title}</Heading>
-        <p>{description}</p>
+        <p className={styles.featureDescription}>{description}</p>
       </div>
     </div>
   );
@@ -60,7 +94,15 @@ export default function HomepageFeatures(): ReactNode {
   return (
     <section className={styles.features}>
       <div className="container">
-        <div className="row">
+        <div className={styles.featuresHeader}>
+          <Heading as="h2" className={styles.featuresTitle}>
+            Why Choose Debros Network?
+          </Heading>
+          <p className={styles.featuresSubtitle}>
+            Everything you need to build the next generation of decentralized applications
+          </p>
+        </div>
+        <div className={styles.featuresGrid}>
           {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} />
           ))}

docs/src/components/HomepageFeatures/styles.module.css

@@ -1,11 +1,191 @@
+/* Features Section */
 .features {
-  display: flex;
+  padding: 6rem 0;
-  align-items: center;
+  background: var(--ifm-background-color);
-  padding: 2rem 0;
-  width: 100%;
 }
 
-.featureSvg {
+.featuresHeader {
-  height: 200px;
+  text-align: center;
-  width: 200px;
+  margin-bottom: 4rem;
+}
+
+.featuresTitle {
+  font-size: 2.5rem;
+  font-weight: 800;
+  background: var(--debros-gradient-secondary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 1rem;
+}
+
+.featuresSubtitle {
+  font-size: 1.2rem;
+  color: var(--ifm-color-content-secondary);
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.featuresGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 2rem;
+  margin-top: 2rem;
+}
+
+.featureCard {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 2.5rem;
+  background: var(--ifm-background-surface-color);
+  border: 1px solid rgba(139, 92, 246, 0.1);
+  border-radius: 20px;
+  transition: all 0.4s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.featureCard::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: var(--debros-gradient-secondary);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.featureCard:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 20px 40px rgba(139, 92, 246, 0.15);
+  border-color: rgba(139, 92, 246, 0.3);
+}
+
+.featureCard:hover::before {
+  opacity: 1;
+}
+
+.featureCardHighlight {
+  background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
+  border-color: rgba(139, 92, 246, 0.2);
+}
+
+.featureCardHighlight::before {
+  opacity: 0.7;
+}
+
+.featureIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 2rem;
+  background: rgba(139, 92, 246, 0.1);
+  border-radius: 20px;
+  border: 1px solid rgba(139, 92, 246, 0.2);
+  position: relative;
+  overflow: hidden;
+}
+
+.featureIcon::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--debros-gradient-secondary);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.featureCard:hover .featureIcon::before {
+  opacity: 0.1;
+}
+
+.iconEmoji {
+  font-size: 2.5rem;
+  position: relative;
+  z-index: 1;
+}
+
+.featureContent {
+  text-align: center;
+}
+
+.featureTitle {
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--ifm-color-content);
+  margin-bottom: 1rem;
+  line-height: 1.3;
+}
+
+.featureDescription {
+  font-size: 1rem;
+  color: var(--ifm-color-content-secondary);
+  line-height: 1.6;
+  margin: 0;
+}
+
+.featureDescription strong {
+  color: var(--ifm-color-primary);
+  font-weight: 600;
+}
+
+/* Responsive Design */
+@media screen and (max-width: 996px) {
+  .features {
+    padding: 4rem 0;
+  }
+  
+  .featuresTitle {
+    font-size: 2rem;
+  }
+  
+  .featuresSubtitle {
+    font-size: 1.1rem;
+  }
+  
+  .featuresGrid {
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 1.5rem;
+  }
+  
+  .featureCard {
+    padding: 2rem;
+  }
+  
+  .featureIcon {
+    width: 70px;
+    height: 70px;
+    margin-bottom: 1.5rem;
+  }
+  
+  .iconEmoji {
+    font-size: 2rem;
+  }
+  
+  .featureTitle {
+    font-size: 1.2rem;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .featuresGrid {
+    grid-template-columns: 1fr;
+  }
+  
+  .featureCard {
+    padding: 1.5rem;
+  }
+  
+  .featuresTitle {
+    font-size: 1.8rem;
+  }
 }

docs/src/css/custom.css

@@ -1,30 +1,260 @@
 /**
- * Any CSS included here will be global. The classic template
+ * DebrosFramework - Futuristic Dark Theme
- * bundles Infima by default. Infima is a CSS framework designed to
+ * Custom styling for next-generation decentralized web framework
- * work well for content-centric websites.
  */
 
-/* You can override the default Infima variables here. */
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+/* Custom CSS Variables for DebrosFramework */
 :root {
-  --ifm-color-primary: #2e8555;
+  /* Primary colors - Cyber Purple/Blue gradient */
-  --ifm-color-primary-dark: #29784c;
+  --ifm-color-primary: #7c3aed;
-  --ifm-color-primary-darker: #277148;
+  --ifm-color-primary-dark: #6d28d9;
-  --ifm-color-primary-darkest: #205d3b;
+  --ifm-color-primary-darker: #5b21b6;
-  --ifm-color-primary-light: #33925d;
+  --ifm-color-primary-darkest: #4c1d95;
-  --ifm-color-primary-lighter: #359962;
+  --ifm-color-primary-light: #8b5cf6;
-  --ifm-color-primary-lightest: #3cad6e;
+  --ifm-color-primary-lighter: #a78bfa;
+  --ifm-color-primary-lightest: #c4b5fd;
+  
+  /* Accent colors */
+  --debros-accent-cyan: #06b6d4;
+  --debros-accent-emerald: #10b981;
+  --debros-accent-rose: #f43f5e;
+  --debros-accent-amber: #f59e0b;
+  
+  /* Background gradients */
+  --debros-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --debros-gradient-secondary: linear-gradient(135deg, #7c3aed 0%, #3b82f6 50%, #06b6d4 100%);
+  --debros-gradient-hero: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%);
+  
+  /* Typography */
+  --ifm-font-family-base: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --ifm-font-family-monospace: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
   --ifm-code-font-size: 95%;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+  
+  /* Light theme overrides */
+  --ifm-background-color: #ffffff;
+  --ifm-background-surface-color: #f8fafc;
+  --docusaurus-highlighted-code-line-bg: rgba(124, 58, 237, 0.1);
 }
 
-/* For readability concerns, you should choose a lighter palette in dark mode. */
+/* Dark theme - Default for DebrosFramework */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
+  /* Primary colors for dark theme */
-  --ifm-color-primary-dark: #21af90;
+  --ifm-color-primary: #8b5cf6;
-  --ifm-color-primary-darker: #1fa588;
+  --ifm-color-primary-dark: #7c3aed;
-  --ifm-color-primary-darkest: #1a8870;
+  --ifm-color-primary-darker: #6d28d9;
-  --ifm-color-primary-light: #29d5b0;
+  --ifm-color-primary-darkest: #5b21b6;
-  --ifm-color-primary-lighter: #32d8b4;
+  --ifm-color-primary-light: #a78bfa;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary-lighter: #c4b5fd;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+  --ifm-color-primary-lightest: #ddd6fe;
+  
+  /* Dark background system */
+  --ifm-background-color: #0a0a0f;
+  --ifm-background-surface-color: #111827;
+  --ifm-color-content: #e5e7eb;
+  --ifm-color-content-secondary: #9ca3af;
+  
+  /* Navbar dark styling */
+  --ifm-navbar-background-color: rgba(17, 24, 39, 0.95);
+  --ifm-navbar-shadow: 0 4px 28px rgba(0, 0, 0, 0.3);
+  
+  /* Sidebar dark styling */
+  --ifm-menu-color: #d1d5db;
+  --ifm-menu-color-background-active: rgba(139, 92, 246, 0.1);
+  --ifm-menu-color-background-hover: rgba(139, 92, 246, 0.05);
+  
+  /* Code highlighting */
+  --docusaurus-highlighted-code-line-bg: rgba(139, 92, 246, 0.2);
+  
+  /* Footer dark styling */
+  --ifm-footer-background-color: #030712;
+  --ifm-footer-color: #9ca3af;
+  --ifm-footer-link-color: #d1d5db;
+  --ifm-footer-title-color: #f3f4f6;
+}
+
+/* Global Typography Enhancements */
+body {
+  font-feature-settings: 'liga', 'kern';
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--ifm-color-primary);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--ifm-color-primary-dark);
+}
+
+/* Navbar Enhancements */
+.navbar {
+  backdrop-filter: blur(20px);
+  border-bottom: 1px solid rgba(139, 92, 246, 0.1);
+  transition: all 0.3s ease;
+}
+
+.navbar__title {
+  font-weight: 700;
+  font-size: 1.25rem;
+  background: var(--debros-gradient-secondary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.navbar__item {
+  font-weight: 500;
+}
+
+.navbar__link:hover {
+  color: var(--ifm-color-primary);
+}
+
+/* Button Enhancements */
+.button {
+  font-weight: 600;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  font-family: var(--ifm-font-family-base);
+}
+
+.button--primary {
+  background: var(--debros-gradient-secondary);
+  border: none;
+  box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3);
+}
+
+.button--primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
+}
+
+.button--secondary {
+  background: transparent;
+  border: 2px solid var(--ifm-color-primary);
+  color: var(--ifm-color-primary);
+}
+
+.button--secondary:hover {
+  background: var(--ifm-color-primary);
+  color: white;
+  transform: translateY(-2px);
+}
+
+/* Code Block Enhancements */
+.prism-code {
+  border-radius: 12px;
+  border: 1px solid rgba(139, 92, 246, 0.2);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+.code {
+  background: rgba(139, 92, 246, 0.1);
+  border: 1px solid rgba(139, 92, 246, 0.2);
+  border-radius: 6px;
+  padding: 0.2em 0.4em;
+  font-weight: 500;
+}
+
+/* Table Enhancements */
+.table {
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid rgba(139, 92, 246, 0.1);
+}
+
+.table thead tr {
+  background: rgba(139, 92, 246, 0.1);
+}
+
+/* Card Components */
+.card {
+  background: var(--ifm-background-surface-color);
+  border: 1px solid rgba(139, 92, 246, 0.1);
+  border-radius: 16px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 32px rgba(139, 92, 246, 0.2);
+}
+
+/* Glow Effects */
+.glow {
+  position: relative;
+}
+
+.glow::before {
+  content: '';
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  right: -2px;
+  bottom: -2px;
+  background: var(--debros-gradient-secondary);
+  border-radius: inherit;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: -1;
+}
+
+.glow:hover::before {
+  opacity: 0.7;
+}
+
+/* Responsive Design */
+@media screen and (max-width: 996px) {
+  .navbar__title {
+    font-size: 1.1rem;
+  }
+  
+  .button {
+    font-size: 0.9rem;
+  }
+}
+
+/* Animation Utilities */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }

docs/src/pages/index.module.css

@@ -1,23 +1,449 @@
 /**
- * CSS files with the .module.css suffix will be treated as CSS modules
+ * DebrosFramework Landing Page Styles
- * and scoped locally.
+ * Futuristic design with cyber-aesthetic
  */
 
-.heroBanner {
+/* Hero Section */
-  padding: 4rem 0;
+.hero {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  background: var(--debros-gradient-hero);
+  overflow: hidden;
+}
+
+.heroBackground {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 0;
+}
+
+.gridPattern {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-image: 
+    linear-gradient(rgba(139, 92, 246, 0.1) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(139, 92, 246, 0.1) 1px, transparent 1px);
+  background-size: 50px 50px;
+  animation: gridMove 20s linear infinite;
+}
+
+@keyframes gridMove {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(50px, 50px);
+  }
+}
+
+.glowOrb1,
+.glowOrb2,
+.glowOrb3 {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(60px);
+  animation: float 8s ease-in-out infinite;
+}
+
+.glowOrb1 {
+  width: 300px;
+  height: 300px;
+  background: radial-gradient(circle, rgba(124, 58, 237, 0.3) 0%, transparent 70%);
+  top: 10%;
+  left: 10%;
+  animation-delay: 0s;
+}
+
+.glowOrb2 {
+  width: 200px;
+  height: 200px;
+  background: radial-gradient(circle, rgba(59, 130, 246, 0.2) 0%, transparent 70%);
+  top: 60%;
+  right: 20%;
+  animation-delay: -3s;
+}
+
+.glowOrb3 {
+  width: 250px;
+  height: 250px;
+  background: radial-gradient(circle, rgba(6, 182, 212, 0.2) 0%, transparent 70%);
+  bottom: 20%;
+  left: 50%;
+  animation-delay: -6s;
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  33% {
+    transform: translateY(-20px) rotate(120deg);
+  }
+  66% {
+    transform: translateY(10px) rotate(240deg);
+  }
+}
+
+.heroContent {
+  position: relative;
+  z-index: 2;
   text-align: center;
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.badge {
+  display: inline-block;
+  margin-bottom: 2rem;
+  animation: fadeInUp 0.6s ease-out;
+}
+
+.badgeText {
+  background: rgba(139, 92, 246, 0.1);
+  border: 1px solid rgba(139, 92, 246, 0.3);
+  color: var(--ifm-color-primary);
+  padding: 0.5rem 1rem;
+  border-radius: 50px;
+  font-size: 0.9rem;
+  font-weight: 600;
+  backdrop-filter: blur(10px);
+}
+
+.heroTitle {
+  font-size: 4rem;
+  font-weight: 800;
+  margin-bottom: 1.5rem;
+  line-height: 1.1;
+  animation: fadeInUp 0.6s ease-out 0.2s both;
+}
+
+.titleGradient {
+  background: var(--debros-gradient-secondary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  display: inline-block;
+}
+
+.heroSubtitle {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--ifm-color-primary);
+  margin-bottom: 1rem;
+  animation: fadeInUp 0.6s ease-out 0.4s both;
+}
+
+.heroDescription {
+  font-size: 1.1rem;
+  color: var(--ifm-color-content-secondary);
+  margin-bottom: 3rem;
+  line-height: 1.6;
+  animation: fadeInUp 0.6s ease-out 0.6s both;
+}
+
+.heroButtons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-bottom: 3rem;
+  animation: fadeInUp 0.6s ease-out 0.8s both;
+}
+
+.primaryButton {
   position: relative;
   overflow: hidden;
 }
 
-@media screen and (max-width: 996px) {
+.primaryButton::before {
-  .heroBanner {
+  content: '';
-    padding: 2rem;
+  position: absolute;
-  }
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s;
 }
 
-.buttons {
+.primaryButton:hover::before {
+  left: 100%;
+}
+
+.buttonIcon {
+  margin-left: 0.5rem;
+  transition: transform 0.3s ease;
+}
+
+.primaryButton:hover .buttonIcon {
+  transform: translateX(4px);
+}
+
+.secondaryButton {
+  backdrop-filter: blur(10px);
+}
+
+.quickStart {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 1rem;
+  flex-wrap: wrap;
+  animation: fadeInUp 0.6s ease-out 1s both;
+}
+
+.quickStartLabel {
+  font-size: 0.9rem;
+  color: var(--ifm-color-content-secondary);
+  font-weight: 500;
+}
+
+.codeSnippet {
+  background: rgba(139, 92, 246, 0.1);
+  border: 1px solid rgba(139, 92, 246, 0.3);
+  color: var(--ifm-color-primary);
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  font-family: var(--ifm-font-family-monospace);
+  font-size: 0.9rem;
+  backdrop-filter: blur(10px);
+}
+
+/* Stats Section */
+.stats {
+  padding: 4rem 0;
+  background: var(--ifm-background-surface-color);
+  border-top: 1px solid rgba(139, 92, 246, 0.1);
+}
+
+/* Video Section */
+.videoSection {
+  padding: 6rem 0;
+  background: var(--ifm-background-color);
+  border-top: 1px solid rgba(139, 92, 246, 0.1);
+}
+
+.videoHeader {
+  text-align: center;
+  margin-bottom: 4rem;
+}
+
+.videoTitle {
+  font-size: 2.5rem;
+  font-weight: 800;
+  background: var(--debros-gradient-secondary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: 1rem;
+}
+
+.videoSubtitle {
+  font-size: 1.2rem;
+  color: var(--ifm-color-content-secondary);
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+.videoContainer {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 3rem;
+  align-items: start;
+}
+
+.videoWrapper {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 56.25%; /* 16:9 aspect ratio */
+  background: var(--ifm-background-surface-color);
+  border-radius: 16px;
+  overflow: hidden;
+  border: 1px solid rgba(139, 92, 246, 0.2);
+  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.1);
+}
+
+.videoEmbed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.videoFeatures {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.videoFeature {
+  padding: 1.5rem;
+  background: var(--ifm-background-surface-color);
+  border: 1px solid rgba(139, 92, 246, 0.1);
+  border-radius: 12px;
+  font-size: 1rem;
+  line-height: 1.5;
+  transition: all 0.3s ease;
+}
+
+.videoFeature:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
+  border-color: rgba(139, 92, 246, 0.3);
+}
+
+.videoFeature strong {
+  color: var(--ifm-color-primary);
+  font-weight: 600;
+}
+
+.statsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 2rem;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.statItem {
+  text-align: center;
+  padding: 2rem 1rem;
+  background: var(--ifm-background-color);
+  border: 1px solid rgba(139, 92, 246, 0.1);
+  border-radius: 16px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.statItem::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--debros-gradient-secondary);
+}
+
+.statItem:hover {
+  transform: translateY(-8px);
+  box-shadow: 0 16px 40px rgba(139, 92, 246, 0.2);
+}
+
+.statNumber {
+  font-size: 2.5rem;
+  font-weight: 800;
+  color: var(--ifm-color-primary);
+  margin-bottom: 0.5rem;
+  font-family: var(--ifm-font-family-base);
+}
+
+.statLabel {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--ifm-color-content-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Responsive Design */
+@media screen and (max-width: 996px) {
+  .hero {
+    min-height: 80vh;
+  }
+  
+  .heroTitle {
+    font-size: 2.5rem;
+  }
+  
+  .heroSubtitle {
+    font-size: 1.2rem;
+  }
+  
+  .heroDescription {
+    font-size: 1rem;
+  }
+  
+  .heroButtons {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .quickStart {
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+  
+  .statsGrid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+  }
+  
+  .videoSection {
+    padding: 4rem 0;
+  }
+  
+  .videoTitle {
+    font-size: 2rem;
+  }
+  
+  .videoSubtitle {
+    font-size: 1.1rem;
+  }
+  
+  .videoContainer {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+  
+  .glowOrb1,
+  .glowOrb2,
+  .glowOrb3 {
+    width: 150px;
+    height: 150px;
+  }
+}
+
+@media screen and (max-width: 576px) {
+  .heroTitle {
+    font-size: 2rem;
+  }
+  
+  .statsGrid {
+    grid-template-columns: 1fr;
+  }
+  
+  .statItem {
+    padding: 1.5rem 1rem;
+  }
+  
+  .statNumber {
+    font-size: 2rem;
+  }
+  
+  .videoTitle {
+    font-size: 1.8rem;
+  }
+  
+  .videoFeatures {
+    gap: 1rem;
+  }
+  
+  .videoFeature {
+    padding: 1rem;
+  }
 }

docs/src/pages/index.tsx

@@ -8,24 +8,128 @@ import Heading from '@theme/Heading';
 
 import styles from './index.module.css';
 
-function HomepageHeader() {
+function HeroSection() {
   const {siteConfig} = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <section className={styles.hero}>
+      <div className={styles.heroBackground}>
+        <div className={styles.gridPattern}></div>
+        <div className={styles.glowOrb1}></div>
+        <div className={styles.glowOrb2}></div>
+        <div className={styles.glowOrb3}></div>
+      </div>
+      
       <div className="container">
-        <Heading as="h1" className="hero__title">
+        <div className={styles.heroContent}>
-          {siteConfig.title}
+          <div className={styles.badge}>
+            <span className={styles.badgeText}>🚀 Beta Release</span>
+          </div>
+          
+          <Heading as="h1" className={styles.heroTitle}>
+            <span className={styles.titleGradient}>Debros Network</span>
           </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
+          
-        <div className={styles.buttons}>
+          <p className={styles.heroSubtitle}>
+            {siteConfig.tagline}
+          </p>
+          
+          <p className={styles.heroDescription}>
+            Build scalable, decentralized applications with ease using our next-generation 
+            framework powered by OrbitDB, IPFS, and cutting-edge web technologies.
+          </p>
+          
+          <div className={styles.heroButtons}>
             <Link
-            className="button button--secondary button--lg"
+              className={clsx('button button--primary button--lg', styles.primaryButton)}
+              to="/docs/getting-started">
+              Get Started
+              <span className={styles.buttonIcon}>→</span>
+            </Link>
+            
+            <Link
+              className={clsx('button button--secondary button--lg', styles.secondaryButton)}
               to="/docs/intro">
-            Docusaurus Tutorial - 5min ⏱️
+              View Documentation
             </Link>
           </div>
+          
+          <div className={styles.quickStart}>
+            <span className={styles.quickStartLabel}>Quick Start:</span>
+            <code className={styles.codeSnippet}>
+              npm create debros-app my-app
+            </code>
           </div>
-    </header>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function StatsSection() {
+  return (
+    <section className={styles.stats}>
+      <div className="container">
+        <div className={styles.statsGrid}>
+          <div className={styles.statItem}>
+            <div className={styles.statNumber}>100%</div>
+            <div className={styles.statLabel}>TypeScript</div>
+          </div>
+          <div className={styles.statItem}>
+            <div className={styles.statNumber}>Zero</div>
+            <div className={styles.statLabel}>Config</div>
+          </div>
+          <div className={styles.statItem}>
+            <div className={styles.statNumber}>∞</div>
+            <div className={styles.statLabel}>Scalability</div>
+          </div>
+          <div className={styles.statItem}>
+            <div className={styles.statNumber}>🌐</div>
+            <div className={styles.statLabel}>Decentralized</div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function VideoSection() {
+  return (
+    <section className={styles.videoSection}>
+      <div className="container">
+        <div className={styles.videoHeader}>
+          <Heading as="h2" className={styles.videoTitle}>
+            See Debros Network in Action
+          </Heading>
+          <p className={styles.videoSubtitle}>
+            Watch our comprehensive tutorial to learn how to build your first decentralized application
+          </p>
+        </div>
+        <div className={styles.videoContainer}>
+          <div className={styles.videoWrapper}>
+            {/* Replace VIDEO_ID_HERE with your actual YouTube video ID */}
+            <iframe
+              className={styles.videoEmbed}
+              src="https://www.youtube.com/embed/VIDEO_ID_HERE?rel=0&modestbranding=1&autohide=1&showinfo=0"
+              title="Debros Network Tutorial"
+              frameBorder="0"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+            ></iframe>
+          </div>
+          <div className={styles.videoFeatures}>
+            <div className={styles.videoFeature}>
+              🚀 <strong>Quick Start:</strong> Get up and running in under 5 minutes
+            </div>
+            <div className={styles.videoFeature}>
+              📚 <strong>Step-by-Step:</strong> Follow along with detailed explanations
+            </div>
+            <div className={styles.videoFeature}>
+              🔧 <strong>Best Practices:</strong> Learn the recommended patterns and approaches
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
   );
 }
 
@@ -33,10 +137,12 @@ export default function Home(): ReactNode {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
+      title={siteConfig.title}
-      description="Description will go into a meta tag in <head />">
+      description="Next-Generation Decentralized Web Framework - Build scalable, decentralized applications with ease using Debros Network">
-      <HomepageHeader />
+      <HeroSection />
+      <StatsSection />
       <main>
+        <VideoSection />
         <HomepageFeatures />
       </main>
     </Layout>