Landing page fixes 2 (#13751)

Author: dylanjeffers

packages/web/src/public-site/pages/landing-2026/components/CreateFutureCTA.module.css

@@ -80,7 +80,10 @@
   background: transparent;
   cursor: pointer;
   text-decoration: none;
-  transition: box-shadow 0.25s ease;
+  transition:
+    box-shadow 0.25s ease,
+    background 0.2s ease,
+    border-color 0.2s ease;
   box-sizing: border-box;
 }
 
@@ -92,6 +95,17 @@
     inset -4px 0px 4px 0px rgba(175, 72, 255, 0.25);
 }
 
+/* Figma 2738-4495: press state */
+.ctaButton:active {
+  background: rgba(53, 20, 75, 0.85);
+  border-color: rgba(175, 72, 255, 0.9);
+  box-shadow: none;
+}
+
+.ctaButton:active .ctaLabel {
+  color: #e7c7ff;
+}
+
 .ctaLabel {
   font-family: 'Urbanist', sans-serif;
   font-weight: 700;
@@ -100,12 +114,12 @@
   color: #fff;
   text-transform: capitalize;
   white-space: nowrap;
+  transition: color 0.2s ease;
 }
 
 @media (max-width: 800px) {
   .section {
     padding: 32px 16px;
-    box-shadow: 0 10px 50px rgba(53, 5, 152, 0.25);
   }
 
   .content {

packages/web/src/public-site/pages/landing-2026/components/FAQ2026.module.css

@@ -72,9 +72,16 @@
     text-shadow 0.2s ease;
 }
 
-.faqItem[aria-expanded='true'] .faqQuestion,
-.faqItem:hover .faqQuestion,
-.faqItem:active .faqQuestion,
+/* Purple hover when whole FAQ row is hovered; carets match text color */
+.faqItem:hover .faqQuestion {
+  color: #e7c7ff;
+  text-shadow:
+    -4px 0px 4px rgba(175, 72, 255, 0.25),
+    4px 0px 4px rgba(175, 72, 255, 0.25),
+    0px -4px 4px rgba(175, 72, 255, 0.25),
+    0px 4px 4px rgba(175, 72, 255, 0.25);
+}
+
 .faqItem:focus-visible .faqQuestion {
   color: #e7c7ff;
   text-shadow:
@@ -84,28 +91,39 @@
     0px 4px 4px rgba(175, 72, 255, 0.25);
 }
 
+/* Press state: same purple as hover (Figma 2777-2986) */
+.faqItem:active .faqQuestion {
+  color: #e7c7ff;
+  text-shadow:
+    -4px 0px 4px rgba(175, 72, 255, 0.25),
+    4px 0px 4px rgba(175, 72, 255, 0.25),
+    0px -4px 4px rgba(175, 72, 255, 0.25),
+    0px 4px 4px rgba(175, 72, 255, 0.25);
+}
+
 .chevron {
   width: 16px;
   height: 16px;
   flex-shrink: 0;
-  transition: transform 0.3s ease;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  transition:
+    transform 0.3s ease,
+    color 0.2s ease;
 }
 
-.chevron svg,
-.chevron svg path {
-  fill: #fff !important;
-  transition: fill 0.2s ease;
+.chevron svg {
+  width: 100%;
+  height: 100%;
 }
 
-.faqItem[aria-expanded='true'] .chevron svg,
-.faqItem[aria-expanded='true'] .chevron svg path,
-.faqItem:hover .chevron svg,
-.faqItem:hover .chevron svg path,
-.faqItem:active .chevron svg,
-.faqItem:active .chevron svg path,
-.faqItem:focus-visible .chevron svg,
-.faqItem:focus-visible .chevron svg path {
-  fill: #e7c7ff !important;
+/* Purple when whole row hover/focus/active, same as question */
+.faqItem:hover .chevron,
+.faqItem:focus-visible .chevron,
+.faqItem:active .chevron {
+  color: #e7c7ff;
 }
 
 .faqItem[aria-expanded='true'] .chevron {

packages/web/src/public-site/pages/landing-2026/components/FAQ2026.tsx

@@ -1,9 +1,30 @@
 import { useState } from 'react'
 
-import { IconCaretDown } from '@audius/harmony'
-
 import styles from './FAQ2026.module.css'
 
+/** Inline chevron so we control color (white default, purple on hover) without Harmony theme override */
+function ChevronDown({ className }: { className?: string }) {
+  return (
+    <span className={className} aria-hidden>
+      <svg
+        width='16'
+        height='16'
+        viewBox='0 0 16 16'
+        fill='none'
+        xmlns='http://www.w3.org/2000/svg'
+      >
+        <path
+          d='M4 6L8 10L12 6'
+          stroke='currentColor'
+          strokeWidth='2'
+          strokeLinecap='round'
+          strokeLinejoin='round'
+        />
+      </svg>
+    </span>
+  )
+}
+
 const faqItems = [
   {
     question: 'Who is Audius made for?',
@@ -62,11 +83,7 @@ export const FAQ2026 = (_props: FAQ2026Props) => {
               >
                 <div className={styles.faqHeader}>
                   <p className={styles.faqQuestion}>{item.question}</p>
-                  <IconCaretDown
-                    size='s'
-                    color='default'
-                    className={styles.chevron}
-                  />
+                  <ChevronDown className={styles.chevron} />
                 </div>
                 {isOpen ? (
                   <div className={styles.faqContent}>

packages/web/src/public-site/pages/landing-2026/components/FeaturedContests2026.module.css

@@ -111,12 +111,30 @@
   overflow: hidden;
 }
 
+.artworkSkeletonInner {
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.artworkWrapLoaded .artworkSkeletonInner {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease;
+}
+
 .artwork {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
+  opacity: 0;
+  transition: opacity 0.35s ease;
+}
+
+.artworkWrapLoaded .artwork {
+  opacity: 1;
 }
 
 .bwOverlay {

packages/web/src/public-site/pages/landing-2026/components/FeaturedContests2026.tsx

@@ -1,14 +1,18 @@
-import { MouseEvent } from 'react'
+import { MouseEvent, useState } from 'react'
 
 import {
   useExploreContent,
   useRemixContest,
   useTrack,
   useUser
 } from '@audius/common/api'
-import { ID } from '@audius/common/models'
+import { imageBlank } from '@audius/common/assets'
+import { useImageSize } from '@audius/common/hooks'
+import { ID, SquareSizes } from '@audius/common/models'
 import { useLinkClickHandler } from 'react-router'
 
+import { preload } from 'utils/image'
+
 import featuredLines from '../assets/featured-lines.svg?url'
 
 import styles from './FeaturedContests2026.module.css'
@@ -30,10 +34,19 @@ function ContestCard({
   id: ID
   setRenderPublicSite: (v: boolean) => void
 }) {
+  const [imageLoaded, setImageLoaded] = useState(false)
   const { data: contest, isPending: contestPending } = useRemixContest(id)
   const { data: track, isPending: trackPending } = useTrack(contest?.entityId)
   const { data: user, isPending: userPending } = useUser(track?.owner_id)
 
+  const artwork = track?.artwork
+  const { imageUrl, onError } = useImageSize({
+    artwork,
+    targetSize: SquareSizes.SIZE_480_BY_480,
+    defaultImage: imageBlank as string,
+    preloadImageFn: preload
+  })
+
   const isPending = contestPending || trackPending || userPending || !track
   const permalink = track?.permalink ?? ''
   const handleNavigate = useLinkClickHandler(permalink)
@@ -43,6 +56,8 @@ function ContestCard({
     handleNavigate(e as MouseEvent<HTMLAnchorElement>)
   }
 
+  const showImage = imageUrl != null && imageUrl !== (imageBlank as string)
+
   if (isPending) {
     return (
       <div className={styles.card}>
@@ -52,28 +67,27 @@ function ContestCard({
     )
   }
 
-  const artworkUrl =
-    (track?.artwork && (track.artwork as Record<string, string>)['480x480']) ??
-    null
-
   return (
     <button
       type='button'
       className={styles.card}
       onClick={onClick}
       aria-label={`Contest: ${track?.title} by ${user?.name}`}
     >
-      <div className={styles.artworkWrap}>
-        {artworkUrl ? (
+      <div
+        className={`${styles.artworkWrap} ${imageLoaded ? styles.artworkWrapLoaded : ''}`}
+      >
+        <div className={styles.artworkSkeletonInner} aria-hidden='true' />
+        {showImage ? (
           <img
-            src={artworkUrl}
+            src={imageUrl}
             alt=''
             className={styles.artwork}
             loading='lazy'
+            onLoad={() => setImageLoaded(true)}
+            onError={() => onError(imageUrl!)}
           />
-        ) : (
-          <div className={styles.artworkPlaceholder} />
-        )}
+        ) : null}
         <div className={styles.bwOverlay} aria-hidden='true' />
       </div>
       <span className={styles.title}>{track?.title}</span>

packages/web/src/public-site/pages/landing-2026/components/Footer2026.tsx

@@ -1,5 +1,3 @@
-import { MouseEvent } from 'react'
-
 import { route } from '@audius/common/utils'
 import {
   IconAudiusLogoHorizontal,
@@ -9,14 +7,18 @@ import {
   IconX
 } from '@audius/harmony'
 import type { IconComponent } from '@audius/harmony'
-import { useNavigate } from 'react-router'
-
-import { handleClickRoute } from 'public-site/components/handleClickRoute'
 
 import styles from './Footer2026.module.css'
 
 const { PRIVACY_POLICY, TERMS_OF_SERVICE } = route
 
+const getLegalUrl = (path: string) => {
+  if (typeof window !== 'undefined' && window.location?.origin) {
+    return `${window.location.origin}${path}`
+  }
+  return `https://audius.co${path}`
+}
+
 type Footer2026Props = {
   isMobile: boolean
   setRenderPublicSite: (shouldRender: boolean) => void
@@ -32,7 +34,7 @@ const siteLinks = [
 const socialLinks: { label: string; href: string; Icon: IconComponent }[] = [
   {
     label: 'Instagram',
-    href: 'https://instagram.com/audiusmusic',
+    href: 'https://instagram.com/audius',
     Icon: IconInstagram
   },
   {
@@ -47,18 +49,12 @@ const socialLinks: { label: string; href: string; Icon: IconComponent }[] = [
   },
   {
     label: 'X (Twitter)',
-    href: 'https://twitter.com/audiusproject',
+    href: 'https://twitter.com/audius',
     Icon: IconX
   }
 ]
 
 export const Footer2026 = (props: Footer2026Props) => {
-  const navigate = useNavigate()
-
-  const onLegalClick = (legalRoute: string) => (e: MouseEvent) => {
-    handleClickRoute(legalRoute, props.setRenderPublicSite, navigate)(e)
-  }
-
   return (
     <footer className={styles.footer}>
       <div className={styles.inner}>
@@ -117,20 +113,22 @@ export const Footer2026 = (props: Footer2026Props) => {
               &copy; 2025 Audius Music. All rights reserved.
             </p>
             <div className={styles.legalLinks}>
-              <button
-                type='button'
+              <a
+                href={getLegalUrl(TERMS_OF_SERVICE)}
                 className={styles.legalLink}
-                onClick={onLegalClick(TERMS_OF_SERVICE)}
+                target='_blank'
+                rel='noopener noreferrer'
               >
                 Terms of Service
-              </button>
-              <button
-                type='button'
+              </a>
+              <a
+                href={getLegalUrl(PRIVACY_POLICY)}
                 className={styles.legalLink}
-                onClick={onLegalClick(PRIVACY_POLICY)}
+                target='_blank'
+                rel='noopener noreferrer'
               >
                 Privacy Policy
-              </button>
+              </a>
             </div>
           </div>
         </div>

packages/web/src/public-site/pages/landing-2026/components/GrowthStartsHere.module.css

@@ -77,9 +77,12 @@
 }
 
 .visualWrap {
-  width: 612px;
-  flex-shrink: 0;
+  max-width: 612px;
+  width: 100%;
+  flex: 0 1 612px;
+  min-width: 0;
   align-self: stretch;
+  max-height: min(480px, 55vh);
   overflow: hidden;
 }