🔨 fixed all build errors

Author: ariflogs

app/(marketing)/page.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { JoinNewsletter } from "@/components";
 import {
   Accordion,
@@ -12,9 +10,9 @@ import {
   H3,
   H4,
   Input,
-  ProductCard,
   Textarea,
 } from "@/packages/ui";
+import Image from "next/image";
 import Link from "next/link";
 
 export default function Home() {
@@ -31,12 +29,16 @@ export default function Home() {
         </p>
 
         <div className="max-w-96 grid gap-4 mx-auto grid-cols-2">
-          <Link href="/components" passHref>
+          <Link href="/docs" passHref>
             <Button className="w-full" aria-label="Get Started with RetroUI">
               Get Started
             </Button>
           </Link>
-          <Link href="/components" passHref>
+          <Link
+            href="https://github.com/ariflogs/retroui"
+            target="_blank"
+            passHref
+          >
             <Button
               className="w-full"
               variant="outline"
@@ -109,49 +111,49 @@ export default function Home() {
 
       <section className="container max-w-6xl mx-auto">
         <H2 className="mb-16">
-          And NO! We didn't just copy Gumroad!
+          And NO! We didn&apos;t just copy Gumroad!
           <br />
           Inspired, if you will... 💅
         </H2>
 
         <div className="grid grid-cols-1 lg:grid-cols-3 items-center">
-          <img
+          <Image
             src="/images/our_product_card.png"
             alt="our product card"
-            className="w-80"
+            width={300}
+            height={500}
           />
           <H3 className="lg:hidden mt-2 mb-12">👆 RetroUI Card</H3>
 
           <div className="hidden lg:block space-y-4">
             <H2 className="text-left">👈 RetroUI Card</H2>
-            <H2 className="text-right">Gumroad's Card 👉</H2>
+            <H2 className="text-right">Gumroad&apos;s Card 👉</H2>
           </div>
-          <img
+          <Image
             src="/images/gumroad_product_card.png"
             alt="our product card"
-            className="w-72 ml-auto"
+            className="ml-auto"
+            width={300}
+            height={600}
           />
-          <H3 className="lg:hidden mt-2">👆 Gumroad's Card</H3>
+          <H3 className="lg:hidden mt-2">👆 Gumroad&apos;s Card</H3>
         </div>
       </section>
 
       <JoinNewsletter />
       <footer className="bg-black py-8">
         <div className="container max-w-6xl mx-auto flex flex-col lg:flex-row space-y-4 lg:space-y-0 justify-between items-center">
           <div className="flex justify-center space-x-4">
-            <a
-              href="https://twitter.com/ariflogs"
-              className="text-primary-500 mx-2"
-            >
+            <a href="https://twitter.com/ariflogs" className="text-primary-500">
               Twitter
             </a>
             <a
               href="https://github.com/ariflogs/retroui"
-              className="text-primary-500 mx-2"
+              className="text-primary-500"
             >
               GitHub
             </a>
-            <a href="/docs" className="text-primary-500 mx-2">
+            <a href="/docs" className="text-primary-500">
               Documentation
             </a>
           </div>

components/JoinNewsletter.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { Button, H2, Input } from "@/packages/ui";
 import { useState } from "react";
 
@@ -115,8 +117,6 @@ export function JoinNewsletter() {
       });
   };
 
-  const isInline = formStyles.formStyle === "inline";
-
   switch (formState) {
     case SUCCESS:
       return (

components/TopNav.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Link from "next/link";
-import { GitBranchIcon, GithubIcon } from "lucide-react";
+import Image from "next/image";
+import { GithubIcon } from "lucide-react";
 import HamburgerMenu from "./HamburgerMenu";
 import { Button } from "@/packages/ui";
 import { navConfig } from "@/config/navigation";
@@ -16,10 +17,12 @@ export default function TopNav() {
               href="/"
               className="text-black font-head text-2xl flex items-end"
             >
-              <img
+              <Image
                 src="/images/logo_full.png"
                 alt="retro ui logo"
-                className="w-16 mr-2"
+                className="mr-2"
+                height={30}
+                width={60}
               />
               RetroUI
             </a>

config/components.ts

@@ -79,6 +79,15 @@ export const componentConfig = {
     type="text"
     placeholder="type something..."
     className="px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs"
+/>`,
+    },
+    "textarea-style-default": {
+      name: "textarea-style-default",
+      preview: lazy(() => import("@/preview/components/textarea-style-default")),
+      codeHtml: `<textarea
+    rows="4"
+    placeholder="type something..."
+    className="px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs"
 />`,
     },
     "typography-headings": {

content/docs/components/card.mdx

@@ -1,6 +1,6 @@
 ---
-title: Default Button
-description: This bold button makes sure your users click on it and perform the actions you want! 🚀
+title: Default Card
+description: A customizable card component to visualize your content. 📝
 lastUpdated: 30 Sep, 2024
 ---
 

content/docs/components/input.mdx

@@ -1,6 +1,6 @@
 ---
-title: Default Button
-description: This bold button makes sure your users click on it and perform the actions you want! 🚀
+title: Default Input
+description: This pretty input makes your users want to type stuff! ⌨️
 lastUpdated: 30 Sep, 2024
 ---
 

content/docs/components/textarea.mdx

@@ -1,6 +1,6 @@
 ---
-title: Default Button
-description: This bold button makes sure your users click on it and perform the actions you want! 🚀
+title: Default Textarea
+description: This pretty input makes your users want to type lots of stuff! ⌨️ ⌨️
 lastUpdated: 30 Sep, 2024
 ---