Better Homepage and New Logo

app/static/css/global.css

@@ -34,6 +34,11 @@ body {
     scroll-behavior: smooth;
 }
 
+p, h1, h2, h3, h4, h5, h6 {
+    font-family: 'SecondaryFont', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+
 /* Fallback for browsers that don't support custom fonts */
 .no-custom-fonts body,
 .no-custom-fonts .main {
@@ -70,4 +75,16 @@ input[type="number"] {
 .tippy-box[data-theme~='error'] {
     background-color: #EF4444;
     color: white;
+}
+
+@keyframes float {
+    0% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(-20px);
+    }
+    100% {
+        transform: translateY(0px);
+    }
 }

app/static/css/index.css

@@ -0,0 +1,145 @@
+.bg-gradient-conic {
+    background-image: conic-gradient(var(--conic-position), var(--tw-gradient-stops));
+}
+
+.scale-y-125 {
+    transform: scaleY(1.25);
+}
+
+.animate-text {
+    opacity: 0;
+    transform: translateY(100px);
+    animation: fadeInUp 0.8s ease-in-out forwards;
+    animation-delay: 0.3s;
+}
+
+.animate-lamp {
+    opacity: 0.5;
+    width: 15rem;
+    animation: expandLamp 0.8s ease-in-out forwards;
+    animation-delay: 0.3s;
+}
+
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes slideIn {
+    0% {
+        opacity: 0;
+        transform: translateX(-50px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes pulse {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.05);
+    }
+}
+
+@keyframes expandLamp {
+    to {
+        opacity: 1;
+        width: 30rem;
+    }
+}
+
+.animate-float {
+    animation: float 6s ease-in-out infinite;
+}
+
+.animate-fade-in-up {
+    animation: fadeInUp 0.8s ease-out;
+}
+
+.animate-slide-in {
+    animation: slideIn 0.8s ease-out;
+}
+
+.animate-pulse-slow {
+    animation: pulse 3s ease-in-out infinite;
+}
+
+.delay-100 {
+    animation-delay: 100ms;
+}
+
+.delay-200 {
+    animation-delay: 200ms;
+}
+
+.delay-300 {
+    animation-delay: 300ms;
+}
+
+.delay-400 {
+    animation-delay: 400ms;
+}
+
+@keyframes gradientFlow {
+    0% {
+        background-position: 0% 50%;
+    }
+    50% {
+        background-position: 100% 50%;
+    }
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+.animate-gradient-text {
+    background: linear-gradient(
+        90deg,
+        #1a365d 0%,
+        #2563eb 25%,
+        #1e40af 50%,
+        #1e3a8a 75%,
+        #1a365d 100%
+    );
+    background-size: 200% auto;
+    animation: gradientFlow 5s ease infinite;
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+.hover-lift {
+    transition: transform 0.2s ease;
+}
+
+.hover-lift:hover {
+    transform: translateY(-5px);
+}
+
+.feature-card {
+    transition: all 0.3s ease;
+}
+
+.feature-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1);
+}
+
+/* Add new classes for elements that should start hidden */
+.animate-on-scroll {
+    opacity: 0;
+}
+
+.animate-on-load {
+    animation: fadeInUp 0.8s ease-out;
+}

app/static/css/register.css

@@ -1,14 +1,14 @@
 .password-strength-meter {
     height: 4px;
-    background: #eee;
+    background-color: #e5e7eb;
     border-radius: 2px;
-    margin: 8px 0;
+    overflow: hidden;
 }
 
 .strength-bar {
     height: 100%;
-    border-radius: 2px;
-    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
+    width: 0;
+    transition: all 0.3s ease;
 }
 
 .very-weak { width: 20%; background-color: #ff4444; }
@@ -47,4 +47,52 @@
 .check-icon.unmet {
     background-color: #f5f5f5;
     color: #666;
+}
+
+.animate-fade-in-up {
+    animation: fadeInUp 0.6s ease forwards;
+}
+
+.animate-on-load {
+    animation: fadeInUp 0.6s ease forwards;
+}
+
+.hover-lift {
+    transition: transform 0.2s ease;
+}
+
+.hover-lift:hover {
+    transform: translateY(-1px);
+}
+
+@keyframes fadeInUp {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+}
+
+.animate-float {
+    animation: float 3s ease-in-out infinite;
+}
+
+.delay-200 {
+    animation-delay: 0.2s;
+}
+
+.delay-300 {
+    animation-delay: 0.3s;
 }

app/static/js/search.js

@@ -13,11 +13,17 @@ function closeAutoPathModal() {
     document.getElementById('autoPathModal').classList.add('hidden');
 }
 
-const init = (searchInput, selectedTeamInfo) => {
-    if (!searchInput || !selectedTeamInfo) {
+let debounceTimer;
+let searchInput;
+let selectedTeamInfo;
+
+const init = (inputElement, teamInfoElement) => {
+    if (!inputElement || !teamInfoElement) {
         console.error('Required elements not found');
         return;
     }
+    searchInput = inputElement;
+    selectedTeamInfo = teamInfoElement;
     searchInput.addEventListener('input', handleSearchInput);
 };
 
@@ -157,7 +163,6 @@ const displayTeamInfo = (team) => {
 document.addEventListener('DOMContentLoaded', function() {
     const searchInput = document.querySelector('#team-search');
     const selectedTeamInfo = document.querySelector('#selected-team-info');
-    let debounceTimer;
 
     init(searchInput, selectedTeamInfo);
 });