wip: polish

apps/www/components/SurveyResults/SurveyRankedAnswersPair.tsx

@@ -8,7 +8,7 @@ export function SurveyRankedAnswersPair({
       {rankedAnswersPair.map((item, index) => (
         <div
           key={index}
-          className={`flex gap-3 flex-1 ${index % 2 === 0 ? 'flex-col' : 'flex-col sm:flex-col-reverse'}`}
+          className={`flex gap-8 md:gap-12 flex-1 ${index % 2 === 0 ? 'flex-col' : 'flex-col sm:flex-col-reverse'}`}
         >
           {/* Decorative progress bar */}
           <div
@@ -18,7 +18,7 @@ export function SurveyRankedAnswersPair({
             {item.answers.map((answer, answerIndex) => (
               <div
                 key={answerIndex}
-                className={`h-${(answerIndex + 1) * 4} w-full pointer-events-none ${answerIndex === 0 ? 'bg-brand' : answerIndex === 1 ? 'bg-brand-500' : 'bg-brand-300'}`}
+                className={`${['h-32 md:h-64', 'h-20 md:h-32', 'h-8 md:h-12'][answerIndex] || 'hidden'} w-full pointer-events-none ${['bg-brand', 'bg-brand-500', 'bg-brand-300'][answerIndex] || 'bg-brand-300'}`}
                 style={{
                   maskImage: 'url("/images/state-of-startups/pattern-front.svg")',
                   maskSize: '14.5px 15px',

apps/www/components/SurveyResults/SurveySummarizedAnswer.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useState } from 'react'
+import './surveyResults.css'
 
 export function SurveySummarizedAnswer({ label, answers }: { label: string; answers: string[] }) {
   const [currentIndex, setCurrentIndex] = useState(0)
   const [isAnimating, setIsAnimating] = useState(false)
+  const [isBlinking, setIsBlinking] = useState(false)
 
   useEffect(() => {
     if (answers.length <= 1) return
@@ -17,6 +19,7 @@ export function SurveySummarizedAnswer({ label, answers }: { label: string; answ
   useEffect(() => {
     // First, reset the bar to 0%
     setIsAnimating(false)
+    setIsBlinking(false)
 
     // Then start the animation after a brief delay to ensure the reset is applied
     const startTimer = setTimeout(() => {
@@ -28,15 +31,32 @@ export function SurveySummarizedAnswer({ label, answers }: { label: string; answ
       setIsAnimating(false)
     }, 4050)
 
+    // Start blinking shortly before text change
+    const blinkTimer = setTimeout(() => {
+      setIsBlinking(true)
+    }, 3700)
+
+    // Stop blinking when text changes
+    const stopBlinkTimer = setTimeout(() => {
+      setIsBlinking(false)
+    }, 4000)
+
     return () => {
       clearTimeout(startTimer)
       clearTimeout(stopTimer)
+      clearTimeout(blinkTimer)
+      clearTimeout(stopBlinkTimer)
     }
   }, [currentIndex])
 
   return (
     <div className="border-t border-muted flex flex-col gap-6 px-8 py-16 sm:items-center sm:text-center">
-      <p className="text-foreground text-xl tracking-tight transition-opacity duration-500">
+      <p
+        className="text-foreground text-xl tracking-tight transition-opacity duration-500"
+        style={{
+          animation: isBlinking ? 'blink 100ms infinite' : 'none',
+        }}
+      >
         {answers[currentIndex]}
       </p>
       {/* Decorative progress bar */}

apps/www/components/SurveyResults/surveyResults.css

@@ -21,3 +21,14 @@
     clip-path: inset(0 0 0 100%);
   }
 }
+
+@keyframes blink {
+  0%,
+  49% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0;
+  }
+}