Welcome Page

src/App.jsx

@@ -1,16 +1,34 @@
 
+import { useEffect, useState } from 'react';
 import NavBar from '@/components/NavBar/NavBar'
 import PageRoutes from '@/components/PageRoutes'
+import Welcome from '@/pages/Welcome';
 import "./i18n.js";
 
 const App = () => {
+  const [isNew, setNew] = useState(false);
+  useEffect(() => {
+    if (!localStorage.getItem("visited")) {
+      setNew(true);
+    }
+  }, []);
+
+  const handleWelcomeComplete = () => {
+    localStorage.setItem("visited", "true");
+    setNew(false);
+  };
+
   return (
     <>
       <div className='min-h-screen grid grid-rows-[5rem_1fr] font-avenir box-border'>
         <NavBar />
         <div className='hidden'></div>
         <div className='w-full'>
-          <PageRoutes />
+          {isNew ? (
+            <Welcome onComplete={handleWelcomeComplete} />
+          ) : (
+            <PageRoutes />
+          )}
         </div>
       </div>
     </>

src/components/Dropdown/LanguageDropdown.jsx

@@ -10,17 +10,22 @@ const langMapping = {
   Türkçe: "tr",
 };
 
+
+
+
 const LanguageDropdown = () => {
   const [selectedLang, setSelectedLang] = useState();
   const { i18n } = useTranslation();
 
   useEffect(() => {
     const savedLang = i18n.language;
     if (savedLang) {
-      const langName = Object.keys(langMapping).find(key => langMapping[key] === savedLang);
+      const langName = Object.keys(langMapping).find(key => langMapping[key] === savedLang); 
       setSelectedLang(langName);
+
     }
-  }, []);
+
+  }, [selectedLang]);
 
   const handleSelectLang = (langName) => {
     const langCode = langMapping[langName];

src/components/NavBar/NavLink.jsx

@@ -2,8 +2,6 @@ import { Link, useLocation } from 'wouter';
 
 const NavLink = ({ href, isMobile, children }) => {
   const [location] = useLocation();
-  console.log("location:", location)
-  console.log("href:", href)
 
   return (
     <Link

src/pages/Login.jsx

@@ -6,6 +6,7 @@ import FormInput from '@/components/Form/FormInput';
 import FormSubmit from "../components/Form/FormSubmit";
 
 
+
 // TODO (Spencer & Claire): implement the Welcome page and check for if it should be displayed
 export default function Login() {
   const [formData, setFormData] = useState({

src/pages/Welcome.jsx

@@ -0,0 +1,35 @@
+import Button from '../components/Button/Button';
+import LanguageDropdown from '../components/Dropdown/LanguageDropdown';
+import { Link, useLocation } from 'wouter';
+
+const Welcome = ({ onComplete }) => {
+    const [, setLocation] = useLocation();
+
+    return (
+        <>
+            <div className="bg-blue-200 p-4 h-full min-h-[60dvh] flex items-center justify-center">
+                <div className="text-center mb-12 mt-12 px-5">
+                    <h1 className="text-6xl font-bold mb-2">Dillar Academy</h1>
+                    <p className="mb-4">Free English education for Uyghurs around the world.</p>
+                    <div className="flex flex-col md:flex-row items-center justify-center gap-x-2 mb-2">
+                        <div className='px-2 rounded-lg transition-colors duration-300 border border-dark-blue-800 bg-white'>
+                            <LanguageDropdown />
+                        </div>
+                        <Button
+                            href="/SignUp"
+                            label={"Start Learning"}
+                            onClick={() => {
+                                onComplete()
+                                setLocation("/signup")
+                            }}
+                            isOutline={false}
+                        />
+                    </div>
+                    <h3 className='hover:text-blue-500 transition-colors'> <Link href="/login" onClick={onComplete}> Already have an account? </Link> </h3>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default Welcome;