fix: docs page

pstachula-dev · Oct 6, 2024 · 0cb2192 · 0cb2192
1 parent 08ffa7a
commit 0cb2192
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# React Simple Headless Carousel
+# React Micro Carousel
 
 ![example workflow](https://github.com/pstachula-dev/simple-headless-carousel/actions/workflows/main.yml/badge.svg)
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/docs/docusaurus.config.ts b/packages/docs/docusaurus.config.ts
@@ -3,7 +3,7 @@ import type { Config } from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 
 const config: Config = {
-  title: 'React Simple Headless Carousel',
+  title: 'React Micro Carousel',
   tagline: 'Documentation and examples',
   favicon: 'img/favicon.ico',
 
@@ -49,7 +49,7 @@ const config: Config = {
     // Replace with your project's social card
     image: 'img/docusaurus-social-card.jpg',
     navbar: {
-      title: 'React Simple Headless Carousel',
+      title: 'React Micro Carousel',
       logo: {
         alt: 'My Site Logo',
         src: 'img/logo.svg',
@@ -80,7 +80,7 @@ const config: Config = {
           items: [
             {
               label: 'Tutorial',
-              to: '/docs/intro',
+              to: '/docs/tutorial/basic',
             },
           ],
         },
@@ -89,11 +89,11 @@ const config: Config = {
           items: [
             {
               label: 'GitHub',
-              href: 'https://github.com/facebook/docusaurus',
+              href: 'https://github.com/pstachula-dev/simple-headless-carousel',
             },
             {
               label: 'NPM',
-              href: 'https://github.com/facebook/docusaurus',
+              href: 'https://www.npmjs.com/package/react-simple-headless-carousel',
             },
           ],
         },
@@ -102,7 +102,7 @@ const config: Config = {
           items: [],
         },
       ],
-      copyright: `Copyright © ${new Date().getFullYear()} My Project, Inc. Built with Docusaurus.`,
+      copyright: `Copyright © ${new Date().getFullYear()} React Micro Carousel, Inc. Built with Docusaurus.`,
     },
     prism: {
       theme: prismThemes.dracula,

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -18,10 +18,11 @@
     "@docusaurus/preset-classic": "3.4.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
+    "lucide-react": "^0.447.0",
     "prism-react-renderer": "^2.3.0",
-    "react-simple-headless-carousel": "^0.0.18",
     "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react-dom": "^18.0.0",
+    "react-simple-headless-carousel": "^0.0.18"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.4.0",

diff --git a/packages/docs/src/components/HomepageFeatures/index.tsx b/packages/docs/src/components/HomepageFeatures/index.tsx
@@ -1,39 +1,59 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable global-require */
 import clsx from 'clsx';
+import { ReactNode } from 'react';
+import { Weight, Rocket, PaintBucket } from 'lucide-react';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 
 type FeatureItem = {
   title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+  Svg: ReactNode;
   description: JSX.Element;
 };
 
 const FeatureList: FeatureItem[] = [
   {
-    title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
-    description: <>TODO...</>,
+    title: 'Core Features',
+    Svg: <Weight style={{ marginTop: 100 }} size={60} />,
+    description: (
+      <div className={styles.featureItem}>
+        The Carousel is a <strong>lightweight</strong>,{' '}
+        <strong>dependency-free</strong> component with{' '}
+        <strong>TypeScript</strong> support. It&apos;s{' '}
+        <strong>Tailwind CSS</strong> compatible and offers{' '}
+        <strong>responsive</strong> design for various devices.
+      </div>
+    ),
   },
   {
-    title: 'Focus on minimalism',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
-    description: <>TODO...</>,
+    title: 'User Interaction',
+    Svg: <Rocket style={{ marginTop: 100 }} size={60} />,
+    description: (
+      <div className={styles.featureItem}>
+        This carousel handles touch and mouse events smoothly and implements{' '}
+        <strong>lazy image loading</strong> for optimized performance across
+        different devices.
+      </div>
+    ),
   },
   {
-    title: 'Powered by React',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
-    description: <>TODO...</>,
+    title: 'Customization',
+    Svg: <PaintBucket style={{ marginTop: 100 }} size={60} />,
+    description: (
+      <div className={styles.featureItem}>
+        Easy to integrate with Tailwind or non-Tailwind projects, this{' '}
+        <strong>headless styles</strong> allows for custom styling while
+        maintaining core functionality.
+      </div>
+    ),
   },
 ];
 
 function Feature({ title, Svg, description }: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
-      <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
-      </div>
+      <div className="text--center">{Svg}</div>
       <div className="text--center padding-horiz--md">
         <Heading as="h3">{title}</Heading>
         <p>{description}</p>

diff --git a/packages/docs/src/components/HomepageFeatures/styles.module.css b/packages/docs/src/components/HomepageFeatures/styles.module.css
@@ -9,3 +9,13 @@
   height: 200px;
   width: 200px;
 }
+
+svg {
+  display: inline-block;
+}
+
+h3 {
+  font-weight: bold;
+  font-size: 1.4rem;
+  margin: 16px 0;
+}
diff --git a/packages/docs/src/css/custom.css b/packages/docs/src/css/custom.css
@@ -6,7 +6,7 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #2e8555;
+  --ifm-color-primary: #1a212d;
   --ifm-color-primary-dark: #29784c;
   --ifm-color-primary-darker: #277148;
   --ifm-color-primary-darkest: #205d3b;
@@ -19,7 +19,7 @@
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
+  --ifm-color-primary: #487dda;
   --ifm-color-primary-dark: #21af90;
   --ifm-color-primary-darker: #1fa588;
   --ifm-color-primary-darkest: #1a8870;
@@ -40,3 +40,7 @@ button {
 .bg-default {
   background-color: #ccc;
 }
+
+.hero__title {
+  font-weight: bold;
+}
diff --git a/packages/docs/src/pages/index.module.css b/packages/docs/src/pages/index.module.css
@@ -20,4 +20,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  margin: 32px 0;
 }
diff --git a/packages/react-simple-headless-carousel/package.json b/packages/react-simple-headless-carousel/package.json
@@ -10,7 +10,7 @@
   "homepage": "https://simple-react-carousel.onrender.com/",
   "version": "0.0.19",
   "sideEffects": false,
-  "description": "React simple headless carousel",
+  "description": "React Micro Carousel",
   "keywords": [
     "react",
     "reactjs",

diff --git a/packages/react-simple-headless-carousel/src/App.tsx b/packages/react-simple-headless-carousel/src/App.tsx
@@ -4,7 +4,7 @@ function App() {
   return (
     <div className="h-lvh w-full bg-gray-800  font-bold text-white">
       <div className="mx-auto flex max-w-3xl flex-col gap-6 pt-10 text-center">
-        <h1 className="my-6 text-3xl">React Simple Headless Carousel Demo</h1>
+        <h1 className="my-6 text-3xl">React Micro Carousel Demo</h1>
 
         {/* example start */}
         <div className="my-4">