Feature/location

components/LocationComponents/Location.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import s from './location.module.scss'
+
+const Location = () => {
+    const mapURL = "https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2925.0102182985875!2d74.61234881571123!3d42.85151741191504!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x389eb6383aeb06c3%3A0x7f9125f0f4e0f063!2zNDQg0YPQuy4g0JzQtdC00LXRgNC-0LLQsCwg0JHQuNGI0LrQtdC6!5e0!3m2!1sru!2skg!4v1675778174193!5m2!1sru!2skg"
+    return (
+        <>
+            <div className={s.container}>
+                <div className={s.content}>
+                    <h1>Расположение</h1>
+                    <div className={s.map}>
+                        <iframe
+                            className={s.iframe}
+                            src={mapURL}
+                            allowfullscreen=""
+                            loading="lazy"
+                            referrerpolicy="no-referrer-when-downgrade">
+                        </iframe>
+                    </div>
+                    <h2>Улица Медерова 44 / Жукеева Пудовкина</h2>
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default Location;

components/LocationComponents/location.module.scss

@@ -0,0 +1,40 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 100px 100px 0px 100px;
+  .content {
+    h1 {
+      font-family: "Sweet Mavka Script";
+      font-style: normal;
+      font-weight: 500;
+      font-size: 50px;
+      line-height: 73px;
+      text-align: center;
+      color: rgba(57, 56, 63, 0.8);
+      margin-bottom: 50px;
+    }
+    .map {
+      display: flex;
+      .iframe {
+        filter: drop-shadow(0px 0px 20px #c8b552);
+        border-radius: 20px;
+        width: 1184px;
+        height: 208px;
+        border: none;
+      }
+    }
+    h2 {
+      margin-top: 20px;
+      margin-bottom: 48px;
+      font-family: "Montserrat";
+      font-style: normal;
+      font-weight: 700;
+      font-size: 20px;
+      line-height: 24px;
+      text-align: center;
+      color: rgba(57, 56, 63, 0.8);
+    }
+  }
+}

pages/index.js

@@ -1,7 +1,7 @@
-import Head from 'next/head'
-import Image from 'next/image'
-import styles from '@/styles/Home.module.css'
-
+import Head from "next/head";
+import Image from "next/image";
+import styles from "@/styles/Home.module.css";
+import Location from "@/components/LocationComponents/Location";
 
 export default function Home() {
   return (
@@ -12,8 +12,8 @@ export default function Home() {
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      
-
+
+      <Location />
     </>
-  )
+  );
 }