add react-techs-logos and social links

package.json

@@ -18,7 +18,8 @@
     "react-dom": "^18.3.1",
     "react-i18next": "^15.0.3",
     "react-router-dom": "^6.27.0",
-    "react-scripts": "^5.0.1"
+    "react-scripts": "^5.0.1",
+    "react-techs-logos": "^0.1.22"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/base/AppSocial/index.js

@@ -0,0 +1,36 @@
+import React from "react";
+import ReactTechsLogos from "react-techs-logos";
+
+import "./style.scss";
+function AppSocial() {
+  return (
+    <div className="social-links" data-testid="app-social">
+      {/* <a
+        href="https://npmjs.com/package/slidecontent-react"
+        target="_blank"
+        rel="noreferrer"
+        className="tech-container"
+      >
+        <ReactTechsLogos name="npm" hiddenLabel />
+      </a> */}
+      <a
+        href="https://www.linkedin.com/in/lucasferreiralimax"
+        target="_blank"
+        rel="noreferrer"
+        className="tech-container"
+      >
+        <ReactTechsLogos name="linkedin" hiddenLabel />
+      </a>
+      <a
+        href="https://github.com/criar-art/slidecontent-react"
+        target="_blank"
+        rel="noreferrer"
+        className="tech-container"
+      >
+        <ReactTechsLogos name="github" hiddenLabel />
+      </a>
+    </div>
+  );
+}
+
+export default AppSocial;

src/components/base/AppSocial/style.scss

@@ -0,0 +1,24 @@
+.social-links {
+  max-width: 210px;
+  display: flex;
+  margin: 1rem auto;
+  gap: .4rem;
+  .tech-container figure {
+    width: 90px;
+    height: 90px;
+
+    background: transparent;
+    border: 1px solid var(--vtl-background);
+    border-radius: 100px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    transition: .3s all;
+
+    svg {
+      height: 50px;
+    }
+  }
+}

src/components/base/AppSocial/test.spec.js

@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+
+import AppSocial from ".";
+
+describe("Should render <AppSocial/>", () => {
+  beforeEach(() => {
+    render(
+      <BrowserRouter>
+        <AppSocial />
+      </BrowserRouter>
+    );
+  });
+  it("renders app-logo", () => {
+    expect(screen.getByTestId("app-social")).toBeInTheDocument();
+  });
+});

src/views/Home/index.js

@@ -10,12 +10,14 @@ import motorcycle from '../../assets/motorcycle.jpg';
 
 import SlideContent from '../../components/SlideContent/index.js';
 import SlideItem from '../../components/SlideItem/index.js';
+import AppSocial from '../../components/base/AppSocial/index.js';
 
 function Home() {
   const { t } = useTranslation();
   return (
     <section className='home' data-testid='view-home'>
-      <div className="example">
+      <AppSocial />
+      <div className="example first">
         <h2 className="slide-title">
           <svg width="60px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
             <path d="M315.712 334.4a236.543 236.543 0 0029.136 18.192l14.784-28.384a204.034 204.034 0 01-25.168-15.744L315.712 334.4z"/>

src/views/Home/style.scss

@@ -1,15 +1,15 @@
-@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");
 
 .example {
   padding-bottom: 6rem;
   padding-top: 2rem;
-  box-shadow: 0 15px 25px rgba(0, 0, 0, .06);
-
-  &:first-of-type {
-    margin-top: 2rem;
+  box-shadow: 0 15px 25px rgba(0, 0, 0, 0.06);
+  &.first {
     padding-top: 0;
     border-top: 1px solid #eee;
-    box-shadow: 0 15px 25px rgba(0, 0, 0, .06), 0 -5px 15px rgba(0, 0, 0, .02);
+    box-shadow:
+      0 15px 25px rgba(0, 0, 0, 0.06),
+      0 -5px 15px rgba(0, 0, 0, 0.02);
   }
 }
 
@@ -20,7 +20,7 @@ h3 {
   justify-content: center;
 
   svg {
-    margin-right: .5em;
+    margin-right: 0.5em;
   }
 }
 
@@ -41,7 +41,7 @@ h3 {
 
 .favela {
   h1 {
-    font-family: 'Great Vibes', cursive;
+    font-family: "Great Vibes", cursive;
   }
 
   img {