[EPMGCIPCNT-19] - Component to deliver footer navigation for the website

package.json

@@ -40,6 +40,7 @@
     "prettier": "^3.2.5",
     "sass": "^1.71.0",
     "typescript": "^5.3.3",
-    "vite": "^5.1.1"
+    "vite": "^5.1.1",
+    "vite-plugin-svgr": "^4.2.0"
   }
 }

src/app.component.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { Button } from "@/components/button/button.tsx";
+import { Footer } from "@/components/footer/footer.tsx";
 import "./app.styles.scss";
 
 export const App = () => {
@@ -10,9 +11,9 @@ export const App = () => {
   };
 
   return (
-    <>
+    <div className="page">
       <h1>Vite + React</h1>
-      <div className="card">
+      <main className="card">
         <Button type="button" variant="main" onClick={handleClick}>
           count is {count}
         </Button>
@@ -31,7 +32,8 @@ export const App = () => {
         <p>
           Edit <code>src/App.jsx</code> and save to test HMR
         </p>
-      </div>
-    </>
+      </main>
+      <Footer />
+    </div>
   );
 };

src/app.styles.scss

@@ -1,4 +1,10 @@
+.page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
 .card {
-  padding: 2em;
+  flex-grow: 1;
   background-color: wheat;
 }

src/components/footer/footer.constants.ts

@@ -0,0 +1,37 @@
+import Envelope from "@/assets/envelope.svg?react";
+import Linkedin from "@/assets/linkedin.svg?react";
+import Tiktok from "@/assets/tiktok.svg?react";
+
+// TODO: add correct icons after navigation merge
+export const socialLinks = [
+  {
+    label: "send message",
+    link: "/",
+    icon: Envelope,
+  },
+  {
+    label: "linkedin",
+    link: "/",
+    icon: Linkedin,
+  },
+  {
+    label: "instagram",
+    link: "/",
+    icon: Tiktok,
+  },
+  {
+    label: "facebook",
+    link: "/",
+    icon: Tiktok,
+  },
+  {
+    label: "tiktok",
+    link: "/",
+    icon: Tiktok,
+  },
+  {
+    label: "youtube",
+    link: "/",
+    icon: Tiktok,
+  },
+];

src/components/footer/footer.scss

@@ -0,0 +1,107 @@
+@use "@/styles/responsive-mixins";
+
+.footer {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  gap: 36px;
+  font-family: Lato, sans-serif;
+  padding: 24px 16px 32px;
+  color: var(--night);
+  background-color: var(--background);
+
+  .contact-link {
+    color: inherit;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .social-info {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  .social-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    line-height: 1.5;
+  }
+
+  .social-links {
+    display: grid;
+    grid-template-columns: repeat(3, 24px);
+    grid-gap: 12px 24px;
+    margin: auto;
+  }
+
+  .contact-info {
+    display: flex;
+    flex-direction: column;
+    font-family: "Open Sans", sans-serif;
+    font-size: 0.75rem;
+    font-weight: 600;
+    line-height: 1.5;
+    gap: 12px;
+  }
+
+  .contact-links {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 24px;
+    margin: auto;
+  }
+
+  .copyright-info {
+    display: flex;
+    flex-direction: column;
+    gap: inherit;
+
+    &-delimiter {
+      display: none;
+    }
+  }
+
+  .designed-by {
+    margin-top: 12px;
+
+    &-logo {
+      display: block;
+      width: 73px;
+      height: 26px;
+      margin: 8px auto 0;
+    }
+  }
+
+  @include responsive-mixins.md {
+    padding: 24px 24px 32px;
+
+    .social-links {
+      grid-template-columns: repeat(6, 24px);
+    }
+  }
+
+  @include responsive-mixins.lg {
+    padding: 64px 24px 32px;
+    gap: 48px;
+
+    .contact-info {
+      gap: 24px;
+    }
+
+    .copyright-info {
+      display: inline;
+
+      &-delimiter {
+        display: inline;
+      }
+    }
+
+    .designed-by {
+      margin-top: 0;
+    }
+  }
+}

src/components/footer/footer.tsx

@@ -0,0 +1,50 @@
+import EpamLogo from "@/assets/epam-logo.svg?react";
+import { socialLinks } from "@/components/footer/footer.constants.ts";
+import "./footer.scss";
+
+export const Footer = () => {
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="footer">
+      <div className="social-info">
+        <h3 className="social-title">Get in touch</h3>
+        <div className="social-links">
+          {socialLinks.map(({ label, link, icon: Icon }) => (
+            <a
+              key={label}
+              href={link}
+              className="contact-link"
+              aria-label={label}
+              rel="noopener noreferrer"
+            >
+              <Icon width="24" height="24" />
+            </a>
+          ))}
+        </div>
+      </div>
+      <div className="contact-info">
+        <div className="contact-links">
+          <a href="/" className="contact-link">
+            Terms of use
+          </a>
+          <a href="/" className="contact-link">
+            Privacy policy
+          </a>
+          <a href="/" className="contact-link">
+            Contact us
+          </a>
+        </div>
+        <div className="copyright-info">
+          <span>© {currentYear} | Connect-Ed</span>
+          <span className="copyright-info-delimiter"> | </span>
+          <span>Все права защищены | [email protected]</span>
+        </div>
+        <div className="designed-by">
+          <span>Designed by</span>
+          <EpamLogo className="designed-by-logo" />
+        </div>
+      </div>
+    </footer>
+  );
+};

src/styles/_reset.scss

@@ -1,3 +1,7 @@
+html, body {
+  height: 100%;
+}
+
 *, *::before, *::after {
   box-sizing: border-box;
 }
@@ -30,4 +34,5 @@ ol, ul {
 
 #root {
   isolation: isolate;
+  height: 100%;
 }

src/vite-env.d.ts

@@ -1 +1,2 @@
 /// <reference types="vite/client" />
+/// <reference types="vite-plugin-svgr/client" />

vite.config.ts

@@ -1,10 +1,11 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import svgr from "vite-plugin-svgr";
 import path from 'path';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), svgr()],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src')