Fix footer gap

src/app/page.tsx

@@ -1,43 +1,44 @@
 import Link from 'next/link';
+
 import CopyButton from '@/components/copy-button';
 import Footer from '@/components/footer';
 
 export default function Home() {
   return (
-    <>
-      <section className="min-h-[94vh] w-full py-12 lg:py-14 xl:py-24 2xl:py-28">
-        <div className="container mx-auto space-y-8 px-4 md:px-6">
-          <div className="flex flex-col items-center space-y-4 text-center">
-            <div className="space-y-4">
-              <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none">
-                NextJS Launchpad
-              </h1>
-              <p className="mx-auto max-w-[700px] text-gray-500 md:text-xl">
-                We created a boilerplate with essential tools and best practices
-                so you can focus on building your NextJS project.
-              </p>
-            </div>
-            <div className="flex items-center py-6">
-              <CopyButton />
-            </div>
-            <p className="mx-auto max-w-[700px] text-gray-700 md:text-lg">
-              Edit <span className="font-bold">app/page.tsx</span> to start
+    <section className="grid-row-[11fr_1fr] grid h-screen">
+      <div className="container mx-auto flex flex-col justify-center space-y-8 px-4 py-12 md:px-6 lg:py-14 xl:py-24 2xl:py-28">
+        <div className="flex flex-col items-center space-y-8 text-center min-[2000px]:space-y-12">
+          <div className="space-y-4 min-[2000px]:space-y-6">
+            <h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl/none min-[2000px]:text-8xl">
+              NextJS Launchpad
+            </h1>
+            <p className="mx-auto max-w-2xl text-gray-500 md:text-xl min-[2000px]:max-w-3xl min-[2000px]:text-2xl">
+              We created a boilerplate with essential tools and best practices
+              so you can focus on building your NextJS project.
             </p>
           </div>
-          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
-            {TECH_STACK.map((item, id) => (
-              <Link key={id} href={item.link} target="_blank">
-                <div className="transform rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105 sm:h-[192px] md:h-[164px] lg:h-[219px] xl:h-[179px] 2xl:h-[163px]">
-                  <h3 className="mb-2 text-xl font-bold">{item.name}</h3>
-                  <p className="text-gray-500">{item.description}</p>
-                </div>
-              </Link>
-            ))}
+          <div className="flex items-center">
+            <CopyButton />
           </div>
+          <p className="text-gray-700 md:text-lg min-[2000px]:text-2xl">
+            Edit <span className="font-bold">app/page.tsx</span> to start.
+          </p>
+        </div>
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8 lg:grid-cols-4">
+          {TECH_STACK.map((item, id) => (
+            <Link key={id} href={item.link} target="_blank">
+              <div className="transform rounded-lg bg-white p-6 shadow-md transition-transform hover:scale-105 sm:h-48 md:h-40 lg:h-56 xl:h-44 2xl:h-40">
+                <h3 className="mb-2 text-xl font-bold">{item.name}</h3>
+                <p className="text-gray-500">{item.description}</p>
+              </div>
+            </Link>
+          ))}
         </div>
-      </section>
-      <Footer />
-    </>
+      </div>
+      <div className="flex items-end">
+        <Footer />
+      </div>
+    </section>
   );
 }
 

src/components/copy-button/copy-button.tsx

@@ -1,32 +1,37 @@
-"use client";
+'use client';
 
-import { useState } from "react";
+import { useState } from 'react';
 
 type IconProps = React.HTMLAttributes<SVGElement>;
 
 export const CopyButton = () => {
   const [tick, setTick] = useState(false);
 
   const handleCopy = () => {
-    navigator.clipboard.writeText("npx create-next-app -e https://github.com/CreoWis/next-js-launchpad");
+    navigator.clipboard.writeText(
+      'npx create-next-app -e https://github.com/CreoWis/next-js-launchpad'
+    );
     setTick(true);
     setTimeout(() => {
       setTick(false);
     }, 1000);
   };
 
   return (
-    <div className="flex items-center bg-gray-100 rounded-lg p-2">
-      <span className="px-2 text-gray-500">
+    <div className="flex items-center rounded-lg bg-gray-100 p-2">
+      <span className="px-2 text-gray-500 lg:text-lg min-[2000px]:text-xl">
         npx create-next-app -e https://github.com/CreoWis/next-js-launchpad
       </span>
       {tick ? (
         <button className="pr-1">
-          <TickIcon className="h-4 w-4" />
+          <TickIcon className="size-4" />
         </button>
       ) : (
-        <button className="cursor-pointer hover:scale-105 pr-1" onClick={handleCopy}>
-          <CopyIcon className="w-4 h-4" />
+        <button
+          className="cursor-pointer pr-1 hover:scale-105"
+          onClick={handleCopy}
+        >
+          <CopyIcon className="size-4" />
         </button>
       )}
     </div>
@@ -71,4 +76,4 @@ function TickIcon(props: IconProps) {
       <polyline points="22 4 12 14.01 9 11.01" />
     </svg>
   );
-}
+}

src/components/footer/footer.tsx

@@ -3,11 +3,17 @@ import Link from 'next/link';
 export const Footer = () => {
   const currentYear = new Date().getFullYear();
   return (
-    <footer className="items-center justify-evenly bg-gray-300 py-4 text-center text-black lg:flex">
-      <Link href="https://www.creowis.com/" target="_blank">
-        &copy; {currentYear} An Open Source initiative from CreoWis
-        Technologies.
-      </Link>
+    <footer className="w-full items-center justify-evenly bg-gray-300 py-4 text-center text-black lg:flex">
+      <p>
+        Copyright &copy; {currentYear} An Open Source initiative from{' '}
+        <Link
+          className="block underline decoration-blue-400 decoration-2 underline-offset-2 sm:inline"
+          href="https://www.creowis.com/"
+          target="_blank"
+        >
+          CreoWis Technologies.
+        </Link>
+      </p>
       <div className="mt-4 flex justify-center gap-4 lg:mt-0 lg:gap-8">
         {SOCIAL_LINKS.map((item, id) => (
           <Link key={id} href={item.link} target="_blank">
@@ -114,4 +120,3 @@ const SOCIAL_LINKS = [
     icon: ICONS.github,
   },
 ];
-

types/root.d.ts

@@ -1,3 +1,3 @@
-export type LayoutProps = {
-    children: React.ReactNode
-};
+export type LayoutProps = {
+  children: React.ReactNode;
+};