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
halvaradop · Dec 27, 2024 · 7655e38 · 7655e38
1 parent 2ba25c3
commit 7655e38
Show file tree

Hide file tree

Showing 18 changed files with 346 additions and 13 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,4 +22,5 @@ yarn-debug.log*
 yarn-error.log*
 
 # vitest
-coverage
+coverage
+.vercel
diff --git 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
diff --git a/app/public/arrow.svg b/app/public/arrow.svg
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
+    )
+}