Better UI - From Design Update #31

components/AnimatedTitle.js

@@ -0,0 +1,53 @@
+import { motion } from 'framer-motion';
+
+const AnimatedTitle = () => {
+  const title = "No Text To Speech";
+  const words = title.split(' ');
+  let charCount = 0;
+  const characterDelay = 0.05;
+
+  return (
+    <motion.h1
+      className="text-5xl md:text-7xl font-extrabold tracking-tight text-ntts-blue"
+      aria-label={title}
+      style={{ textAlign: 'center' }}
+      initial="hidden"
+      animate="visible"
+    >
+      {words.map((word, wordIndex) => {
+        const wordElement = (
+          <span key={wordIndex} style={{ display: 'inline-block', whiteSpace: 'nowrap' }}>
+            {word.split('').map((char, charIndex) => {
+              const el = (
+                <motion.span
+                  key={charIndex}
+                  style={{ display: 'inline-block' }}
+                  initial={{ opacity: 0, y: 20 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  transition={{
+                    delay: charCount * characterDelay,
+                    type: 'spring',
+                    damping: 12,
+                    stiffness: 100,
+                  }}
+                >
+                  {char}
+                </motion.span>
+              );
+              charCount++;
+              return el;
+            })}
+          </span>
+        );
+
+        if (wordIndex < words.length - 1) {
+          charCount++; // for the space
+          return [wordElement, <span key={`space-${wordIndex}`}>&nbsp;</span>];
+        }
+        return wordElement;
+      })}
+    </motion.h1>
+  );
+};
+
+export default AnimatedTitle;

components/Homepage.js

@@ -4,17 +4,21 @@ import DiscordIcon from './icons/discord';
 import FAQIcon from './icons/faq';
 import RulesIcon from './icons/rules';
 import ScamsIcon from './icons/scams';
+import AnimatedTitle from './AnimatedTitle';
 
 const Card = ({ title, description, href, icon: Icon }) => (
   <Link
     href={href}
-    className="flex flex-col justify-between p-6 bg-dark-card border-2 border-ntts-blue-light rounded-lg transition-all duration-200 ease-in-out hover:border-ntts-blue-hover hover:scale-[1.02] hover:shadow-lg hover:shadow-ntts-blue/10 h-32"
+    className="flex flex-col justify-between p-6 bg-gradient-to-r from-gray-800 to-gray-700 border border-gray-600 rounded-xl transition-all duration-300 ease-out hover:border-ntts-blue-light/50 hover:scale-[1.02] hover:shadow-xl hover:shadow-gray-900/70 h-32 group relative overflow-hidden"
   >
-    <div className="flex items-center mb-2">
-      {Icon && <div className="text-[#253540]">{<Icon />}</div>}
-      <h3 className="ml-3 text-xl font-bold text-[#253540]">{title}</h3>
+    {/* Shimmer effect */}
+    <div className="absolute inset-0 -translate-x-full group-hover:translate-x-full transition-transform duration-1000 bg-gradient-to-r from-transparent via-white/10 to-transparent skew-x-12" />
+
+    <div className="flex items-center mb-2 relative z-10">
+      {Icon && <div className="text-ntts-blue mr-3"><Icon /></div>}
+      <h3 className="text-xl font-bold text-ntts-blue">{title}</h3>
     </div>
-    <p className="text-[#253540]">{description}</p>
+    <p className="text-dark-text-secondary text-sm relative z-10">{description}</p>
   </Link>
 );
 
@@ -34,10 +38,9 @@ export default function Homepage() {
   return (
     <div className={containerClasses}>
       <div className="text-center mb-12">
-        <h1 className="text-5xl md:text-7xl font-extrabold tracking-tight text-ntts-blue mb-4">
-          No Text To Speech
-        </h1>
-        <p className="text-xl md:text-2xl font-bold text-dark-text-secondary max-w-2xl mx-auto">
+        <AnimatedTitle />
+        <br />
+        <p className="text-xl md:text-2xl font-bold text-dark-text-secondary max-w-2xl mx-auto px-4">
           The official community hub. Find our rules, guides, and important information.
         </p>
       </div>

package.json

@@ -13,6 +13,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "focus-visible": "^5.2.0",
+    "framer-motion": "^12.23.12",
     "intersection-observer": "^0.12.2",
     "next": "^13.5.4",
     "next-plausible": "^3.12.2",

theme.config.js

@@ -1,7 +1,6 @@
 import { useRouter } from "next/router";
 import { useConfig } from "nextra-theme-docs";
 import Logo from "./components/icons/logo";
-import Ntts from "./components/icons/ntts";
 import useLocalesMap from "./components/use-locales-map"; 
 import {
   editTextMap,
@@ -112,7 +111,9 @@ const themeConfig = {
     );
   },
 
-  footer: "",
+  footer: {
+    text: null,
+  },
 
   gitTimestamp({ timestamp }) {
     const { locale } = useRouter();