English Page & Logo

.babelrc

@@ -0,0 +1,11 @@
+{
+    "presets": ["next/babel"],
+    "plugins": [
+      [
+        "styled-components",
+        {
+          "ssr": true
+        }
+      ]
+    ]
+  }

containers/home/home.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { HomeContainer } from "./styled";
+import { default as NextLink } from "next/link";
+
+function Home() {
+    return (
+        <HomeContainer>
+            <div className="leftDiv">
+                <img src="Logos/LogoGandini.svg" alt="Logo Gandini"/>
+            </div>
+            <div className="rightDiv">
+                <NextLink href="/">
+                    <a>ESP</a>
+                </NextLink>
+                <NextLink href="/english">
+                    <a>ENG</a>
+                </NextLink>
+            </div>
+        </HomeContainer>
+    );
+}
+
+export default Home;

containers/home/homeEN.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { HomeContainer } from "./styled";
+import { default as NextLink } from "next/link";
+
+function HomeEN() {
+    return (
+        <HomeContainer>
+            <div className="leftDiv">
+                <img src="Logos/LogoGandini.svg" alt="Logo Gandini"/>
+            </div>
+            <div className="rightDiv">
+                <NextLink href="/">
+                    <a>ESP</a>
+                </NextLink>
+                <NextLink href="/english">
+                    <a>ENG</a>
+                </NextLink>
+            </div>
+        </HomeContainer>
+    );
+}
+
+export default HomeEN;

containers/home/styled.js

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+
+const HomeContainer = styled.div`
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    flex-wrap: wrap;
+
+    .leftDiv {
+        width: 50%;
+        background-color: gray;
+        display: flex;
+        justify-content: center;
+    }
+
+    .rightDiv {
+        width: 50%; 	
+
+        a {
+            margin-right: 2%;
+            cursor: pointer;
+            color: green;
+        }
+    }
+
+    img {
+        width: 40%;
+        display: block;
+        margin: 0 auto;
+    }
+`;
+
+export { HomeContainer };

package.json

@@ -13,7 +13,10 @@
     "next": "10.0.9",
     "next-google-fonts": "^2.1.0",
     "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "react-dom": "^17.0.2",
     "styled-components": "^5.2.1"
+  },
+  "devDependencies": {
+    "babel-plugin-styled-components": "^1.12.0"
   }
 }

pages/english.js

@@ -0,0 +1,6 @@
+import React from "react";
+import HomeEN from "../containers/home/homeEN";
+
+export default function English() {
+  return <HomeEN />;
+}

pages/index.js

@@ -1,5 +1,5 @@
 import React from "react";
-import Home from "../containers/home";
+import Home from "../containers/home/home";
 
 export default function Index() {
   return <Home />;