Add the view all buttons

Author: cgwbmp

apps/web/public/locales/en/common.json

@@ -3382,7 +3382,8 @@
     },
     "events": {
       "title": "Meet Solana IRL. <light>Build connections.</light>",
-      "subtitle": ""
+      "subtitle": "",
+      "cta": "View all"
     },
     "performance": {
       "title": "The fastest growing & <light>leading financial platform</light>",
@@ -3435,7 +3436,8 @@
         "name": "Pump Science",
         "stat": "$1.5B",
         "statLabel": "Trading volume"
-      }
+      },
+      "cta": "View all"
     },
     "news": {
       "title": "Keep up with <light>the latest on Solana</light>",
@@ -3478,7 +3480,9 @@
       ]
     },
     "whats-up": {
-      "title": "What’s happening <light>right now</light>"
+      "title": "What’s happening <light>right now</light>",
+      "cta": "View all"
+
     }
   },
   "terminal": {

apps/web/src/app/components/ui/button.tsx

@@ -24,12 +24,12 @@ const buttonVariants = cva(
           "hover:bg-zinc-100 hover:text-zinc-900 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
         link: "text-zinc-900 underline-offset-4 hover:underline dark:text-zinc-50",
         "secondary-outline":
-          "border-[1px] border-nd-border-prominent bg-transparent hover:bg-nd-border-prominent dark:border-zinc-800 dark:bg-zinc-950 dark:hover:bg-zinc-800 dark:hover:text-zinc-50",
+          "border-[1px] border-nd-border-prominent not-hover:bg-transparent hover:bg-nd-border-prominent",
       },
       size: {
         default: "h-10 px-twd-4 py-twd-2",
         sm: "h-9 px-twd-3",
-        lg: "h-11 px-twd-8",
+        lg: "h-11 px-twd-6",
         icon: "h-10 w-10",
       },
     },

apps/web/src/component-library/card-cariusel-section.tsx

@@ -3,6 +3,7 @@ import { useRef } from "react";
 import { cn } from "@/app/components/utils";
 import { Container } from "./container";
 import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { Button } from "@/app/components/ui/button";
 
 export type CardCariuselSectionProps = {
   className?: string;
@@ -17,6 +18,8 @@ export type CardCariuselSectionProps = {
   tabletLastPageOffset?: number;
   mobileLastPageOffset?: number;
   startIndex?: number;
+  cta?: React.ReactNode;
+  ctaHref?: string;
 };
 
 export const CardCariuselSection: React.FC<CardCariuselSectionProps> = ({
@@ -32,6 +35,8 @@ export const CardCariuselSection: React.FC<CardCariuselSectionProps> = ({
   tabletLastPageOffset = 1,
   mobileLastPageOffset = 1,
   startIndex,
+  cta,
+  ctaHref,
 }) => {
   const carouselRef = useRef(null);
   const isTablet = useMediaQuery("(min-width: 768px)");
@@ -52,7 +57,7 @@ export const CardCariuselSection: React.FC<CardCariuselSectionProps> = ({
           wrapperClassName,
         )}
       >
-        <Container className="mb-twd-8 xl:mb-twd-12 flex flex-col xl:flex-row xl:items-end xl:justify-between gap-twd-4">
+        <Container className="mb-twd-8 xl:mb-twd-12 flex flex-col md:flex-row md:items-end md:justify-between gap-twd-4">
           {(title || subtitle) && (
             // Title and subtitle
             <div className="max-w-xl">
@@ -64,10 +69,34 @@ export const CardCariuselSection: React.FC<CardCariuselSectionProps> = ({
               )}
             </div>
           )}
-          {totalItems > 1 ? (
-            // Carousel controls
-            <div className="hidden xl:inline-flex">
-              <CarouselControls carouselRef={carouselRef} />
+          {totalItems > 1 || cta ? (
+            <div className="flex gap-twd-3 items-center">
+              {/** CTA */}
+              {cta && (
+                <Button
+                  className="h-12 w-auto nd-body-m"
+                  asChild
+                  variant="secondary-outline"
+                  size="lg"
+                  rounded
+                >
+                  <a
+                    className="text-inherit"
+                    href={ctaHref}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {cta}
+                  </a>
+                </Button>
+              )}
+
+              {/* Carousel controls */}
+              {totalItems > 1 ? (
+                <div className="hidden xl:inline-flex">
+                  <CarouselControls carouselRef={carouselRef} />
+                </div>
+              ) : null}
             </div>
           ) : null}
         </Container>

apps/web/src/component-library/carousel.tsx

@@ -72,7 +72,7 @@ type CarouselProps = {
 };
 
 const NAV_BUTTON_BASE_CLASS =
-  "rounded-full w-12 h-12 p-twd-1 border-[1px] border-[rgba(240,228,255,0.20)] transition flex items-center justify-center bg-black hover:bg-black/80";
+  "rounded-full w-12 h-12 p-twd-1 border-[1px] border-nd-border-prominent transition flex items-center justify-center not-hover:bg-black hover:bg-nd-border-prominent";
 
 // Reusable CarouselNavButton component
 type CarouselNavButtonProps = {

apps/web/src/components/index/hero.tsx

@@ -56,7 +56,7 @@ export const Hero: React.FC<HeroProps> = ({
             <h1 className="nd-heading-2xl" id="hero-title">
               {title}
             </h1>
-            <p className="text-nd-mid-em-text font-medium mt-twd-5 md:mt-twd-6 nd-body-xl xl:max-w-[440px]">
+            <p className="text-nd-mid-em-text font-medium max-md:mt-twd-5 md:mt-twd-6 nd-body-xl xl:max-w-[440px]">
               {subtitle}
             </p>
 

apps/web/src/components/index/projects.tsx

@@ -7,13 +7,16 @@ import {
 import { cn } from "@/app/components/utils";
 import Image from "next/image";
 import { Logo, Logos } from "@/component-library/logos";
+import { Button } from "@/app/components/ui/button";
 
 export type ProjectsProps = {
   className?: string;
   title?: React.ReactNode;
   projects?: (CompanyStatsCardProps & { colSpan?: number })[];
   bgSrc?: string;
   logos?: Logo[];
+  cta?: string;
+  ctaHref?: string;
 };
 
 export const Projects: React.FC<ProjectsProps> = ({
@@ -22,6 +25,8 @@ export const Projects: React.FC<ProjectsProps> = ({
   projects,
   bgSrc,
   logos,
+  cta,
+  ctaHref,
 }) => {
   let colCounter = 0;
   return (
@@ -32,10 +37,30 @@ export const Projects: React.FC<ProjectsProps> = ({
       )}
     >
       <Container className="py-[64px] md:py-[108px] xl:py-[160px] flex flex-col justify-between relative">
-        <div className="flex flex-col xl:flex-row gap-[52px] justify-between items-start">
+        <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-twd-4">
           <div className="xl:max-w-[70%] grow-0">
             {title && <h2 className="nd-heading-l">{title}</h2>}
           </div>
+          {cta && (
+            <div>
+              <Button
+                className="h-12 w-auto nd-body-m"
+                asChild
+                variant="secondary-outline"
+                size="lg"
+                rounded
+              >
+                <a
+                  className="text-inherit"
+                  href={ctaHref}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  {cta}
+                </a>
+              </Button>
+            </div>
+          )}
         </div>
         <div className="mt-twd-10 xl:mt-twd-16 rounded-2xl border-nd-border-light border-[1px] bg-nd-inverse overflow-hidden relative">
           <Image

apps/web/src/components/index/whats-up.tsx

@@ -12,6 +12,7 @@ import ChevronRight from "@@/public/src/img/icons/ChevronRight.inline.svg";
 import SolanaMono from "@@/public/src/img/icons/SolanaMono.inline.svg";
 import { useTranslations } from "next-intl";
 import { format } from "date-fns";
+import { Button } from "@/app/components/ui/button";
 
 export const CATEGORIES = {
   all: {
@@ -62,9 +63,16 @@ export type WhatsUpProps = {
     categoryId: string;
     date: string;
   }[];
+  cta?: string;
+  ctaHref?: string;
 };
 
-export const WhatsUp: React.FC<WhatsUpProps> = ({ title, items }) => {
+export const WhatsUp: React.FC<WhatsUpProps> = ({
+  title,
+  items,
+  cta,
+  ctaHref,
+}) => {
   const t = useTranslations();
   const categories = useMemo(
     () =>
@@ -81,10 +89,30 @@ export const WhatsUp: React.FC<WhatsUpProps> = ({ title, items }) => {
     <section className="relative overflow-hidden bg-nd-inverse text-nd-high-em-text text-left m-twd-0">
       <div className="py-[64px] md:py-[108px] xl:py-[160px]">
         <Container className="flex flex-col justify-between relative">
-          <div className="flex flex-col xl:flex-row gap-[52px] justify-between items-start">
+          <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-twd-4">
             <div className="xl:max-w-[70%] grow-0">
               {title && <h2 className="nd-heading-l">{title}</h2>}
             </div>
+            {cta && (
+              <div>
+                <Button
+                  className="h-12 w-auto nd-body-m"
+                  asChild
+                  variant="secondary-outline"
+                  size="lg"
+                  rounded
+                >
+                  <a
+                    className="text-inherit"
+                    href={ctaHref}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {cta}
+                  </a>
+                </Button>
+              </div>
+            )}
           </div>
         </Container>
         <div className="border-t border-b border-nd-border-light mt-twd-10 xl:mt-twd-16">

apps/web/src/pages/[locale]/index.tsx

@@ -113,6 +113,8 @@ export default function Home({
             tabletLastPageOffset={2}
             cardWidthClassName="w-full md:w-[350px] xl:w-[450px]"
             startIndex={firstFeaturedEventIndex}
+            cta={t("index.events.cta")}
+            ctaHref="/events"
           >
             {events.map((event) => (
               <PlaceMediaCard
@@ -186,6 +188,8 @@ export default function Home({
           ),
         })}
         items={TERMINAL_ITEMS}
+        cta={t("index.whats-up.cta")}
+        ctaHref="/news"
       />
 
       <Divider />
@@ -208,6 +212,8 @@ export default function Home({
         }))}
         bgSrc="/src/img/index/projects-bg.webp"
         logos={PROJECTS_LOGOS}
+        cta={t("index.projects.cta")}
+        ctaHref="/institutional-payments"
       />
 
       <Decor />

packages/ui-chrome/src/inkeep-chat-button.tsx

@@ -20,7 +20,7 @@ export function InkeepChatButton() {
   return (
     <>
       <button
-        className="fixed bottom-8 right-8 z-10 h-[44px] px-[20px] justify-center items-center gap-[8px] rounded-full !bg-gradient-to-b from-black to-[#14001D] shadow-[0_-4px_12px_0_#361B40_inset,0_1px_0_0_#C37CE0_inset,0_-1px_0_0_#D06BF8_inset] backdrop-blur-[3px] text-white font-brand text-[14px] md:text-[16px] leading-[1.42] md:leading-[1.5] tracking-[-0.14px] md:tracking-[-0.16px] max-md:hidden flex"
+        className="fixed bottom-8 right-8 z-10 h-[44px] px-[20px] justify-center items-center gap-[8px] rounded-full !bg-gradient-to-b from-black to-[#14001D] hover:from-black hover:to-[#2A013C] shadow-[0_-4px_12px_0_#361B40_inset,0_1px_0_0_#C37CE0_inset,0_-1px_0_0_#D06BF8_inset] hover:shadow-[0_-4px_12px_0_#482654_inset,0_1px_0_0_#E2B6F4_inset,0_-1px_0_0_#EEBAFF_inset] backdrop-blur-[3px] text-white font-brand text-[14px] md:text-[16px] leading-[1.42] md:leading-[1.5] tracking-[-0.14px] md:tracking-[-0.16px] max-md:hidden flex hover:backdrop-blur-[3px]"
         onClick={() => inkeepConfig.modalSettings.onOpenChange(true)}
         type="button"
       >