From b7af87ef191adcd36581f564bd3a79dc72517876 Mon Sep 17 00:00:00 2001
From: LuckySharma014 <117056913+LuckySharma014@users.noreply.github.com>
Date: Tue, 18 Jun 2024 12:51:05 +0530
Subject: [PATCH] chore: corrected examples

---
 .../rafty-nextjs-pages-router/pages/index.js  | 51 ++++++++--------
 examples/rafty-nextjs/app/page.js             | 58 +++++++++++--------
 2 files changed, 61 insertions(+), 48 deletions(-)

diff --git a/examples/rafty-nextjs-pages-router/pages/index.js b/examples/rafty-nextjs-pages-router/pages/index.js
index 23fd7e81..3fc4caa5 100644
--- a/examples/rafty-nextjs-pages-router/pages/index.js
+++ b/examples/rafty-nextjs-pages-router/pages/index.js
@@ -1,6 +1,5 @@
 import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
-import { Card, CardContent, CardHeader } from "@rafty/ui";
-import { Button } from "@rafty/ui";
+import { Card, CardContent, CardHeader,Button } from "@rafty/ui";
 import Image from "next/image";
 import { useState } from "react";
 import Logo from "../public/rhinobase.png";
@@ -28,7 +27,7 @@ export default function Home() {
               target="_blank"
               rel="noopener noreferrer"
             >
-              By{" "}
+              By" "
               <Image
                 className="rounded-md "
                 src={Logo}
@@ -69,14 +68,16 @@ export default function Home() {
             rel="noopener noreferrer"
           >
             <Card className="dark:hover:bg-secondary-950 group h-full transition-all ease-in-out hover:bg-white">
-              <CardHeader className="text-xl">
-                Docs{" "}
-                <p className="inline-block transition-transform group-hover:translate-x-1">
+              <CardHeader>
+                <h4 className="text-xl">
+                Docs" "
+                <span className="inline-block transition-transform group-hover:translate-x-1">
                   &gt;
-                </p>
+                </span></h4>
               </CardHeader>
-              <CardContent className="text-secondary-400">
-                Find in-depth information about @rafty/ui features and API.
+              <CardContent>
+                <p className="text-secondary-400">
+                Find in-depth information about @rafty/ui features and API.</p>
               </CardContent>
             </Card>
           </a>
@@ -87,11 +88,12 @@ export default function Home() {
             rel="noopener noreferrer"
           >
             <Card className="dark:hover:bg-secondary-950 group h-full transition-all ease-in-out hover:bg-white">
-              <CardHeader className="text-xl">
-                Themes{" "}
-                <p className="inline-block transition-transform group-hover:translate-x-1">
+              <CardHeader>
+                <h4  className="text-xl">
+                Themes 
+                <span className="inline-block transition-transform group-hover:translate-x-1">
                   &gt;
-                </p>
+                </span></h4>
               </CardHeader>
               <CardContent className="text-secondary-400">
                 Check out components across different themes.
@@ -106,14 +108,16 @@ export default function Home() {
             className="md:mb-20 lg:mb-0"
           >
             <Card className="dark:hover:bg-secondary-950 group h-full transition-all ease-in-out hover:bg-white">
-              <CardHeader className="text-xl">
-                Templates{" "}
-                <p className="inline-block transition-transform group-hover:translate-x-1">
+              <CardHeader>
+                <h4 className="text-xl">
+                Templates 
+                <span className="inline-block transition-transform group-hover:translate-x-1">
                   &gt;
-                </p>
+                </span></h4>
               </CardHeader>
-              <CardContent className="text-secondary-400">
-                A collection of example, boilerplates, and scaffolds.
+              <CardContent>
+                <p className="text-secondary-400">
+                A collection of example, boilerplates, and scaffolds.</p>
               </CardContent>
             </Card>
           </a>
@@ -125,11 +129,12 @@ export default function Home() {
             className="mb-40 md:mb-20 lg:mb-0"
           >
             <Card className="dark:hover:bg-secondary-950 group h-full transition-all ease-in-out hover:bg-white ">
-              <CardHeader className="text-xl">
-                Components{" "}
-                <p className="inline-block transition-transform group-hover:translate-x-1">
+              <CardHeader>
+                <h4 className="text-xl">
+                Components
+                <span className="inline-block transition-transform group-hover:translate-x-1">
                   &gt;
-                </p>
+                </span></h4>
               </CardHeader>
               <CardContent className="text-secondary-400">
                 Prebuilt components to help you build your projects faster.
diff --git a/examples/rafty-nextjs/app/page.js b/examples/rafty-nextjs/app/page.js
index e1ac40c6..988f7889 100644
--- a/examples/rafty-nextjs/app/page.js
+++ b/examples/rafty-nextjs/app/page.js
@@ -28,7 +28,7 @@ export default function Home() {
               target="_blank"
               rel="noopener noreferrer"
             >
-              By{" "}
+              By" "
               <Image
                 className="rounded-md "
                 src={Logo}
@@ -69,14 +69,16 @@ export default function Home() {
             rel="noopener noreferrer"
           >
             <Card className="dark:hover:bg-secondary-950 group h-full transition-all ease-in-out hover:bg-white">
-              <CardHeader className="text-xl">
-                Docs{" "}
-                <p className="inline-block transition-transform group-hover:translate-x-1">
+              <CardHeader>
+                <h4 className="text-xl">
+                Docs" "
+                <span className="inline-block transition-transform group-hover:translate-x-1">
                   &gt;
-                </p>
+                </span></h4>
               </CardHeader>
-              <CardContent className="text-secondary-400">
-                Find in-depth information about @rafty/ui features and API.
+              <CardContent>
+                <p className="text-secondary-400">
+                Find in-depth information about @rafty/ui features and API.</p>
               </CardContent>
             </Card>
           </a>
@@ -87,14 +89,16 @@ export default function Home() {
             rel="noopener noreferrer"
           >
             <Card className="dark:hover:bg-secondary-950 group h-full transition-all ease-in-out hover:bg-white">
-              <CardHeader className="text-xl">
-                Themes{" "}
-                <p className="inline-block transition-transform group-hover:translate-x-1">
+              <CardHeader>
+                <h4 className="text-xl">
+                Themes" "
+                <span className="inline-block transition-transform group-hover:translate-x-1">
                   &gt;
-                </p>
+                </span></h4>
               </CardHeader>
-              <CardContent className="text-secondary-400">
-                Check out components across different themes.
+              <CardContent>
+                <p className="text-secondary-400">
+                Check out components across different themes.</p>
               </CardContent>
             </Card>
           </a>
@@ -106,14 +110,16 @@ export default function Home() {
             className="md:mb-20 lg:mb-0"
           >
             <Card className="dark:hover:bg-secondary-950 group h-full transition-all ease-in-out hover:bg-white">
-              <CardHeader className="text-xl">
-                Templates{" "}
-                <p className="inline-block transition-transform group-hover:translate-x-1">
+              <CardHeader>
+                <h4 className="text-xl">
+                Templates" "
+                <span className="inline-block transition-transform group-hover:translate-x-1">
                   &gt;
-                </p>
+                </span></h4>
               </CardHeader>
-              <CardContent className="text-secondary-400">
-                A collection of example, boilerplates, and scaffolds.
+              <CardContent>
+                <p className="text-secondary-400">
+                A collection of example, boilerplates, and scaffolds.</p>
               </CardContent>
             </Card>
           </a>
@@ -125,14 +131,16 @@ export default function Home() {
             className="mb-40 md:mb-20 lg:mb-0"
           >
             <Card className="dark:hover:bg-secondary-950 group h-full transition-all ease-in-out hover:bg-white">
-              <CardHeader className="text-xl">
-                Components{" "}
-                <p className="inline-block transition-transform group-hover:translate-x-1">
+              <CardHeader>
+                <h4 className="text-xl">
+                Components" "
+                <span className="inline-block transition-transform group-hover:translate-x-1">
                   &gt;
-                </p>
+                </span></h4>
               </CardHeader>
-              <CardContent className="text-secondary-400">
-                Prebuilt components to help you build your projects faster.
+              <CardContent>
+                <p className="text-secondary-400">
+                Prebuilt components to help you build your projects faster.</p>
               </CardContent>
             </Card>
           </a>