Feat/create your profile

.gitignore

@@ -10,6 +10,12 @@
 !.yarn/releases
 !.yarn/versions
 
+# IDEs
+.idea/
+.vscode/
+*.iml
+
+
 # testing
 /coverage
 

components/DoneButton.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+// Define the props for our button component
+interface NextStepButtonProps {
+    onClick?: () => void;
+    logo?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+}
+
+const DoneButton: React.FC<NextStepButtonProps> = ({
+    onClick,
+    logo,
+    className,
+    disabled,
+}) => {
+    return (
+        <button
+            onClick={onClick}
+            disabled={disabled}
+            // Ensure the button is relative for absolute positioning of the logo
+            className={`
+        relative flex items-center justify-center
+        py-3 px-6 rounded-full text-white font-semibold text-lg
+        h-12 w-100
+        shadow-lg
+        cursor-pointer
+        transition-all duration-200 ease-in-out
+        		overflow-visible
+					${
+					disabled
+						? "bg-gray-300 text-gray-500 cursor-not-allowed"
+						: "bg-gradient-to-r from-[#FF9100] to-[#FFC94C] hover:from-[#E68200] hover:to-[#E3B03C] text-white cursor-pointer"
+					}
+					${className || ""}
+		`}
+        >
+            <h1 className="transform -right-4 relative z-20">All Done</h1>
+
+            <span className="ml-4 flex items-center justify-center relative z-20 left-30">
+                &gt;
+            </span>
+
+            {logo && (
+                <span
+                    className={`absolute overflow-visible h-15 w-15 right-10 -top-3 z-30 transform -translate-x-1/2 flex items-center justify-center`}
+                >
+                    {logo}
+                </span>
+            )}
+        </button>
+    );
+};
+
+export default DoneButton;

components/InterestCard.tsx

@@ -0,0 +1,34 @@
+import Image from 'next/image';
+
+interface InterestCardProps {
+  name: string;
+  isSelected: boolean;
+  onToggle: () => void;
+}
+
+export default function InterestCard({ name, isSelected, onToggle }: InterestCardProps) {
+  return (
+    <button
+      onClick={onToggle}
+      className={`
+        flex flex-col items-center justify-center
+        cursor-pointer
+        rounded-2xl p-4 w-24 h-24
+        transition-colors duration-200
+        ${isSelected ? 'bg-[#FFC03F]' : 'bg-[#F1EBE2]'}
+      `}
+    >
+      <div className="relative w-12 h-12 mb-2">
+        <Image
+          src={`/images/createProfileInterests/${name}.webp`}
+          alt={name}
+          fill
+          className="object-contain"
+        />
+      </div>
+      <span className="text-xs font-medium text-gray-800 text-center">
+        {name}
+      </span>
+    </button>
+  );
+}

components/LifestylePreferencesCard.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+interface LifestylePreferencesCardProps {
+	// define props
+	title?: string;
+	imageSrc?: string;
+	isSelected?: boolean;
+	onClick?: () => void;
+}
+
+const LifestylePreferencesCard = ({
+	title,
+	imageSrc,
+	isSelected,
+	onClick,
+}: LifestylePreferencesCardProps) => {
+	return (
+		<div
+			className={`rounded-xl px-14 py-4 w-full flex flex-col items-center drop-shadow-xl border-1 border-[#C4C7CA]  hover:scale-105 hover:bg-gray-100 ${
+				isSelected ? "ring-2 ring-[#FF9100]" : "bg-white"
+			}`}
+			onClick={onClick}
+		>
+			{/* The circular image */}
+			<div className="rounded-full bg-linear-to-r from-[#FF9100] to-[#FFC94C] p-1">
+			<img
+				src={imageSrc}
+				className="h-12 w-12 object-cover p-2"
+			/>
+			</div>
+			<p className="text-lg text-gray-800 text-center">{title}</p>
+
+		</div>
+	);
+};
+
+export default LifestylePreferencesCard;

components/NextStepButton.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+// Define the props for our button component
+interface NextStepButtonProps {
+	onClick?: () => void;
+	logo?: React.ReactNode;
+	className?: string;
+	disabled?: boolean;
+}
+
+const NextStepButton: React.FC<NextStepButtonProps> = ({
+	onClick,
+	logo,
+	className,
+	disabled,
+}) => {
+	return (
+		<button
+			onClick={!disabled ? onClick : undefined}
+      		disabled={disabled}
+			// Ensure the button is relative for absolute positioning of the logo
+			className={`
+				relative flex items-center justify-center
+				py-3 px-6 rounded-full text-white font-semibold text-lg
+				h-12 w-100
+				shadow-lg
+				cursor-pointer
+				transition-all duration-200 ease-in-out
+        		overflow-visible
+					${
+					disabled
+						? "bg-gray-300 text-gray-500 cursor-not-allowed"
+						: "bg-gradient-to-r from-[#FF9100] to-[#FFC94C] hover:from-[#E68200] hover:to-[#E3B03C] text-white cursor-pointer"
+					}
+					${className || ""}
+				`}
+			>
+			<h1 className="transform -right-4 relative z-20">Next Step</h1>
+
+			<span className="ml-4 flex items-center justify-center relative z-20 left-30">
+				&gt;
+			</span>
+
+			{logo && (
+				<span
+					className={`absolute overflow-visible h-15 w-15 right-10 -top-3 z-30 transform -translate-x-1/2 flex items-center justify-center`}
+				>
+					{logo}
+				</span>
+			)}
+		</button>
+	);
+};
+
+export default NextStepButton;

components/ProgressHeader.tsx

@@ -0,0 +1,37 @@
+interface ProgressHeaderProps {
+  title: string;
+  subtitle: string;
+  currentStep: number;
+  totalSteps?: number;
+}
+
+export default function ProgressHeader({ 
+  title, 
+  subtitle, 
+  currentStep, 
+  totalSteps = 5
+}: ProgressHeaderProps) {
+  const progressPercent = (currentStep / totalSteps) * 100;
+
+  return (
+    <div className="w-full max-w-xl mx-auto mb-4 mt-4">
+      <h1 className="text-2xl font-bold text-center">
+        {title}
+      </h1>
+      <p className="text-center text-md text-gray-600 mb-2">
+        {subtitle}
+      </p>
+
+      {/* Progress Bar */}
+      <div className="w-full bg-gray-300 rounded-full h-2 overflow-hidden">
+        <div 
+          className="h-full rounded-full transition-all duration-300 ease-out"
+          style={{
+            width: `${progressPercent}%`,
+            background: 'linear-gradient(to right, #FF9100, #FFC94C)'
+          }}
+        />
+      </div>
+    </div>
+  );
+}

components/ScreenBlocker.tsx

@@ -16,7 +16,7 @@ export default function ScreenBlocker() {
 				<div className="mt-5 border-t border-gray-200 pt-2 -mb-3">
 					<div className="flex items-center justify-center gap-1 mt-2">
 						<Image
-							src="/images/peechi_star.png"
+							src="/images/peechi_star.webp"
 							alt="MeteorMate Star Icon"
 							width={20}
 							height={20}

components/landing/ContactUs.tsx

@@ -10,7 +10,7 @@ export default function ContactUs() {
 			id="contactUs"
 			className="bg-black bg-no-repeat bg-center bg-contain text-white flex flex-col w-full !py-12"
 			style={{
-				backgroundImage: `url('/images/stars_footerr.png')`,
+				backgroundImage: `url('/images/stars_footerr.webp')`,
 			}}
 		>
 			{/* Main Footer Content */}
@@ -21,7 +21,7 @@ export default function ContactUs() {
 					<div className="flex flex-col items-center md:items-start gap-3">
 						<div className="flex items-center gap-3">
 							<Image
-								src="/images/MM_logo_V1.png"
+								src="/images/MM_logo_V1.webp"
 								alt="MeteorMate Logo"
 								width={40}
 								height={40}

components/landing/GetStarted.tsx

@@ -13,7 +13,7 @@ export default function GetStarted() {
 			id="getStarted"
 			className="min-h-screen bg-black bg-no-repeat bg-center bg-contain text-white flex flex-col items-center justify-center"
 			style={{
-				backgroundImage: `url('/images/STARS__GRAYSCALE_LOGO_png.png')`,
+				backgroundImage: `url('/images/STARS__GRAYSCALE_LOGO_png.webp')`,
 			}}
 		>
 			<div className="flex flex-col items-center">

components/landing/HeroSection.tsx

@@ -23,7 +23,7 @@ export default function HeroSection() {
 		<section
 			id="home"
 			className="relative min-h-screen w-screen bg-black bg-cover bg-top-left bg-no-repeat text-white"
-			style={{ backgroundImage: `url('/images/hero_section_background.png')` }}
+			style={{ backgroundImage: `url('/images/hero_section_background.webp')` }}
 		>
 			{/* spacing for fixed navbar */}
 			<div className="pt-24 md:pt-28">
@@ -76,7 +76,7 @@ export default function HeroSection() {
 					</div>
 					<div className="flex items-end justify-end pb-0 pr-10 lg:pt-28 md:pt-20 w-1/2">
 						<Image
-							src="/images/laptop_model.png"
+							src="/images/laptop_model.webp"
 							alt="Laptop showing MeteorMate interface"
 							width={800}
 							height={600}

components/landing/HowItWorks.tsx

@@ -37,7 +37,7 @@ function FeatureCard({
 export default function HowItWorks() {
 	const features = [
 		{
-			imageSrc: "/images/landing_logo1_S2.png",
+			imageSrc: "/images/landing_logo1_S2.webp",
 			imageAlt: "AI Powered Matchmaking Icon",
 			title: "AI Powered Matchmaking",
 			description:
@@ -46,7 +46,7 @@ export default function HowItWorks() {
 			imageHeight: 68,
 		},
 		{
-			imageSrc: "/images/L2.png",
+			imageSrc: "/images/L2.webp",
 			imageAlt: "Data Driven Insights Icon",
 			title: "Data Driven Insights",
 			description:
@@ -55,7 +55,7 @@ export default function HowItWorks() {
 			imageHeight: 68,
 		},
 		{
-			imageSrc: "/images/L3.png",
+			imageSrc: "/images/L3.webp",
 			imageAlt: "Multistep Verification Icon",
 			title: "Multistep Verification",
 			description:
@@ -64,7 +64,7 @@ export default function HowItWorks() {
 			imageHeight: 68,
 		},
 		{
-			imageSrc: "/images/L4.png",
+			imageSrc: "/images/L4.webp",
 			imageAlt: "Privacy First Icon",
 			title: "Privacy First",
 			description:
@@ -73,7 +73,7 @@ export default function HowItWorks() {
 			imageHeight: 72,
 		},
 		{
-			imageSrc: "/images/L5.png",
+			imageSrc: "/images/L5.webp",
 			imageAlt: "Personalized Matchmaking Icon",
 			title: "Personalized Matchmaking",
 			description:
@@ -82,7 +82,7 @@ export default function HowItWorks() {
 			imageHeight: 68,
 		},
 		{
-			imageSrc: "/images/L6.png",
+			imageSrc: "/images/L6.webp",
 			imageAlt: "Social Integration Icon",
 			title: "Social Integration",
 			description:
@@ -96,7 +96,7 @@ export default function HowItWorks() {
 		<LandingSection
 			id="howItWorks"
 			className="w-screen min-h-screen bg-black flex flex-col justify-center items-center bg-cover bg-center bg-no-repeat"
-			style={{ backgroundImage: `url('/images/stars.png')` }}
+			style={{ backgroundImage: `url('/images/stars.webp')` }}
 		>
 			<h1 className="text-white text-[60px] font-extrabold">
 				Fast Solution and Best Matches

components/landing/Navbar.tsx

@@ -47,7 +47,7 @@ export default function Navbar() {
 				<div className="relative flex items-center gap-4 group cursor-pointer" onClick={() => router.push("/")}>
 					<div className="relative">
 						<Image
-							src="/images/MM_logo_V1.png"
+							src="/images/MM_logo_V1.webp"
 							alt="MeteorMate Logo"
 							width={56}
 							height={56}

src/app/authentication/createAccount/page.tsx

@@ -114,7 +114,7 @@ export default function CreateAccountPage() {
 	// };
 
 	return (
-		<LogoBox logoSrc="/images/MM_logo_V1.png" logoAlt="MeteorMate Logo">
+		<LogoBox logoSrc="/images/MM_logo_V1.webp" logoAlt="MeteorMate Logo">
 			{/* Back arrow */}
 			<button
 				onClick={router.back}

src/app/authentication/forgotPassword/page.tsx

@@ -66,7 +66,7 @@ export default function VerifyEmailPage() {
 
 
   return (
-    <LogoBox logoSrc="/images/MM_logo_V1.png" logoAlt="MeteorMate Logo">
+    <LogoBox logoSrc="/images/MM_logo_V1.webp" logoAlt="MeteorMate Logo">
       <div className="flex flex-col w-full max-w-2xl px-10">
         <h1 className="font-urbanist font-semibold md:text-[35px] text-[20px] p-2">
           Forgot Password

src/app/authentication/layout.tsx

@@ -16,7 +16,7 @@ export default function AuthLayout({
 			<div
 				className="absolute inset-0 bg-cover bg-center bg-no-repeat"
 				style={{
-					backgroundImage: "url('/images/stars.png')",
+					backgroundImage: "url('/images/stars.webp')",
 					filter: "brightness(3) contrast(2)",
 				}}
 			></div>

src/app/authentication/newPassword/page.tsx

@@ -116,7 +116,7 @@ export default function NewPasswordPage() {
   };
 
   return (
-    <LogoBox logoSrc="/images/MM_logo_V1.png" logoAlt="MeteorMate Logo">
+    <LogoBox logoSrc="/images/MM_logo_V1.webp" logoAlt="MeteorMate Logo">
       <div className="flex flex-col w-full max-w-2xl px-10">
         <h1 className="font-urbanist font-semibold md:text-[35px] text-[20px] p-2">
           Input New Password