rename testimonials, add bottom cta

Author: brendan-defi

apps/web/app/(base-org)/developers/page.tsx

@@ -4,9 +4,10 @@ import Container from 'apps/web/src/components/base-org/Container';
 import { Hero } from 'apps/web/src/components/Developers/Hero';
 import { UseCases } from 'apps/web/src/components/Developers/UseCases';
 import { Customers } from 'apps/web/src/components/Developers/Customers';
-import { Quotes } from 'apps/web/src/components/Developers/Quotes';
+import { Testimonials } from 'apps/web/src/components/Developers/Testimonials';
 import { Tools } from 'apps/web/src/components/Developers/Tools';
 import { WhyBase } from 'apps/web/src/components/Developers/WhyBase';
+import { BottomCta } from 'apps/web/src/components/Developers/BottomCta';
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://base.org'),
@@ -25,9 +26,10 @@ export default async function Developers() {
           <Hero />
           <UseCases />
           <Customers />
-          <Quotes />
+          <Testimonials />
           <Tools />
           <WhyBase />
+          <BottomCta />
         </main>
       </Container>
     </AnalyticsProvider>

apps/web/src/components/Developers/BottomCta/index.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { ButtonVariants } from 'apps/web/src/components/base-org/Button/types';
+import { ButtonWithLinkAndEventLogging } from 'apps/web/src/components/Button/ButtonWithLinkAndEventLogging';
+import { useCallback, useState } from 'react';
+import { Icon } from 'apps/web/src/components/Icon/Icon';
+import Title from 'apps/web/src/components/base-org/typography/Title';
+import { TitleLevel } from 'apps/web/src/components/base-org/typography/Title/types';
+
+export function BottomCta() {
+  const [hasCopied, setHasCopied] = useState(false);
+
+  const handleCopy = useCallback(() => {
+    void navigator.clipboard.writeText('npm create onchain');
+    setHasCopied(true);
+    setTimeout(() => setHasCopied(false), 2000); // Reset after 2 seconds
+  }, []);
+
+  return (
+    <section className="my-24 w-full bg-black">
+      <div className="flex flex-col items-center rounded-2xl bg-dark-palette-backgroundAlternate py-16">
+        <Title level={TitleLevel.Title1} as="h2">
+          Together, we&apos;re updating the Internet with a new dev platform.
+        </Title>
+        <Title level={TitleLevel.Title4} as="p" className="mt-2">
+          Start building with a starter template or see documentation.
+        </Title>
+        <div className="mt-8 flex flex-col justify-center gap-4 sm:flex-row">
+          <button
+            type="button"
+            className="inline-flex items-center gap-2.5 rounded-xl bg-white px-4 py-2 font-bold text-dark-palette-primaryForeground transition-colors hover:bg-white/90"
+            onClick={handleCopy}
+          >
+            npm create onchain
+            {hasCopied ? (
+              <div className="text-green-60">
+                <Icon name="checkmark" width="24" height="24" color="currentColor" />
+              </div>
+            ) : (
+              <Icon name="copy" width="24" height="24" color="currentColor" />
+            )}
+          </button>
+          <ButtonWithLinkAndEventLogging
+            variant={ButtonVariants.SecondaryOutline}
+            iconName="arrowRight"
+            iconSize="24"
+            buttonClassNames="flex w-40 items-center justify-between px-4 py-3"
+            href=""
+            eventName="bottom-cta"
+          >
+            Documentation
+          </ButtonWithLinkAndEventLogging>
+        </div>
+      </div>
+    </section>
+  );
+}

…c/components/Developers/Quotes/index.tsx …onents/Developers/Testimonials/index.tsxapps/web/src/components/Developers/Quotes/index.tsx renamed to apps/web/src/components/Developers/Testimonials/index.tsx apps/web/src/components/Developers/Quotes/index.tsx renamed to apps/web/src/components/Developers/Testimonials/index.tsx

@@ -10,14 +10,14 @@ import { TitleLevel } from 'apps/web/src/components/base-org/typography/Title/ty
 
 type Tab = 'build' | 'scale' | 'monetize';
 
-type Quote = {
+type Testimonial = {
   text: string;
   author: string;
   role: string;
   tab: Tab;
 };
 
-const quotes: Quote[] = [
+const testimonials: Testimonial[] = [
   {
     text: "Base's developer platform helped us launch our NFT marketplace in days instead of months.",
     author: 'Sarah Chen',
@@ -38,10 +38,10 @@ const quotes: Quote[] = [
   },
 ];
 
-export function Quotes() {
+export function Testimonials() {
   const [activeTab, setActiveTab] = useState<Tab>('build');
 
-  const quoteAnimation = useMemo(
+  const testimonialAnimation = useMemo(
     () => ({
       initial: { opacity: 0, y: 20 },
       animate: { opacity: 1, y: 0 },
@@ -74,22 +74,22 @@ export function Quotes() {
 
         <div className="relative">
           <AnimatePresence mode="wait">
-            {quotes
-              .filter((quote) => quote.tab === activeTab)
-              .map((quote) => (
+            {testimonials
+              .filter((testimonial) => testimonial.tab === activeTab)
+              .map((testimonial) => (
                 <motion.div
-                  key={quote.tab}
-                  initial={quoteAnimation.initial}
-                  animate={quoteAnimation.animate}
-                  exit={quoteAnimation.exit}
-                  transition={quoteAnimation.transition}
+                  key={testimonial.tab}
+                  initial={testimonialAnimation.initial}
+                  animate={testimonialAnimation.animate}
+                  exit={testimonialAnimation.exit}
+                  transition={testimonialAnimation.transition}
                   className="space-y-8"
                 >
                   <blockquote className="space-y-4">
-                    <Title level={TitleLevel.Display3}>&ldquo;{quote.text}&rdquo;</Title>
+                    <Title level={TitleLevel.Display3}>&ldquo;{testimonial.text}&rdquo;</Title>
                     <div className="text-dark-palette-foregroundMuted">
-                      <Title level={TitleLevel.Title4}>{quote.author}</Title>
-                      <Title level={TitleLevel.Title4}>{quote.role}</Title>
+                      <Title level={TitleLevel.Title4}>{testimonial.author}</Title>
+                      <Title level={TitleLevel.Title4}>{testimonial.role}</Title>
                     </div>
                   </blockquote>
                   <ButtonWithLinkAndEventLogging
@@ -100,7 +100,7 @@ export function Quotes() {
                     buttonClassNames="flex w-40 items-center justify-between px-4 py-3"
                     href="/stories"
                     target="_blank"
-                    eventName="developers_quotes"
+                    eventName="testimonials"
                   >
                     More stories
                   </ButtonWithLinkAndEventLogging>