diff --git a/frontend/src/components/profile/Profile.css b/frontend/src/components/profile/Profile.css
index 308821c5..ac4fa884 100644
--- a/frontend/src/components/profile/Profile.css
+++ b/frontend/src/components/profile/Profile.css
@@ -26,9 +26,86 @@
margin-top: 50px;
}
+.profile-tabs {
+ width: 700px;
+ height: 55px;
+
+ background-color: var(--dark-green);
+ border-radius: 35px;
+
+ display: flex;
+ align-items: center;
+
+ padding: 5px;
+ box-sizing: border-box;
+
+ margin: 30px auto;
+}
+
+.profile-tabs button {
+ flex: 1;
+ height: 45px;
+
+ border: none;
+ border-radius: 30px;
+
+ background: transparent;
+ color: var(--light-background);
+
+ font-size: 20px;
+
+ cursor: pointer;
+}
+
+.profile-tabs button.active {
+ background-color: var(--light-green);
+ color: var(--text);
+}
+
+.saved-plants {
+ margin: 50px auto 0;
+ width: 100%;
+ background-color: var(--light-pink);
+ border-radius: 10px;
+ padding: 30px 30px 30px 30px;
+ box-sizing: border-box;
+}
+
+.saved-plants h2 {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.plant-card-holder {
+ width: 260px;
+ height: 300px;
+ box-sizing: border-box;
+
+ background-color: var(--light-background);
+ border: 1px solid var(--dark-green);
+ border-radius: 12px;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.saved-plants-display {
+ margin-top: 50px;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, 260px);
+ gap: 40px;
+ justify-content: center;
+}
+
@media (max-width: 767px) {
.profile {
margin-left: 0;
padding: 24px 16px;
}
+
+ .profile-tabs {
+ width: 350px;
+ }
}
diff --git a/frontend/src/components/profile/Profile.tsx b/frontend/src/components/profile/Profile.tsx
index c550abfb..160b9c27 100644
--- a/frontend/src/components/profile/Profile.tsx
+++ b/frontend/src/components/profile/Profile.tsx
@@ -3,10 +3,24 @@ import PlantPreferences from "../plantPreferences/PlantPreferences.tsx";
import profileImg from "../../assets/profile.png";
import type { Preference } from "../../types/Preference.ts";
import { useTranslation } from "react-i18next";
+import { useState } from "react";
export default function Profile() {
const { t } = useTranslation();
+ const [activeTab, setActiveTab] = useState<"preferences" | "savedPlants">(
+ "preferences",
+ );
+
+ const plants = [
+ { name: "Hydrangea" },
+ { name: "Orchid" },
+ { name: "Fig Tree" },
+ { name: "Monstera" },
+ { name: "Peony" },
+ { name: "Lily" },
+ ];
+
const preferences: Preference[] = [
{ id: "flowering", translationKey: "preferences.flowering" },
{ id: "petFriendly", translationKey: "preferences.petFriendly" },
@@ -26,15 +40,46 @@ export default function Profile() {
Description
+{t("profile.description")}
{plant.name}
+