feat: [sc-25931] Integrate NameKit-React Components into NameHash Labs

apps/nameguard.io/src/components/atoms/index.ts

@@ -5,7 +5,5 @@ export * from "./DeveloperSectionIconWrapper";
 export * from "./DeveloperSectionTitle";
 export * from "./DeveloperSectionWrapper";
 export * from "./PreSectionText";
-export * from "./SectionText";
-export * from "./SectionTitle";
 export * from "./ColorfulBg";
 export * from "./AirplaneIllustration";

apps/nameguard.io/src/components/organisms/ContactUsSection.tsx

@@ -1,11 +1,10 @@
 import {
   ColorfulBg,
   PreSectionText,
-  SectionTitle,
-  SectionText,
   AirplaneIllustration,
 } from "@/components/atoms/";
 import { CalendarButton, ContactUsForm } from "@namehash/internal";
+import { Heading, Text } from "@namehash/namekit-react";
 
 export const ContactSection = () => {
   return (
@@ -38,14 +37,13 @@ export const ContactSection = () => {
       </div>
       <div className="w-full flex flex-col lg:flex-row m-auto gap-10 max-w-7xl">
         <div className="lg:w-1/2 w-full flex flex-col gap-3 items-start">
-          <SectionTitle className="text-3xl lg:text-4xl font-bold">
-            Let&apos;s chat
-          </SectionTitle>
-          <SectionText className="text-gray-500 text-lg">
+          <Heading as="h1">Let&apos;s chat</Heading>
+
+          <Text as="p" className="!text-gray-500 !text-lg font-light">
             If you have questions, ideas, or share a passion for NameGuard and
             would like to explore collaboration, please don&apos;t hesitate to
             reach out to us.
-          </SectionText>
+          </Text>
           <div className="w-full">
             <AirplaneIllustration />
           </div>

apps/namehashlabs.org/app/ens-referral-program/page.tsx

@@ -5,7 +5,7 @@ import cc from "classcat";
 import { DocumentTextIcon } from "@heroicons/react/24/solid";
 import { FigmaIcon } from "@/components/1 - atoms/icons/figma-icon";
 import { GithubIcon } from "@/components/1 - atoms/icons/github-icon";
-import { ProductComponent } from "@/components/2 - molecules/product-component";
+import { ReferralProductComponent } from "@/components/2 - molecules/referral-product-component";
 import { Button, Link } from "@namehash/namekit-react";
 
 import { defaultMetaOpengraph, defaultMetaTwitter } from "../shared-metadata";
@@ -37,7 +37,7 @@ export default function Page() {
       <div className="mt-20 w-full">
         <div className="w-full lg:px-[50px] px-5 bg-gray-50 flex items-center justify-center">
           <section className="w-full max-w-[1216px]">
-            <ProductComponent
+            <ReferralProductComponent
               title="ENS Referral Program"
               subtitle="Passionate about helping ENS grow? Share your voice with this community survey and let's shape the future of the ENS Referral Program together."
               illustration={

apps/namehashlabs.org/components/2 - molecules/brand-assets.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 import { PreSectionText } from "../1 - atoms";
 import { ColorfulBg } from "../1 - atoms/colorful-bg";
 import { ColorfulDownloadIcon } from "../1 - atoms/icons/colorful-download-icon";
-import { Button, Link } from "@namehash/namekit-react";
+import { Button, Heading, Link, Text } from "@namehash/namekit-react";
 
 export const BrandAssets = () => {
   return (
@@ -20,15 +20,16 @@ export const BrandAssets = () => {
         <div className="flex flex-col lg:flex-row gap-10 items-center justify-center border-t border-gray-200 py-20 ">
           <div className="flex flex-col items-start gap-6">
             <div className="flex flex-col gap-3">
-              <h3 className="text-3xl leading-9 lg:text-4xl lg:leading-10 font-bold">
-                Download assets
-              </h3>
-              <p className="text-lg leading-7 font-normal text-gray-500">
+              <Heading as="h1">Download assets</Heading>
+              <Text
+                className="!text-lg !leading-7 !font-normal !text-gray-500"
+                as="p"
+              >
                 Working together with Namehash Labs or crafting an article
                 featuring us? Explore the official Namehash Labs assets
                 available on our Github to incorporate into your marketing
                 materials, website, or mobile application.
-              </p>
+              </Text>
             </div>
 
             <Button variant="primary" size="medium" asChild>

apps/namehashlabs.org/components/2 - molecules/contact-us-section.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
-import { PreSectionText, SectionText, SectionTitle } from "../1 - atoms";
-import { ColorfulBg } from "../1 - atoms/colorful-bg";
+import { Heading, Text } from "@namehash/namekit-react";
+import { PreSectionText } from "@/components/1 - atoms";
+import { ColorfulBg } from "@/components/1 - atoms/colorful-bg";
 import { CalendarButton, ContactUsForm } from "@namehash/internal";
 
 export const ContactSection = () => {
@@ -14,13 +15,13 @@ export const ContactSection = () => {
 
       <div className="w-full flex lg:flex-row flex-col justify-between lg:items-center sm:items-start items-center rounded-[8px] bg-gradient-to-r lg:px-10 lg:py-8 p-5 mb-20 from-[#2D2D2D] to-black">
         <div className="flex flex-col gap-2 mb-4 lg:mb-0">
-          <h3 className="text-2xl leading-8 font-semibold text-white">
+          <Heading as="h3" className="text-white">
             Discuss an integration
-          </h3>
-          <p className="text-lg leading-7 font-normal text-gray-500">
+          </Heading>
+          <Text className="text-gray-500 !text-lg">
             Schedule a call with us to discuss integration with any of our
             products
-          </p>
+          </Text>
         </div>
         <div className="w-full lg:w-auto">
           <CalendarButton
@@ -34,14 +35,13 @@ export const ContactSection = () => {
       </div>
       <div className="w-full flex flex-col lg:flex-row m-auto gap-10 max-w-7xl">
         <div className="lg:w-1/2 w-full flex flex-col gap-3 items-start">
-          <SectionTitle className="text-3xl lg:text-4xl font-bold">
-            Let&apos;s chat
-          </SectionTitle>
-          <SectionText className="text-gray-500 text-lg">
+          <Heading as="h1">Let&apos;s chat</Heading>
+
+          <Text as="p" className="text-gray-500 !text-lg font-light">
             If you have questions, ideas, or share a passion for advancing ENS
             growth and would like to explore collaboration, please don&apos;t
-            hesitate to reach out.{" "}
-          </SectionText>
+            hesitate to reach out.
+          </Text>
           <img
             className="hidden lg:block"
             src="/images/paper-airplane.png"

apps/namehashlabs.org/components/2 - molecules/financial-support-section.tsx

@@ -1,7 +1,7 @@
 import { Balancer } from "react-wrap-balancer";
 import { EnsDAOLogoColored } from "../1 - atoms/icons/ens-dao-logo-colored";
 import { GitcoinLogo } from "../1 - atoms/icons/gitcoin-logo";
-import { Button } from "@namehash/namekit-react";
+import { Button, Heading } from "@namehash/namekit-react";
 
 export const FinancialSupportSection = () => {
   return (
@@ -16,12 +16,9 @@ export const FinancialSupportSection = () => {
             "linear-gradient(271deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%), linear-gradient(271deg, rgba(255, 175, 0, 0.15) 0%, rgba(241, 18, 217, 0.15) 32.29%, rgba(76, 63, 160, 0.15) 70.83%, rgba(46, 211, 198, 0.15) 95.83%)",
         }}
       >
-        <div
-          role="text"
-          className="text-2xl leading-8 font-semibold text-center"
-        >
+        <Heading as="h3">
           <Balancer>Our work has received generous support from:</Balancer>
-        </div>
+        </Heading>
         <div className="flex gap-3 items-center justify-center">
           <a target="_blank" aria-label="ENS" href="https://ensdao.org/">
             <Button variant="secondary" size="large">

apps/namehashlabs.org/components/2 - molecules/hero-section.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { IconButton } from "@namehash/namekit-react";
+import { IconButton, Text } from "@namehash/namekit-react";
 import { ChevronDown, BeansBg } from "../1 - atoms";
 import { Balancer } from "react-wrap-balancer";
 import { CalendarButton } from "@namehash/internal";
@@ -12,14 +12,11 @@ export const HeroSection = () => {
         <h1 className="lg:text-[100px] text-5xl text-center font-bold lg:leading-[120px]">
           Helping ENS grow
         </h1>
-        <div
-          role="text"
-          className="text-lg text-center text-gray-500 font-normal leading-7 mt-4 max-w-[500px]"
-        >
+        <Text as="p" className="text-lg text-gray-500 mt-4 max-w-[500px]">
           <Balancer>
             We integrate ENS onboarding into web3 wallets, apps, and games
           </Balancer>
-        </div>
+        </Text>
         <div className="flex items-center justify-center mt-10">
           <CalendarButton link="namehashlabs/namehashlabs">
             Integrate with ENS

apps/namehashlabs.org/components/2 - molecules/index.ts

@@ -8,3 +8,4 @@ export * from "./team-section";
 export * from "./footer";
 export * from "./avatar-with-tooltip";
 export * from "./ultimate-ens-avatar";
+export * from "./referral-product-component";

apps/namehashlabs.org/components/2 - molecules/introducing-namekit.tsx

@@ -1,25 +1,26 @@
 "use client";
 
-import { PreSectionText, SectionText, SectionTitle } from "../1 - atoms";
+import { PreSectionText } from "@/components/1 - atoms";
 import { Balancer } from "react-wrap-balancer";
 import Lottie from "lottie-react";
 import waveAnimation from "./../../public/animations/wave-animation.json";
+import { Heading, Text } from "@namehash/namekit-react";
 
 export const IntroducingNamekit = () => {
   return (
     <section
       id="introducingNamekit"
       className="bg-white z-20 px-5 py-20 w-full flex flex-col relative items-center justify-center overflow-hidden"
     >
-      <div className="flex flex-col items-center justify-center gap-3 mb-[60px] max-w-[650px] md:pb-10">
+      <div className="flex flex-col items-center text-center justify-center gap-3 mb-[60px] max-w-[650px] md:pb-10">
         <PreSectionText>WHAT WE&apos;RE BUILDING</PreSectionText>
-        <SectionTitle>Introducing NameKit</SectionTitle>
-        <SectionText className="text-center">
+        <Heading>Introducing NameKit</Heading>
+        <Text as="p" className="text-lg text-gray-500">
           <Balancer>
             Dedicated 100% to the growth of ENS. NameKit includes sub-modules
             such as ENSNode or NameGuard that can also be used independently.
           </Balancer>
-        </SectionText>
+        </Text>
       </div>
       <Lottie
         className="w-[480px] h-[212px] xSmall:w-[576px] xSmall:h-[255px] small:w-[634px] small:h-[281px] sm:w-[697px] sm:h-[309px] md:w-[728px] md:h-[323px] medium2x:w-[767px] medium2x:h-[340px] lg:!w-[984px] lg:!h-[437px] xl:!w-[1400px] xl:!h-[622px]"

apps/namehashlabs.org/components/2 - molecules/our-principles-section.tsx

@@ -1,8 +1,8 @@
-import { PreSectionText, SectionText, SectionTitle } from "../1 - atoms";
-import { OpenSourceIcon } from "../1 - atoms/icons/open-source-icon";
-import { LockIcon } from "../1 - atoms/icons/lock-icon";
-import { EnsIcon } from "../1 - atoms/icons/ens-icon-gray";
-import { Link } from "@namehash/namekit-react";
+import { PreSectionText } from "@/components/1 - atoms";
+import { OpenSourceIcon } from "@/components/1 - atoms/icons/open-source-icon";
+import { LockIcon } from "@/components/1 - atoms/icons/lock-icon";
+import { EnsIcon } from "@/components/1 - atoms/icons/ens-icon-gray";
+import { Heading, Link, Text } from "@namehash/namekit-react";
 
 export const OurPrinciplesSection = () => {
   return (
@@ -12,18 +12,22 @@ export const OurPrinciplesSection = () => {
     >
       <div className="flex flex-col items-center justify-center max-w-[1216px] m-auto">
         <PreSectionText>What Guides us</PreSectionText>
-        <SectionTitle className="my-3">Our principles</SectionTitle>
+        <Heading as="h1" className="my-3">
+          Our principles
+        </Heading>
         <div className="grid lg:grid-cols-4 grid-cols-1 gap-10 mt-20 place-content-stretch">
           {principles.map((item) => {
             return (
               <div key={item.title}>
                 <div className="p-4 border border-gray-200 rounded-full inline-flex items-center justify-center">
                   {item.icon}
                 </div>
-                <p className="text-2xl leading-8 font-semibold mt-5 mb-3">
+                <Heading as="h3" className="mt-5 mb-3">
                   {item.title}
-                </p>
-                <SectionText>{item.description}</SectionText>
+                </Heading>
+                <Text as="p" className="text-lg text-gray-500">
+                  {item.description}
+                </Text>
               </div>
             );
           })}

apps/namehashlabs.org/components/2 - molecules/our-supporters-section.tsx

@@ -1,28 +1,28 @@
 "use client";
 
-import { PreSectionText, SectionText, SectionTitle } from "../1 - atoms";
+import { PreSectionText } from "@/components/1 - atoms";
 import { Balancer } from "react-wrap-balancer";
 import { useEffect, useState } from "react";
 import { Profile, getCachedProfile } from "@/data/ensProfiles";
 import { AvatarSize, UltimateENSAvatar } from ".";
 import { getNameHashLabsAvatarCallbacks } from "@/lib/client/nh-labs-avatar";
-import { Button, Link } from "@namehash/namekit-react";
+import { Button, Heading, Link, Text } from "@namehash/namekit-react";
 
 export const OurSuportersSection = () => {
   return (
     <section
       id="ourSuportersSection"
       className="lg:px-[50px] w-full flex flex-col items-center bg-gray-50 justify-center px-5 py-20 border-t border-b border-gray-200"
     >
-      <div className="flex flex-col gap-3">
+      <div className="flex items-center flex-col gap-3">
         <PreSectionText>ETHEREUM COMMUNITY SUPPORTED</PreSectionText>
-        <SectionTitle>Our supporters</SectionTitle>
-        <SectionText className="text-center">
+        <Heading>Our supporters</Heading>
+        <Text as="p" className="text-lg text-gray-500">
           <Balancer>
             Thank you to our amazing supporters who also believe in helping ENS
             grow.
           </Balancer>
-        </SectionText>
+        </Text>
       </div>
 
       <div className="grid xl:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5 mt-20 place-content-stretch w-full max-w-[1216px]">

apps/namehashlabs.org/components/2 - molecules/product-component.tsx → apps/namehashlabs.org/components/2 - molecules/referral-product-component.tsx

@@ -1,10 +1,9 @@
 import { Balancer } from "react-wrap-balancer";
-import { SectionText } from "../1 - atoms";
 import cc from "classcat";
-import { Button, Link } from "@namehash/namekit-react";
+import { Button, Link, Text } from "@namehash/namekit-react";
 import { CalendarButton } from "@namehash/internal";
 
-export interface ProductProps {
+export interface ReferralProductProps {
   title: string;
   subtitle: string;
   illustration: React.ReactElement;
@@ -16,7 +15,7 @@ export interface ProductProps {
   calendarButtonText?: string;
 }
 
-export const ProductComponent = ({
+export const ReferralProductComponent = ({
   title,
   subtitle,
   illustration,
@@ -26,7 +25,7 @@ export const ProductComponent = ({
   greenLabelText,
   buttonText = "Join the discussion",
   calendarButtonText = "Learn more",
-}: ProductProps) => {
+}: ReferralProductProps) => {
   return (
     <section
       className={cc([
@@ -64,9 +63,13 @@ export const ProductComponent = ({
                 {title}
               </h2>
             </div>
-            <SectionText className="lg:text-start text-center w-full text-lg leading-7 font-light">
+
+            <Text
+              as="p"
+              className="lg:text-start text-center w-full !text-lg text-gray-500 font-light"
+            >
               <Balancer>{subtitle}</Balancer>
-            </SectionText>
+            </Text>
 
             <div className="flex w-full md:w-auto gap-3 items-center lg:flex-row flex-col">
               {buttonUrl && (