add metafest page

src/components/Homepage.jsx

@@ -1,10 +1,11 @@
 import { Button } from '@/components/Button';
 import { Container } from '@/components/Container';
 import { Gradient } from '@/components/Gradient';
+import { ChevronRightIcon } from '@heroicons/react/20/solid'
 
 export function Homepage() {
   return (
-    <Gradient className="pt-24 pb-10">
+    <Gradient className="pt-24 pb-24">
       <Container>
         {/* Background Video */}
         <video
@@ -19,7 +20,18 @@ export function Homepage() {
         </video>
 
         <div className="mx-auto max-w-xl lg:max-w-6xl">
-          <h1 className="font-display lg:max-w-2xl font-bold tracking-tighter text-blue-700 lg:text-7xl text-4xl">
+          <div className="mt-12 mb-6 lg:mt-16">
+                  <div className="inline-flex space-x-6">
+                    <span className="rounded-full bg-blue-700/10 px-3 py-1 text-sm font-semibold leading-6 text-blue-700 ring-1 ring-inset ring-indigo-600/10">
+                      What's new
+                    </span>
+                    <a href="/events/metafest" className="inline-flex items-center space-x-2 text-sm font-medium leading-6 text-blue-600 hover:text-blue-900">
+                    <span className="underline">Announcing MetaFest 2024</span>
+                    <ChevronRightIcon className="h-5 w-5 text-blue-700" aria-hidden="true" />
+                  </a>
+                  </div>
+          </div>
+          <h1 className="font-display lg:max-w-2xl font-bold tracking-tighter text-blue-700 lg:text-7xl text-5xl">
             A New, Vibrant Virtual World.
           </h1>
           <div className="lg:max-w-3xl max-w-2xl my-6 space-y-6 font-display font-medium lg:text-2xl text-xl tracking-tight text-blue-900">