Merge pull request #103 from neontribe/102-add-bluesky

feat: add bluesky link
neontribe · Sep 9, 2024 · 8fd792a · 8fd792a
2 parents 665b83c + df6537d
commit 8fd792a
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 50 deletions.
diff --git a/app/components/PageHeader/PageHeader.tsx b/app/components/PageHeader/PageHeader.tsx
@@ -13,19 +13,28 @@ const PageHeader = () => {
         />
       </div>
 
-      <div className="twitter-container">
-        <Image
-          className="twitter-image"
-          src="twitter-icon.svg"
-          width={35}
-          height={35}
-          alt="Twitter"
-        />
+      <div className="social-media-container">
+        <a
+          href="https://bsky.app/profile/ukcharitycamp.bsky.social"
+          target="_blank"
+        >
+          <Image
+            className="social-media-image"
+            src="blue-sky-logo.svg"
+            width={40}
+            height={35}
+            alt="Navigates to Neontribe's BlueSky page"
+          />
+        </a>
 
-        <p className="twitter-cta-text">
+        <p className="social-media-cta-text">
           Follow us on{" "}
-          <a href="https://twitter.com/ukcharitycamp" className="twitter-link">
-            Twitter
+          <a
+            href="https://bsky.app/profile/ukcharitycamp.bsky.social"
+            target="_blank"
+            className="social-media-link"
+          >
+            BlueSky
           </a>{" "}
           for updates
         </p>

diff --git a/app/page.css b/app/page.css
@@ -166,29 +166,40 @@
   margin: 1.5rem clamp(0.5rem, calc(-3rem + 11.09vw), 4rem);
 }
 
-.twitter-container {
+.social-media-container {
   display: none;
 }
-.twitter-mobile-container {
+.social-media-mobile-container {
   display: flex;
   margin-top: 2rem;
   align-items: center;
 }
 
-.twitter-cta-text {
+.social-media-cta-text {
   font-size: var(--small);
 }
 
-.twitter-link {
+.social-media-link {
   text-decoration: none;
   border-bottom: var(--c-white) 0.01rem solid;
   color: var(--c-white);
 }
 
-.twitter-image {
+
+.social-media-link:hover {
+  border-bottom: var(--c-reddish-orange) 0.01rem solid;
+  color: var(--c-reddish-orange);
+  transition: 0.3s;
+}
+
+.social-media-image {
   margin-right: 1rem;
 }
 
+.social-media-image:active {
+  outline: dashed white;
+
+}
 .link {
   color: var(--c-white);
 }
@@ -212,11 +223,11 @@
 }
 
 @media (min-width: 1000px) {
-  .twitter-container {
+  .social-media-container {
     display: flex;
     align-items: center;
   }
-  .twitter-mobile-container {
+  .social-media-mobile-container {
     display: none;
   }
 }
@@ -248,7 +259,7 @@
     width: 100%;
   }
 
-  .twitter-cta-text {
+  .social-media-cta-text {
     font-size: var(--m-small);
   }
 

diff --git a/app/page.tsx b/app/page.tsx
@@ -5,7 +5,6 @@ import "./page.css";
 import PageHeader from "./components/PageHeader/PageHeader";
 import Sponsors from "./components/Sponsors/Sponsors";
 export default function Home() {
-
   return (
     <>
       <PageHeader />
@@ -42,39 +41,51 @@ export default function Home() {
                 />
               </div>
               <div>
-                <h2 className="date-heading">28/11/2024  <a href="https://thestudio.co.uk/venues/birmingham/">The Studio, Birmingham</a>
+                <h2 className="date-heading">
+                  28/11/2024{" "}
+                  <a href="https://thestudio.co.uk/venues/birmingham/">
+                    The Studio, Birmingham
+                  </a>
                 </h2>
               </div>
             </div>
 
-            <a className="tickets" href="https://www.eventbrite.co.uk/e/ukcharitycamp-2024-tickets-940310844047">
+            <a
+              className="tickets"
+              href="https://www.eventbrite.co.uk/e/ukcharitycamp-2024-tickets-940310844047"
+            >
               Get tickets
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-                <path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"/>
+                <path d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" />
               </svg>
             </a>
 
-            <div className="twitter-mobile-container">
-              <Image
-                className="twitter-image"
-                src="twitter-icon.svg"
-                width={35}
-                height={35}
-                alt="Twitter"
-              />
-
+            <div className="social-media-mobile-container">
+              <a
+                href="https://bsky.app/profile/ukcharitycamp.bsky.social"
+                target="_blank"
 
-                <p className="twitter-cta-text">
+              >
+                <Image
+                  className="social-media-image"
+                  src="blue-sky-logo.svg"
+                  width={40}
+                  height={35}
+                  alt="Navigates to Neontribe's Bluesky page"
+                />
+              </a>
+
+              <p className="social-media-cta-text">
                 Follow us on{" "}
                 <a
-                  href="https://twitter.com/ukcharitycamp"
-                  className="twitter-link"
+                  href="https://bsky.app/profile/ukcharitycamp.bsky.social"
+                  target="_blank"
+                  className="social-media-link"
                 >
-                  X
+                  BlueSky
                 </a>{" "}
                 for updates
-                </p>
-
+              </p>
             </div>
           </div>
 
@@ -93,18 +104,16 @@ export default function Home() {
                 Diverse experiences made for a better event.
               </p>
 
-
-                <p>
-                  The{" "}
-                  <a
-                    className="link"
-                    href="https://docs.google.com/spreadsheets/d/1Ar4fC1wVAhYSz2gYn61pvh3OD2TPfT4oh8rLg4PAH7w/edit#gid=0"
-                  >
-                    agenda was worked out at the event
-                  </a>
-                  , by the people who were there.
-                </p>
-
+              <p>
+                The{" "}
+                <a
+                  className="link"
+                  href="https://docs.google.com/spreadsheets/d/1Ar4fC1wVAhYSz2gYn61pvh3OD2TPfT4oh8rLg4PAH7w/edit#gid=0"
+                >
+                  agenda was worked out at the event
+                </a>
+                , by the people who were there.
+              </p>
 
               <p>It was a genuinely inspiring day.</p>
               <blockquote className="quote">

diff --git a/public/blue-sky-logo.svg b/public/blue-sky-logo.svg