Merge pull request #1 from VanJS/add-footer-for-contact

Add images, footer and adjust contact link.
VanJS · Aug 12, 2024 · a9ffa93 · a9ffa93
2 parents e366594 + 2a6b575
commit a9ffa93
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 1 deletion.
diff --git a/public/linkedin.svg b/public/linkedin.svg
diff --git a/public/meetup.svg b/public/meetup.svg
diff --git a/public/tickets.svg b/public/tickets.svg
diff --git a/src/app/page.js b/src/app/page.js
@@ -15,6 +15,7 @@ import StickerBanner from "@/components/sticker-banner/sticker-banner";
 export default function Home() {
   return (
     <div className="flex flex-col min-h-dvh">
+      {/* //Header */}
       <header className="sticky top-0 z-50 w-full border-b bg-[#FEB92F]">
         <div className="container flex items-center justify-between h-16 px-4 md:px-6">
           <Link
@@ -63,7 +64,7 @@ export default function Home() {
               Speakers
             </Link>
             <Link
-              href="#"
+              href="#footer-contact"
               className="hover:underline underline-offset-4"
               prefetch={false}
             >
@@ -450,6 +451,81 @@ export default function Home() {
           </div>
         </section>
       </main>
+      {/* Footer */}
+      <footer
+        id="footer-contact"
+        className="bottom-0 w-full border-b h-18 bg-[#FEB92F]"
+      >
+        <div className="container flex items-center justify-between	gap-8 h-16 p-4 md:px-8">
+          <Link
+            href="#"
+            className="flex items-center gap-2 text-lg font-semibold"
+            prefetch={false}
+          >
+            <Image
+              src="/VanJS.png"
+              alt="VanJS"
+              width={100}
+              height={64}
+              style={{
+                height: "64px",
+                objectFit: "cover",
+              }}
+            />
+          </Link>
+          <div className="flex items-center justify-end gap-8">
+            <Link
+              href="https://lu.ma/vanjs"
+              className="hover:underline hover:opacity-60 flex items-center gap-2 text-sm font-medium"
+              prefetch={false}
+            >
+              Get your tickets here:
+              <Image
+                src="/tickets.svg"
+                alt="tickets"
+                width={45}
+                height={45}
+                style={{
+                  borderRadius: 5,
+                  objectFit: "cover",
+                }}
+              />
+            </Link>
+            <Link
+              href="https://www.meetup.com/vancouver-javascript-developers/"
+              className="flex items-center hover:opacity-60 gap-2"
+              prefetch={false}
+            >
+              <Image
+                src="/meetup.svg"
+                alt="meetup"
+                width={45}
+                height={45}
+                style={{
+                  borderRadius: 5,
+                  objectFit: "cover",
+                }}
+              />
+            </Link>
+            <Link
+              href="https://www.linkedin.com/company/vancouverjs/"
+              className="flex items-center hover:opacity-60 gap-2"
+              prefetch={false}
+            >
+              <Image
+                src="/linkedin.svg"
+                alt="linkedin"
+                width={38}
+                height={38}
+                style={{
+                  borderRadius: 5,
+                  objectFit: "cover",
+                }}
+              />
+            </Link>
+          </div>
+        </div>
+      </footer>
     </div>
   );
 }