diff --git a/constants/colors.js b/constants/colors.js index 0c475c9..40aa8c7 100644 --- a/constants/colors.js +++ b/constants/colors.js @@ -3,6 +3,7 @@ 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"), @@ -10,6 +11,10 @@ const Colors = { soundcloudOrange: Color("#ff5500"), mixcloudBlue: Color("#5000ff"), beatportGreen: Color("#94cf1a"), + instagramPink: Color("#E1306C"), + facebookBlue: Color("#3b5998"), + twitterBlue: Color("#00acee"), + whatsappGreen: Color("#25d366"), }; export default Colors; \ No newline at end of file diff --git a/constants/globalStyles.js b/constants/globalStyles.js index f61f17b..6a2b9d2 100644 --- a/constants/globalStyles.js +++ b/constants/globalStyles.js @@ -6,6 +6,7 @@ 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()}; @@ -13,6 +14,10 @@ const GlobalStyle = createGlobalStyle` --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 index 444dfdf..1f84cde 100644 --- 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() {
{/* Logo Gandini Center @@ -39,7 +42,11 @@ function Home() {
{/* RIGHT ZONE */} -
+
{/* Title Section */}
@@ -52,6 +59,27 @@ function Home() { DJ / Musicalizador / Productor / Editor / Remixer / Radio Host / Ableton Teacher

+ {/* Social Media */} +
+ {/* Instagram */} + + + + + + {/* Facebook */} + + + + + + {/* Twitter */} + + + + + +
{/* Links Section */} @@ -111,12 +139,33 @@ function Home() { /> + {/* Footer */}
- BIOGRAFÍA + {/* Contacto */} +
+ {/* WhatsApp */} + + + + + + {/* Correo */} + + + + + +
+ {/* Descargar Biografia */} + + BIOGRAFÍA + + {/* Press Kit */} - PRESS KIT + PRESS KIT -

GANDINI MUSIC 2021

+ {/* Copyright */} +

GANDINI MUSIC 2021 ©

diff --git a/containers/home/styled.js b/containers/home/styled.js index f1d4298..709a38f 100644 --- 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 }; \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index ae1c3db..1428146 100644 --- a/package-lock.json +++ b/package-lock.json @@ -281,6 +281,66 @@ "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" }, + "@fortawesome/fontawesome": { + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome/-/fontawesome-1.1.8.tgz", + "integrity": "sha512-c0/MtkPVT0fmiFcCyYoPjkG9PkMOvfrZw2+0BaJ+Rh6UEcK1AR/LaRgrHHjUkbAbs9LXxQJhFS8CJ4uSnK2+JA==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.1.7" + }, + "dependencies": { + "@fortawesome/fontawesome-common-types": { + "version": "0.1.7", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz", + "integrity": "sha512-ego8jRVSHfq/iq4KRZJKQeUAdi3ZjGNrqw4oPN3fNdvTBnLCSntwVCnc37bsAJP9UB8MhrTfPnZYxkv2vpS4pg==" + } + } + }, + "@fortawesome/fontawesome-common-types": { + "version": "0.2.35", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz", + "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==" + }, + "@fortawesome/fontawesome-svg-core": { + "version": "1.2.35", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz", + "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.35" + } + }, + "@fortawesome/free-brands-svg-icons": { + "version": "5.15.3", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.3.tgz", + "integrity": "sha512-1hirPcbjj72ZJtFvdnXGPbAbpn3Ox6mH3g5STbANFp3vGSiE5u5ingAKV06mK6ZVqNYxUPlh4DlTnaIvLtF2kw==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.35" + } + }, + "@fortawesome/free-regular-svg-icons": { + "version": "5.15.3", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.3.tgz", + "integrity": "sha512-q4/p8Xehy9qiVTdDWHL4Z+o5PCLRChePGZRTXkl+/Z7erDVL8VcZUuqzJjs6gUz6czss4VIPBRdCz6wP37/zMQ==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.35" + } + }, + "@fortawesome/free-solid-svg-icons": { + "version": "5.15.3", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz", + "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==", + "requires": { + "@fortawesome/fontawesome-common-types": "^0.2.35" + } + }, + "@fortawesome/react-fontawesome": { + "version": "0.1.14", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz", + "integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==", + "requires": { + "prop-types": "^15.7.2" + } + }, "@hapi/accept": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/@hapi/accept/-/accept-5.0.1.tgz", @@ -1110,6 +1170,11 @@ "path-exists": "^4.0.0" } }, + "font-awesome": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/font-awesome/-/font-awesome-4.7.0.tgz", + "integrity": "sha1-j6jPBBGhoxr9B7BtKQK7n8gVoTM=" + }, "fsevents": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", diff --git a/package.json b/package.json index c2678f2..9399255 100644 --- 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 index 6c1fb51..8f19e58 100644 --- 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 }) { + /> diff --git a/public/Images/BackgroundRight.jpg b/public/Images/BackgroundLeft.jpg similarity index 100% rename from public/Images/BackgroundRight.jpg rename to public/Images/BackgroundLeft.jpg diff --git a/public/Images/BackgroundRight.png b/public/Images/BackgroundRight.png new file mode 100644 index 0000000..b8b1f42 Binary files /dev/null and b/public/Images/BackgroundRight.png differ