sign in + sign up fronted created

frontend/src/pages/Profile.tsx

@@ -1,10 +1,197 @@
-function Profile() {
-    return (
-      <div>
-        <h1>User Profile</h1>
-        <p>This is where you could show user info, preferences, or settings.</p>
+import { useState, CSSProperties } from "react";
+import { Link } from "react-router-dom";
+
+
+import dogImage from "../assets/dog-profile.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 Profile() {
+  const [isSignUp, setIsSignUp] = useState(false);
+
+  return (
+    <div style={containerStyle}>
+      <div style={contentWrapperStyle}>
+        <div style={formBoxStyle}>
+          <h2 style={headerStyle}>{isSignUp ? "Sign Up" : "Sign In"}</h2>
+
+          <input
+            type={isSignUp ? "email" : "text"}
+            placeholder={isSignUp ? "Email" : "Username / Email"}
+            style={inputStyle}
+          />
+          <input
+            type="password"
+            placeholder="Password"
+            style={inputStyle}
+          />
+
+          {isSignUp && (
+            <ul style={requirementsStyle}>
+              <li>5–12 characters</li>
+              <li>At least one number & symbol</li>
+            </ul>
+          )}
+
+          {!isSignUp && (
+            <div style={forgotStyle}>
+              <Link to="#">Forgot Password?</Link>
+            </div>
+          )}
+
+          <button style={buttonStyle}>
+            {isSignUp ? "Continue" : "Sign In"}
+          </button>
+
+          <p style={footerTextStyle}>
+            {isSignUp ? (
+              <>
+                Already have an account?{" "}
+                <span style={linkStyle} onClick={() => setIsSignUp(false)}>
+                  Sign In
+                </span>
+              </>
+            ) : (
+              <>
+                Don’t have an account?{" "}
+                <span style={linkStyle} onClick={() => setIsSignUp(true)}>
+                  Create one now!
+                </span>
+              </>
+            )}
+          </p>
+        </div>
+
+        <img src={dogImage} alt="Dog" style={sideImageStyle} />
       </div>
-    );
-  }
-
-  export default Profile;
+
+      <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>
+        <div>
+          <img src={menuLogo} alt="Menu" style={iconStyle} />
+        </div>
+      </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 forgotStyle: CSSProperties = {
+  width: "100%",
+  textAlign: "right",
+  fontSize: "0.85rem"
+};
+
+const footerTextStyle: CSSProperties = {
+  fontSize: "0.9rem",
+  textAlign: "center",
+  marginTop: "1rem"
+};
+
+const requirementsStyle: CSSProperties = {
+  textAlign: "left",
+  fontSize: "0.85rem",
+  margin: "0.5rem 0 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"
+};
+
+const linkStyle: CSSProperties = {
+  color: "#fff",
+  textDecoration: "underline",
+  cursor: "pointer"
+};