From f855b84ba46e98a580bf270a4bf43327cef94f9d Mon Sep 17 00:00:00 2001 From: Ajay Dhangar Date: Wed, 25 Mar 2026 10:04:58 +0530 Subject: [PATCH] improve all compo for Home Page --- package-lock.json | 9 + package.json | 1 + src/components/Community.tsx | 208 ++++++++++++-------- src/components/FinalCTA.tsx | 82 ++++++++ src/components/LiveSnippetPreview.tsx | 166 ++++++++++++++++ src/components/LogoMarquee.tsx | 74 +++++++ src/components/sections/EcosystemMap.tsx | 83 ++++---- src/components/sections/FeaturesSection.tsx | 143 ++++++++++---- src/components/sections/HeroSection.tsx | 180 ++++++++++------- src/components/ui/Badge.tsx | 8 + src/components/ui/Button.tsx | 7 + src/components/ui/Card.tsx | 21 +- src/pages/index.tsx | 12 +- 13 files changed, 760 insertions(+), 234 deletions(-) create mode 100644 src/components/FinalCTA.tsx create mode 100644 src/components/LiveSnippetPreview.tsx create mode 100644 src/components/LogoMarquee.tsx diff --git a/package-lock.json b/package-lock.json index 969b900..7718937 100644 --- a/package-lock.json +++ b/package-lock.json @@ -19,6 +19,7 @@ "raw-loader": "^4.0.2", "react": "^19.0.0", "react-dom": "^19.0.0", + "react-icons": "^5.6.0", "react-simple-code-editor": "^0.14.1", "tailwind-merge": "^3.5.0" }, @@ -15218,6 +15219,14 @@ "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, + "node_modules/react-icons": { + "version": "5.6.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.6.0.tgz", + "integrity": "sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index efef966..d40dd3f 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "raw-loader": "^4.0.2", "react": "^19.0.0", "react-dom": "^19.0.0", + "react-icons": "^5.6.0", "react-simple-code-editor": "^0.14.1", "tailwind-merge": "^3.5.0" }, diff --git a/src/components/Community.tsx b/src/components/Community.tsx index 323702a..0782664 100644 --- a/src/components/Community.tsx +++ b/src/components/Community.tsx @@ -1,121 +1,155 @@ +import React from 'react'; import { motion } from 'framer-motion'; -import { Users, GitFork, Star, Sparkles, Zap, Trophy } from 'lucide-react'; +import { Users, GitFork, Star, Sparkles, Zap, Trophy, Github, ExternalLink, Command } from 'lucide-react'; import Link from '@docusaurus/Link'; -import { PathLevel } from '../types'; -const pathfinderCards: Array<{ - level: PathLevel; - icon: typeof Sparkles; - description: string; - topics: string[]; - color: string; -}> = [ +const pathfinderCards = [ { level: 'Beginner', icon: Sparkles, - description: 'Start your JavaScript journey with fundamentals', - topics: ['Variables & Data Types', 'Functions & Scope', 'DOM Manipulation', 'ES6+ Basics'], - color: 'from-green-400 to-emerald-600', + description: 'Start your JavaScript journey with fundamentals.', + topics: ['Variables & Data Types', 'Functions & Scope', 'DOM Manipulation'], + color: '#10b981', // Emerald + bg: 'from-emerald-500/10 to-transparent' }, { level: 'Intermediate', icon: Zap, - description: 'Level up with advanced concepts and patterns', - topics: ['Async/Await', 'Closures', 'Prototypes', 'Design Patterns'], - color: 'from-blue-400 to-cyan-600', + description: 'Level up with advanced concepts and patterns.', + topics: ['Async/Await', 'Closures', 'Design Patterns'], + color: 'var(--ifm-color-primary)', // Blue + bg: 'from-blue-500/10 to-transparent' }, { level: 'Advanced', icon: Trophy, - description: 'Master expert-level JavaScript techniques', - topics: ['Performance Optimization', 'Build Tools', 'Testing', 'Architecture'], - color: 'from-purple-400 to-pink-600', + description: 'Master expert-level JavaScript techniques.', + topics: ['Optimization', 'Architecture', 'Testing'], + color: 'var(--accent)', // Yellow + bg: 'from-[#f7df1e]/10 to-transparent' }, ]; const githubStats = [ - { label: 'Stars', value: '15.2K', icon: Star }, - { label: 'Contributors', value: '234', icon: Users }, - { label: 'Forks', value: '3.8K', icon: GitFork }, + { label: 'Stars', value: '15.2K', icon: Star, color: 'text-yellow-500' }, + { label: 'Contributors', value: '234', icon: Users, color: 'text-blue-500' }, + { label: 'Forks', value: '3.8K', icon: GitFork, color: 'text-purple-500' }, ]; -export function Community() { +export const Community: React.FC = () => { return ( -
-
-
+
+ {/* Theme Grid Background */} +
+ +
+ {/* Section Header */} +
-

- Join Our Community -

-

- Trusted by thousands of developers worldwide -

+ + Project Stats +

+ Join the Movement +

+

+ Trusted by thousands of developers. We are building the world's most accessible JavaScript roadmap. +

+
-
- {githubStats.map((stat, index) => { - const Icon = stat.icon; - return ( - - -
{stat.value}
-
{stat.label}
- - ); - })} -
+ {/* GitHub Stats Row */} +
+ {githubStats.map((stat, idx) => ( + + +
{stat.value}
+
{stat.label}
+ + ))} +
- -
+ {/* Pathfinder Grid */} +
+ {pathfinderCards.map((path) => ( +
+
+
+
+
+ +
+ + Level: {path.level} + +
+

{path.level} Path

+

{path.description}

+ +
    + {path.topics.map(topic => ( +
  • +
    + {topic} +
    • + ))} +
-
-

- Open Source & Free Forever -

-

- Built by the community, for the community. Contribute, learn, and grow - together with developers from around the world. -

-
- - Contribute on GitHub - - - Browse Projects - +
- + ))}
-
-
+ + {/* Call to Action Box */} + +
+ {/* Background Accent */} +
+ +

+ Open Source & Free Forever +

+

+ Contribute your knowledge or learn from others. Our mission is to keep high-quality + tech education accessible to every human on earth. +

+ +
+ + + Contribute on GitHub + + + Browse Projects + + +
+
+ +
+
); -} +} \ No newline at end of file diff --git a/src/components/FinalCTA.tsx b/src/components/FinalCTA.tsx new file mode 100644 index 0000000..b4d05ff --- /dev/null +++ b/src/components/FinalCTA.tsx @@ -0,0 +1,82 @@ +import React from 'react'; +import { motion } from 'framer-motion'; +import { Rocket, ArrowRight, Github, Sparkles, Star } from 'lucide-react'; +import Link from '@docusaurus/Link'; + +export const FinalCTA: React.FC = () => { + return ( +
+ {/* 1. Background Layering */} +
+
+ + {/* 2. Central Glow Orb */} +
+ +
+ + {/* Decorative Corner Icons */} + + + +
+ {/* Animated Rocket Icon */} + + + + +

+ Ready to Ship Better Code? +

+ +

+ Join 15,000+ developers mastering the JavaScript ecosystem. + The most comprehensive roadmap is just one click away. +

+ + {/* Primary Action Buttons */} +
+ + Start Learning Now + + + + + + Star on GitHub + +
+ + {/* Micro-Social Proof */} +
+

+ 100% Free • Open Source • Forever +

+
+
+ + {/* Background Decorative "Code Snippets" */} +
+ 
{`function master() {\n  return "success";\n}`}
+
+ +
+
+ ); +}; \ No newline at end of file diff --git a/src/components/LiveSnippetPreview.tsx b/src/components/LiveSnippetPreview.tsx new file mode 100644 index 0000000..1ad0a77 --- /dev/null +++ b/src/components/LiveSnippetPreview.tsx @@ -0,0 +1,166 @@ +import React, { useState, useRef } from 'react'; +import Editor from 'react-simple-code-editor'; +import Prism from 'prismjs'; +import 'prismjs/components/prism-javascript'; +import { Play, RotateCcw, Terminal, Sparkles, Zap, Command, Copy, Check } from 'lucide-react'; +import BrowserOnly from '@docusaurus/BrowserOnly'; +import clsx from 'clsx'; + +const DEFAULT_CODE = `// ⚡ Mastery Hub: Quick Logic Test +const challenge = { + topic: "Closures", + difficulty: "Expert", + status: "Learning" +}; + +function unlockMastery(obj) { + return \`Status: \${obj.status} Mastery...\`; +} + +console.log(unlockMastery(challenge));`; + +export const LiveSnippetPreview = () => { + const [code, setCode] = useState(DEFAULT_CODE); + const [output, setOutput] = useState(''); + const [isExecuting, setIsExecuting] = useState(false); + const [copied, setCopied] = useState(false); + + const handleRun = () => { + setIsExecuting(true); + setOutput(''); + const logs: string[] = []; + const customConsole = { + log: (...args: any[]) => logs.push(args.map(a => + typeof a === 'object' ? JSON.stringify(a, null, 2) : String(a)).join(' ')) + }; + + try { + const runCode = new Function('console', code); + runCode(customConsole); + setTimeout(() => { + setOutput(logs.join('\n') || '// Output: Success (No logs)'); + setIsExecuting(false); + }, 400); // Artificial delay for UX "feel" + } catch (err: any) { + setOutput(`❌ Error: ${err.message}`); + setIsExecuting(false); + } + }; + + const copyCode = () => { + navigator.clipboard.writeText(code); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }; + + return ( +
+ {/* Background Glow */} +
+ +
+ + {/* Header with Badge */} +
+
+ + Interactive Playground +
+

+ Test your logic in the browser runtime +

+
+ + {/* Main Editor UI */} +
+ {/* Decorative Border Glow */} +
+ +
+ + {/* Left Column: Editor */} +
+
+
+
+
+
+
+
+ + javascript +
+
+ +
+ Prism.highlight(code, Prism.languages.javascript, 'javascript')} + padding={28} + className="font-mono text-sm sm:text-base leading-relaxed text-slate-300" + textareaClassName="outline-none focus:ring-0 caret-[var(--accent)]" + style={{ fontFamily: '"Fira Code", monospace' }} + /> +
+ +
+ + +
+
+ + {/* Right Column: Console */} +
+
+ Console Output +
+ +
+ + {() => ( +
+ {output ? ( +
+ {output} +
+ ) : ( +
+ +

Waiting for command...

+
+ )} +
+ )} + +
+ +
+ Memory: 0.4ms + Node v20.x +
+
+ +
+
+
+
+ ); +}; \ No newline at end of file diff --git a/src/components/LogoMarquee.tsx b/src/components/LogoMarquee.tsx new file mode 100644 index 0000000..353b90d --- /dev/null +++ b/src/components/LogoMarquee.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { motion } from 'framer-motion'; +import { + SiJavascript, SiTypescript, SiReact, SiNodedotjs, + SiNextdotjs, SiTailwindcss, SiVite, SiGithub, + SiVercel, SiMongodb, SiPostgresql, SiDocker +} from 'react-icons/si'; + +const techLogos = [ + { icon: SiJavascript, name: 'JavaScript', color: '#F7DF1E' }, + { icon: SiTypescript, name: 'TypeScript', color: '#3178C6' }, + { icon: SiReact, name: 'React', color: '#61DAFB' }, + { icon: SiNodedotjs, name: 'Node.js', color: '#339933' }, + { icon: SiNextdotjs, name: 'Next.js', color: 'currentColor' }, + { icon: SiTailwindcss, name: 'Tailwind', color: '#06B6D4' }, + { icon: SiVite, name: 'Vite', color: '#646CFF' }, + { icon: SiGithub, name: 'GitHub', color: 'currentColor' }, + { icon: SiVercel, name: 'Vercel', color: 'currentColor' }, + { icon: SiMongodb, name: 'MongoDB', color: '#47A248' }, + { icon: SiPostgresql, name: 'PostgreSQL', color: '#4169E1' }, + { icon: SiDocker, name: 'Docker', color: '#2496ED' }, +]; + +export const LogoMarquee: React.FC = () => { + // We double the array to create a seamless infinite loop + const duplicateLogos = [...techLogos, ...techLogos]; + + return ( +
+ {/* 1. Subtle Side Gradients for "Fade out" effect */} +
+
+ +
+

+ Comprehensive Mastery of Modern Web Tech +

+
+ + {/* 2. Motion Container */} +
+ + {duplicateLogos.map((tech, idx) => ( +
+ + + {tech.name} + +
+ ))} + +
+ + {/* 3. Bottom Accent Line */} +
+
+ ); +}; \ No newline at end of file diff --git a/src/components/sections/EcosystemMap.tsx b/src/components/sections/EcosystemMap.tsx index 7ef3400..5574969 100644 --- a/src/components/sections/EcosystemMap.tsx +++ b/src/components/sections/EcosystemMap.tsx @@ -11,6 +11,7 @@ import { } from "lucide-react"; import { Card } from "../ui/Card"; import { Section } from "../ui/Section"; +import { motion } from "framer-motion"; export const EcosystemMap: React.FC = () => { const ecosystemCategories = [ @@ -77,49 +78,65 @@ export const EcosystemMap: React.FC = () => { return (
-
+ {/*

JavaScript Ecosystem

Explore the vast landscape of JavaScript technologies and tools

-
+
*/} -
- {ecosystemCategories.map((category) => ( - - {/* Header: Icon and Title aligned horizontally */} -
-
- -
-

- {category.title} -

-
+
+ + Explore the JS Ecosystem + +

+ A visual directory of the technologies that power the modern web, + built for the open-source community. +

+
- {/* Content: List with better spacing and subtle bullets */} -
    - {category.items.map((item) => ( -
  • + {ecosystemCategories.map((category) => ( + - {/* The bullet now highlights on hover of the card */} - - {item} -
    • + {/* Header: Icon and Title aligned horizontally */} +
    +
    + +
    +

    + {category.title} +

    +
    + + {/* Content: List with better spacing and subtle bullets */} +
      + {category.items.map((item) => ( +
    • + {/* The bullet now highlights on hover of the card */} + + {item} +
      • + ))} +
    + ))} -
- - ))} -
+
); }; diff --git a/src/components/sections/FeaturesSection.tsx b/src/components/sections/FeaturesSection.tsx index 5763d9e..6cc440d 100644 --- a/src/components/sections/FeaturesSection.tsx +++ b/src/components/sections/FeaturesSection.tsx @@ -1,62 +1,131 @@ import React from 'react'; -import { Code, BookMarked, Play, Rocket } from 'lucide-react'; +import { + Code, + BookMarked, + Play, + Rocket, + Github, + Users, + ArrowUpRight, + Heart +} from 'lucide-react'; +import { motion } from 'framer-motion'; import { Card } from '../ui/Card'; import { Section } from '../ui/Section'; export const FeaturesSection: React.FC = () => { const features = [ + { + icon: Github, + title: 'Open Source Heart', + description: '100% transparent codebase. We believe in the power of community-driven education.', + gradient: 'from-[#f7df1e]/20 to-transparent', + isHighlight: true, + }, { icon: BookMarked, - title: 'Comprehensive Guides', - description: 'In-depth documentation covering every aspect of JavaScript from basics to advanced topics.', - gradient: 'from-blue-500 to-cyan-500', + title: 'Modern Curriculum', + description: 'Beyond console.log(). Master ES2024+, Node.js, and high-level architecture.', + gradient: 'from-blue-500/20 to-transparent', }, { icon: Code, - title: 'Interactive Examples', - description: 'Hands-on code examples you can run and modify to better understand concepts.', - gradient: 'from-green-500 to-teal-500', + title: 'Live Lab Environment', + description: 'Execute code directly in your browser with our custom-built interactive runner.', + gradient: 'from-emerald-500/20 to-transparent', }, { icon: Play, - title: 'Code Playground', - description: 'Built-in editor to experiment with JavaScript code in real-time.', - gradient: 'from-orange-500 to-red-500', + title: 'Video Breakdowns', + description: 'Visual learners welcome. Every guide comes with high-quality video walkthroughs.', + gradient: 'from-orange-500/20 to-transparent', + }, + { + icon: Users, + title: 'Global Mentorship', + description: 'Connect with senior engineers and peers in our dedicated learning channels.', + gradient: 'from-purple-500/20 to-transparent', }, { icon: Rocket, - title: 'Real-World Projects', - description: 'Build practical applications to solidify your learning and portfolio.', - gradient: 'from-pink-500 to-rose-500', + title: 'Production Ready', + description: 'Shift from tutorials to building real-world apps that users actually love.', + gradient: 'from-rose-500/20 to-transparent', }, ]; return ( -
-
-

- Why Choose Us -

-

- Everything you need to become a JavaScript expert in one place -

-
+
+ {/* Your Custom Grid Background from CSS */} +
+ +
+ {/* Header Section */} +
+
+ + + Public Good Project + +

+ The platform built by Engineers +

+
+

+ Everything you need to master JavaScript is right here free, open, and community-verified. +

+
+ + {/* Feature Grid */} +
+ {features.map((feature, idx) => ( + + + {/* Subtle Hover Gradient Flare */} +
+ +
+
+ +
+ +

+ {feature.title} + {feature.isHighlight && Core} +

+ +

+ {feature.description} +

-
- {features.map((feature) => ( - -
- -
-

- {feature.title} -

-

- {feature.description} -

- - ))} +
+ Learn More +
+
+ + + ))} +
); -}; +}; \ No newline at end of file diff --git a/src/components/sections/HeroSection.tsx b/src/components/sections/HeroSection.tsx index e0ec6ff..bbf1e31 100644 --- a/src/components/sections/HeroSection.tsx +++ b/src/components/sections/HeroSection.tsx @@ -1,109 +1,151 @@ import React from 'react'; -import { ArrowRight, Code2, Sparkles } from 'lucide-react'; +import { ArrowRight, Code2, Sparkles, Terminal, ChevronRight } from 'lucide-react'; +import { motion } from 'framer-motion'; import { Button } from '../ui/Button'; import { Container } from '../ui/Container'; export const HeroSection: React.FC = () => { return ( -
-
+
+ {/* 1. Theme-Specific Background Grid */} +
+ + {/* 2. Brand Accent Glow */} +
- -
-
-
- - - Master JavaScript in 2024 + +
+ + {/* Left Content Column */} + + {/* Featured Badge */} +
+ + + Open Source Learning Platform
-

- JavaScript - - Mastery Hub - + {/* Main Heading using your .text-gradient class */} +

+ JavaScript
+ Mastery Hub

-

- Your comprehensive guide to mastering JavaScript. From fundamentals to advanced patterns, - dive deep into the language that powers the modern web. +

+ The ultimate open-source resource for modern JavaScript. Master the language, explore the ecosystem, and contribute to the future of web education.

+ {/* Primary Actions */}
- -
-
-
-
100+
-
Guides
-
-
-
50+
-
Examples
-
-
-
30+
-
Projects
-
+ {/* Stats Section with Theme Colors */} +
+ {[ + { label: 'Guides', val: '100+' }, + { label: 'Projects', val: '30+' }, + { label: 'Contributors', val: '200+' } + ].map((stat) => ( +
+
{stat.val}
+
{stat.label}
+
+ ))}
-
+ -
-
-
-
-
-
-
+ {/* Right Visual Column (Animated Code Editor) */} + + {/* Floating Decorative Elements */} +
+
+ + {/* The Code Window */} +
+ {/* Editor Header */} +
+
+
+
+
+
+
+ + main.js +
-
+ + {/* Code Content */} +
- 1 - const - masterJS - = - async - () => {'{'} + 1 + import + {'{'} Community {'}'} + from + '@js-mastery'
- 2 - const - skills - = - await - learn - (); + 2
- 3 - return - skills. - level - === - 'expert' - ; + 3 + function + igniteSuccess + () {'{'}
- 4 + 4 + return + new + Mastery + ({'{'} +
+
+ 5 + openSource: + true +
+
+ 6 + {'}'}); +
+
+ 7 {'}'}
-
- - Ready to execute + + {/* Status Bar */} +
+
+ + Ready to contribute +
+
-
+ +
); -}; +}; \ No newline at end of file diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx index 963f581..79afeb7 100644 --- a/src/components/ui/Badge.tsx +++ b/src/components/ui/Badge.tsx @@ -27,3 +27,11 @@ export const Badge: React.FC = ({ ); }; + + +// Using Different Variants + +{/* Completed +Failed +Pending +In Progress */} diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx index 338c724..f07ce5e 100644 --- a/src/components/ui/Button.tsx +++ b/src/components/ui/Button.tsx @@ -37,3 +37,10 @@ export const Button: React.FC = ({ ); }; + +// How to use + +// +// +// +// diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx index 85987e6..f4d6eeb 100644 --- a/src/components/ui/Card.tsx +++ b/src/components/ui/Card.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React from "react"; export interface CardProps { children: React.ReactNode; @@ -9,15 +9,17 @@ export interface CardProps { export const Card: React.FC = ({ children, - className = '', + className = "", hover = false, glass = false, }) => { - const baseStyles = 'rounded-xl transition-all duration-300'; + const baseStyles = "rounded-xl transition-all duration-300"; const glassStyles = glass - ? 'bg-white/70 dark:bg-gray-800/70 backdrop-blur-lg border border-gray-200/50 dark:border-gray-700/50' - : 'bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700'; - const hoverStyles = hover ? 'hover:shadow-xl hover:-translate-y-1 cursor-pointer' : 'shadow-md'; + ? "bg-white/70 dark:bg-gray-800/70 backdrop-blur-lg border border-gray-200/50 dark:border-gray-700/50" + : "bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700"; + const hoverStyles = hover + ? "hover:shadow-xl hover:-translate-y-1 cursor-pointer" + : "shadow-md"; return (
@@ -25,3 +27,10 @@ export const Card: React.FC = ({
); }; + +// How to use + +{/* +

Standard Card

+

This is some simple content.

+; */} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 8fc917d..a9906a5 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -5,7 +5,7 @@ import Head from "@docusaurus/Head"; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import Layout from '@theme/Layout'; import {Community } from '@site/src/components/Community'; -import {Hero} from '@site/src/components/layout-1/Hero'; +// import {Hero} from '@site/src/components/layout-1/Hero'; // import Heading from '@theme/Heading'; // import styles from './index.module.css'; @@ -13,6 +13,10 @@ import {Hero} from '@site/src/components/layout-1/Hero'; import { FeaturesSection } from '../components/sections/FeaturesSection'; // import { StatsSection } from '../components/sections/StatsSection'; import { EcosystemMap } from '../components/sections/EcosystemMap'; +import { HeroSection } from '../components/sections/HeroSection'; +import { LogoMarquee } from '../components/LogoMarquee'; +import { LiveSnippetPreview } from '../components/LiveSnippetPreview'; +// import { FinalCTA } from '../components/FinalCTA'; // function HomepageHeader() { // const {siteConfig} = useDocusaurusContext(); @@ -56,10 +60,14 @@ export default function Home(): ReactNode { {/* */}
- + + {/* */} + + + {/* */}
);