feat: [sc-25974] Action Next Steps for the new NameKit.io landing page (

#495)

* update README.md

* update package.json to match other projects

* use ens-webfont package instead of AdobeBlank.ttf and Unifont.otf

* delete unused file

* fix typo

* replace CalButton by @namehash/internal CalendarButton

* delete unused cal-button file

* remove unused code - tailwind.config.ts

* remove useScreenSize hook

* remove useReadyPages hook

* remove usePrevious hook

* remove useMounted hook

* remove useBrowser hook

* remove useCountdown hook

* remove hooks folder

* remove header comments

* keep       "persistent": true line in turbo.json

* fix ens webfont lockfile

* resolve requested changes

* fix order

* update README url

---------

Co-authored-by: lightwalker.eth <[email protected]>

apps/namekit.io/README.md

@@ -1,36 +1,22 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# namekit.io
 
-## Getting Started
+This repository contains all of the code for the [namekit.io](https://namekit.io) website. The website is built using [Next.js](https://nextjs.org), and is deployed to Vercel.
 
-First, run the development server:
+## Local Development
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+You must clone the full monorepo and install dependencies with PNPM before you can run it locally:
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+1. `git clone https://github.com/namehash/namekit.git`
+2. `pnpm install` (run from the root directory of the monorepo)
+3. `cd apps/namekit.io`
+4. `pnpm dev`
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+## Deploy
 
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+This repository is connected to the Vercel project [`namekit-website`](https://vercel.com/namehash/namekit.io), and any pull request automatically receives a preview environment. When a PR is merged to the main branch, the production instance is automatically updated.
 
-## Learn More
+## License
 
-To learn more about Next.js, take a look at the following resources:
+Licensed under the MIT License, Copyright © 2023-present [NameHash Labs](https://namehashlabs.org).
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+See [LICENSE](./LICENSE) for more information.

apps/namekit.io/package.json

@@ -20,6 +20,8 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-hot-toast": "2.4.1",
+    "@namehash/internal": "workspace:*",
+    "@namehash/ens-webfont": "workspace:*",
     "react-wrap-balancer": "1.1.1"
   },
   "devDependencies": {

apps/namekit.io/src/app/explore-web3/page.tsx

@@ -186,7 +186,7 @@ const ExploreWeb3: NextPage = () => {
             width={710}
             height={480}
             alt="mirror"
-            src={"/images/explore-web3/Illustration-cripto.png"}
+            src={"/images/explore-web3/Illustration-crypto.png"}
           />
         }
       />

apps/namekit.io/src/app/layout.tsx

@@ -1,23 +1,12 @@
 import type { Metadata } from "next";
-import localFont from "next/font/local";
 import "./../styles/globals.css";
-import "./../styles/fonts.css";
+import "@namehash/ens-webfont";
 
 import Head from "next/head";
 import { Header } from "@/components/organisms/header";
 import { NamekitFooter } from "@/components/organisms/namekit-footer";
 import { Inter } from "next/font/google";
 
-const unifont = localFont({
-  src: "../../public/fonts/Unifont.otf",
-  variable: "--font-unifont",
-});
-
-const adobeBlank = localFont({
-  src: "../../public/fonts/AdobeBlank.ttf",
-  variable: "--font-adobe-blank",
-});
-
 const inter = Inter({
   subsets: ["latin"],
   variable: "--font-inter",
@@ -51,18 +40,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <Head>
-        {/* Fonts */}
-        <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link
-          rel="preconnect"
-          href="https://fonts.gstatic.com"
-          crossOrigin="anonymous"
-        />
         <script src="https://app.cal.com/embed.js" async></script>
       </Head>
-      <body
-        className={`${inter.variable} ${unifont.variable} ${adobeBlank.variable} antialiased`}
-      >
+      <body className={`${inter.variable} ens-webfont`}>
         <Header />
         {children}
         <NamekitFooter />

apps/namekit.io/src/components/organisms/get-your-web3-name-section.tsx

@@ -1,5 +1,5 @@
+import { CalendarButton } from "@namehash/internal";
 import Image from "next/image";
-import CalButton from "../atoms/cal-button";
 interface GetYourWeb3NameSectionProps {
   title: string;
   description: string;
@@ -38,9 +38,13 @@ export const GetYourWeb3NameSection = ({
           <p className="leading-[24px] text-[14px] lg:text-lg lg:leading-8 font-normal mb-6 max-w-[638px] text-center">
             {description}
           </p>
-          <CalButton className="text-sm lg:text-[16px] leading-[24px] mt-5 bg-white z-20 text-black px-[16px] py-[9px] lg:px-[25px] lg:py-[13px] rounded-[8px] hover:bg-gray-50 transition-colors duration-200">
+          <CalendarButton
+            className="text-sm lg:text-[16px] leading-[24px] mt-5 bg-white z-20 text-black px-[16px] py-[9px] lg:px-[25px] lg:py-[13px] rounded-[8px] hover:bg-gray-50 transition-colors duration-200"
+            variant="secondary"
+            link="namehashlabs/namekit"
+          >
             {buttonText ?? `Schedule a call`}
-          </CalButton>
+          </CalendarButton>
         </div>
       </div>
     </section>