From 155bda66270a8b9ac0885164777420509786b4fd Mon Sep 17 00:00:00 2001 From: anonpenguin Date: Sat, 5 Jul 2025 06:40:29 +0300 Subject: [PATCH] feat: Revamp homepage and features section with new design and content --- docs/docusaurus.config.ts | 77 +-- .../src/components/HomepageFeatures/index.tsx | 84 +++- .../HomepageFeatures/styles.module.css | 194 +++++++- docs/src/css/custom.css | 272 ++++++++++- docs/src/pages/index.module.css | 444 +++++++++++++++++- docs/src/pages/index.tsx | 138 +++++- 6 files changed, 1108 insertions(+), 101 deletions(-) diff --git a/docs/docusaurus.config.ts b/docs/docusaurus.config.ts index 801fe9c..b146d76 100644 --- a/docs/docusaurus.config.ts +++ b/docs/docusaurus.config.ts @@ -1,12 +1,12 @@ -import {themes as prismThemes} from 'prism-react-renderer'; -import type {Config} from '@docusaurus/types'; +import { themes as prismThemes } from 'prism-react-renderer'; +import type { Config } from '@docusaurus/types'; 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', - tagline: 'Build scalable decentralized applications with ease', + title: 'Debros Network', + 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', + colorMode: { + defaultMode: 'dark', + disableSwitch: false, + respectPrefersColorScheme: false, + }, navbar: { - title: 'DebrosFramework', - logo: { - alt: 'DebrosFramework Logo', - src: 'img/logo.svg', - }, + 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', - to: '/docs/intro', + label: 'Getting Started', + 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', - href: 'https://stackoverflow.com/questions/tagged/docusaurus', + label: 'Gitea Repository', + href: 'https://git.debros.io/DeBros/network', }, { - label: 'Discord', - href: 'https://discordapp.com/invite/docusaurus', + label: 'GitHub Mirror', + href: 'https://github.com/debros/network', }, { - label: 'X', - href: 'https://x.com/docusaurus', + label: 'Issues & Support', + href: 'https://git.debros.io/DeBros/network/issues', }, ], }, { - title: 'More', + title: 'Resources', items: [ { - label: 'Blog', - to: '/blog', + label: 'Examples', + to: '/docs/examples/basic-usage', }, { - label: 'GitHub', - href: 'https://github.com/facebook/docusaurus', + label: 'License', + 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, diff --git a/docs/src/components/HomepageFeatures/index.tsx b/docs/src/components/HomepageFeatures/index.tsx index c2551fb..bb3126d 100644 --- a/docs/src/components/HomepageFeatures/index.tsx +++ b/docs/src/components/HomepageFeatures/index.tsx @@ -5,52 +5,86 @@ import styles from './styles.module.css'; type FeatureItem = { title: string; - Svg: React.ComponentType>; + icon: string; description: ReactNode; + highlight?: boolean; }; const FeatureList: FeatureItem[] = [ { - title: 'Easy to Use', - Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default, + title: 'Decentralized by Design', + icon: '🌐', description: ( <> - Docusaurus was designed from the ground up to be easily installed and - used to get your website up and running quickly. + Built on OrbitDB and IPFS, DebrosFramework + 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 TypeScript support with intelligent auto-completion, + decorator-based models, and intuitive APIs that make building complex + applications feel effortless. ), }, { - title: 'Focus on What Matters', - Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default, + title: 'Infinite Scalability', + icon: 'πŸš€', description: ( <> - Docusaurus lets you focus on your docs, and we'll do the chores. Go - ahead and move your docs into the docs directory. + Automatic sharding, efficient queries, and built-in caching ensure your + applications can scale to millions of users without architectural changes. ), }, { - title: 'Powered by React', - Svg: require('@site/static/img/undraw_docusaurus_react.svg').default, + title: 'Zero Configuration', + icon: '🎯', description: ( <> - Extend or customize your website layout by reusing React. Docusaurus can - be extended while reusing the same header and footer. + Start building immediately with sensible defaults. No complex setup, + 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 ( -
-
- +
+
+ {icon}
-
- {title} -

{description}

+
+ {title} +

{description}

); @@ -60,7 +94,15 @@ export default function HomepageFeatures(): ReactNode { return (
-
+
+ + Why Choose Debros Network? + +

+ Everything you need to build the next generation of decentralized applications +

+
+
{FeatureList.map((props, idx) => ( ))} diff --git a/docs/src/components/HomepageFeatures/styles.module.css b/docs/src/components/HomepageFeatures/styles.module.css index b248eb2..08c0818 100644 --- a/docs/src/components/HomepageFeatures/styles.module.css +++ b/docs/src/components/HomepageFeatures/styles.module.css @@ -1,11 +1,191 @@ +/* Features Section */ .features { - display: flex; - align-items: center; - padding: 2rem 0; - width: 100%; + padding: 6rem 0; + background: var(--ifm-background-color); } -.featureSvg { - height: 200px; - width: 200px; +.featuresHeader { + text-align: center; + 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; + } } diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 2bc6a4c..d5724bd 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -1,30 +1,260 @@ /** - * Any CSS included here will be global. The classic template - * bundles Infima by default. Infima is a CSS framework designed to - * work well for content-centric websites. + * DebrosFramework - Futuristic Dark Theme + * Custom styling for next-generation decentralized web framework */ -/* 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; - --ifm-color-primary-dark: #29784c; - --ifm-color-primary-darker: #277148; - --ifm-color-primary-darkest: #205d3b; - --ifm-color-primary-light: #33925d; - --ifm-color-primary-lighter: #359962; - --ifm-color-primary-lightest: #3cad6e; + /* Primary colors - Cyber Purple/Blue gradient */ + --ifm-color-primary: #7c3aed; + --ifm-color-primary-dark: #6d28d9; + --ifm-color-primary-darker: #5b21b6; + --ifm-color-primary-darkest: #4c1d95; + --ifm-color-primary-light: #8b5cf6; + --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; - --ifm-color-primary-dark: #21af90; - --ifm-color-primary-darker: #1fa588; - --ifm-color-primary-darkest: #1a8870; - --ifm-color-primary-light: #29d5b0; - --ifm-color-primary-lighter: #32d8b4; - --ifm-color-primary-lightest: #4fddbf; - --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3); + /* Primary colors for dark theme */ + --ifm-color-primary: #8b5cf6; + --ifm-color-primary-dark: #7c3aed; + --ifm-color-primary-darker: #6d28d9; + --ifm-color-primary-darkest: #5b21b6; + --ifm-color-primary-light: #a78bfa; + --ifm-color-primary-lighter: #c4b5fd; + --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; } diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css index 9f71a5d..aff32bb 100644 --- a/docs/src/pages/index.module.css +++ b/docs/src/pages/index.module.css @@ -1,23 +1,449 @@ /** - * CSS files with the .module.css suffix will be treated as CSS modules - * and scoped locally. + * DebrosFramework Landing Page Styles + * Futuristic design with cyber-aesthetic */ -.heroBanner { - padding: 4rem 0; +/* Hero Section */ +.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) { - .heroBanner { - padding: 2rem; - } +.primaryButton::before { + content: ''; + 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; + } } diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index 2e006d1..3800214 100644 --- a/docs/src/pages/index.tsx +++ b/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 ( -
+
+
+
+
+
+
+
+
- - {siteConfig.title} - -

{siteConfig.tagline}

-
- - Docusaurus Tutorial - 5min ⏱️ - +
+
+ πŸš€ Beta Release +
+ + + Debros Network + + +

+ {siteConfig.tagline} +

+ +

+ Build scalable, decentralized applications with ease using our next-generation + framework powered by OrbitDB, IPFS, and cutting-edge web technologies. +

+ +
+ + Get Started + β†’ + + + + View Documentation + +
+ +
+ Quick Start: + + npm create debros-app my-app + +
-
+
+ ); +} + +function StatsSection() { + return ( +
+
+
+
+
100%
+
TypeScript
+
+
+
Zero
+
Config
+
+
+
∞
+
Scalability
+
+
+
🌐
+
Decentralized
+
+
+
+
+ ); +} + +function VideoSection() { + return ( +
+
+
+ + See Debros Network in Action + +

+ Watch our comprehensive tutorial to learn how to build your first decentralized application +

+
+
+
+ {/* Replace VIDEO_ID_HERE with your actual YouTube video ID */} + +
+
+
+ πŸš€ Quick Start: Get up and running in under 5 minutes +
+
+ πŸ“š Step-by-Step: Follow along with detailed explanations +
+
+ πŸ”§ Best Practices: Learn the recommended patterns and approaches +
+
+
+
+
); } @@ -33,10 +137,12 @@ export default function Home(): ReactNode { const {siteConfig} = useDocusaurusContext(); return ( - + title={siteConfig.title} + description="Next-Generation Decentralized Web Framework - Build scalable, decentralized applications with ease using Debros Network"> + +
+