Merge pull request #170 from ita-social-projects/#144-CreateProfileVi…

…ewPage Profile view page added.
ita-social-projects · Sep 19, 2023 · 65812b6 · 65812b6
2 parents 9b30222 + 019f4b7
commit 65812b6
Show file tree

Hide file tree

Showing 28 changed files with 1,300 additions and 23 deletions.
diff --git a/FrontEnd/public/companies-images/profile-view-image.jpeg b/FrontEnd/public/companies-images/profile-view-image.jpeg
diff --git a/FrontEnd/public/svg/facebook.svg b/FrontEnd/public/svg/facebook.svg
diff --git a/FrontEnd/public/svg/instagram.svg b/FrontEnd/public/svg/instagram.svg
diff --git a/FrontEnd/public/svg/profile-view-image-empty.svg b/FrontEnd/public/svg/profile-view-image-empty.svg
diff --git a/FrontEnd/public/svg/star-icon.svg b/FrontEnd/public/svg/star-icon.svg
diff --git a/FrontEnd/src/App.css b/FrontEnd/src/App.css
@@ -1,5 +1,4 @@
 .App {
-  text-align: center;
   /*for footer correct work*/
   /* min-height: 100vh;
   flex-direction: column;

diff --git a/FrontEnd/src/App.js b/FrontEnd/src/App.js
@@ -10,6 +10,7 @@ import ScrollToTopButton from './components/PrivacyPolicyPage/privacy/ScrollToTo
 import TermsAndConditions from './components/terms-and-conditions-app/terms_conditions/TermsAndConditionsComponent';
 import ProfilePage from './components/ProfilePage/ProfilePage';
 import MainPage from './components/landing-page/MainPage';
+import ProfileView from "./components/ProfileView/ProfileView";
 
 
 function App() {
@@ -24,6 +25,7 @@ function App() {
           <Route path="/sign-up" element={<SignUpPage />} />
           <Route path="/privacy-policy" element={<PrivacyPolicy />} />
           <Route path="/terms-and-conditions" element={<TermsAndConditions />} />
+          <Route path="/profile-view" element={<ProfileView />} />
         </Routes>
         <Footer />
         <ScrollToTopButton />

diff --git a/FrontEnd/src/components/ProfileView/ProfileMenu/ProfileInfo/ProfileInfo.jsx b/FrontEnd/src/components/ProfileView/ProfileMenu/ProfileInfo/ProfileInfo.jsx
@@ -0,0 +1,85 @@
+import classes from "./ProfileInfo.module.css";
+
+const dataItems = [
+    {
+        title: "Рік заснування",
+        text: "2016",
+    },
+    {
+        title: "Розмір компанії",
+        text: "250 працівників",
+    },
+    {
+        title: "Аудит",
+        text: "Назва аудиту",
+    },
+];
+
+const ProfileInfo = ({ dataItems }) => {
+
+  return (
+      <div className={classes["profile-info-block"]}>
+          <div className={classes["profile-info-block__main"]}>
+              <div className={classes["profile-info-block__main-content"]}>
+                  <div className={classes["profile-info-block__main-content-data"]}>
+                      <div className={classes["profile-info-block__main-content-bold-title"]}>ЄДРПОУ</div>
+                      <div className={classes["profile-info-block__main-content-text"]}>11223344</div>
+                  </div>
+                  <div>
+                      {dataItems.map((item, index) => (
+                          <div key={index} className={classes["profile-info-block__main-content-data"]}>
+                              <div className={classes["profile-info-block__main-content-title"]}>
+                                  {item.title}
+                              </div>
+                              <div className={classes["profile-info-block__main-content-text"]}>
+                                  {item.text}
+                              </div>
+                          </div>
+                      ))}
+                  </div>
+              </div>
+              <div className={classes["profile-info-block__main-content"]}>
+                  <div className={classes["profile-info-block__main-content-data2"]}>
+                      <div className={classes["profile-info-block__main-content-title"]}>Сайт</div>
+                      <div className={classes["profile-info-block__main-content-url"]}>stakhovskywines.com</div>
+                  </div>
+                  <div className={classes["profile-info-block__main-content-data"]}>
+                      <div className={classes["profile-info-block__main-content-title"]}>Телефон</div>
+                      <div className={classes["profile-info-block__main-content-text"]}>201232323236</div>
+                      <div className={classes["profile-info__button"]}>
+                          <div className={classes["profile-info__button-text"]}>Показати телефон</div>
+                      </div>
+                  </div>
+                  <div className={classes["profile-info-block__main-content-data"]}>
+                      <div className={classes["profile-info-block__main-content-title"]}>Електронна пошта</div>
+                      <div className={classes["profile-info-block__main-content-text"]}>2232323232323</div>
+                      <div className={classes["profile-info__button"]}>
+                          <div className={classes["profile-info__button-text"]}>Показати ел. пошту</div>
+                      </div>
+                  </div>
+                  <div className={classes["profile-info-block__main-content-data2"]}>
+                      <div className={classes["profile-info-block__main-content-title"]}>Адрес(и)</div>
+                      <div className={classes["profile-info-block__main-content-text"]}>
+                          Офіс:
+                          90260, Україна, Закарпатська обл.,
+                          Берегівський р-н,с. Мужієво,
+                      </div>
+                  </div>
+                  <div className={classes["profile-info-block__main-content-data2"]}>
+                      <div className={classes["profile-info-block__main-content-title"]}>Соціальні мережі</div>
+                      <div className={classes["profile-info-block__main-content-icons"]}>
+                          <img src={`${process.env.PUBLIC_URL}/svg/facebook.svg`} alt="facebook"/>
+                          <img src={`${process.env.PUBLIC_URL}/svg/instagram.svg`} alt="instagram"/>
+                      </div>
+                  </div>
+                  <div className={classes["profile-info-block__main-content-data"]}>
+                      <div className={classes["profile-info-block__main-content-title"]}>Співпрацюємо з </div>
+                      <div className={classes["profile-info-block__main-content-text"]}>Сільпо, Rozetka, Бюро Вин</div>
+                  </div>
+              </div>
+          </div>
+      </div>
+  );
+};
+
+export default ProfileInfo;
diff --git a/FrontEnd/src/components/ProfileView/ProfileMenu/ProfileInfo/ProfileInfo.module.css b/FrontEnd/src/components/ProfileView/ProfileMenu/ProfileInfo/ProfileInfo.module.css
@@ -0,0 +1,120 @@
+:root {
+    --dark-gray: #292E32;
+    --white: #F8F8F8;
+    --blue: #4A73E2;
+    --green: #1F9A7C;
+
+}
+
+.profile-info-block {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    position: absolute;
+    left: 930px;
+}
+.profile-info-block__main {
+    display: flex;
+    padding: 16px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 36px;
+    border-radius: 2px;
+    border: 1px solid var(--white);
+    background: var(--white);
+}
+.profile-info-block__main-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+}
+.profile-info-block__main-content-data {
+    display: flex;
+    height: 32px;
+    align-items: center;
+    gap: 8px;
+}
+.profile-info-block__main-content-data2 {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+.profile-info-block__main-content-bold-title {
+    width: 130px;
+    color: var(--dark-gray);
+    font-feature-settings: 'calt' off;
+    font-family: Inter, sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 22px; /* 157.143% */
+    letter-spacing: -0.14px;
+}
+.profile-info-block__main-content-title {
+    width: 130px;
+    color: var(--dark-gray);
+    font-feature-settings: 'calt' off;
+    font-family: Inter, sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px; /* 157.143% */
+    letter-spacing: -0.14px;
+}
+.profile-info-block__main-content-text {
+    width: 200px;
+    color: var(--dark-gray);
+    font-feature-settings: 'calt' off;
+    font-family: Inter, sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 22px; /* 157.143% */
+    letter-spacing: -0.14px;
+}
+.profile-info-block__main-content-url {
+    width: 200px;
+    color: var(--blue);
+    font-feature-settings: 'calt' off;
+    font-family: Inter, sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 22px; /* 157.143% */
+    letter-spacing: -0.14px;
+}
+
+.profile-info__button {
+    display: flex;
+    width: 160px;
+    /* height: 32px; */
+    max-width: 200px;
+    padding: 5px 15px;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    border-radius: 4px;
+    border: 1px solid var(--green);
+    background: var(--white);
+    position: absolute;
+    left: 154px;
+}
+.profile-info__button-text {
+    flex: 1 0 0;
+    color: var(--green);
+    text-align: center;
+    font-feature-settings: 'calt' off;
+    font-family: Inter, sans-serif;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px; /* 125% */
+    letter-spacing: -0.16px;
+}
+.profile-info-block__main-content-icons {
+    width: 24px;
+    height: 24px;
+    display: flex;
+}
diff --git a/FrontEnd/src/components/ProfileView/ProfileMenu/ProfileMenu.jsx b/FrontEnd/src/components/ProfileView/ProfileMenu/ProfileMenu.jsx
@@ -0,0 +1,24 @@
+import classes from "./ProfileMenu.module.css";
+import ProfileMenuAbout from "./ProfileMenuAbout/ProfileMenuAbout";
+import ProfileMenuStartupName from "./ProfileMenuStartup/ProfileMenuStartup";
+import ProfileMenuServices from "./ProfileMenuServices/ProfileMenuServices";
+import ProfileMenuLogistics from "./ProfileMenuLogistics/ProfileMenuLogistics";
+import ProfileMenuCooperation from "./ProfileMenuCooperation/ProfileMenuCooperation";
+import ProfileInfo from "./ProfileInfo/ProfileInfo";
+
+const ProfileMenu = () => {
+  return (
+      <div className={classes["profile-menu-main-block"]}>
+          <div className={classes["profile-menu-main"]}>
+              <ProfileMenuAbout />
+              <ProfileMenuStartupName />
+              <ProfileMenuServices />
+              <ProfileMenuLogistics />
+              <ProfileMenuCooperation />
+          </div>
+          <ProfileInfo />
+      </div>
+  );
+};
+
+export default ProfileMenu;
diff --git a/FrontEnd/src/components/ProfileView/ProfileMenu/ProfileMenu.module.css b/FrontEnd/src/components/ProfileView/ProfileMenu/ProfileMenu.module.css
@@ -0,0 +1,11 @@
+.profile-menu-main-block {
+  display: flex;
+  align-items: flex-start;
+  gap: 134px;
+}
+.profile-menu-main-block {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+}
diff --git a/FrontEnd/src/components/ProfileView/ProfileMenu/ProfileMenuAbout/ProfileMenuAbout.jsx b/FrontEnd/src/components/ProfileView/ProfileMenu/ProfileMenuAbout/ProfileMenuAbout.jsx
@@ -0,0 +1,44 @@
+import classes from "./ProfileMenuAbout.module.css";
+import { profileInfo } from "../ProfileText.jsx";
+
+const ProfileMenuAbout = () => {
+  return (
+      <div id="about-company" className={classes["profile-menu-main__about"]}>
+          <div className={classes["profile-menu-main__about-title"]}>
+              <div className={classes["profile-menu-main__about-title-block"]}>
+                  <div className={classes["profile-menu-main__about-title-text"]}>ПРО КОМПАНІЮ</div>
+              </div>
+              <div className={classes["profile-menu-divider"]}/>
+          </div>
+          <div className={classes["profile-menu-main__about-content"]}>
+              <div className={classes["profile-menu-main__about-first-text"]}>
+                  {profileInfo.sections[0].about1}
+                  <span className={classes["profile-menu-more-text"]}>
+                        {profileInfo.more}
+                  </span>
+              </div>
+              <div className={classes["profile-menu-main__about-second-text-block"]}>
+                  <div className={classes["profile-menu-main__about-second-title"]}>
+                      Конкурентна перевага
+                  </div>
+                  <div className={classes["profile-menu-main__about-second-text"]}>
+                      {profileInfo.sections[0].about2}
+                      <span className={classes["profile-menu-more-text"]}>
+                            {profileInfo.more}
+                      </span>
+                  </div>
+              </div>
+              <div className={classes["profile-menu-main__about-second-text-block"]}>
+                  <div className={classes["profile-menu-main__about-second-title"]}>
+                      Візія, слоган
+                  </div>
+                  <div className={classes["profile-menu-main__about-third-text"]}>
+                      {profileInfo.sections[0].about3}
+                  </div>
+              </div>
+          </div>
+      </div>
+  );
+};
+
+export default ProfileMenuAbout;