diff --git a/docs/html/intro-html.md b/docs/html/intro-html.md new file mode 100644 index 00000000..0f981abb --- /dev/null +++ b/docs/html/intro-html.md @@ -0,0 +1,37 @@ +--- +title: Introduction to HTML +sidebar_label: Introduction +--- + +# Introduction to HTML + +HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript). + +## What is HTML? + +HTML is not a programming language; it is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. + +## Basic HTML Structure + +Every HTML document has a basic structure: + +```html + + + + Page Title + + +

My First Heading

+

My first paragraph.

+ + +``` + +- ``: The declaration defines that this document is an HTML5 document. +- ``: The root element of an HTML page. +- ``: Contains meta information about the HTML page. +- ``: Specifies a title for the HTML page. +- `<body>`: Defines the document's body, and is a container for all the visible contents. +- `<h1>`: Defines a large heading. +- `<p>`: Defines a paragraph. diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 212833d7..b7abcf3a 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -188,7 +188,7 @@ const config: Config = { }, { label: "πŸ—ΊοΈ Roadmap", - to: "https://github.com/orgs/recodehive/projects/9", + to: "/roadmaps", }, { label: "🀝 Community", diff --git a/src/components/SocialShare/SocialShare.css b/src/components/SocialShare/SocialShare.css new file mode 100644 index 00000000..2ec40221 --- /dev/null +++ b/src/components/SocialShare/SocialShare.css @@ -0,0 +1,65 @@ +.blog-post-share-section { + margin: 3rem 0; + padding: 2rem; + background: rgba(var(--ifm-color-primary-rgb), 0.05); + border-radius: 16px; + text-align: center; + border: 1px solid rgba(var(--ifm-color-primary-rgb), 0.1); +} + +.share-title { + margin-bottom: 1.5rem; + font-size: 1.25rem; + font-weight: 700; + color: var(--ifm-font-color-base); +} + +.share-buttons-row { + display: flex; + flex-wrap: wrap; + gap: 1rem; + justify-content: center; +} + +.share-btn-large { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.8rem 1.5rem; + border-radius: 50px; + color: white !important; + font-weight: 600; + text-decoration: none !important; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + font-size: 0.95rem; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +.share-btn-large:hover { + transform: translateY(-3px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); + filter: brightness(1.1); +} + +.share-btn-large.twitter { + background-color: #000000; +} + +.share-btn-large.linkedin { + background-color: #0077b5; +} + +.share-btn-large.facebook { + background-color: #1877f2; +} + +@media (max-width: 576px) { + .share-buttons-row { + flex-direction: column; + align-items: stretch; + } + + .share-btn-large { + justify-content: center; + } +} diff --git a/src/components/SocialShare/index.tsx b/src/components/SocialShare/index.tsx new file mode 100644 index 00000000..74022f1a --- /dev/null +++ b/src/components/SocialShare/index.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { useBlogPost } from '@docusaurus/plugin-content-blog/client'; +import { FaTwitter, FaLinkedin, FaFacebook } from 'react-icons/fa'; +import './SocialShare.css'; + +const SocialShare = () => { + // Safe hook call + let blogPost; + try { + blogPost = useBlogPost(); + } catch (e) { + return null; + } + + if (!blogPost) return null; + + const { metadata } = blogPost; + const { permalink, title } = metadata; + const blogUrl = `https://www.recodehive.com${permalink}`; + const shareText = encodeURIComponent(`Check out this article: ${title}`); + + return ( + <div className="blog-post-share-section"> + <h3 className="share-title">Enjoyed the article? Share it!</h3> + <div className="share-buttons-row"> + <a + href={`https://twitter.com/intent/tweet?text=${shareText}&url=${encodeURIComponent(blogUrl)}`} + target="_blank" + rel="noopener noreferrer" + className="share-btn-large twitter" + title="Share on X (Twitter)" + > + <FaTwitter /> <span>Share on X</span> + </a> + <a + href={`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(blogUrl)}`} + target="_blank" + rel="noopener noreferrer" + className="share-btn-large linkedin" + title="Share on LinkedIn" + > + <FaLinkedin /> <span>Share on LinkedIn</span> + </a> + <a + href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(blogUrl)}`} + target="_blank" + rel="noopener noreferrer" + className="share-btn-large facebook" + title="Share on Facebook" + > + <FaFacebook /> <span>Share on Facebook</span> + </a> + </div> + </div> + ); +}; + +export default SocialShare; diff --git a/src/pages/dashboard/giveaway/index.tsx b/src/pages/dashboard/giveaway/index.tsx index a53a7a3c..c73a5036 100644 --- a/src/pages/dashboard/giveaway/index.tsx +++ b/src/pages/dashboard/giveaway/index.tsx @@ -743,32 +743,30 @@ const GiveawayPage: React.FC = () => { {/* Giveaway Stats Grid */} <motion.section - className="dashboard-stats-section" + className="dashboard-stats-section grid grid-cols-1 md:grid-cols-3 gap-4 flex-wrap" initial={{ opacity: 0, y: 10 }} whileInView={{ opacity: 1 }} transition={{ duration: 0.6 }} viewport={{ once: true }} > - <div className=""> - <StatCard - icon="⏳" - title="Next Giveaway" - valueText="5 Days" - description="Time remaining" - /> - <StatCard - icon="🎫" - title="Entries" - valueText={leaderboard.length.toString()} - description="Total participants" - /> - <StatCard - icon="πŸ…" - title="Total Winners" - valueText="3" - description="Winners per giveaway" - /> - </div> + <StatCard + icon="⏳" + title="Next Giveaway" + valueText="5 Days" + description="Time remaining" + /> + <StatCard + icon="🎫" + title="Entries" + valueText={leaderboard.length.toString()} + description="Total participants" + /> + <StatCard + icon="πŸ…" + title="Total Winners" + valueText="3" + description="Winners per giveaway" + /> </motion.section> {/* Giveaway Leaderboard */} diff --git a/src/pages/roadmaps/css.tsx b/src/pages/roadmaps/css.tsx new file mode 100644 index 00000000..c47b9143 --- /dev/null +++ b/src/pages/roadmaps/css.tsx @@ -0,0 +1,90 @@ +import React from "react"; +import Layout from "@theme-original/Layout"; +import Link from "@docusaurus/Link"; +import { roadmaps } from "../../data/roadmaps/index"; +import Head from "@docusaurus/Head"; +import "./roadmaps.css"; + +export default function CSSRoadmap(): React.JSX.Element { + const cssRoadmap = roadmaps.find(r => r.id === 'css'); + + if (!cssRoadmap) { + return ( + <Layout title="Roadmap Not Found"> + <div className="container" style={{ padding: '5rem 0', textAlign: 'center' }}> + <h1>Roadmap Not Found</h1> + <Link to="/roadmaps">Back to All Roadmaps</Link> + </div> + </Layout> + ); + } + + return ( + <Layout + title="CSS Learning Roadmap" + description="Master the art of styling web pages with CSS, from fundamentals to advanced layouts." + > + <Head> + <link rel="preconnect" href="https://fonts.googleapis.com" /> + <link + rel="preconnect" + href="https://fonts.gstatic.com" + crossOrigin="anonymous" + /> + <link + href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" + rel="stylesheet" + /> + </Head> + + <div className="roadmap-page"> + {/* Back Link */} + <div className="container" style={{ paddingTop: '2rem' }}> + <Link to="/roadmaps" className="back-link"> + ← Back to All Roadmaps + </Link> + </div> + + {/* Hero Section */} + <section className="roadmap-hero" style={{ padding: '3rem 0' }}> + <div className="container"> + <h1 className="hero-title"> + <span className="gradient-text">CSS</span> Roadmap + </h1> + <p className="hero-subtitle"> + {cssRoadmap.description} + </p> + </div> + </section> + + {/* Timeline Section */} + <div className="roadmap-timeline"> + <div className="timeline-section"> + <div className="section-dot"></div> + <h2 className="section-title">Core Concepts</h2> + <div className="timeline-items"> + {cssRoadmap.lessons.map((lesson, idx) => ( + <a + key={idx} + href={lesson.link} + target="_blank" + rel="noopener noreferrer" + className="timeline-item" + > + <div className="item-content"> + <span className="item-status-icon">β­•</span> + <div> + <div className="item-text">{lesson.title}</div> + <div className="item-subtext" style={{ fontSize: '0.85rem', opacity: 0.6 }}>Duration: {lesson.duration}</div> + </div> + </div> + <span className="item-arrow">β†—</span> + </a> + ))} + </div> + </div> + </div> + </div> + </Layout> + ); +} diff --git a/src/pages/roadmaps/html.tsx b/src/pages/roadmaps/html.tsx new file mode 100644 index 00000000..a67220fe --- /dev/null +++ b/src/pages/roadmaps/html.tsx @@ -0,0 +1,78 @@ +import React from "react"; +import Layout from "@theme-original/Layout"; +import Link from "@docusaurus/Link"; +import { htmlRoadmapData } from "../../data/roadmaps/html"; +import Head from "@docusaurus/Head"; +import "./roadmaps.css"; + +export default function HTMLRoadmap(): React.JSX.Element { + return ( + <Layout + title="HTML Learning Roadmap" + description="A comprehensive step-by-step guide to mastering HTML, from basics to SEO and accessibility." + > + <Head> + <link rel="preconnect" href="https://fonts.googleapis.com" /> + <link + rel="preconnect" + href="https://fonts.gstatic.com" + crossOrigin="anonymous" + /> + <link + href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" + rel="stylesheet" + /> + </Head> + + <div className="roadmap-page"> + {/* Back Link */} + <div className="container" style={{ paddingTop: '2rem' }}> + <Link to="/roadmaps" className="back-link"> + ← Back to All Roadmaps + </Link> + </div> + + {/* Hero Section */} + <section className="roadmap-hero" style={{ padding: '3rem 0' }}> + <div className="container"> + <h1 className="hero-title"> + <span className="gradient-text">HTML</span> Roadmap + </h1> + <p className="hero-subtitle"> + The foundation of the web. Follow this path to learn how to + structure your web pages correctly and optimize them for + search engines. + </p> + </div> + </section> + + {/* Timeline Section */} + <div className="roadmap-timeline"> + {htmlRoadmapData.map((section, idx) => ( + <div key={idx} className="timeline-section"> + <div className="section-dot"></div> + <h2 className="section-title">{section.title}</h2> + <div className="timeline-items"> + {section.items.map((item, itemIdx) => ( + <Link + key={itemIdx} + to={item.link !== '#' ? item.link : undefined} + className={`timeline-item ${item.link === '#' ? 'inactive' : ''}`} + > + <div className="item-content"> + <span className="item-status-icon"> + {item.status === 'completed' ? 'βœ…' : 'β­•'} + </span> + <span className="item-text">{item.text}</span> + </div> + {item.link !== '#' && <span className="item-arrow">β†’</span>} + </Link> + ))} + </div> + </div> + ))} + </div> + </div> + </Layout> + ); +} diff --git a/src/pages/roadmaps/index.tsx b/src/pages/roadmaps/index.tsx new file mode 100644 index 00000000..84a18e14 --- /dev/null +++ b/src/pages/roadmaps/index.tsx @@ -0,0 +1,74 @@ +import React from "react"; +import Layout from "@theme/Layout"; +import Link from "@docusaurus/Link"; +import { roadmaps } from "../../data/roadmaps/index"; +import Head from "@docusaurus/Head"; +import "./roadmaps.css"; + +export default function RoadmapLanding(): React.JSX.Element { + return ( + <Layout + title="Learning Roadmaps" + description="Step-by-step guides to mastering web development and modern technologies." + > + <Head> + <link rel="preconnect" href="https://fonts.googleapis.com" /> + <link + rel="preconnect" + href="https://fonts.gstatic.com" + crossOrigin="anonymous" + /> + <link + href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" + rel="stylesheet" + /> + </Head> + + <div className="roadmap-page"> + {/* Hero Section */} + <section className="roadmap-hero"> + <div className="container"> + <h1 className="hero-title"> + <span className="gradient-text">Master</span> Your Craft + </h1> + <p className="hero-subtitle"> + Choose a path and follow our step-by-step guides to become a + professional developer. Our roadmaps are curated by experts to + take you from zero to hero. + </p> + </div> + </section> + + {/* Roadmaps Grid */} + <section className="roadmaps-section"> + <div className="container"> + <div className="roadmaps-grid"> + {roadmaps.map((roadmap) => ( + <Link + to={`/roadmaps/${roadmap.id}`} + key={roadmap.id} + className="roadmap-card" + > + <div className="card-icon"> + {roadmap.id === 'html' && 'πŸ“„'} + {roadmap.id === 'css' && '🎨'} + {roadmap.id === 'javascript' && '⚑'} + {!['html', 'css', 'javascript'].includes(roadmap.id) && 'πŸš€'} + </div> + <h3 className="card-title">{roadmap.title}</h3> + <p className="card-description">{roadmap.description}</p> + <div className="card-footer"> + <span className="lesson-count"> + {roadmap.lessons.length} Modules + </span> + <span className="explore-btn">Explore Path β†’</span> + </div> + </Link> + ))} + </div> + </div> + </section> + </div> + </Layout> + ); +} diff --git a/src/pages/roadmaps/javascript.tsx b/src/pages/roadmaps/javascript.tsx new file mode 100644 index 00000000..ebcb04f9 --- /dev/null +++ b/src/pages/roadmaps/javascript.tsx @@ -0,0 +1,74 @@ +import React from "react"; +import Layout from "@theme-original/Layout"; +import Link from "@docusaurus/Link"; +import roadmapJavaScript from "../../data/roadmaps/javascript/index"; +import Head from "@docusaurus/Head"; +import "./roadmaps.css"; + +export default function JavascriptRoadmap(): React.JSX.Element { + return ( + <Layout + title="JavaScript Learning Roadmap" + description="Step-by-step guide to mastering JavaScript, from beginner to advanced topics." + > + <Head> + <link rel="preconnect" href="https://fonts.googleapis.com" /> + <link + rel="preconnect" + href="https://fonts.gstatic.com" + crossOrigin="anonymous" + /> + <link + href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" + rel="stylesheet" + /> + </Head> + + <div className="roadmap-page"> + {/* Back Link */} + <div className="container" style={{ paddingTop: '2rem' }}> + <Link to="/roadmaps" className="back-link"> + ← Back to All Roadmaps + </Link> + </div> + + {/* Hero Section */} + <section className="roadmap-hero" style={{ padding: '3rem 0' }}> + <div className="container"> + <h1 className="hero-title"> + <span className="gradient-text">JavaScript</span> Roadmap + </h1> + <p className="hero-subtitle"> + The language of the web. Move from basic syntax to advanced + asynchronous patterns and modern frameworks. + </p> + </div> + </section> + + {/* Timeline Section */} + <div className="roadmap-timeline"> + {roadmapJavaScript.map((section, idx) => ( + <div key={idx} className="timeline-section"> + <div className="section-dot"></div> + <h2 className="section-title">{section.title}</h2> + <p className="section-desc" style={{ marginBottom: '1.5rem', opacity: 0.7 }}>{section.description}</p> + <div className="timeline-items"> + {section.topics.map((topic, topicIdx) => ( + <div key={topicIdx} className="timeline-item inactive"> + <div className="item-content"> + <span className="item-status-icon">β­•</span> + <div> + <div className="item-text">{topic.title}</div> + <div className="item-subtext" style={{ fontSize: '0.85rem', opacity: 0.6 }}>{topic.description}</div> + </div> + </div> + </div> + ))} + </div> + </div> + ))} + </div> + </div> + </Layout> + ); +} diff --git a/src/pages/roadmaps/roadmaps.css b/src/pages/roadmaps/roadmaps.css new file mode 100644 index 00000000..73a5af6f --- /dev/null +++ b/src/pages/roadmaps/roadmaps.css @@ -0,0 +1,225 @@ +.roadmap-page { + font-family: 'Inter', sans-serif; + background-color: var(--ifm-background-color); + min-height: 100vh; + padding-bottom: 5rem; +} + +.roadmap-hero { + padding: 6rem 0 4rem; + text-align: center; + background: radial-gradient(circle at top, rgba(var(--ifm-color-primary-rgb), 0.1) 0%, transparent 70%); +} + +.hero-title { + font-size: 4rem; + font-weight: 800; + margin-bottom: 1.5rem; + letter-spacing: -0.02em; +} + +.gradient-text { + background: linear-gradient(135deg, var(--ifm-color-primary) 0%, var(--ifm-color-primary-darker) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +} + +.hero-subtitle { + font-size: 1.25rem; + color: var(--ifm-font-color-base); + max-width: 800px; + margin: 0 auto; + line-height: 1.6; + opacity: 0.8; +} + +.roadmaps-section { + padding: 4rem 0; +} + +.roadmaps-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 2.5rem; +} + +.roadmap-card { + display: flex; + flex-direction: column; + padding: 2.5rem; + background: var(--ifm-card-background-color); + border: 1px solid var(--ifm-color-emphasis-200); + border-radius: 24px; + text-decoration: none !important; + color: inherit !important; + transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); +} + +.roadmap-card:hover { + transform: translateY(-10px); + border-color: var(--ifm-color-primary); + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); +} + +.card-icon { + font-size: 3rem; + margin-bottom: 1.5rem; +} + +.card-title { + font-size: 1.75rem; + font-weight: 700; + margin-bottom: 1rem; +} + +.card-description { + font-size: 1rem; + line-height: 1.6; + margin-bottom: 2rem; + opacity: 0.7; + flex-grow: 1; +} + +.card-footer { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 1.5rem; + border-top: 1px solid var(--ifm-color-emphasis-200); +} + +.lesson-count { + font-weight: 600; + color: var(--ifm-color-primary); + font-size: 0.9rem; +} + +.explore-btn { + font-weight: 700; + font-size: 0.95rem; + color: var(--ifm-color-primary); + transition: transform 0.3s ease; +} + +.roadmap-card:hover .explore-btn { + transform: translateX(5px); +} + +/* Specific Roadmap Detail Page Styles */ +.roadmap-detail-header { + padding: 4rem 0; + background: var(--ifm-color-emphasis-100); + border-bottom: 1px solid var(--ifm-color-emphasis-200); +} + +.roadmap-timeline { + max-width: 900px; + margin: 4rem auto; + padding: 0 2rem; + position: relative; +} + +.roadmap-timeline::before { + content: ''; + position: absolute; + left: 2rem; + top: 0; + bottom: 0; + width: 4px; + background: var(--ifm-color-emphasis-200); + border-radius: 2px; +} + +.timeline-section { + margin-bottom: 4rem; + position: relative; + padding-left: 3.5rem; +} + +.section-dot { + position: absolute; + left: -0.6rem; + top: 0.25rem; + width: 24px; + height: 24px; + background: var(--ifm-color-primary); + border: 4px solid var(--ifm-background-color); + border-radius: 50%; + z-index: 1; +} + +.section-title { + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 1.5rem; + color: var(--ifm-color-primary); +} + +.timeline-items { + display: grid; + gap: 1.5rem; +} + +.timeline-item { + display: flex; + align-items: center; + justify-content: space-between; + padding: 1.5rem; + background: var(--ifm-card-background-color); + border: 1px solid var(--ifm-color-emphasis-200); + border-radius: 16px; + transition: all 0.3s ease; + text-decoration: none !important; + color: inherit !important; +} + +.timeline-item:hover { + transform: translateX(10px); + border-color: var(--ifm-color-primary); + background: rgba(var(--ifm-color-primary-rgb), 0.02); +} + +.item-content { + display: flex; + align-items: center; + gap: 1rem; +} + +.item-status-icon { + font-size: 1.25rem; +} + +.item-text { + font-weight: 500; + font-size: 1.1rem; +} + +.item-arrow { + color: var(--ifm-color-primary); + font-weight: 700; +} + +.back-link { + display: inline-block; + margin-bottom: 2rem; + font-weight: 600; + color: var(--ifm-color-primary); + text-decoration: none !important; +} + +[data-theme="dark"] .roadmap-card, +[data-theme="dark"] .timeline-item { + background: #1e1e1e; + border-color: #333; +} + +@media (max-width: 768px) { + .hero-title { + font-size: 2.5rem; + } + + .roadmaps-grid { + grid-template-columns: 1fr; + } +} diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js index 39b1b869..5c9547c1 100644 --- a/src/theme/MDXComponents.js +++ b/src/theme/MDXComponents.js @@ -5,6 +5,7 @@ import Tabs from "@theme/Tabs"; import Comming from "../components/Comming"; import Image from "@theme/IdealImage"; import GiscusComments from "../components/giscus"; +import SocialShare from "../components/SocialShare"; export default { ...MDXComponents, @@ -14,4 +15,5 @@ export default { Comming, Image, GiscusComments, + SocialShare, };