add community

src/components/Community.jsx

@@ -0,0 +1,97 @@
+const featuredPost = {
+    id: 1,
+    title: 'FutureFest 2024',
+    href: '#',
+    description:
+      'Embrace the possibilities at FutureFest 2024, a landmark event that invites you to explore the converging worlds of technology, creativity, and sustainability.',
+    date: 'Mar 16, 2020',
+    datetime: '2020-03-16',
+  }
+  const posts = [
+    {
+      id: 2,
+      title: 'Boost your conversion rate',
+      href: '#',
+      description:
+        'Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel iusto corrupti dicta laboris incididunt.',
+      date: 'Mar 10, 2020',
+      datetime: '2020-03-16',
+    },
+    {
+        id: 3,
+        title: 'Boost your conversion rate',
+        href: '#',
+        description:
+          'Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. Sed exercitationem placeat consectetur nulla deserunt vel iusto corrupti dicta laboris incididunt.',
+        date: 'Mar 10, 2020',
+        datetime: '2020-03-16',
+      },
+    // More posts...
+  ]
+  
+  export default function Example() {
+    return (
+      <div className="bg-white pt-12 pb-24">
+        <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-12 px-6 sm:gap-y-16 lg:grid-cols-2 lg:px-8">
+          <article className="mx-auto w-full max-w-2xl lg:mx-0 lg:max-w-lg">
+            <h2 className="text-base font-medium font-mono leading-7 text-blue-500">Community</h2>
+            <img
+                alt=""
+                src="/images/futurefest2.jpg"
+                className="mt-4 aspect-auto w-full rounded-2xl bg-gray-50 object-cover lg:aspect-auto lg:h-[20.5rem]"
+              />
+            <h2 id="featured-post" className="mt-8 text-3xl font-medium tracking-tight text-blue-700 sm:text-4xl">
+              {featuredPost.title}
+            </h2>
+            <time dateTime={featuredPost.datetime} className="mt-2 block text-sm leading-6 text-gray-600">
+            {featuredPost.date}
+            </time>
+            <p className="mt-2 text-lg leading-8 text-gray-600">{featuredPost.description}</p>
+            <div className="mt-4 flex flex-col justify-between gap-6 sm:mt-8 sm:flex-row-reverse sm:gap-8 lg:mt-4 lg:flex-col">
+              <div className="flex">
+                <a
+                  href={featuredPost.href}
+                  aria-describedby="featured-post"
+                  className="text-sm font-semibold leading-6 text-blue-700 mt-2"
+                >
+                  Learn More <span aria-hidden="true">&rarr;</span>
+                </a>
+              </div>
+
+            </div>
+          </article>
+          <div className="mx-auto w-full max-w-2xl border-t border-gray-900/10 pt-12 sm:pt-16 lg:mx-0 lg:max-w-none lg:border-t-0 lg:pt-0">
+            <div className="-my-12 divide-y divide-gray-900/10">
+              {posts.map((post) => (
+                <article key={post.id} className="py-12">
+                  <div className="group relative max-w-xl">
+                    <time dateTime={post.datetime} className="block text-sm leading-6 text-gray-600">
+                      {post.date}
+                    </time>
+                    <h2 className="mt-2 text-lg font-semibold text-blue-700 group-hover:text-blue-400">
+                      <a href={post.href}>
+                        <span className="absolute inset-0" />
+                        {post.title}
+                      </a>
+                    </h2>
+                    <p className="mt-4 text-sm leading-6 text-gray-600">{post.description}</p>
+                  </div>
+                  <div className="mt-4 flex">
+                  <a
+                  href={post.href}
+                  aria-describedby="post"
+                  className="text-sm font-semibold leading-6 text-blue-700 mt-2"
+                >
+                  Learn More <span aria-hidden="true">&rarr;</span>
+                </a>
+                  </div>
+                </article>
+                
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+  

src/components/Header.jsx

@@ -10,8 +10,8 @@ import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
 const navigationItems = [
   { name: 'Home', href: '/' },
   { name: 'Features', href: '#' },
-  { name: 'Usecases', href: '#' },
-  { name: 'Events', href: '#' },
+  { name: 'Usecases', href: 'usecases' },
+  { name: 'Community', href: '#' },
 ];
 
 export function Header() {
@@ -33,7 +33,7 @@ export function Header() {
           </div>
           <Button href="#">Join OurVerse</Button>
         </div>
-        <div className="lg:hidden flex items-center">
+        <div className="lg:hidden flex items-center bg-gradient">
           <button
             type="button"
             onClick={() => setMobileMenuOpen(true)}
@@ -70,7 +70,7 @@ export function Header() {
                 {item.name}
               </a>
             ))}
-            <Button href="#" className="mt-4">
+            <Button href="#" className="mt-4 bg-gradient">
               Join OurVerse
             </Button>
           </div>

src/components/Homepage.jsx

@@ -15,34 +15,34 @@ export function Homepage() {
           playsInline
           className="absolute inset-0 w-full h-full object-cover -z-10"
         >
-          <source src="/videos/ourverse1.mp4" type="video/mp4" />
+          <source src="/videos/ourverse4.mp4" type="video/mp4" />
           Your browser does not support the video tag.
         </video>
 
         <div className="mx-auto max-w-xl lg:max-w-6xl">
           <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">
+                    <span className="rounded-full bg-gradient-light px-3 py-1 text-sm font-semibold leading-6 font-blue1 ring-1 ring-inset ring-indigo-600/10">
                       What's new
                     </span>
-                    <a href="/events/versefest" className="inline-flex items-center space-x-2 text-sm font-medium leading-6 text-blue-500 hover:text-blue-900">
+                    <a href="/community/versefest" className="inline-flex items-center space-x-2 text-sm font-medium leading-6 font-blue1 hover:text-blue-900">
                     <span className="underline">Announcing: VerseFest 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">
+          <h1 className="font-display lg:max-w-2xl font-bold tracking-tighter font-gradient 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">
-            <p>Discover <span className='text-blue-700 font-semibold'>OurVerse</span>, a new virtual space designed for everyone, 
+          <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 font-blue2">
+            <p>Discover <span className='font-gradient font-semibold'>OurVerse</span>, a new virtual space designed for everyone, 
               where you can express yourself freely, build meaningful relationships,
               and explore endless possibilities in an environment that celebrates diversity and authenticity.</p>
           </div>
           <div className="mt-10 pb-8 flex items-center gap-x-6">
             <a
               href="#"
-              className="rounded-xl bg-blue-700 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
+              className="rounded-2xl bg-gradient px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500"
             >
               Join OurVerse
             </a>