Feat/user profile

src/app/user-profile/page.tsx

@@ -0,0 +1,7 @@
+"use client";
+import EditProfileTemplate from "@/components/NewDesignSystem/templates/EditProfileTemplate";
+export default function UserProfilePage() {
+    return (
+        <EditProfileTemplate />
+    );
+};

src/components/NewDesignSystem/atoms/Avatar/index.tsx

@@ -0,0 +1,9 @@
+import Image from "next/image";
+
+export default function Avatar () {
+    return (
+        <div className="w-16 h-16 rounded-full flex items-center justify-center text-white text-2xl">
+            <Image alt="avatar" src="/images/avatar_icon.png" width={70} height={70}  />
+        </div>
+    )
+}

src/components/NewDesignSystem/atoms/Card/index.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+interface CardProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export default function Card({ children, className }: CardProps) {
+  return (
+    <div className={`bg-white rounded-xl shadow-md  ${className || ""}`}>
+      {children}
+    </div>
+  );
+}
+

src/components/NewDesignSystem/atoms/IconsUser/index.tsx

@@ -0,0 +1,13 @@
+import Image from "next/image";
+
+interface IconUserProps {
+  src: string;
+}
+
+export default function IconUser({ src }: IconUserProps) {
+  return (
+    <div className="w-16 h-16 rounded-full flex items-center justify-center text-white text-2xl">
+    <Image alt="avatar" src={src} width={40} height={40}  />
+    </div>
+  );
+}

src/components/NewDesignSystem/atoms/Text/index.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+
+interface TextProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export default function Text({ children, className }: TextProps) {
+  return <p className={className}>{children}</p>;
+}

src/components/NewDesignSystem/molecules/MenuItem/index.tsx

@@ -0,0 +1,18 @@
+
+import IconsUser from "../../atoms/IconsUser";
+import Text from "../../atoms/Text";
+import Card from "../../atoms/Card";
+
+interface MenuItemProps {
+  icon: string;
+  label: string;
+}
+
+export default function MenuItem({ icon, label }: MenuItemProps) {
+  return (
+    <Card className="flex items-center gap-4 cursor-pointer hover:bg-gray-50 transition h-12 w-xs">
+      <IconsUser src={icon} />
+      <Text className="font-medium">{label}</Text>
+    </Card>
+  );
+}

src/components/NewDesignSystem/molecules/ProfileInfo/index.tsx

@@ -0,0 +1,25 @@
+// src/components/molecules/ProfileInfo.tsx
+import Avatar from "../../atoms/Avatar";
+import Text from "../../atoms/Text";
+import Card from "../../atoms/Card";
+
+export default function ProfileInfo() {
+  return (
+    <div className="flex flex-col items-center gap-2">
+      <Avatar  />
+
+      <div>
+      <Text className="font-bold text-sm">Nome do Usuário</Text>
+      <Text className="text-gray-500 text-xs">Usuá[email protected]</Text>
+      </div>
+
+      <div>
+      <Card className="text-center w-52 h-16">
+        <Text className="font-bold text-sm">Saldo Simulado</Text>
+        <Text className="text-green-600 font-bold text-base">R$ 50.000,00</Text>
+        <Text className="text-gray-500 text-xs">ID: 00000000</Text>
+      </Card>
+      </div>
+    </div>
+  );
+}

src/components/NewDesignSystem/organisms/ProfileCard/index.tsx

@@ -0,0 +1,28 @@
+// src/components/organisms/ProfileCard.tsx
+import ProfileInfo from "../../molecules/ProfileInfo";
+import MenuItem from "../../molecules/MenuItem";
+
+export default function ProfileCard() {
+  return (
+    <div className=" bg-white rounded-3xl p-6 flex flex-col gap-6">
+      <ProfileInfo />
+
+      <div>
+        <p className=" font-bold">Conta</p>
+        <div className="mt-3 flex flex-col gap-3">
+          <MenuItem icon="/images/avatar_icon.png" label="Editar Informações de Perfil" />
+          <MenuItem icon="/images/suporte_icon.png" label="Suporte" />
+        </div>
+      </div>
+
+      <div>
+        <p className=" font-semibold">Geral</p>
+        <div className="mt-3 flex flex-col gap-3">
+          <MenuItem icon="/images/segurança_icon.png" label="Segurança" />
+          <MenuItem icon="/images/configuração_icon.png" label="Configurações" />
+          <MenuItem icon="/images/sair_icon.png" label="Sair" />
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/NewDesignSystem/templates/EditProfileTemplate/index.tsx

@@ -0,0 +1,16 @@
+import Text from "../../atoms/Text";
+import ProfileCard from "../../organisms/ProfileCard";
+
+export default function EditProfileTemplate() {
+  return (
+    <div>
+    <div className="text-white py-4 text-center mt-20 text-2xl">
+      <Text className="text-xl font-bold">Editar Perfil</Text>
+    </div>
+
+      <main className="px-2">
+        <ProfileCard />
+      </main>
+    </div>
+  );
+}