Add files via upload

src/componants/account-page/AccountPage.jsx

@@ -0,0 +1,48 @@
+import { Helmet } from "react-helmet-async";
+import { useTranslation } from "react-i18next";
+import { useSelector } from "react-redux";
+import { Link } from "react-router-dom";
+import useScrollOnMount from "src/Hooks/App/useScrollOnMount";
+import PagesHistory from "../Shared/MiniComponents/PagesHistory/PagesHistory";
+import AccountMenuSection from "./AccountMenuSection/AccountMenuSection";
+import s from "./AccountPage.module.scss";
+import EditProfileForm from "./EditProfileForm/EditProfileForm";
+
+const AccountPage = () => {
+  const { loginInfo } = useSelector((state) => state.user);
+  const { t } = useTranslation();
+
+  useScrollOnMount(0);
+
+  return (
+    <>
+      <Helmet>
+        <title>Profile</title>
+        <meta
+          name="description"
+          content="Update your personal information easily on Exclusive. Manage your account details, shipping addresses, and preferences for a personalized shopping experience."
+        />
+      </Helmet>
+
+      <div className="container">
+        <main className={s.accountPage} id="account-page">
+          <div className={s.wrapper}>
+            <PagesHistory history={["/", t("nav.profile")]} />
+
+            <p className={s.welcomeMessage}>
+              {t("common.welcome")}
+              {"! "}
+              <Link to="/profile">{loginInfo.username}</Link>
+            </p>
+          </div>
+
+          <div className={s.accountPageContent}>
+            <AccountMenuSection />
+            <EditProfileForm />
+          </div>
+        </main>
+      </div>
+    </>
+  );
+};
+export default AccountPage;

src/componants/account-page/AccountPage.module.scss

@@ -0,0 +1,68 @@
+@import "src/Styles/mixins";
+
+.accountPage {
+  margin: 60px 0;
+}
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+@include small {
+  .wrapper {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 20px;
+  }
+}
+
+.welcomeMessage {
+  font-weight: 400;
+  font-size: .875rem;
+}
+
+.welcomeMessage>a {
+  -webkit-tap-highlight-color: transparent;
+  outline: none;
+  color: var(--dark-tomato);
+  position: relative;
+
+  &:hover,
+  &:focus {
+    color: var(--tomato);
+  }
+
+  &:focus::before {
+    width: 100%;
+  }
+}
+
+.welcomeMessage>a::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  width: 0;
+  height: 1px;
+  background-color: var(--tomato);
+  transition: width .3s;
+}
+
+.welcomeMessage>a:hover::before {
+  width: 100%;
+}
+
+.accountPageContent {
+  display: flex;
+  justify-content: space-between;
+  margin: var(--page-margin);
+  gap: 30px;
+}
+
+@include large {
+  .accountPageContent {
+    gap: 0;
+  }
+}