feat: [sc-25927] Update ENS Referral Program Landing Page for DevCon (#…

…463) * update referral program copys * remove unused import * update copys * fix button placement on mobile * update domain edulennert * update NH Labs banner * fix healine banner link * fix "review v1 temp check" button spacing problem - text too big * fix DevCon date * fix date and banner height * Update page.tsx --------- Co-authored-by: lightwalker.eth <[email protected]>
namehash · Nov 11, 2024 · 4bbd544 · 4bbd544
1 parent b46357f
commit 4bbd544
Show file tree

Hide file tree

Showing 15 changed files with 86 additions and 46 deletions.
diff --git a/apps/namehashlabs.org/app/careers/[slug]/page.tsx b/apps/namehashlabs.org/app/careers/[slug]/page.tsx
@@ -61,7 +61,7 @@ export default function Page({ params }: Props) {
   }
 
   return (
-    <section className="w-full lg:pb-20 pb-5 px-5 lg:px-[112px]">
+    <section className="w-full lg:pb-20 pb-5 px-5 lg:px-[50px]">
       <RolePage {...role} />
     </section>
   );

diff --git a/apps/namehashlabs.org/app/careers/page.tsx b/apps/namehashlabs.org/app/careers/page.tsx
@@ -31,7 +31,7 @@ const isRolesListEmpty = !rolesData.roles.length;
 
 export default function Page() {
   return (
-    <section className="w-full pt-20 lg:pb-20 pb-5 px-5 lg:px-[112px]">
+    <section className="w-full pt-20 lg:pb-20 pb-5 px-5 lg:px-[50px]">
       <ColorfulBg className="absolute top-0 left-0 w-full z-[-1]" />
       <div className="flex flex-col items-start lg:gap-3 gap-2 lg:mt-[100px] lg:pb-[120px] py-[60px] m-auto max-w-[1216px] border-b">
         <p className="text-xs leading-4 font-medium tracking-wide uppercase text-gray-500">

diff --git a/apps/namehashlabs.org/app/ens-referral-program/page.tsx b/apps/namehashlabs.org/app/ens-referral-program/page.tsx
@@ -33,13 +33,13 @@ export const metadata: Metadata = {
 
 export default function Page() {
   return (
-    <main className="flex flex-col items-center justify-between">
+    <main className="flex w-full flex-col items-center justify-between">
       <div className="mt-20 w-full">
-        <div className="w-full px-5 lg:px-[112px] bg-gray-50 flex items-center justify-center">
+        <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
               title="ENS Referral Program"
-              subtitle="The power of a protocol lies not only in its technology, but in the strength of its community. Passionate about ENS? Become an ENS Referrer, help grow ENS, and start earning."
+              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={
                 <Image
                   quality={100}
@@ -50,13 +50,15 @@ export default function Page() {
                   alt="hero"
                 />
               }
-              greenLabelText="Proposal pending"
-              buttonUrl="https://docs.google.com/document/d/1srqcho7PFyMBUDQTxxlH_eZqrt5x_EEB-PF2LfpYvIg/edit?usp=sharing"
+              calendarButtonText="Meet us at DevCon"
+              greenLabelText="Collecting Community Input"
+              buttonText="Share your voice"
+              buttonUrl="https://app.deform.cc/form/bac7c954-c419-4a81-a84f-97fa05f0a898"
             />
           </section>
         </div>
 
-        <section className="px-5 lg:px-[112px] py-20 w-full flex flex-col relative items-center justify-center overflow-hidden">
+        <section className="px-5 lg:px-[50px] py-20 w-full flex flex-col relative items-center justify-center overflow-hidden">
           <div className="grid lg:grid-cols-3 grid-cols-1 items-start lg:divide-y-0 divide-y lg:divide-x justify-center max-w-[1216px]">
             {items.map((item, index) => {
               return (
@@ -76,6 +78,7 @@ export default function Page() {
                     buttonUrl={item.buttonUrl}
                     buttonText={item.buttonText}
                     greenLabelText={item.greenLabelText}
+                    grayLabelText={item.grayLabelText}
                     isInverted={index % 3 === 2}
                   />
                 </div>
@@ -96,6 +99,7 @@ export interface ItemProps {
   buttonUrl?: string;
   buttonText?: string;
   greenLabelText?: string;
+  grayLabelText?: string;
 }
 
 const Item = ({
@@ -105,6 +109,7 @@ const Item = ({
   buttonUrl,
   buttonText,
   greenLabelText,
+  grayLabelText,
 }: ItemProps) => {
   return (
     <div
@@ -129,11 +134,23 @@ const Item = ({
               </p>
             </span>
           )}
+          {grayLabelText && (
+            <span className="px-3 py-0.5 bg-gray-100 border border-gray-50 rounded-full">
+              <p className="text-sm leading-5 font-medium text-gray-800 font-variant-normal">
+                {grayLabelText}
+              </p>
+            </span>
+          )}
         </div>
         <p className="text-lg leading-7 font-light text-gray-500">{text}</p>
       </div>
       {!!buttonUrl && (
-        <Button variant="secondary" size="medium" asChild>
+        <Button
+          variant="secondary"
+          className="max-w-[100%] overflow-x-hidden"
+          size="medium"
+          asChild
+        >
           <Link href={buttonUrl}>
             {buttonText}
             <Link.ExternalIcon />
@@ -147,11 +164,12 @@ const Item = ({
 const items: ItemProps[] = [
   {
     icon: <DocumentTextIcon className="h-6 w-6 text-gray-400 m-auto" />,
-    title: "Abstract Proposal Document",
-    text: "Review the design rationale for important decisions in how a proposed ENS Referral Program might function.",
-    buttonText: "Review the temp check",
+    title: "Temp Check (ENS v1)",
+    text: "ENSv2 is expected to simplify the technical implementation of an ENS Referral Program. Therefore, the ideas in this ENS V1 Referral Program proposal are out of date, but are retained here for reference purposes.",
+    buttonText: "Review the ENS V1 temp check",
     buttonUrl:
       "https://docs.google.com/document/d/1srqcho7PFyMBUDQTxxlH_eZqrt5x_EEB-PF2LfpYvIg/edit?usp=sharing",
+    grayLabelText: "Deprecated",
   },
   {
     icon: <FigmaIcon className="h-6 w-6 text-gray-400 m-auto" />,
@@ -161,9 +179,10 @@ const items: ItemProps[] = [
   },
   {
     icon: <GithubIcon className="h-6 w-6 text-gray-400 m-auto" />,
-    title: "R&D Prototype",
-    text: "R&D Prototype for .eth referrals implemented using ZK and Axiom.",
+    title: "R&D Prototype (ENS v1) ",
+    text: "R&D Prototype for .eth referrals on ENS V1 implemented using ZK and Axiom.",
     buttonText: "View on GitHub",
     buttonUrl: "https://github.com/namehash/ens-referrals",
+    grayLabelText: "Deprecated",
   },
 ];
diff --git a/apps/namehashlabs.org/components/1 - atoms/headline-banner.tsx b/apps/namehashlabs.org/components/1 - atoms/headline-banner.tsx
@@ -1,24 +1,25 @@
 import { MegaphoneIcon } from "@heroicons/react/24/outline";
+import { CalendarButton } from "@namehash/internal";
 import { Link } from "@namehash/namekit-react";
 
 export const HeadlineBanner = () => {
   return (
-    <div className="px-5 text-white justify-center items-center w-full bg-[#3B0D48] space-x-4 py-4 text-sm relative z-20 flex">
+    <div className="px-5 text-white justify-center items-center sm:h-[44px] w-full bg-[#3B0D48] space-x-4 py-4 text-sm relative z-20 flex">
       <div className="flex space-x-3 items-center">
         <MegaphoneIcon className="flex shrink-0 w-6 h-6 opacity-50 -mr-1" />
-        <p className="pr-16 sm:pr-0">
-          Track our progress as an ENS Service Provider
-        </p>
+        <p className=" sm:pr-0">Meet us at DevCon in Bangkok 11-13 Nov 2024</p>
       </div>
-      <Link
-        target="_blank"
-        href="https://x.com/NamehashLabs"
-        variant="underline"
-        size="small"
+
+      <CalendarButton
+        className="flex items-center"
+        asChild
+        variant="ghost"
+        link="namehashlabs/namehashlabs"
       >
-        <span className="hidden sm:block">Follow us on Twitter</span>
-        <span className="block sm:hidden w-max">Follow us</span>
-      </Link>
+        <Link target="_blank" variant="underline" size="small">
+          Book a meeting
+        </Link>
+      </CalendarButton>
     </div>
   );
 };
diff --git a/apps/namehashlabs.org/components/1 - atoms/join-our-team-section.tsx b/apps/namehashlabs.org/components/1 - atoms/join-our-team-section.tsx
@@ -8,7 +8,7 @@ export const JoinOurTeamSection = () => {
   return (
     <section
       id="joinOurTeam"
-      className="px-5 lg:px-[112px] pb-5 pt-[60px] mx-auto lg:py-[86px]"
+      className="px-5 lg:px-[50px] pb-5 pt-[60px] mx-auto lg:py-[86px]"
     >
       <div className="m-auto max-w-[1216px] flex flex-col lg:flex-row justify-between items-center ">
         <div className="mt-6 mx-auto flex justify-center">

diff --git a/apps/namehashlabs.org/components/2 - molecules/brand-assets.tsx b/apps/namehashlabs.org/components/2 - molecules/brand-assets.tsx
@@ -7,7 +7,7 @@ import { Button, Link } from "@namehash/namekit-react";
 
 export const BrandAssets = () => {
   return (
-    <section className="w-full py-20 px-5 lg:px-[112px] h-full flex justify-center">
+    <section className="w-full py-20 px-5 lg:px-[50px] h-full flex justify-center">
       <ColorfulBg className="absolute top-0 left-0 w-full z-[-1]" />
       <div className="w-full max-w-[1216px]">
         <div className="flex flex-col lg:mt-[100px] lg:mb-[120px] mt-[60px] mb-[60px] gap-3 ">

diff --git a/apps/namehashlabs.org/components/2 - molecules/financial-support-section.tsx b/apps/namehashlabs.org/components/2 - molecules/financial-support-section.tsx
@@ -7,7 +7,7 @@ export const FinancialSupportSection = () => {
   return (
     <section
       id="financialSupportSection"
-      className="lg:px-[112px] w-full flex flex-col items-center justify-center px-5 py-20 "
+      className="lg:px-[50px] w-full flex flex-col items-center justify-center px-5 py-20 "
     >
       <div
         className="flex flex-col gap-5 items-center justify-center w-full max-w-[1216px] py-8 px-5 rounded-[8px] border border-gray-200"

diff --git a/apps/namehashlabs.org/components/2 - molecules/footer.tsx b/apps/namehashlabs.org/components/2 - molecules/footer.tsx
@@ -46,7 +46,7 @@ const footerResources = [
 export const Footer = (props: React.HTMLAttributes<HTMLDivElement>) => {
   return (
     <section
-      className="lg:px-[112px] px-5 flex items-center justify-center w-full border-t border-gray-200"
+      className="lg:px-[50px] px-5 flex items-center justify-center w-full border-t border-gray-200"
       {...props}
     >
       <div className="pt-8 pb-5 flex flex-col gap-10 items-start justify-between w-full max-w-[1216px]">

diff --git a/apps/namehashlabs.org/components/2 - molecules/header.tsx b/apps/namehashlabs.org/components/2 - molecules/header.tsx
@@ -9,7 +9,7 @@ import { CalendarButton } from "@namehash/internal";
 
 export const Header = () => {
   return (
-    <nav className="lg:px-[112px] px-5 w-full h-20 flex items-center justify-center border-b border-black border-opacity-10 z-20">
+    <nav className="lg:px-[50px] px-5 w-full h-20 flex items-center justify-center border-b border-black border-opacity-10 z-20">
       <div className="w-full flex items-center justify-between py-5 max-w-[1216px]">
         <NextLink href="/" aria-label="NameHash Labs">
           <NameHashLabsLogo />

diff --git a/apps/namehashlabs.org/components/2 - molecules/our-principles-section.tsx b/apps/namehashlabs.org/components/2 - molecules/our-principles-section.tsx
@@ -8,7 +8,7 @@ export const OurPrinciplesSection = () => {
   return (
     <section
       id="ourPrinciplesSection"
-      className="lg:px-[112px] w-full px-5 md:px-20 py-20"
+      className="lg:px-[50px] w-full px-5 md:px-20 py-20"
     >
       <div className="flex flex-col items-center justify-center max-w-[1216px] m-auto">
         <PreSectionText>What Guides us</PreSectionText>

diff --git a/apps/namehashlabs.org/components/2 - molecules/our-supporters-section.tsx b/apps/namehashlabs.org/components/2 - molecules/our-supporters-section.tsx
@@ -12,7 +12,7 @@ export const OurSuportersSection = () => {
   return (
     <section
       id="ourSuportersSection"
-      className="lg:px-[112px] w-full flex flex-col items-center bg-gray-50 justify-center px-5 py-20 border-t border-b border-gray-200"
+      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">
         <PreSectionText>ETHEREUM COMMUNITY SUPPORTED</PreSectionText>

diff --git a/apps/namehashlabs.org/components/2 - molecules/product-component.tsx b/apps/namehashlabs.org/components/2 - molecules/product-component.tsx
@@ -2,6 +2,7 @@ import { Balancer } from "react-wrap-balancer";
 import { SectionText } from "../1 - atoms";
 import cc from "classcat";
 import { Button, Link } from "@namehash/namekit-react";
+import { CalendarButton } from "@namehash/internal";
 
 export interface ProductProps {
   title: string;
@@ -11,6 +12,8 @@ export interface ProductProps {
   isInverted?: boolean;
   buttonUrl?: string;
   greenLabelText?: string;
+  buttonText?: string;
+  calendarButtonText?: string;
 }
 
 export const ProductComponent = ({
@@ -21,6 +24,8 @@ export const ProductComponent = ({
   isInverted,
   buttonUrl,
   greenLabelText,
+  buttonText = "Join the discussion",
+  calendarButtonText = "Learn more",
 }: ProductProps) => {
   return (
     <section
@@ -63,15 +68,30 @@ export const ProductComponent = ({
               <Balancer>{subtitle}</Balancer>
             </SectionText>
 
-            {buttonUrl && (
-              <div className="flex justify-center lg:justify-start">
-                <Button asChild>
-                  <Link href={buttonUrl}>
-                    Join the discussion <Link.ExternalIcon />
-                  </Link>
-                </Button>
-              </div>
-            )}
+            <div className="flex w-full md:w-auto gap-3 items-center lg:flex-row flex-col">
+              {buttonUrl && (
+                <div className="flex justify-center lg:justify-start w-full md:w-auto">
+                  <Button
+                    className="md:w-auto w-full items-center justify-center"
+                    asChild
+                  >
+                    <Link href={buttonUrl}>
+                      {buttonText} <Link.ExternalIcon />
+                    </Link>
+                  </Button>
+                </div>
+              )}
+
+              {calendarButtonText && (
+                <CalendarButton
+                  variant="ghost"
+                  link="namehashlabs/namehashlabs"
+                  className="md:w-auto w-full"
+                >
+                  {calendarButtonText}
+                </CalendarButton>
+              )}
+            </div>
           </div>
         </div>
         <div className="lg:w-1/2 w-full  lg:mt-0 mt-5 relative flex items-center justify-center">

diff --git a/apps/namehashlabs.org/components/2 - molecules/team-section.tsx b/apps/namehashlabs.org/components/2 - molecules/team-section.tsx
@@ -24,7 +24,7 @@ const namehashLabsTeam = {
     getCachedProfile("goader.eth"),
     getCachedProfile("apohllo.eth"),
     getCachedProfile("byczong.eth"),
-    getCachedProfile("edulennert.eth"),
+    getCachedProfile("duds.eth"),
     getCachedProfile("y3drk.eth"),
     getCachedProfile("sebban.eth"),
     getCachedProfile("ilfurioso.eth"),
@@ -36,7 +36,7 @@ export const TeamSection = () => {
   return (
     <section
       id="meetOurTeamSection"
-      className=" justify-center lg:flex px-5 lg:px-[112px] w-full xl:justify-between lg:border-none"
+      className=" justify-center lg:flex px-5 lg:px-[50px] w-full xl:justify-between lg:border-none"
     >
       <div className="max-w-[1216px] xl:flex m-auto w-full border-b border-gray-200 py-6 lg:py-20">
         <div className="flex flex-col max-[635px] items-center justify-center mb-[60px] xl:max-w-[448px] xl:justify-start xl:items-start">

diff --git a/apps/namehashlabs.org/components/3 - organisms/partners-section.tsx b/apps/namehashlabs.org/components/3 - organisms/partners-section.tsx
@@ -9,7 +9,7 @@ import { ContactUsForm } from "@namehash/internal";
 
 export const PartnersPage = () => {
   return (
-    <section className="w-full pt-20 lg:pb-20 pb-5 px-5 lg:px-[112px]">
+    <section className="w-full pt-20 lg:pb-20 pb-5 px-5 lg:px-[50px]">
       <ColorfulBg className="absolute top-0 left-0 w-full z-[-1]" />
       <div className="flex flex-col items-start lg:gap-3 gap-2 lg:mt-[100px] lg:pb-[120px] py-[60px] m-auto max-w-[1216px]">
         <p className="text-xs leading-4 font-medium tracking-wide uppercase text-gray-500">

diff --git a/apps/namehashlabs.org/data/ensProfiles.ts b/apps/namehashlabs.org/data/ensProfiles.ts
@@ -467,7 +467,7 @@ const EnsProfiles = new Map<`0x${string}`, Profile>([
   [
     "0x89F8e4020c0dd384F13c288bc5743F963F9D8fdF",
     buildProfile({
-      ensName: "edulennert.eth",
+      ensName: "duds.eth",
       title: "Engineering",
     }),
   ],