Social Media & Right Background & Footer

facundoezequiel · Mar 30, 2021 · 45cfbee · 45cfbee · vercel · Mar 30, 2021
1 parent f4ce8d8
commit 45cfbee
Show file tree

Hide file tree

Showing 9 changed files with 192 additions and 16 deletions.
diff --git a/constants/colors.js b/constants/colors.js
@@ -3,13 +3,18 @@ const Color = require("color-js");
 const Colors = {
   black: Color("#000000"),
   white: Color("#ffffff"),
+  red: Color("#ff0004"),
   youTubeRed: Color("#ff0000"),
   twitchPurple: Color("#6441a5"),
   spotifyGreen: Color("#1DB954"),
   bandcampBlue: Color("#1ea0c4"),
   soundcloudOrange: Color("#ff5500"),
   mixcloudBlue: Color("#5000ff"),
   beatportGreen: Color("#94cf1a"),
+  instagramPink: Color("#E1306C"),
+  facebookBlue: Color("#3b5998"),
+  twitterBlue: Color("#00acee"),
+  whatsappGreen: Color("#25d366"),
 };
 
 export default Colors;
diff --git a/constants/globalStyles.js b/constants/globalStyles.js
@@ -6,13 +6,18 @@ const GlobalStyle = createGlobalStyle`
     /* Colors */
     --black: ${Colors.black.toCSS()};
     --white: ${Colors.white.toCSS()};
+    --red: ${Colors.red.toCSS()};
     --youTubeRed: ${Colors.youTubeRed.toCSS()};
     --twitchPurple: ${Colors.twitchPurple.toCSS()};
     --spotifyGreen: ${Colors.spotifyGreen.toCSS()};
     --bandcampBlue: ${Colors.bandcampBlue.toCSS()};
     --soundcloudOrange: ${Colors.soundcloudOrange.toCSS()};
     --mixcloudBlue: ${Colors.mixcloudBlue.toCSS()};
     --beatportGreen: ${Colors.beatportGreen.toCSS()};
+    --instagramPink: ${Colors.instagramPink.toCSS()};
+    --facebookBlue: ${Colors.facebookBlue.toCSS()};
+    --twitterBlue: ${Colors.twitterBlue.toCSS()};
+    --whatsappGreen: ${Colors.whatsappGreen.toCSS()};
     /* Fonts */
     --poppins: "poppins" , -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }

diff --git a/containers/home/home.js b/containers/home/home.js
@@ -1,4 +1,7 @@
 import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEnvelope } from "@fortawesome/free-regular-svg-icons";
+import { faFacebookSquare, faInstagram, faTwitter, faWhatsapp } from "@fortawesome/free-brands-svg-icons";
 import { HomeContainer } from "./styled";
 import LinkButton from "../../components/linksButtons/index";
 import ReactTyped from "react-typed";
@@ -12,7 +15,7 @@ function Home() {
         <div
           id="backgroundSection"
           style={{
-            backgroundImage: `url(${"/Images/BackgroundRight.jpg"})`,
+            backgroundImage: `url(${"/Images/BackgroundLeft.jpg"})`,
           }}
         >
           {/* Logo Gandini Center 
@@ -39,7 +42,11 @@ function Home() {
         </div>
       </section>
       {/* RIGHT ZONE */}
-      <section className="rightZone">
+      <section className="rightZone"
+        style={{
+          backgroundImage: `url(${"/Images/BackgroundRight.png"})`,
+        }}
+      >
         <div id="rightZoneContainer">
           {/* Title Section */}
           <div id="TitleSection">
@@ -52,6 +59,27 @@ function Home() {
                 DJ / Musicalizador / Productor / Editor / Remixer / Radio Host /
                 Ableton Teacher
               </p>
+              {/* Social Media */}
+              <div id="socialMediaContainer">
+                {/* Instagram */}
+                <NextLink href="https://www.instagram.com/gandinimusic/">
+                  <a target="blank" id="instagram">
+                    <FontAwesomeIcon icon={faInstagram} />
+                  </a>
+                </NextLink>
+                {/* Facebook */}
+                <NextLink href="https://www.facebook.com/gandinimusic">
+                  <a target="blank" id="facebook">
+                    <FontAwesomeIcon icon={faFacebookSquare} />
+                  </a>
+                </NextLink>
+                {/* Twitter */}
+                <NextLink href="https://twitter.com/gandinimusic">
+                  <a target="blank" id="twitter">
+                    <FontAwesomeIcon icon={faTwitter} />
+                  </a>
+                </NextLink>
+              </div>
             </div>
           </div>
           {/* Links Section */}
@@ -111,12 +139,33 @@ function Home() {
               />
             </div>
           </div>
+          {/* Footer */}
           <div id="footerContainer">
-            <a href="/Biografia/Biografia.txt" download>BIOGRAFÍA</a>
+            {/* Contacto */}
+            <div id="contactoContainer">
+              {/* WhatsApp */}
+              <NextLink href="https://api.whatsapp.com/send?phone=5491141787425">
+                <a target="blank" id="whatsapp">
+                  <FontAwesomeIcon icon={faWhatsapp} />
+                </a>
+              </NextLink>
+              {/* Correo */}
+              <NextLink href="mailto:[email protected]">
+                <a target="_self" id="mail">
+                  <FontAwesomeIcon icon={faEnvelope} />
+                </a>
+              </NextLink>
+            </div>
+            {/* Descargar Biografia */}
+            <a href="/Biografia/Biografia.txt" id="biografia" download>
+              BIOGRAFÍA
+            </a>
+            {/* Press Kit */}
             <NextLink href="https://www.dropbox.com/s/wqu0yu070a0j3ye/Gandini%20Presskit.zip?dl=0">
-              <a target="blank">PRESS KIT</a>
+              <a target="blank" id="presskit">PRESS KIT</a>
             </NextLink>
-            <p>GANDINI MUSIC 2021</p>
+            {/* Copyright */}
+            <p>GANDINI MUSIC 2021 ©</p>
           </div>
         </div>
       </section>

diff --git a/containers/home/styled.js b/containers/home/styled.js
@@ -54,17 +54,13 @@ const HomeContainer = styled.div`
     /* RIGHT ZONE */
     .rightZone {
         width: 50%; 	
-        background: rgba(0,0,0,1);
-        background: -moz-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(77,77,77,1) 100%);
-        background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(0,0,0,1)), color-stop(100%, rgba(77,77,77,1)));
-        background: -webkit-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(77,77,77,1) 100%);
-        background: -o-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(77,77,77,1) 100%);
-        background: -ms-linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(77,77,77,1) 100%);
-        background: linear-gradient(45deg, rgba(0,0,0,1) 0%, rgba(77,77,77,1) 100%);
-        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#4d4d4d', GradientType=1 );
+        background-color: gray;
         display: flex;
         justify-content: center;
         position: relative;
+        background-position: right;
+        background-repeat: no-repeat;
+        background-size: cover;
     }
 
     #rightZoneContainer {
@@ -101,6 +97,27 @@ const HomeContainer = styled.div`
         text-align: left;
     }
 
+    #socialMediaContainer {
+        margin-top: 3%;
+    }
+
+    #socialMediaContainer a {
+        margin-right: 1.8%;
+        font-size: 1.5em;
+        transition: 0.2s all;
+        color: var(--black);
+    }
+
+    #instagram:hover {
+        color: var(--instagramPink)!important;
+    }
+    #facebook:hover {
+        color: var(--facebookBlue)!important;
+    }
+    #twitter:hover {
+        color: var(--twitterBlue)!important;
+    }
+
     /* Links Buttons */
     #LinksSection {
         width: 100%;
@@ -151,14 +168,41 @@ const HomeContainer = styled.div`
         width: 100%;
         display: flex;
         flex-wrap: wrap;
-        justify-content: space-between;
+        justify-content: left;
+        align-items: center;
     }
 
-    #footerContainer a {
+    #footerContainer a, #footerContainer p {
         color: var(--black);
         font-family: var(--poppins);
         text-align: left;
     }
+
+    #biografia, #presskit {
+        margin-right: 8%;
+    }
+
+    /* Contacto */
+    #contactoContainer {
+        display: flex;
+        margin-right: 8%;
+        align-items: center;
+    }
+
+    #contactoContainer a {
+        margin-right: 25%;
+        font-size: 1.5em;
+        transition: 0.2s all;
+        color: var(--black);
+    }
+
+    /* Contacto Hover */
+    #whatsapp:hover {
+        color: var(--whatsappGreen)!important;
+    }
+    #mail:hover {
+        color: var(--red)!important;
+    }
 `;
 
 export { HomeContainer };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,9 +8,16 @@
     "start": "next start"
   },
   "dependencies": {
+    "@fortawesome/fontawesome": "^1.1.8",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-brands-svg-icons": "^5.15.3",
+    "@fortawesome/free-regular-svg-icons": "^5.15.3",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "animate.css": "^4.1.1",
     "color": "^3.1.3",
     "color-js": "^1.0.5",
+    "font-awesome": "^4.7.0",
     "next": "10.0.9",
     "next-google-fonts": "^2.1.0",
     "react": "17.0.2",

diff --git a/pages/_app.js b/pages/_app.js
@@ -2,6 +2,7 @@ import '../styles/globals.css'
 import React from "react";
 import Head from "next/head";
 import GlobalStyles from "../constants/globalStyles";
+import "@fortawesome/fontawesome-svg-core/styles.css";
 
 function MyApp({ Component, pageProps }) {
   return (
@@ -11,7 +12,7 @@ function MyApp({ Component, pageProps }) {
         <link
           rel="stylesheet"
           href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
-        />
+        />   
       </Head>
       <Component {...pageProps} />
       <GlobalStyles />

diff --git a/public/Images/BackgroundRight.jpg → public/Images/BackgroundLeft.jpg b/public/Images/BackgroundRight.jpg → public/Images/BackgroundLeft.jpg
diff --git a/public/Images/BackgroundRight.png b/public/Images/BackgroundRight.png