more info frontend page created

frontend/src/App.tsx

@@ -2,6 +2,7 @@ import { Routes, Route } from 'react-router-dom';
 import NavBar from './components/NavBar';
 import Home from './pages/Home';
 import Search from './pages/Search';
+import MoreInfo from "./pages/MoreInfo";
 import PetProfile from './pages/PetProfile';
 import Profile from './pages/Profile';
 
@@ -14,6 +15,7 @@ function App() {
         <Route path="/search" element={<Search />} />
         <Route path="/pets" element={<PetProfile />} />
         <Route path="/profile" element={<Profile />} />
+        <Route path="/more-info" element={<MoreInfo />} />
       </Routes>
     </>
   );

frontend/src/pages/MoreInfo.tsx

@@ -0,0 +1,185 @@
+import { useState, CSSProperties } from "react";
+import { useNavigate } from "react-router-dom";
+
+import catImage from "../assets/moreinfo-cat.png";
+import instagramLogo from "../assets/instagram_logo.png";
+import facebookLogo from "../assets/facebook_logo.png";
+import twitterLogo from "../assets/twitter_logo.png";
+import youtubeLogo from "../assets/youtube_logo.png";
+import menuLogo from "../assets/menu_logo.png";
+
+export default function MoreInfo() {
+  const navigate = useNavigate();
+  const [agree, setAgree] = useState(false);
+
+  return (
+    <div style={containerStyle}>
+      <div style={contentWrapperStyle}>
+        <div style={formBoxStyle}>
+          <h2 style={headerStyle}>We Need Some More Info</h2>
+
+          <input style={inputStyle} type="text" placeholder="Phone Number" />
+          <select style={inputStyle}>
+            <option>Select Your Level of Experience</option>
+            <option>Beginner</option>
+            <option>Intermediate</option>
+            <option>Advanced</option>
+          </select>
+          <select style={inputStyle}>
+            <option>Which Pets Have You Owned?</option>
+            <option>Dog</option>
+            <option>Cat</option>
+            <option>Bird</option>
+            <option>Reptile</option>
+          </select>
+          <select style={inputStyle}>
+            <option>Are you adopting or listing?</option>
+            <option>Adopting</option>
+            <option>Listing</option>
+          </select>
+          <select style={inputStyle}>
+            <option>What kind of pet are you looking for?</option>
+            <option>Dog</option>
+            <option>Cat</option>
+            <option>Bird</option>
+            <option>Other</option>
+          </select>
+
+          <label style={checkboxLabelStyle}>
+            <input
+              type="checkbox"
+              checked={agree}
+              onChange={() => setAgree(!agree)}
+              style={{ marginRight: "8px" }}
+            />
+            I agree to the Terms and Privacy Policy.
+          </label>
+
+          <button
+            style={buttonStyle}
+            onClick={() => {
+              if (agree) {
+                navigate("/dashboard");
+              } else {
+                alert("Please agree to continue.");
+              }
+            }}
+          >
+            Sign Up
+          </button>
+        </div>
+
+        {/* Right-side cat image */}
+        <img src={catImage} alt="Cat" style={sideImageStyle} />
+      </div>
+
+      {/* Footer */}
+      <footer style={footerStyle}>
+        <div style={footerLeftStyle}>
+          <img src={instagramLogo} alt="Instagram" style={iconStyle} />
+          <img src={facebookLogo} alt="Facebook" style={iconStyle} />
+          <img src={twitterLogo} alt="Twitter" style={iconStyle} />
+          <img src={youtubeLogo} alt="YouTube" style={iconStyle} />
+        </div>
+        <img src={menuLogo} alt="Menu" style={iconStyle} />
+      </footer>
+    </div>
+  );
+}
+
+
+const containerStyle: CSSProperties = {
+    display: "flex",
+    flexDirection: "column",
+    minHeight: "100vh",
+    backgroundColor: "rgb(180, 164, 143)"
+  };
+
+  const contentWrapperStyle: CSSProperties = {
+    display: "flex",
+    flex: 1,
+    flexWrap: "wrap",
+    justifyContent: "center",
+    alignItems: "stretch"
+  };
+
+  const formBoxStyle: CSSProperties = {
+    backgroundColor: "#7b7267",
+    padding: "2rem",
+    borderRadius: "12px",
+    boxShadow: "3px 3px 6px rgba(0,0,0,0.4)",
+    width: "100%",
+    maxWidth: "400px",
+    margin: "auto",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    color: "white",
+    boxSizing: "border-box"
+  };
+
+  const inputStyle: CSSProperties = {
+    width: "100%",
+    padding: "0.75rem",
+    borderRadius: "30px",
+    border: "none",
+    margin: "0.5rem 0",
+    fontSize: "1rem",
+    backgroundColor: "#e0d9d9"
+  };
+
+  const headerStyle: CSSProperties = {
+    fontSize: "2rem",
+    marginBottom: "1rem"
+  };
+
+  const buttonStyle: CSSProperties = {
+    backgroundColor: "black",
+    color: "white",
+    border: "none",
+    borderRadius: "30px",
+    padding: "0.75rem 2rem",
+    fontSize: "1rem",
+    cursor: "pointer",
+    margin: "1rem 0"
+  };
+
+  const checkboxLabelStyle: CSSProperties = {
+    textAlign: "left",
+    fontSize: "0.85rem",
+    marginTop: "1rem",
+    color: "#ddd"
+  };
+
+  const sideImageStyle: CSSProperties = {
+    width: "40vw",
+    minWidth: "300px",
+    maxWidth: "600px",
+    height: "100vh",
+    objectFit: "cover",
+    display: "block"
+  };
+
+  const footerStyle: CSSProperties = {
+    width: "100%",
+    backgroundColor: "black",
+    color: "white",
+    padding: "1rem",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    flexWrap: "wrap",
+    boxSizing: "border-box"
+  };
+
+  const footerLeftStyle: CSSProperties = {
+    display: "flex",
+    gap: "1.5rem",
+    flexWrap: "wrap"
+  };
+
+  const iconStyle: CSSProperties = {
+    width: "36px",
+    height: "36px"
+  };
+

frontend/src/pages/Profile.tsx

@@ -1,5 +1,7 @@
 import { useState, CSSProperties } from "react";
 import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+
 
 
 import dogImage from "../assets/dog-profile.png";
@@ -11,6 +13,7 @@ import menuLogo from "../assets/menu_logo.png";
 
 export default function Profile() {
   const [isSignUp, setIsSignUp] = useState(false);
+  const navigate = useNavigate()
 
   return (
     <div style={containerStyle}>
@@ -42,7 +45,16 @@ export default function Profile() {
             </div>
           )}
 
-          <button style={buttonStyle}>
+          <button
+            style={buttonStyle}
+            onClick={() => {
+              if (isSignUp) {
+                navigate("/more-info"); // only for new users
+              } else {
+                console.log("User signed in successfully!"); // or call your login logic
+              }
+            }}
+          >
             {isSignUp ? "Continue" : "Sign In"}
           </button>