improve(public): re-design landing page a bit

apps/public/components/competition.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { AnimatePresence, motion } from 'framer-motion';
+import { useEffect, useState } from 'react';
+
+const brandConfig = {
+  Mixpanel: '#7A59FF',
+  'Google Analytics': '#E37400',
+  Amplitude: '#00CF98',
+} as const;
+
+const words = Object.keys(brandConfig);
+
+function useWordCycle(words: string[], interval: number, mounted: boolean) {
+  const [index, setIndex] = useState(0);
+  const [isInitial, setIsInitial] = useState(true);
+
+  useEffect(() => {
+    if (!mounted) {
+      return;
+    }
+
+    if (isInitial) {
+      setIndex(Math.floor(Math.random() * words.length));
+      setIsInitial(false);
+      return;
+    }
+
+    const timer = setInterval(() => {
+      setIndex((current) => (current + 1) % words.length);
+    }, interval);
+    return () => clearInterval(timer);
+  }, [words, interval, isInitial, mounted]);
+
+  return words[index];
+}
+
+export function Competition() {
+  const [mounted, setMounted] = useState(false);
+  const word = useWordCycle(words, 2100, mounted);
+  const color = brandConfig[word as keyof typeof brandConfig];
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <span className="block truncate leading-tight -mt-1" style={{ color }}>
+        {word}
+      </span>
+    );
+  }
+
+  return (
+    <AnimatePresence mode="wait" initial={false}>
+      <motion.div
+        key={word}
+        className="block truncate leading-tight -mt-1"
+        style={{ color }}
+      >
+        {word?.split('').map((char, index) => (
+          <motion.span
+            key={`${word}-${char}-${index.toString()}`}
+            initial={{ y: 10, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: -10, opacity: 0 }}
+            transition={{
+              duration: 0.15,
+              delay: index * 0.015,
+              ease: 'easeOut',
+            }}
+            style={{ display: 'inline-block', whiteSpace: 'pre' }}
+          >
+            {char}
+          </motion.span>
+        ))}
+      </motion.div>
+    </AnimatePresence>
+  );
+}