diff --git a/src/App.tsx b/src/App.tsx
index 1a194bb..85bff93 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -14,6 +14,7 @@ import Events from "./pages/Events";
import Rating from "./pages/Rating";
import Profile from "./pages/Profile";
import EventItem from "./pages/EventItem";
+import Structure from "./pages/Structure";
const App = () => {
return (
@@ -26,6 +27,7 @@ const App = () => {
} />
} />
} />
+ } />
diff --git a/src/components/structure/PersonInfo.tsx b/src/components/structure/PersonInfo.tsx
new file mode 100644
index 0000000..9f9b4bb
--- /dev/null
+++ b/src/components/structure/PersonInfo.tsx
@@ -0,0 +1,54 @@
+// Modules
+
+// Types
+import { personProps } from "../../types/personProps";
+
+// Icons
+import mail from "../../icons/email.svg";
+import phone from "../../icons/phone.svg";
+import fb from "../../icons/facebook-green.svg";
+
+const PersonInfo = ({
+ img,
+ position,
+ name,
+ email,
+ tel,
+ facebook,
+}: personProps) => {
+ return (
+
+
+
+

+
+
+
+
{position}
+
{name}
+
+
+
+ );
+};
+
+export default PersonInfo;
diff --git a/src/icons/email.svg b/src/icons/email.svg
new file mode 100644
index 0000000..7704c8f
--- /dev/null
+++ b/src/icons/email.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/icons/facebook-green.svg b/src/icons/facebook-green.svg
new file mode 100644
index 0000000..afd232e
--- /dev/null
+++ b/src/icons/facebook-green.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/icons/phone.svg b/src/icons/phone.svg
new file mode 100644
index 0000000..1d14c67
--- /dev/null
+++ b/src/icons/phone.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/images/arkady.jpg b/src/images/arkady.jpg
new file mode 100644
index 0000000..0432400
Binary files /dev/null and b/src/images/arkady.jpg differ
diff --git a/src/images/sasha.jpg b/src/images/sasha.jpg
new file mode 100644
index 0000000..11b1cd4
Binary files /dev/null and b/src/images/sasha.jpg differ
diff --git a/src/pages/Structure.tsx b/src/pages/Structure.tsx
new file mode 100644
index 0000000..771fd07
--- /dev/null
+++ b/src/pages/Structure.tsx
@@ -0,0 +1,79 @@
+// Modules
+import { v4 as uuidv4 } from "uuid";
+
+// Components
+import PersonInfo from "../components/structure/PersonInfo";
+import SectionTitle from "../components/global/SectionTitle";
+
+// Images
+import arkady from "../images/arkady.jpg";
+import sasha from "../images/sasha.jpg";
+
+// Types
+import { personProps } from "../types/personProps";
+
+const personData: personProps[] = [
+ {
+ img: arkady,
+ position: "Assistant to the FIDE President",
+ name: "Kiselev, Konstantin",
+ email: "fidepresident@fide.com",
+ tel: "+993 65 65-65-65",
+ facebook: "@fidepresident",
+ },
+ {
+ img: sasha,
+ position: "FIDE President",
+ name: "Dvorkovich, Arkady",
+ email: "fidepresident@fide.com",
+ tel: "+993 65 65-65-65",
+ facebook: "@fidepresident",
+ },
+ {
+ img: arkady,
+ position: "Assistant to the FIDE President",
+ name: "Kiselev, Konstantin",
+ email: "fidepresident@fide.com",
+ tel: "+993 65 65-65-65",
+ facebook: "@fidepresident",
+ },
+ {
+ img: sasha,
+ position: "FIDE President",
+ name: "Dvorkovich, Arkady",
+ email: "fidepresident@fide.com",
+ tel: "+993 65 65-65-65",
+ facebook: "@fidepresident",
+ },
+];
+
+// Link: /structure
+
+const Structure = () => {
+ return (
+
+
+
+
+
+ {personData.map((person) => {
+ return (
+
+ );
+ })}
+
+
+
+
+ );
+};
+
+export default Structure;
diff --git a/src/styles/_structure.scss b/src/styles/_structure.scss
new file mode 100644
index 0000000..699ab7e
--- /dev/null
+++ b/src/styles/_structure.scss
@@ -0,0 +1,55 @@
+.structure-inner {
+ padding: 8rem 0 16rem 0;
+ display: flex;
+ flex-direction: column;
+ gap: 4.8rem;
+}
+
+.person {
+ background: #ffffff;
+ box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
+ border-radius: 5px;
+ display: flex;
+ gap: 4rem;
+ padding: 4rem;
+}
+
+.person-right {
+ display: flex;
+ flex-direction: column;
+}
+
+.person-pos {
+ color: #7d7d7d;
+ font-size: 2.4rem;
+ font-weight: bold;
+}
+
+.person-name {
+ margin-bottom: 2.6rem;
+ color: $base-green;
+ font-size: 2.4rem;
+ font-weight: bold;
+}
+
+.person-data {
+ display: flex;
+ align-items: center;
+ gap: 1.6rem;
+
+ span {
+ font-size: 1.6rem;
+ }
+}
+
+.structure-content {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 4.8rem;
+}
+
+.person-right-bottom {
+ display: flex;
+ flex-direction: column;
+ gap: 2rem;
+}
diff --git a/src/styles/style.scss b/src/styles/style.scss
index d2373b0..dddb47a 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -11,3 +11,4 @@
@import "./rating";
@import "./profile";
@import "./event-item";
+@import "./structure";
diff --git a/src/types/personProps.ts b/src/types/personProps.ts
new file mode 100644
index 0000000..57b02ca
--- /dev/null
+++ b/src/types/personProps.ts
@@ -0,0 +1,8 @@
+export interface personProps {
+ img: string;
+ position: string;
+ name: string;
+ email: string;
+ tel: string;
+ facebook: string;
+}