feat: improve visual

DXHeroes · Jan 16, 2025 · eba501b · eba501b
1 parent d91c563
commit eba501b
Show file tree

Hide file tree

Showing 7 changed files with 190 additions and 83 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -2,20 +2,3 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  color: #562AD0;
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
-}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Inter, Staatliches } from "next/font/google";
 import "./globals.css";
+import Navigation from "./components/Navigation";
 
 const inter = Inter({ subsets: ['latin'] });
 const staatliches = Staatliches({ weight: '400', subsets: ['latin'] });
@@ -17,7 +18,10 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${inter.className} ${staatliches.className} font-inter`}>{children}</body>
+      <body className={`${inter.className} ${staatliches.className} font-inter bg-athens-gray text-purple`}>
+        <Navigation />
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -7,20 +7,77 @@ export default function Home() {
   const router = useRouter();
 
   return (
-    <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center p-4">
-      <div className="text-center">
-        <DxHeroesLogo className="w-32 h-32 mx-auto mb-8 text-stratos" />
-        <h1 className="text-2xl sm:text-4xl font-staatliches mb-4">1:1 Meeting Questions</h1>
-        <p className="text-base sm:text-lg text-gray-600 mb-8 font-inter max-w-md mx-auto">
-          Facilitate meaningful 1:1 meetings with structured questions and topics for better discussions.
-        </p>
-        <button
-          type="button"
-          onClick={() => router.push('/topics')}
-          className="px-8 py-4 bg-turquoise text-white rounded-lg hover:bg-opacity-90 transition-colors text-xl sm:text-2xl font-staatliches"
-        >
-          Start
-        </button>
+    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white">
+      <div className="max-w-5xl mx-auto px-4">
+        {/* Hero Section */}
+        <div className="text-center mb-16">
+          <DxHeroesLogo className="w-24 h-24 sm:w-32 sm:h-32 mx-auto mb-8 text-stratos" />
+          <h1 className="text-3xl sm:text-5xl font-staatliches mb-6 bg-clip-text text-transparent bg-gradient-to-r from-electric-violet to-purple">
+            1:1 Meeting Cards
+          </h1>
+          <p className="text-xl sm:text-2xl text-gray-600 font-inter max-w-2xl mx-auto leading-relaxed">
+            Lead meaningful 1on1 conversations that strengthen your team and drive growth
+          </p>
+        </div>
+
+        {/* Main Content */}
+        <div className="grid md:grid-cols-2 gap-12 items-center mb-16">
+          <div className="space-y-6">
+            <h2 className="text-2xl sm:text-3xl font-staatliches text-stratos mb-4">
+              Why Use Meeting Cards?
+            </h2>
+            <p className="text-lg text-gray-700 font-inter leading-relaxed">
+              We believe that quality 1on1 conversations are the foundation of a healthy company culture and personal growth.
+              That&apos;s why we&apos;ve created this set of conversation cards to help you lead structured and meaningful discussions.
+            </p>
+          </div>
+
+          <div className="bg-white rounded-2xl shadow-xl p-8 border-t-4 border-electric-violet">
+            <h3 className="text-xl font-staatliches text-stratos mb-6">
+              Each topic contains carefully selected questions that will help you:
+            </h3>
+            <ul className="space-y-4 text-lg text-gray-700 font-inter">
+              <li className="flex items-start">
+                <span className="flex-shrink-0 w-6 h-6 rounded-full bg-electric-violet/10 flex items-center justify-center mr-3 mt-1">
+                  <span className="text-electric-violet">✓</span>
+                </span>
+                Get to know and understand each other better
+              </li>
+              <li className="flex items-start">
+                <span className="flex-shrink-0 w-6 h-6 rounded-full bg-electric-violet/10 flex items-center justify-center mr-3 mt-1">
+                  <span className="text-electric-violet">✓</span>
+                </span>
+                Identify areas for improvement and growth
+              </li>
+              <li className="flex items-start">
+                <span className="flex-shrink-0 w-6 h-6 rounded-full bg-electric-violet/10 flex items-center justify-center mr-3 mt-1">
+                  <span className="text-electric-violet">✓</span>
+                </span>
+                Address issues before they become critical
+              </li>
+              <li className="flex items-start">
+                <span className="flex-shrink-0 w-6 h-6 rounded-full bg-electric-violet/10 flex items-center justify-center mr-3 mt-1">
+                  <span className="text-electric-violet">✓</span>
+                </span>
+                Build trust and open communication
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {/* CTA Button */}
+        <div className="text-center">
+          <button
+            type="button"
+            onClick={() => router.push('/topics')}
+            className="inline-flex items-center px-8 py-4 bg-gradient-to-r from-electric-violet to-purple text-white rounded-xl hover:shadow-lg hover:scale-105 transition-all duration-200 text-xl font-staatliches group"
+          >
+            Start Exploring
+            <svg className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true" title="Arrow right">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+            </svg>
+          </button>
+        </div>
       </div>
     </div>
   );

diff --git a/src/app/topics/[id]/DifficultyPage.tsx b/src/app/topics/[id]/DifficultyPage.tsx
@@ -5,36 +5,51 @@ import Navigation from '../../components/Navigation';
 import { difficulties } from '../../constants/topics';
 
 const difficultyColors = {
-  beginner: 'bg-electric-violet', // Pink for Surface Level
-  intermediate: 'bg-purple', // Gold for Medium Depth
-  advanced: 'bg-turquoise', // Turquoise for Deep Questions
+  beginner: 'bg-electric-violet',
+  intermediate: 'bg-purple',
+  advanced: 'bg-turquoise',
 } as const;
 
 export default function DifficultyPage(props: { id: string, title: string, description: string[] }) {
   const { id, title, description } = props;
 
   return (
     <div className="min-h-screen bg-gray-50">
-      <div className="mx-auto max-w-container px-4 py-12">
-        <h1 className="text-xl sm:text-2xl font-staatliches mb-6 text-center whitespace-pre-line">{title}</h1>
-        <div className="mb-8 space-y-4 text-base sm:text-lg font-inter text-center max-w-2xl mx-auto">
-          {description.map((paragraph, i) => (
-            <p key={`${id}-desc-${i}`} className="text-gray-700">
-              {paragraph}
-            </p>
-          ))}
+      <div className="max-w-5xl mx-auto px-4">
+        {/* Header */}
+        <div className="text-center mb-16">
+          <h1 className="text-3xl sm:text-5xl font-staatliches mb-6 bg-clip-text text-transparent bg-gradient-to-r from-electric-violet to-purple">
+            {title}
+          </h1>
+          <div className="text-lg text-gray-600 font-inter max-w-2xl mx-auto text-left">
+            {description.map((paragraph) => (
+              <p key={`${id}-desc-${paragraph.slice(0, 20)}`} className="mb-4 leading-relaxed">
+                {paragraph}
+              </p>
+            ))}
+          </div>
         </div>
-        <div className="grid grid-cols-1 max-w-2xl mx-auto gap-6">
+
+        {/* Difficulty Cards */}
+        <div className="grid grid-cols-1 gap-6 max-w-3xl mx-auto">
           {difficulties.map((difficulty) => (
             <Link
               key={difficulty.level}
               href={`/topics/${id}/questions/${difficulty.level}`}
-              className={`${difficultyColors[difficulty.level]} text-white p-8 rounded-lg shadow-lg hover:shadow-xl transition-all hover:scale-[1.02] text-left aspect-[2/1] flex flex-col justify-center`}
+              className={`${difficultyColors[difficulty.level]} group relative overflow-hidden text-white p-8 sm:p-10 rounded-2xl shadow-lg hover:shadow-xl transition-all hover:scale-[1.02] text-left border-2 border-transparent hover:border-white/20`}
             >
-              <h2 className="text-2xl font-staatliches mb-4">{difficulty.title}</h2>
-              <p className="text-white/90 text-lg leading-relaxed font-inter">
-                {difficulty.description}
-              </p>
+              <div className="relative z-10">
+                <div className="flex items-center justify-between mb-4">
+                  <h2 className="text-2xl sm:text-3xl font-staatliches">{difficulty.title}</h2>
+                  <span className="text-sm font-medium px-4 py-1 rounded-full bg-white/20 border border-white/40">
+                    {difficulty.level}
+                  </span>
+                </div>
+                <p className="text-lg sm:text-xl text-white/90 font-inter leading-relaxed">
+                  {difficulty.description}
+                </p>
+              </div>
+              <div className="absolute inset-0 bg-gradient-to-r from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
             </Link>
           ))}
         </div>

diff --git a/src/app/topics/[id]/questions/[difficulty]/QuestionsPage.tsx b/src/app/topics/[id]/questions/[difficulty]/QuestionsPage.tsx
@@ -35,13 +35,6 @@ export default function QuestionsPage(props: { id: string, difficulty: Difficult
           <h1 className={`text-2xl sm:text-4xl font-staatliches mb-8 sm:mb-12 max-w-[80%] leading-tight whitespace-pre-line ${textColorClass}`}>
             {topic.title}
           </h1>
-          <div className="mb-8 sm:mb-12 space-y-4 font-inter text-gray-700">
-            {topic.description.map((paragraph, i) => (
-              <p key={`${id}-desc-${i}`} className="text-base sm:text-lg leading-relaxed">
-                {paragraph}
-              </p>
-            ))}
-          </div>
           <ul className="space-y-6 sm:space-y-8 font-inter">
             {questions.map((question, i) => (
               <li key={`${id}-${difficulty}-q-${i}`} className="flex items-start gap-3 sm:gap-4">

diff --git a/src/app/topics/layout.tsx b/src/app/topics/layout.tsx
@@ -0,0 +1,11 @@
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <div className="py-12">
+      {children}
+    </div>
+  );
+}
diff --git a/src/app/topics/page.tsx b/src/app/topics/page.tsx
@@ -3,46 +3,90 @@
 import { useRouter } from 'next/navigation';
 import Navigation from '../components/Navigation';
 import { topics } from '../constants/topics';
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 
 export default function Topics() {
   const router = useRouter();
   const [hoveredTopic, setHoveredTopic] = useState<string | null>(null);
+  const tooltipRefs = useRef<{ [key: string]: HTMLDivElement | null }>({});
+  const buttonRefs = useRef<{ [key: string]: HTMLButtonElement | null }>({});
+
+  const setTooltipRef = (id: string) => (el: HTMLDivElement | null) => {
+    tooltipRefs.current[id] = el;
+  };
+
+  const setButtonRef = (id: string) => (el: HTMLButtonElement | null) => {
+    buttonRefs.current[id] = el;
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (hoveredTopic) {
+        const tooltip = tooltipRefs.current[hoveredTopic];
+        const button = buttonRefs.current[hoveredTopic];
+        if (tooltip && button && 
+            !tooltip.contains(event.target as Node) && 
+            !button.contains(event.target as Node)) {
+          setHoveredTopic(null);
+        }
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [hoveredTopic]);
 
   return (
-    <div className="min-h-screen bg-gray-50">
-      <div className="mx-auto max-w-container px-4 py-12">
-        <h1 className="text-xl sm:text-2xl font-staatliches mb-6 text-center">Select a Topic</h1>
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
+    <div className="min-h-screen">
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="text-center mb-12">
+          <h1 className="text-3xl sm:text-5xl font-staatliches mb-6 bg-clip-text text-transparent bg-gradient-to-r from-electric-violet to-purple">
+            Choose Your Topic
+          </h1>
+          <p className="text-xl text-gray-600 font-inter max-w-2xl mx-auto">
+            Select a conversation topic to explore questions of varying difficulty
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
           {Object.entries(topics).map(([id, topic]) => (
-            <div key={id} className="relative">
+            <div key={id} className="relative group">
               <button
                 type="button"
                 onClick={() => router.push(`/topics/${id}`)}
-                className="w-full bg-purple text-white p-6 sm:p-8 rounded-lg shadow-lg hover:shadow-xl transition-all hover:scale-[1.02] text-left flex items-center justify-between"
+                className="w-full bg-purple text-white p-6 sm:p-8 rounded-2xl shadow-lg hover:shadow-xl transition-all duration-200 text-left flex flex-col justify-between min-h-[150px] border-2 border-transparent hover:border-white/20 group"
               >
-                <h2 className="text-xl sm:text-2xl font-staatliches">{topic.title}</h2>
-                <button
-                  type="button"
-                  className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center hover:bg-white/30 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white/40 transition-colors"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    setHoveredTopic(hoveredTopic === id ? null : id);
-                  }}
-                  onMouseEnter={() => setHoveredTopic(id)}
-                  onMouseLeave={() => setHoveredTopic(null)}
-                >
-                  <span className="text-white">?</span>
-                </button>
+                <div>
+                  <h2 className="text-2xl font-staatliches text-white mb-2 pr-10">
+                    {topic.title}
+                  </h2>
+                  <button
+                    ref={setButtonRef(id)}
+                    type="button"
+                    className="absolute top-6 sm:top-8 right-6 sm:right-8 w-8 h-8 rounded-full bg-white/20 hover:bg-white/30 flex items-center justify-center transition-colors border border-white/40"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setHoveredTopic(hoveredTopic === id ? null : id);
+                    }}
+                  >
+                    <span className="text-white text-sm font-medium">?</span>
+                  </button>
+                </div>
               </button>
-              <div className={`absolute z-10 w-72 p-4 bg-white rounded-lg shadow-xl top-full mt-2 right-0 text-left border-4 border-electric-violet transition-all duration-200 origin-top-right ${
-                hoveredTopic === id 
-                  ? 'opacity-100 scale-100' 
-                  : 'opacity-0 scale-95 pointer-events-none'
-              }`}>
-                <div className="space-y-2">
+
+              <div 
+                ref={setTooltipRef(id)}
+                className={`absolute z-10 w-80 p-5 bg-white rounded-xl shadow-xl top-full mt-2 right-0 text-left border-2 border-purple transition-all duration-200 origin-top-right ${
+                  hoveredTopic === id 
+                    ? 'opacity-100 scale-100 translate-y-0' 
+                    : 'opacity-0 scale-95 translate-y-2 pointer-events-none'
+                }`}
+              >
+                <div className="space-y-3">
                   {topic.description.map((paragraph) => (
-                    <p key={`${id}-desc-${paragraph.slice(0, 20)}`} className="text-md text-gray-700">
+                    <p key={`${id}-desc-${paragraph.slice(0, 20)}`} className="text-gray-700 text-sm leading-relaxed">
                       {paragraph}
                     </p>
                   ))}