From 7655e38cd0dccfae63adbba8b29341eda839f3af Mon Sep 17 00:00:00 2001
From: Hernan Alvarado <hernanvid123@gmail.com>
Date: Fri, 27 Dec 2024 23:48:22 +0000
Subject: [PATCH] feat: add website for the package (#144)

* feat: add website for the package

- Integrate the official website for the package
- Integrate the deployment with Vercel

* fix: resolve error to deploy next.js application on Vercel
---
 .gitignore                        |  3 ++-
 app/package.json                  | 14 +++++-----
 app/pnpm-lock.yaml                | 44 +++++++++++++++++++++++++++++++
 app/public/arrow.svg              |  1 +
 app/src/app/layout.tsx            | 10 ++++++-
 app/src/app/page.tsx              | 16 ++++++++++-
 app/src/lib/@types/props.ts       |  8 ++++++
 app/src/lib/utils.ts              | 37 ++++++++++++++++++++++++++
 app/src/ui/footer.tsx             | 29 ++++++++++++++++++++
 app/src/ui/globals.css            | 26 ++++++++++++++++++
 app/src/ui/header.tsx             | 14 ++++++++++
 app/src/ui/index/approach.tsx     | 35 ++++++++++++++++++++++++
 app/src/ui/index/hero.tsx         | 28 ++++++++++++++++++++
 app/src/ui/index/our-approach.tsx | 37 ++++++++++++++++++++++++++
 app/src/ui/index/power.tsx        | 17 ++++++++++++
 app/src/ui/index/untyped.tsx      | 12 +++++++++
 app/tailwind.config.ts            | 25 +++++++++++++++---
 app/tsconfig.json                 |  3 ++-
 18 files changed, 346 insertions(+), 13 deletions(-)
 create mode 100644 app/public/arrow.svg
 create mode 100644 app/src/lib/utils.ts
 create mode 100644 app/src/ui/footer.tsx
 create mode 100644 app/src/ui/header.tsx
 create mode 100644 app/src/ui/index/approach.tsx
 create mode 100644 app/src/ui/index/hero.tsx
 create mode 100644 app/src/ui/index/our-approach.tsx
 create mode 100644 app/src/ui/index/power.tsx
 create mode 100644 app/src/ui/index/untyped.tsx

diff --git a/.gitignore b/.gitignore
index aecae50..3ea1c89 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,4 +22,5 @@ yarn-debug.log*
 yarn-error.log*
 
 # vitest
-coverage
\ No newline at end of file
+coverage
+.vercel
diff --git a/app/package.json b/app/package.json
index a5a27d0..1683df1 100644
--- a/app/package.json
+++ b/app/package.json
@@ -9,19 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@halvaradop/tailwindcss-utilities": "^0.2.3",
+    "@halvaradop/ui-button": "0.3.2-beta.0",
+    "next": "15.1.2",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "15.1.2"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
     "eslint": "^9",
     "eslint-config-next": "15.1.2",
-    "@eslint/eslintrc": "^3"
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
 }
diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
index 2e955cd..ee04fe1 100644
--- a/app/pnpm-lock.yaml
+++ b/app/pnpm-lock.yaml
@@ -7,6 +7,12 @@ settings:
 importers:
   .:
     dependencies:
+      "@halvaradop/tailwindcss-utilities":
+        specifier: ^0.2.3
+        version: 0.2.3
+      "@halvaradop/ui-button":
+        specifier: 0.3.2-beta.0
+        version: 0.3.2-beta.0
       next:
         specifier: 15.1.2
         version: 15.1.2(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -87,6 +93,15 @@ packages:
     resolution: { integrity: sha512-zSkKow6H5Kdm0ZUQUB2kV5JIXqoG0+uH5YADhaEHswm664N9Db8dXSi0nMJpacpMf+MyyglF1vnZohpEg5yUtg== }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
+  "@halvaradop/tailwindcss-utilities@0.2.3":
+    resolution: { integrity: sha512-z8e3hdNLpgV7Pv46VL0zboLAhxC63xUt/8iYqiYO3TJxBlcWQZkAuyN7LZVH1x/FfqVCxo0YgMLYZ3HlRQ0IHw== }
+
+  "@halvaradop/ui-button@0.3.2-beta.0":
+    resolution: { integrity: sha512-qNLD3fNSd2sj6xNHFrtFCPZLq6E+iMA7HdntI7zqQAmwRH0t9/N+G4SH31ckghFA+OeZBoNDe90JNDe9Edxq6Q== }
+
+  "@halvaradop/ui-core@0.2.1-beta.0":
+    resolution: { integrity: sha512-FWbmE91CBWWEl1x73nSRckrEyIaXwx+lqJwCPCjRuRb9dtHEHjg/kB43ZNyGtsyqY7kZwSPRsx6oBj50kyL8Sg== }
+
   "@humanfs/core@0.19.1":
     resolution: { integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA== }
     engines: { node: ">=18.18.0" }
@@ -532,9 +547,16 @@ packages:
     resolution: { integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw== }
     engines: { node: ">= 8.10.0" }
 
+  class-variance-authority@0.7.0:
+    resolution: { integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A== }
+
   client-only@0.0.1:
     resolution: { integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA== }
 
+  clsx@2.0.0:
+    resolution: { integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q== }
+    engines: { node: ">=6" }
+
   color-convert@2.0.1:
     resolution: { integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ== }
     engines: { node: ">=7.0.0" }
@@ -1534,6 +1556,9 @@ packages:
     resolution: { integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w== }
     engines: { node: ">= 0.4" }
 
+  tailwind-merge@2.6.0:
+    resolution: { integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA== }
+
   tailwindcss@3.4.17:
     resolution: { integrity: sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og== }
     engines: { node: ">=14.0.0" }
@@ -1698,6 +1723,17 @@ snapshots:
     dependencies:
       levn: 0.4.1
 
+  "@halvaradop/tailwindcss-utilities@0.2.3": {}
+
+  "@halvaradop/ui-button@0.3.2-beta.0":
+    dependencies:
+      "@halvaradop/ui-core": 0.2.1-beta.0
+      class-variance-authority: 0.7.0
+
+  "@halvaradop/ui-core@0.2.1-beta.0":
+    dependencies:
+      tailwind-merge: 2.6.0
+
   "@humanfs/core@0.19.1": {}
 
   "@humanfs/node@0.16.6":
@@ -2135,8 +2171,14 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  class-variance-authority@0.7.0:
+    dependencies:
+      clsx: 2.0.0
+
   client-only@0.0.1: {}
 
+  clsx@2.0.0: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -3342,6 +3384,8 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
+  tailwind-merge@2.6.0: {}
+
   tailwindcss@3.4.17:
     dependencies:
       "@alloc/quick-lru": 5.2.0
diff --git a/app/public/arrow.svg b/app/public/arrow.svg
new file mode 100644
index 0000000..4359241
--- /dev/null
+++ b/app/public/arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="36px" viewBox="0 -960 960 960" width="36px" fill="#000"><path d="m560-241.33-47.33-47.34L672-448H160v-66.67h512l-160-160L559.33-722 800-481.33l-240 240Z"/></svg>
\ No newline at end of file
diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx
index ca9d9b2..367b2ac 100644
--- a/app/src/app/layout.tsx
+++ b/app/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next"
 import { Noto_Sans } from "next/font/google"
 import { LayoutProps } from "@/lib/@types/props"
+import { Header } from "@/ui/header"
+import { Footer } from "@/ui/footer"
 import "@/ui/globals.css"
 
 const notoSans = Noto_Sans({
@@ -17,7 +19,13 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: LayoutProps) {
     return (
         <html lang="en">
-            <body className={`${notoSans.className} antialiased`}>{children}</body>
+            <body
+                className={`${notoSans.className} antialiased scroll-smooth scroll:w-1.5 track:my-1 thumb:rounded thumb:bg-black`}
+            >
+                <Header />
+                {children}
+                <Footer />
+            </body>
         </html>
     )
 }
diff --git a/app/src/app/page.tsx b/app/src/app/page.tsx
index 3521169..a7feeb2 100644
--- a/app/src/app/page.tsx
+++ b/app/src/app/page.tsx
@@ -1,3 +1,17 @@
-const IndexPage = () => {}
+import { Hero } from "@/ui/index/hero"
+import { Power } from "@/ui/index/power"
+import { OurApproach } from "@/ui/index/our-approach"
+import { Untyped } from "@/ui/index/untyped"
+
+const IndexPage = () => {
+    return (
+        <main className="w-semi mx-auto">
+            <Hero />
+            <Power />
+            <OurApproach />
+            <Untyped />
+        </main>
+    )
+}
 
 export default IndexPage
diff --git a/app/src/lib/@types/props.ts b/app/src/lib/@types/props.ts
index 41600bf..d0f97cd 100644
--- a/app/src/lib/@types/props.ts
+++ b/app/src/lib/@types/props.ts
@@ -1,3 +1,11 @@
 export interface LayoutProps {
     children: React.ReactNode
 }
+
+export interface ApproachProps {
+    index: number
+    title: string
+    paragraph: string
+    selectedId?: number
+    onClick?: () => void
+}
diff --git a/app/src/lib/utils.ts b/app/src/lib/utils.ts
new file mode 100644
index 0000000..6fa5dc9
--- /dev/null
+++ b/app/src/lib/utils.ts
@@ -0,0 +1,37 @@
+export const approachData = [
+    {
+        title: "object types",
+        paragraph:
+            "Effortlessly manipulate object-based types. Extract, transform, omit, and map values within object types. These utilities are essential for handling real-world TypeScript applications.",
+    },
+    {
+        title: "array types",
+        paragraph:
+            "Work with tuple-based types to perform operations such as extraction, filtering, popping, and more. These utilities bring array-like operations to TypeScript tuple types.",
+    },
+    {
+        title: "type guards",
+        paragraph:
+            "Validate types with precision. Determine if a given type or value matches expectations, such as checking for never, any, positive numbers, and more.",
+    },
+    {
+        title: "testing",
+        paragraph:
+            "Ensure that provided types or values match the expected outcomes. Perfect for type-safe testing within your projects.",
+    },
+    {
+        title: "common types",
+        paragraph:
+            "A collection of widely used types for TypeScript projects, including primitives, nullish values, falsy values, and more. Simplify your type definitions with ready-to-use utilities.",
+    },
+    {
+        title: "string mappers",
+        paragraph:
+            "Transform string-based types to follow specific conventions. These utilities mimic string operations available in JavaScript and TypeScript, enabling easy type manipulations.",
+    },
+    {
+        title: "validate types",
+        paragraph:
+            "Verify and validate if a given type matches expected constraints, such as arrays, objects, numbers, booleans, strings, nullish values, primitives, and more.",
+    },
+]
diff --git a/app/src/ui/footer.tsx b/app/src/ui/footer.tsx
new file mode 100644
index 0000000..7db227a
--- /dev/null
+++ b/app/src/ui/footer.tsx
@@ -0,0 +1,29 @@
+import Image from "next/image"
+import arrowIcon from "@/assets/arrow.svg"
+import { Button } from "@halvaradop/ui-button"
+import Link from "next/link"
+
+export const Footer = () => {
+    return (
+        <footer className="text-white bg-black">
+            <section className="w-11/12 mx-auto py-20 space-y-20 base:w-10/12 base:py-28 lg:py-36 xl:max-w-screen-2xl">
+                <div>
+                    <h2 className="fluency-4xl font-bold sm:w-3/4 base:fluency-5xl lg:w-1/2">
+                        GET A POWERFUL SET OF UTILITY TYPES
+                    </h2>
+                    <p className="mt-6 fluency-base">
+                        Ready to simplify your TypeScript development? Explore our utilities today and transform your workflow.
+                    </p>
+                </div>
+                <div className="w-full flex items-center justify-between">
+                    <span className="fluency-4xl font-bold base:fluency-5xl">TOP</span>
+                    <Button className="size-11 p-0 rounded-full border border-white" variant="ghost">
+                        <Link href="/">
+                            <Image className="-rotate-90 invert" src={arrowIcon} alt="arrow icion" priority draggable={false} />
+                        </Link>
+                    </Button>
+                </div>
+            </section>
+        </footer>
+    )
+}
diff --git a/app/src/ui/globals.css b/app/src/ui/globals.css
index b5c61c9..3a4053a 100644
--- a/app/src/ui/globals.css
+++ b/app/src/ui/globals.css
@@ -1,3 +1,29 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+    body {
+        @apply bg-gradient-to-tr from-purple-100 via-sky-50;
+    }
+
+    .transition-approach {
+        transition:
+            opacity 0.3s ease,
+            display 0.3s ease allow-discrete;
+    }
+
+    .approach[data-isselected="true"] > p {
+        display: block;
+        opacity: 1;
+        transition:
+            opacity 0.4s ease,
+            display 0.4s ease allow-discrete;
+    }
+
+    @starting-style {
+        .approach[data-isselected="true"] > p {
+            opacity: 0;
+        }
+    }
+}
diff --git a/app/src/ui/header.tsx b/app/src/ui/header.tsx
new file mode 100644
index 0000000..2e64779
--- /dev/null
+++ b/app/src/ui/header.tsx
@@ -0,0 +1,14 @@
+export const Header = () => {
+    return (
+        <header>
+            <nav className="w-11/12 h-20 mx-auto flex items-center justify-between base:w-10/12 xl:max-w-screen-2xl">
+                <p>TypeS</p>
+                <div className="space-y-1 hover:cursor-pointer">
+                    <span className="w-8 h-0.5 block rounded bg-black" />
+                    <span className="w-6 h-0.5 ml-auto block rounded bg-black" />
+                    <span className="w-8 h-0.5 block rounded bg-black" />
+                </div>
+            </nav>
+        </header>
+    )
+}
diff --git a/app/src/ui/index/approach.tsx b/app/src/ui/index/approach.tsx
new file mode 100644
index 0000000..6c7f02e
--- /dev/null
+++ b/app/src/ui/index/approach.tsx
@@ -0,0 +1,35 @@
+import Image from "next/image"
+import { ApproachProps } from "@/lib/@types/props"
+import { Button } from "@halvaradop/ui-button"
+import arrowIcon from "@/assets/arrow.svg"
+
+export const Approach = ({ index, title, paragraph, selectedId, onClick }: ApproachProps) => {
+    const isSelected = selectedId === index
+    return (
+        <article
+            className="group approach py-5 px-4 border-b border-black/50 hover:cursor-pointer hover:text-white hover:rounded-lg hover:bg-black base:py-6 base:px-5"
+            data-isselected={isSelected}
+            onClick={onClick}
+        >
+            <div className="flex items-center justify-between ">
+                <div className="flex items-center gap-x-3">
+                    <span>0{index + 1}</span>
+                    <h3 className="fluency-2xl font-bold uppercase">{title}</h3>
+                </div>
+                <Button
+                    className="size-10 p-0 rounded-full border border-black transition-transform duration-500 ease-out group-data-[isselected='true']:-rotate-180 group-hover:border-white"
+                    variant="ghost"
+                >
+                    <Image
+                        className="rotate-90 group-hover:invert"
+                        src={arrowIcon}
+                        alt="arrow icion"
+                        priority
+                        draggable={false}
+                    />
+                </Button>
+            </div>
+            <p className="mt-4 hidden opacity-0 transition-approach">{paragraph}</p>
+        </article>
+    )
+}
diff --git a/app/src/ui/index/hero.tsx b/app/src/ui/index/hero.tsx
new file mode 100644
index 0000000..ac8c6ee
--- /dev/null
+++ b/app/src/ui/index/hero.tsx
@@ -0,0 +1,28 @@
+import Link from "next/link"
+import { Button } from "@halvaradop/ui-button"
+
+export const Hero = () => {
+    return (
+        <section className="w-11/12 h-[calc(100vh-5rem)] mx-auto content-center text-center base:w-10/12 xl:max-w-screen-2xl">
+            <h1 className="fluency-5xl font-bold uppercase sm:fluency-6xl">
+                <span className="w-fit mx-auto block">TYPESCRIPT</span>
+                <span className="w-fit mx-auto block">UTILITY TYPES</span>
+            </h1>
+            <div className="relative base:w-10/12 base:mx-auto">
+                <p className="my-6 fluency-base md:mb-8 base:mb-10">
+                    Discover a powerful toolkit of TypeScript utility types designed to streamline your development process. These
+                    utilities simplify complex type scenarios, reduce boilerplate code, and enhance type safety in your projects.
+                </p>
+                <span className="bg-gradient-to-r from-[#44BCFF] via-[#FF44EC] to-[#FF675E] blur-lg filter opacity-30 w-full h-full absolute inset-0" />
+            </div>
+            <div className="flex items-center justify-center gap-x-5">
+                <Button>GET STARTED</Button>
+                <Button className="border-black" variant="ghost">
+                    <Link href="https://github.com/halvaradop/ts-utility-types" target="_blank">
+                        GITHUB
+                    </Link>
+                </Button>
+            </div>
+        </section>
+    )
+}
diff --git a/app/src/ui/index/our-approach.tsx b/app/src/ui/index/our-approach.tsx
new file mode 100644
index 0000000..b995e23
--- /dev/null
+++ b/app/src/ui/index/our-approach.tsx
@@ -0,0 +1,37 @@
+"use client"
+import { useState } from "react"
+import { approachData } from "@/lib/utils"
+import { Approach } from "./approach"
+
+export const OurApproach = () => {
+    const [selectedId, setSelectedId] = useState<number>(-1)
+
+    const handleClick = (index: number) => {
+        setSelectedId((previous) => (previous === index ? -1 : index))
+    }
+
+    return (
+        <section className="w-11/12 mx-auto base:w-10/12 xl:max-w-screen-2xl">
+            <div className="py-20 text-center md:w-11/12 md:mx-auto base:w-10/12">
+                <h2 className="fluency-4xl font-bold base:fluency-5xl">OUR APPROACH</h2>
+                <p className="mt-6 fluency-base base:mt-8">
+                    A comprehensive set of utility types designed to handle complex type scenarios with ease and precision. Solve
+                    common patterns and tackle challenging cases in TypeScript development. Eliminate duplicate code and boost
+                    productivity in your projects.
+                </p>
+            </div>
+            <div className="">
+                {approachData.map(({ title, paragraph }, key) => (
+                    <Approach
+                        index={key}
+                        title={title}
+                        paragraph={paragraph}
+                        selectedId={selectedId}
+                        onClick={() => handleClick(key)}
+                        key={key}
+                    />
+                ))}
+            </div>
+        </section>
+    )
+}
diff --git a/app/src/ui/index/power.tsx b/app/src/ui/index/power.tsx
new file mode 100644
index 0000000..19de785
--- /dev/null
+++ b/app/src/ui/index/power.tsx
@@ -0,0 +1,17 @@
+export const Power = () => {
+    return (
+        <section className="min-h-screen content-center text-white text-center rounded-md relative bg-black">
+            <div className="w-11/12 mx-auto base:w-10/12 base:h-full xl:max-w-screen-2xl">
+                <h2 className="fluency-4xl font-bold base:w-3/4 base:fluency-5xl base:text-left">
+                    THE POWER OF SIMPLICITY IN TYPES AND THE ACCURACY OF YOUR APPLICATION
+                </h2>
+                <p className="mt-6 fluency-base sm:mt-10 base:w-1/2 base:ml-auto base:mt-20 base:text-right">
+                    Unlock the potential of utility types to enhance the versatility and performance of your application. Reduce
+                    development time while ensuring robust and accurate type definitions.
+                </p>
+            </div>
+            <span className="size-16 absolute top-5 right-5 border-t-2 border-r-2 rounded-tr-md" />
+            <span className="size-16 absolute bottom-5 left-5 border-b-2 border-l-2 rounded-bl-md" />
+        </section>
+    )
+}
diff --git a/app/src/ui/index/untyped.tsx b/app/src/ui/index/untyped.tsx
new file mode 100644
index 0000000..5aaf2d3
--- /dev/null
+++ b/app/src/ui/index/untyped.tsx
@@ -0,0 +1,12 @@
+export const Untyped = () => {
+    return (
+        <section className="w-11/12 min-h-screen mx-auto content-center text-center md:w-3/4 xl:max-w-screen-2xl">
+            <h2 className="fluency-4xl font-bold base:fluency-5xl">
+                FINDING UNTYPED DATA IS EASY, TYPING IT IS COMPLEX... UNTIL NOW
+            </h2>
+            <p className="mt-6 fluency-base base:mt-8">
+                Empower your applications with precise, reusable, and efficient utility types.
+            </p>
+        </section>
+    )
+}
diff --git a/app/tailwind.config.ts b/app/tailwind.config.ts
index 72d60ab..e21a154 100644
--- a/app/tailwind.config.ts
+++ b/app/tailwind.config.ts
@@ -1,7 +1,26 @@
 import type { Config } from "tailwindcss"
+import utilities from "@halvaradop/tailwindcss-utilities"
 
 export default {
-    content: ["./src/pages/**/*.{js,ts,jsx,tsx,mdx}", "./src/ui/**/*.{js,ts,jsx,tsx,mdx}", "./src/app/**/*.{js,ts,jsx,tsx,mdx}"],
-    theme: {},
-    plugins: [],
+    darkMode: "class",
+    future: {
+        hoverOnlyWhenSupported: true,
+    },
+    content: [
+        "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/ui/**/*.{js,ts,jsx,tsx,mdx}",
+        "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+        "./node_modules/@halvaradop/**/*.{js,ts,jsx,tsx,mdx}",
+    ],
+    theme: {
+        extend: {
+            screens: {
+                base: "900px",
+            },
+            width: {
+                semi: "98%",
+            },
+        },
+    },
+    plugins: [utilities],
 } satisfies Config
diff --git a/app/tsconfig.json b/app/tsconfig.json
index c133409..41faa13 100644
--- a/app/tsconfig.json
+++ b/app/tsconfig.json
@@ -19,7 +19,8 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@/assets/*": ["./public/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],