added new folder

Author: ajay-dhangar

docs/links-tables/tables.mdx

@@ -125,29 +125,6 @@ HTML tables support several attributes that allow you to customize their appeara
 </html>
 ```
 
-<BrowserWindow url="http://.../index.html">
-  <div>
-    <h1>Employee Directory</h1>
-    <table border="1" cellpadding="10" cellspacing="0">
-      <tr>
-        <th>Name</th>
-        <th>Position</th>
-        <th>Salary</th>
-      </tr>
-      <tr>
-        <td>John Doe</td>
-        <td>Software Engineer</td>
-        <td>$80,000</td>
-      </tr>
-      <tr>
-        <td>Jane Smith</td>
-        <td>Product Manager</td>
-        <td>$100,000</td>
-      </tr>
-    </table>
-  </div>
-</BrowserWindow>
-
 In the example above, the `<table>` element has the `border`, `cellpadding`, `cellspacing`, and `width` attributes set to customize the appearance of the table. The `border` attribute specifies the width of the table border, the `cellpadding` attribute specifies the padding between the cell content and the cell border, the `cellspacing` attribute specifies the spacing between cells, and the `width` attribute specifies the width of the table.
 
 ## Spanning Rows and Columns
@@ -193,28 +170,6 @@ You can span rows and columns in an HTML table using the `rowspan` and `colspan`
 </html>
 ```
 
-<BrowserWindow url="http://.../index.html">
-  <div>
-    <h1>Employee Directory</h1>
-    <table border="1" cellpadding="10" cellspacing="0">
-      <tr>
-        <th>Name</th>
-        <th>Position</th>
-        <th>Salary</th>
-      </tr>
-      <tr>
-        <td>John Doe</td>
-        <td>Software Engineer</td>
-        <td>$80,000</td>
-      </tr>
-      <tr>
-        <td>Jane Smith</td>
-        <td colspan="2">Product Manager</td>
-      </tr>
-    </table>
-  </div>
-</BrowserWindow>
-
 In the example above, the `<td>` element containing "Product Manager" spans two columns using the `colspan` attribute. This causes the cell to take up the space of two columns in the table.
 
 ## Styling Tables

src/css/custom.css

@@ -1,10 +1,3 @@
-/**
- * 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.
- */
-
-/* You can override the default Infima variables here. */
 :root {
   --ifm-color-primary: #2e8555;
   --ifm-color-primary-dark: #29784c;
@@ -28,3 +21,8 @@
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+.margin-vert--md {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}

src/pages/index.module.css

@@ -1,23 +1,91 @@
-/**
- * CSS files with the .module.css suffix will be treated as CSS modules
- * and scoped locally.
- */
-
 .heroBanner {
+  background: linear-gradient(135deg, #4c6ef53a, #15abbf33);
   padding: 4rem 0;
   text-align: center;
-  position: relative;
-  overflow: hidden;
+  border-radius: 12px;
 }
 
-@media screen and (max-width: 996px) {
-  .heroBanner {
-    padding: 2rem;
-  }
+.heroContent {
+  max-width: 960px;
+  margin: 0 auto;
+}
+
+/* .heroLogo {
+  max-width: 200px;
+  margin-bottom: 1rem;
+} */
+
+.heroTitle {
+  font-size: 3rem;
+  font-weight: 700;
+  margin: 1rem 0;
+}
+
+.heroSubtitle {
+  font-size: 1.5rem;
+  margin-bottom: 2rem;
+  line-height: 1.6;
 }
 
-.buttons {
+.buttonsContainer {
   display: flex;
-  align-items: center;
   justify-content: center;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.githubButtonContainer {
+  margin-top: 2rem;
+}
+
+.featuresSection {
+  padding: 2rem;
+  text-align: center;
+}
+
+.featuresGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+  margin-top: 2rem;
+}
+
+.featureItem {
+  background-color: #f1f3f5;
+  padding: 1.5rem;
+  border-radius: 12px;
+  transition: transform 0.3s;
+}
+
+.featureItem:hover {
+  transform: translateY(-10px);
+}
+
+[data-theme='dark'] .heroBanner {
+  background: linear-gradient(135deg, #23294632, #1d355727);
+}
+
+[data-theme='dark'] .featureItem {
+  background-color: #2a2a2a;
+  color: #e0e0e0;
+}
+
+[data-theme='dark'] .getStartedButton {
+  background-color: #3a3a3a;
+  color: #f1faee;
+}
+
+[data-theme='dark'] .exploreButton {
+  background-color: #457b9d;
+  color: #f1faee;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .heroTitle {
+    font-size: 2.5rem;
+  }
+  .heroSubtitle {
+    font-size: 1.25rem;
+  }
 }

src/pages/index.tsx

@@ -2,38 +2,74 @@ import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Layout from '@theme/Layout';
-import Heading from '@theme/Heading';
-
 import styles from './index.module.css';
 
 function HomepageHeader() {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
-      <div className="container">
-        <Heading as="h1" className="hero__title">
-          {siteConfig.title}
-        </Heading>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
+    <header className={clsx('hero', styles.heroBanner)}>
+      <div className={clsx('container', styles.heroContent)}>
+        {/* <img
+          alt={siteConfig.title}
+          className={clsx(styles.heroLogo, 'margin-vert--md')}
+          src='img/logo.svg'
+        /> */}
+        <h1 className={styles.heroTitle}>{siteConfig.title}</h1>
+        <p className={styles.heroSubtitle}>{siteConfig.tagline}</p>
+        <div className={styles.buttonsContainer}>
+          <Link
+            className={clsx('button button--primary button--lg', styles.getStartedButton)}
+            to="/docs/intro"
+          >
+            Get Started
+          </Link>
           <Link
-            className="button button--secondary button--lg"
-            to="/docs/intro">
-            Getting Started
+            className={clsx('button button--secondary button--lg', styles.exploreButton)}
+            to="#"
+          >
+            Explore Features
           </Link>
         </div>
+        {/* <div className={styles.githubButtonContainer}>
+          <iframe
+            src="https://ghbtns.com/github-btn.html?user=html-mastery&amp;repo=html-mastery.github.io&amp;type=star&amp;count=true&amp;size=large"
+            frameBorder={0}
+            scrolling={0}
+            width={170}
+            height={30}
+            title="GitHub Stars"
+          />
+        </div> */}
       </div>
     </header>
   );
 }
 
+function FeaturesSection() {
+  return (
+    <section className={styles.featuresSection}>
+      <h2>Key Features</h2>
+      <div className={styles.featuresGrid}>
+        <div className={styles.featureItem}>Comprehensive HTML Tutorials</div>
+        <div className={styles.featureItem}>Interactive Code Examples</div>
+        <div className={styles.featureItem}>In-depth Explanations</div>
+        <div className={styles.featureItem}>Community Support</div>
+      </div>
+    </section>
+  );
+}
+
 export default function Home(): JSX.Element {
-  const {siteConfig} = useDocusaurusContext();
+  const { siteConfig } = useDocusaurusContext();
   return (
     <Layout
-      title={`Hello from ${siteConfig.title}`}
-      description="HTML Mastery is a free, open-source, online resource for learning HTML.">
+      title={`Welcome to ${siteConfig.title}`}
+      description="HTML Mastery is a free, open-source, online resource for learning HTML."
+    >
       <HomepageHeader />
+      <main>
+        <FeaturesSection />
+      </main>
     </Layout>
   );
 }