More updates

4 files changed, 31 insertions, 13 deletions

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 90d44f6..9db9054 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -61,6 +61,10 @@ const Button = ({
           "bg-cyan-200 hover:bg-cyan-300 active:bg-cyan-400":
             color === "cyan" && !disabled,
         },
+        {
+          "bg-none hover:bg-cyan-300 active:bg-cyan-400":
+            color === "" && !disabled,
+        },
         { "rounded-none": rounded === "none" },
         { "rounded-md": rounded === "md" },
         { "rounded-full": rounded === "full" },
diff --git a/src/components/CodeFrame.tsx b/src/components/CodeFrame.tsx
index 22cff25..b7c9112 100644
--- a/src/components/CodeFrame.tsx
+++ b/src/components/CodeFrame.tsx
@@ -40,8 +40,9 @@ const Frame = ({
   return (
     <div className={cls}>
       <CodeBlock
-        className="!rounded-none !mb-0 px-4 py-2"
+        className="!rounded-none !mb-0 "
         language={language}
+        showLineNumbers
         title={title}
       >
         {children}
diff --git a/src/components/HomepageFeatures/index.tsx b/src/components/HomepageFeatures/index.tsx
index a106a93..a13fb23 100644
--- a/src/components/HomepageFeatures/index.tsx
+++ b/src/components/HomepageFeatures/index.tsx
@@ -3,6 +3,7 @@ import clsx from "clsx";
 import styles from "./styles.module.css";
 import CodeFrame from "../CodeFrame";
 import Button from "../Button";
+import CodeBlock from "@theme/CodeBlock";
 
 type ShowCase =
   | { code: string; language: string }
@@ -48,7 +49,7 @@ const FeatureList: FeatureItem[] = [
         messages that guide, not hinder.
       </>
     ),
-    buttonText: "Empower your Development",
+    buttonText: "Enjoy the Ride",
     showcase: { code: "", language: "" },
   },
   {
@@ -83,19 +84,31 @@ function Feature({ n, title, showcase, description, buttonText }: FeatureItem) {
   const reverse = k % 2 === 0 ? "flex-row" : "flex-row-reverse";
   const showcaseComponent =
     "code" in showcase ? (
-      <CodeFrame language={showcase.language}>{showcase.code}</CodeFrame>
+      // <CodeFrame language={showcase.language}>{showcase.code}</CodeFrame>
+      <CodeBlock
+        showLineNumbers
+        className="!rounded-none !mb-0 "
+        language={showcase.language}
+      >
+        {showcase.code}
+      </CodeBlock>
     ) : (
       <showcase.img />
     );
+  // <div className="bg-white -z-0 my-7 p-7 border-4 border-black"></div>
   return (
-    <div className={`flex p-4 ${reverse}`}>
-      {showcaseComponent}
-      <div className="bg-white -z-0 my-7 p-7 border-4 border-black">
-        <h3 className="text-xl">{title}</h3>
+    <div
+      className={`bg-violet-200 shadow-neocyan border-4 border-black p-32 flex mx-32 gap-16 ${reverse}`}
+    >
+      <div className="self-center bg-codeBg">{showcaseComponent}</div>
+      <div className="flex flex-col gap-4">
+        <h3 className="text-3xl">{title}</h3>
         <p className="text-lg">{description}</p>
-        <Button rounded="full" color="lime">
-          <h3>{buttonText}</h3>
-        </Button>
+        <div>
+          <Button rounded="full" color="cyan">
+            <h3>{buttonText}</h3>
+          </Button>
+        </div>
       </div>
     </div>
   );
@@ -105,7 +118,7 @@ export default function HomepageFeatures(): JSX.Element {
   return (
     <section>
       <div className="container">
-        <div className="col">
+        <div className="flex flex-col gap-32">
           {FeatureList.map((props, idx) => (
             <Feature key={idx} {...props} n={idx} />
           ))}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index b8a0ec6..cbff74c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -55,7 +55,7 @@ function HomepageHeader() {
 
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
-  const [disclaimerOpen, setDisclaimerOpen] = React.useState(true);
+  const [disclaimerOpen, setDisclaimerOpen] = React.useState(false);
   const message = "";
   return (
     <div className="container">
@@ -82,7 +82,7 @@ export default function Home(): JSX.Element {
       </div>
       <Layout description={`${siteConfig.tagline}`}>
         <HomepageHeader />
-        <main>
+        <main className="pt-32">
           <HomepageFeatures />
         </main>
       </Layout>