✨ Add Instagram Link to index page (#75)

* ✨ Add Instagram Link to index page * Center Instagram component * Center ButtonLinks on index
fre-ben · Mar 21, 2022 · aa9babd · aa9babd · vercel · Mar 21, 2022
1 parent edba6dc
commit aa9babd
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 2 deletions.
diff --git a/src/components/social/Instagram.tsx b/src/components/social/Instagram.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+
+function Instagram() {
+  return (
+    <section className="mt-10">
+      <a
+        target="_blank"
+        rel="noreferrer"
+        href="https://www.instagram.com/moritz_harfen/"
+        className="flex flex-col items-center gap-y-2"
+        title="Link zu moritz harfen auf Instagram"
+      >
+        <svg
+          width="64"
+          height="64"
+          viewBox="0 0 24 24"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className="hover:text-highlight transition-colors text-highlight text-opacity-60"
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7ZM9 12C9 13.6569 10.3431 15 12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12Z"
+            fill="currentColor"
+          />
+          <path
+            d="M18 5C17.4477 5 17 5.44772 17 6C17 6.55228 17.4477 7 18 7C18.5523 7 19 6.55228 19 6C19 5.44772 18.5523 5 18 5Z"
+            fill="currentColor"
+          />
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M5 1C2.79086 1 1 2.79086 1 5V19C1 21.2091 2.79086 23 5 23H19C21.2091 23 23 21.2091 23 19V5C23 2.79086 21.2091 1 19 1H5ZM19 3H5C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3Z"
+            fill="currentColor"
+          />
+        </svg>
+        <p>moritz harfen auf Instagram</p>
+      </a>
+    </section>
+  );
+}
+
+export default Instagram;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -6,6 +6,7 @@ import Content from "../components/Content";
 import LeaderDisclaimer from "../components/leaderDisclaimer/LeaderDisclaimer";
 import { Helmet } from "react-helmet";
 import newLogo from "../images/new_logo.svg";
+import Instagram from "../components/social/Instagram";
 
 const IndexPage = () => {
   return (
@@ -24,7 +25,7 @@ const IndexPage = () => {
       <Navbar />
       <Content flow="row" headline="">
         <div
-          className="grid px-0 sm:px-5 justify-items-start sm:justify-items-center pb-16 pt-16 lg:pb-28 lg:pt-28"
+          className="grid px-0 sm:px-5 justify-items-center pb-16 pt-16 lg:pb-28 lg:pt-28"
           style={{
             backgroundImage: `linear-gradient(rgba(230, 230, 230, 0.8), rgba(230, 230, 230, 0.8)), url(${newLogo})`,
             backgroundPosition: "center",
@@ -37,11 +38,12 @@ const IndexPage = () => {
             <br />– ehemals <strong>„Atelier für keltische Harfen“</strong> von
             Albrecht Nüchter.
           </p>
-          <div className="grid grid-flow-col auto-cols-min place-items-center gap-x-20 lg:gap-x-40">
+          <div className="grid grid-flow-col auto-cols-min place-items-center gap-x-16 sm:gap-x-20 lg:gap-x-40">
             <ButtonLink destination="harfen" label="Harfen" primary={true} />
             <ButtonLink destination="kontakt" label="Kontakt" primary={true} />
           </div>
         </div>
+        <Instagram />
         <LeaderDisclaimer />
       </Content>
     </Layout>