Landing Page Revamp

public/index.html

@@ -4,15 +4,14 @@
     <meta charset="utf-8" />
     <link rel="icon" href="/calendargraphic.png" />
     <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
+    href="https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300;400;500;600;700;800&display=swap"
     rel="stylesheet"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
     />
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
 
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/calendargraphic.png" />
     <!--

src/components/navbar/NavBar.tsx

@@ -123,19 +123,35 @@ export default function NavBar() {
               )}
             </div>
             <div>
-              <a
-                href="#"
-                className="flex items-center px-4 text-text dark:text-text-dark hover:text-primary transition hover:scale-105"
-                onClick={() => {
-                  nav('/useraccount');
-                }}
-              >
-                <IconCalendarEvent
-                  size={25}
-                  className="opacity-80 dark:opacity-100"
-                />{' '}
-                <span className="text-sm hidden sm:block ml-2">My Events</span>
-              </a>
+              {checkIfLoggedIn() ? (
+                <a
+                  href="#"
+                  className="flex items-center px-4 text-text dark:text-text-dark hover:text-primary transition hover:scale-105"
+                  onClick={() => {
+                    nav('/useraccount');
+                  }}
+                >
+                  <IconCalendarEvent
+                    size={25}
+                    className="opacity-80 dark:opacity-100"
+                  />{' '}
+                  <span className="text-sm hidden sm:block ml-2">My Events</span>
+                </a>
+              ) : (
+                <a
+                  href="#"
+                  className="flex items-center px-4 text-text dark:text-text-dark hover:text-primary transition hover:scale-105"
+                  onClick={() => {
+                    login();
+                  }}
+                >
+                  <IconLogin2
+                    size={25}
+                    className="opacity-80 dark:opacity-100"
+                  />{' '}
+                  <span className="text-sm hidden sm:block ml-2">Sign In</span>
+                </a>
+              )}
             </div>
             <div className="relative">
               <button
@@ -196,32 +212,21 @@ export default function NavBar() {
                     >
                       <IconMessageReport className="mr-2" size={17} /> Feedback
                     </a>
-                    <div className="border-t border-gray-200"></div>
-                    {checkIfLoggedIn() ? (
-                      // eslint-disable-next-line jsx-a11y/anchor-is-valid
-                      <a
-                        href="#"
-                        className="flex items-center justify-start px-4 py-2 text-sm text-gray-700 dark:text-text-dark hover:bg-primary hover:text-white transition-colors duration-200"
-                        onClick={() => {
-                          logout();
-                          setMenuState('closed');
-                          nav('/');
-                        }}
-                      >
-                        <IconLogout className="mr-2" size={17} /> Logout
-                      </a>
-                    ) : (
-                      // eslint-disable-next-line jsx-a11y/anchor-is-valid
-                      <a
-                        href="#"
-                        className="flex items-center justify-start px-4 py-2 text-sm text-gray-700 dark:text-text-dark hover:bg-primary hover:text-white transition-colors duration-200"
-                        onClick={() => {
-                          login();
-                          setMenuState('closed');
-                        }}
-                      >
-                        <IconLogin2 className="mr-2" size={17} /> Login
-                      </a>
+                    {checkIfLoggedIn() && (
+                      <>
+                        <div className="border-t border-gray-200"></div>
+                        <a
+                          href="#"
+                          className="flex items-center justify-start px-4 py-2 text-sm text-gray-700 dark:text-text-dark hover:bg-primary hover:text-white transition-colors duration-200"
+                          onClick={() => {
+                            logout();
+                            setMenuState('closed');
+                            nav('/');
+                          }}
+                        >
+                          <IconLogout className="mr-2" size={17} /> Logout
+                        </a>
+                      </>
                     )}
                   </div>
                 </div>

src/components/navbar/NavLogo.tsx

@@ -11,7 +11,7 @@ export default function NavLogo() {
           <div className="mr-2">
             <CalendarIcon></CalendarIcon>
           </div>
-          <span className="text-2xl font-bold font-mono">ymeets</span>
+          <span className="text-2xl font-bold font-display">ymeets</span>
         </div>
       </a>
     </div>

src/contexts/ThemeContext.tsx

@@ -29,8 +29,8 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
       ? 'dark'
       : 'light';
 
-    // Use saved theme if available, else fall back to system preference
-    const initialTheme = savedTheme || systemPreference;
+    // Use saved theme if available, else fall back to dark mode
+    const initialTheme = savedTheme || 'dark';
 
     setTheme(initialTheme);
 

src/index.css

@@ -1,7 +1,7 @@
 body {
   margin: 0;
   font-family:
-    'Inter',
+    'Funnel Display',
     -apple-system,
     BlinkMacSystemFont,
     'Segoe UI',
@@ -19,7 +19,7 @@ body {
 }
 
 code {
-  font-family: 'Inter', source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
 

tailwind.config.js

@@ -18,17 +18,34 @@ module.exports = {
         'shimmer': {
           '0%': { backgroundPosition: '-200% 0' },
           '100%': { backgroundPosition: '200% 0' }
+        },
+        'slide-up': {
+          '0%': { opacity: '0', transform: 'translateY(30px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' }
+        },
+        'slide-in-right': {
+          '0%': { opacity: '0', transform: 'translateX(30px)' },
+          '100%': { opacity: '1', transform: 'translateX(0)' }
+        },
+        'float': {
+          '0%, 100%': { transform: 'translateY(0px)' },
+          '50%': { transform: 'translateY(-10px)' }
         }
       },
       animation: {
         'fade-in': 'fade-in 0.2s ease-out',
         'scale-in': 'scale-in 0.2s ease-out',
-        'shimmer': 'shimmer 1.5s infinite'
+        'shimmer': 'shimmer 1.5s infinite',
+        'slide-up': 'slide-up 0.6s ease-out forwards',
+        'slide-up-delay-1': 'slide-up 0.6s ease-out 0.1s forwards',
+        'slide-up-delay-2': 'slide-up 0.6s ease-out 0.2s forwards',
+        'slide-up-delay-3': 'slide-up 0.6s ease-out 0.3s forwards',
+        'slide-in-right': 'slide-in-right 0.6s ease-out forwards',
+        'float': 'float 3s ease-in-out infinite'
       },
       fontFamily: {
-        roboto: ["Roboto", "sans"],
-        serif: ["Noto Serif", ...defaultTheme.fontFamily.serif],
-        sans: ["Inter", ...defaultTheme.fontFamily.sans],
+        sans: ["Funnel Display", ...defaultTheme.fontFamily.sans],
+        display: ["Funnel Display", ...defaultTheme.fontFamily.sans],
       },
       boxShadow: {
         custom: "2px 4px 3px 0px rgba(0, 0, 0, 0.4)",