From c33c7472903f12d3d70e775448c059ad1b243ca1 Mon Sep 17 00:00:00 2001
From: Tim Wilson <tim@twilson.net>
Date: Wed, 15 Jan 2025 14:24:49 -0500
Subject: [PATCH] Add Company to nav

---
 packages/ui/src/content.ts                    | 66 +++++++++++++++----
 packages/ui/src/icons/nucleo/heart-fill.tsx   | 20 ++++++
 packages/ui/src/icons/nucleo/index.ts         |  1 +
 .../ui/src/nav/content/company-content.tsx    | 46 +++++++++++++
 .../ui/src/nav/content/product-content.tsx    |  2 +-
 .../ui/src/nav/content/resources-content.tsx  |  2 +-
 packages/ui/src/nav/content/shared.tsx        | 24 +++++--
 packages/ui/src/nav/nav.tsx                   | 12 ++--
 8 files changed, 149 insertions(+), 24 deletions(-)
 create mode 100644 packages/ui/src/icons/nucleo/heart-fill.tsx
 create mode 100644 packages/ui/src/nav/content/company-content.tsx

diff --git a/packages/ui/src/content.ts b/packages/ui/src/content.ts
index 472ed486e0..1b6923c836 100644
--- a/packages/ui/src/content.ts
+++ b/packages/ui/src/content.ts
@@ -1,20 +1,28 @@
 import {
   Book2Fill,
+  BulletListFill,
   ConnectedDotsFill,
   CubeSettingsFill,
+  FeatherFill,
+  Github,
   Go,
   HeadsetFill,
+  HeartFill,
   HexadecagonStar,
   Hyperlink,
   LinesY,
+  LinkedIn,
   Php,
   ProductHunt,
   Python,
   Raycast,
   Ruby,
+  Twitter,
   Typescript,
+  YouTube,
 } from "./icons";
 import { Elxo } from "./icons/elxo";
+import { Logo } from "./logo";
 
 export const FEATURES_LIST = [
   {
@@ -104,18 +112,6 @@ export const SDKS = [
 ];
 
 export const RESOURCES = [
-  // {
-  //   icon: FeatherFill,
-  //   title: "Blog",
-  //   description: "Insights and stories",
-  //   href: "/blog",
-  // },
-  // {
-  //   icon: BulletListFill,
-  //   title: "Changelog",
-  //   description: "Releases and updates",
-  //   href: "/changelog",
-  // },
   {
     icon: Book2Fill,
     title: "Docs",
@@ -136,6 +132,33 @@ export const RESOURCES = [
   },
 ];
 
+export const COMPANY = [
+  {
+    icon: Logo,
+    title: "About",
+    description: "Company and team",
+    href: "/about",
+  },
+  {
+    icon: FeatherFill,
+    title: "Blog",
+    description: "Insights and stories",
+    href: "/blog",
+  },
+  {
+    icon: BulletListFill,
+    title: "Changelog",
+    description: "Releases and updates",
+    href: "/changelog",
+  },
+  {
+    icon: HeartFill,
+    title: "Customers",
+    description: "Success stories and use cases",
+    href: "/customers",
+  },
+];
+
 export const COMPARE_PAGES = [
   { name: "Bitly", slug: "bitly" },
   { name: "Rebrandly", slug: "rebrandly" },
@@ -150,3 +173,22 @@ export const LEGAL_PAGES = [
   { name: "Subprocessors", slug: "subprocessors" },
   { name: "Report Abuse", slug: "abuse" },
 ];
+
+export const SOCIAL_LINKS = [
+  { name: "X (Twitter)", icon: Twitter, href: "https://x.com/dubdotco" },
+  {
+    name: "LinkedIn",
+    icon: LinkedIn,
+    href: "https://www.linkedin.com/company/dubinc",
+  },
+  {
+    name: "GitHub",
+    icon: Github,
+    href: "https://github.com/dubinc/dub",
+  },
+  {
+    name: "YouTube",
+    icon: YouTube,
+    href: "https://www.youtube.com/@dubdotco",
+  },
+];
diff --git a/packages/ui/src/icons/nucleo/heart-fill.tsx b/packages/ui/src/icons/nucleo/heart-fill.tsx
new file mode 100644
index 0000000000..7c959e321f
--- /dev/null
+++ b/packages/ui/src/icons/nucleo/heart-fill.tsx
@@ -0,0 +1,20 @@
+import { SVGProps } from "react";
+
+export function HeartFill(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      height="18"
+      width="18"
+      viewBox="0 0 18 18"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g fill="currentColor">
+        <path
+          d="M12.164,2c-1.195,.015-2.324,.49-3.164,1.306-.84-.815-1.972-1.291-3.178-1.306-2.53,.015-4.582,2.084-4.572,4.609,0,5.253,5.306,8.429,6.932,9.278,.256,.133,.537,.2,.818,.2s.562-.067,.817-.2c1.626-.848,6.933-4.024,6.933-9.275,.009-2.528-2.042-4.597-4.586-4.612Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}
diff --git a/packages/ui/src/icons/nucleo/index.ts b/packages/ui/src/icons/nucleo/index.ts
index efcaab0a54..86f2bc6772 100644
--- a/packages/ui/src/icons/nucleo/index.ts
+++ b/packages/ui/src/icons/nucleo/index.ts
@@ -95,6 +95,7 @@ export * from "./grid-layout-rows";
 export * from "./grid-plus";
 export * from "./headset";
 export * from "./headset-fill";
+export * from "./heart-fill";
 export * from "./hexadecagon-star";
 export * from "./hyperlink";
 export * from "./icosahedron";
diff --git a/packages/ui/src/nav/content/company-content.tsx b/packages/ui/src/nav/content/company-content.tsx
new file mode 100644
index 0000000000..8edf9a3d69
--- /dev/null
+++ b/packages/ui/src/nav/content/company-content.tsx
@@ -0,0 +1,46 @@
+import { cn, createHref } from "@dub/utils";
+import { COMPANY, SOCIAL_LINKS } from "../../content";
+import {
+  contentHeadingClassName,
+  ContentLinkCard,
+  LargeLinkCard,
+} from "./shared";
+
+export function CompanyContent({ domain }: { domain: string }) {
+  return (
+    <div className="grid w-[540px] grid-cols-[minmax(0,1fr),minmax(0,0.75fr)]">
+      <div className="flex flex-col gap-4 border-r border-neutral-200 p-4">
+        {COMPANY.map(({ title, description, icon, href }) => (
+          <LargeLinkCard
+            key={title}
+            title={title}
+            description={description}
+            descriptionClassName="mt-0.5"
+            icon={icon}
+            iconClassName="size-5"
+            href={createHref(href, domain)}
+          />
+        ))}
+      </div>
+      <div className="px-6 py-4">
+        <p className={cn(contentHeadingClassName, "mb-2")}>Social</p>
+        <div className="grid grid-cols-1">
+          {SOCIAL_LINKS.map(({ icon: Icon, name, href }) => (
+            <ContentLinkCard
+              key={href}
+              href={href}
+              target="_blank"
+              className="-mx-2"
+              icon={
+                <div className="shrink-0 rounded-lg border border-neutral-200 bg-white/50 p-1.5 dark:border-white/20 dark:bg-white/10">
+                  <Icon className="size-4 shrink-0 text-neutral-600 transition-colors dark:text-white/60" />
+                </div>
+              }
+              title={name}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui/src/nav/content/product-content.tsx b/packages/ui/src/nav/content/product-content.tsx
index dd77a97a4f..16dbc892da 100644
--- a/packages/ui/src/nav/content/product-content.tsx
+++ b/packages/ui/src/nav/content/product-content.tsx
@@ -27,7 +27,7 @@ const largeLinks = [
 
 export function ProductContent({ domain }: { domain: string }) {
   return (
-    <div className="grid w-[1020px] grid-cols-[repeat(2,minmax(0,1fr)),0.8fr] gap-4 p-5">
+    <div className="grid w-[1020px] grid-cols-[repeat(2,minmax(0,1fr)),0.8fr] gap-4 p-4">
       <Link
         href={createHref("/home", domain)}
         className="group relative flex flex-col overflow-hidden rounded-xl border border-neutral-100 bg-neutral-50 dark:border-white/20 dark:bg-white/10"
diff --git a/packages/ui/src/nav/content/resources-content.tsx b/packages/ui/src/nav/content/resources-content.tsx
index 8354d6c03a..c81fafc810 100644
--- a/packages/ui/src/nav/content/resources-content.tsx
+++ b/packages/ui/src/nav/content/resources-content.tsx
@@ -22,7 +22,7 @@ const mainLinks = [
 
 export function ResourcesContent({ domain }: { domain: string }) {
   return (
-    <div className="grid w-[1020px] grid-cols-[repeat(2,minmax(0,1fr)),0.8fr] gap-4 p-5">
+    <div className="grid w-[1020px] grid-cols-[repeat(2,minmax(0,1fr)),0.8fr] gap-4 p-4">
       {mainLinks.map(({ title, description, thumbnail, href }) => (
         <Link
           key={title}
diff --git a/packages/ui/src/nav/content/shared.tsx b/packages/ui/src/nav/content/shared.tsx
index 2715ee946e..f943cdf16e 100644
--- a/packages/ui/src/nav/content/shared.tsx
+++ b/packages/ui/src/nav/content/shared.tsx
@@ -4,7 +4,7 @@ import { ComponentProps, ReactNode, SVGProps } from "react";
 import { ExpandingArrow, Icon } from "../../icons";
 
 export const contentHeadingClassName =
-  "text-xs uppercase text-neutral-400 dark:text-white/60";
+  "text-xs uppercase text-neutral-500 dark:text-white/60";
 
 export const contentLinkCardClassName =
   "group rounded-[8px] p-2 transition-colors hover:bg-neutral-50 active:bg-neutral-100 dark:hover:bg-white/[0.15] dark:active:bg-white/20";
@@ -87,27 +87,41 @@ export function LargeLinkCard({
   icon: Icon,
   title,
   description,
+  descriptionClassName,
+  iconClassName,
   ...rest
 }: {
   icon: Icon;
   title: string;
   description?: string;
+  descriptionClassName?: string;
+  iconClassName?: string;
 } & ComponentProps<typeof Link>) {
   return (
     <Link
       {...rest}
-      className="group relative flex flex-col rounded-xl border border-neutral-100 bg-neutral-50 transition-colors duration-150 hover:bg-neutral-100 active:bg-neutral-200 dark:border-white/20 dark:bg-white/10 dark:hover:bg-white/15 dark:active:bg-white/20"
+      className="group relative flex flex-col justify-center rounded-xl border border-neutral-100 bg-neutral-50 transition-colors duration-150 hover:bg-neutral-100 active:bg-neutral-200 dark:border-white/20 dark:bg-white/10 dark:hover:bg-white/15 dark:active:bg-white/20"
     >
       <div className="flex items-center justify-between px-5 py-4">
         <div>
-          <span className="text-sm font-medium leading-none text-neutral-900 dark:text-white">
+          <span className="block text-sm font-medium leading-none text-neutral-900 dark:text-white">
             {title}
           </span>
-          <p className="mt-1 text-sm text-neutral-500 dark:text-white/60">
+          <p
+            className={cn(
+              "mt-1.5 text-sm text-neutral-500 dark:text-white/60",
+              descriptionClassName,
+            )}
+          >
             {description}
           </p>
         </div>
-        <Icon className="size-6 text-neutral-700 dark:text-neutral-200" />
+        <Icon
+          className={cn(
+            "size-6 text-neutral-700 dark:text-neutral-200",
+            iconClassName,
+          )}
+        />
       </div>
     </Link>
   );
diff --git a/packages/ui/src/nav/nav.tsx b/packages/ui/src/nav/nav.tsx
index 8478da7bd9..ec6fdcad1a 100644
--- a/packages/ui/src/nav/nav.tsx
+++ b/packages/ui/src/nav/nav.tsx
@@ -9,10 +9,11 @@ import { useParams, usePathname } from "next/navigation";
 import { PropsWithChildren, createContext, useId } from "react";
 import useSWR from "swr";
 import { buttonVariants } from "../button";
-import { FEATURES_LIST, RESOURCES } from "../content";
+import { COMPANY, FEATURES_LIST, RESOURCES } from "../content";
 import { useScroll } from "../hooks";
 import { MaxWidthWrapper } from "../max-width-wrapper";
 import { NavWordmark } from "../nav-wordmark";
+import { CompanyContent } from "./content/company-content";
 import { ProductContent } from "./content/product-content";
 import { ResourcesContent } from "./content/resources-content";
 
@@ -33,7 +34,7 @@ export const navItems = [
     name: "Resources",
     content: ResourcesContent,
     childItems: RESOURCES,
-    segments: ["/solutions", "/blog", "/changelog", "/docs", "/help", "/brand"],
+    segments: ["/solutions", "/docs", "/help", "/brand"],
   },
   {
     name: "Enterprise",
@@ -41,9 +42,10 @@ export const navItems = [
     segments: ["/enterprise"],
   },
   {
-    name: "Customers",
-    href: "/customers",
-    segments: ["/customers"],
+    name: "Company",
+    content: CompanyContent,
+    childItems: COMPANY,
+    segments: ["about", "/blog", "/changelog", "/customers"],
   },
   {
     name: "Pricing",