add new component

.next/app-build-manifest.json

@@ -21,11 +21,46 @@
       "static/chunks/main-app.js",
       "static/chunks/app/not-found.js"
     ],
+    "/community/page": [
+      "static/chunks/webpack.js",
+      "static/chunks/main-app.js",
+      "static/chunks/app/community/page.js"
+    ],
+    "/community/layout": [
+      "static/chunks/webpack.js",
+      "static/chunks/main-app.js",
+      "static/chunks/app/community/layout.js"
+    ],
+    "/community/blogs/herogpt/page": [
+      "static/chunks/webpack.js",
+      "static/chunks/main-app.js",
+      "static/chunks/app/community/blogs/herogpt/page.js"
+    ],
     "/_not-found/page": [
       "static/chunks/webpack.js",
       "static/chunks/main-app.js",
       "static/chunks/app/_not-found/page.js"
     ],
+    "/features/page": [
+      "static/chunks/webpack.js",
+      "static/chunks/main-app.js",
+      "static/chunks/app/features/page.js"
+    ],
+    "/features/layout": [
+      "static/chunks/webpack.js",
+      "static/chunks/main-app.js",
+      "static/chunks/app/features/layout.js"
+    ],
+    "/events/blockchainweek1/page": [
+      "static/chunks/webpack.js",
+      "static/chunks/main-app.js",
+      "static/chunks/app/events/blockchainweek1/page.js"
+    ],
+    "/events/layout": [
+      "static/chunks/webpack.js",
+      "static/chunks/main-app.js",
+      "static/chunks/app/events/layout.js"
+    ],
     "/usecases/page": [
       "static/chunks/webpack.js",
       "static/chunks/main-app.js",
@@ -36,40 +71,10 @@
       "static/chunks/main-app.js",
       "static/chunks/app/usecases/layout.js"
     ],
-    "/community/events/versefest/page": [
+    "/events/versefest/page": [
       "static/chunks/webpack.js",
       "static/chunks/main-app.js",
-      "static/chunks/app/community/events/versefest/page.js"
+      "static/chunks/app/events/versefest/page.js"
-    ],
-    "/community/layout": [
-      "static/chunks/webpack.js",
-      "static/chunks/main-app.js",
-      "static/chunks/app/community/layout.js"
-    ],
-    "/features/page": [
-      "static/chunks/webpack.js",
-      "static/chunks/main-app.js",
-      "static/chunks/app/features/page.js"
-    ],
-    "/community/page": [
-      "static/chunks/webpack.js",
-      "static/chunks/main-app.js",
-      "static/chunks/app/community/page.js"
-    ],
-    "/community/blogs/herogpt/page": [
-      "static/chunks/webpack.js",
-      "static/chunks/main-app.js",
-      "static/chunks/app/community/blogs/herogpt/page.js"
-    ],
-    "/features/layout": [
-      "static/chunks/webpack.js",
-      "static/chunks/main-app.js",
-      "static/chunks/app/features/layout.js"
-    ],
-    "/community/events/blockchainweek1/page": [
-      "static/chunks/webpack.js",
-      "static/chunks/main-app.js",
-      "static/chunks/app/community/events/blockchainweek1/page.js"
     ]
   }
 }

.next/build-manifest.json

@@ -2,7 +2,9 @@
   "polyfillFiles": [
     "static/chunks/polyfills.js"
   ],
-  "devFiles": [],
+  "devFiles": [
+    "static/chunks/react-refresh.js"
+  ],
   "ampDevFiles": [],
   "lowPriorityFiles": [
     "static/development/_buildManifest.js",
@@ -13,7 +15,16 @@
     "static/chunks/main-app.js"
   ],
   "pages": {
-    "/_app": []
+    "/_app": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/_app.js"
+    ],
+    "/_error": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/_error.js"
+    ]
   },
   "ampFirstPages": []
 }

.next/cache/fetch-cache/tags-manifest.json

@@ -1 +0,0 @@
-{"version":1,"items":{"":{"revalidatedAt":1726233380023}}}

.next/server/app-paths-manifest.json

@@ -1,8 +1,8 @@
 {
-  "/_not-found/page": "app/_not-found/page.js",
-  "/community/page": "app/community/page.js",
   "/(main)/page": "app/(main)/page.js",
-  "/community/events/blockchainweek1/page": "app/community/events/blockchainweek1/page.js",
+  "/community/page": "app/community/page.js",
+  "/community/blogs/herogpt/page": "app/community/blogs/herogpt/page.js",
   "/features/page": "app/features/page.js",
+  "/events/versefest/page": "app/events/versefest/page.js",
   "/usecases/page": "app/usecases/page.js"
 }

.next/server/middleware-build-manifest.js

@@ -2,7 +2,9 @@ self.__BUILD_MANIFEST = {
   "polyfillFiles": [
     "static/chunks/polyfills.js"
   ],
-  "devFiles": [],
+  "devFiles": [
+    "static/chunks/react-refresh.js"
+  ],
   "ampDevFiles": [],
   "lowPriorityFiles": [],
   "rootMainFiles": [
@@ -10,7 +12,16 @@ self.__BUILD_MANIFEST = {
     "static/chunks/main-app.js"
   ],
   "pages": {
-    "/_app": []
+    "/_app": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/_app.js"
+    ],
+    "/_error": [
+      "static/chunks/webpack.js",
+      "static/chunks/main.js",
+      "static/chunks/pages/_error.js"
+    ]
   },
   "ampFirstPages": []
 };

.next/server/pages-manifest.json

@@ -1 +1,5 @@
-{}
+{
+  "/_app": "pages/_app.js",
+  "/_error": "pages/_error.js",
+  "/_document": "pages/_document.js"
+}

.next/server/server-reference-manifest.json

@@ -1,5 +1,5 @@
 {
   "node": {},
   "edge": {},
-  "encryptionKey": "AfJTeTDeByhBhe12YRRp12op4M+c/QEV/s/QZO5Rok4="
+  "encryptionKey": "vVBSLDs3CtXMddY5+HcznuMil1vtkowq2q503Olabrw="
 }

.next/server/webpack-runtime.js

@@ -125,7 +125,7 @@
 /******/ 	
 /******/ 	/* webpack/runtime/getFullHash */
 /******/ 	(() => {
-/******/ 		__webpack_require__.h = () => ("e20f2e3ebef32ad0")
+/******/ 		__webpack_require__.h = () => ("cc839ecb48d810e7")
 /******/ 	})();
 /******/ 	
 /******/ 	/* webpack/runtime/hasOwnProperty shorthand */

package-lock.json

@@ -14,6 +14,7 @@
         "@tailwindcss/forms": "^0.5.9",
         "autoprefixer": "^10.4.12",
         "clsx": "^2.1.0",
+        "framer-motion": "^11.5.6",
         "next": "^14.2.11",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -2673,6 +2674,31 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.5.6",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.5.6.tgz",
+      "integrity": "sha512-JMwUpAxv/DWgul9vPgX0ElKn0G66sUc6O9tOXsYwn3zxwvhxFljSXC0XT2QCzuTYBshwC8nyDAa1SYcV0Ldbhw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",

package.json

@@ -16,6 +16,7 @@
     "@tailwindcss/forms": "^0.5.9",
     "autoprefixer": "^10.4.12",
     "clsx": "^2.1.0",
+    "framer-motion": "^11.5.6",
     "next": "^14.2.11",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/app/(main)/page.jsx

@@ -2,9 +2,8 @@ import { Homepage } from '@/components/Homepage'
 import { Hero } from '@/components/Hero'
 import Events from '@/components/Events'
 import { Product } from '@/components/Product'
-import Allfeatures from '@/components/Allfeatures'
-import Featureshome from '@/components/Featureshome'
 import { Sponsors } from '@/components/Sponsors'
+import BentoSection from '@/components/Bentosection'
 
 export default function Home() {
   return (
@@ -12,7 +11,7 @@ export default function Home() {
       <Homepage />
       <Sponsors />
       <Hero />
-      <Featureshome />
+      <BentoSection />
       <Product />
       <Events />
     </>

src/app/events/layout.jsx

@@ -0,0 +1,5 @@
+import { Layout } from '@/components/Layout'
+
+export default function EventsLayout({ children }) {
+  return <Layout>{children}</Layout>
+}

src/app/events/page.jsx

@@ -0,0 +1,19 @@
+import Usecases from '@/components/Usecases'
+import Banner from '@/components/Banner'
+import Communhero from '@/components/Communhero'
+import Commevents from '@/components/Commevents'
+import Events from '@/components/Events'
+import Socials from '@/components/Socials'
+import Blogposts from '@/components/Blogposts'
+
+export default function events() {
+    return (
+      <>
+        <Communhero />
+        <Socials />
+        <Events />
+        <Blogposts />
+
+        </>
+  )
+}

src/components/Banner.jsx

@@ -4,7 +4,7 @@ export default function Example() {
   return (
     <div className="flex items-center gap-x-6 btn-gradient-dark px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
       <p className="text-sm leading-6 text-white">
-        <a href="/community/events/versefest">
+        <a href="/events/versefest">
           <strong className="font-semibold">OurVerse FutureFest 2024</strong>
           <svg viewBox="0 0 2 2" aria-hidden="true" className="mx-2 inline h-0.5 w-0.5 fill-current">
             <circle r={1} cx={1} cy={1} />

src/components/Bentosection.jsx

@@ -0,0 +1,129 @@
+'use client'
+
+import { clsx } from 'clsx'
+import { motion } from 'framer-motion'
+import { Subheading } from './text'
+import { Container } from './Container'
+
+
+export default function BentoSection() {
+  function BentoCard({
+    dark = false,
+    className = '',
+    eyebrow,
+    title,
+    description,
+    graphic,
+    fade = [],
+    link = '/',
+  }) {
+    return (
+      <motion.div
+        initial="idle"
+        whileHover="active"
+        variants={{ idle: {}, active: {} }}
+        data-dark={dark ? 'true' : undefined}
+        className={clsx(
+          className,
+          'group relative flex flex-col overflow-hidden rounded-lg',
+          'bg-white shadow-sm ring-1 ring-black/5',
+          'data-[dark]:bg-gray-800 data-[dark]:ring-white/15',
+        )}
+      >
+        <div className="relative h-80 pb-20 shrink-0">
+          {graphic}
+          {fade.includes('top') && (
+            <div className="absolute inset-0 bg-gradient-to-b from-white to-50% group-data-[dark]:from-gray-800 group-data-[dark]:from-[-25%]" />
+          )}
+          {fade.includes('bottom') && (
+            <div className="absolute inset-0 bg-gradient-to-t from-white to-50% group-data-[dark]:from-gray-800 group-data-[dark]:from-[-25%]" />
+          )}
+        </div>
+        <div className="relative p-10">
+          <Subheading as="h3" dark={dark}>
+            {eyebrow}
+          </Subheading>
+          <p className="mt-1 text-2xl/8 font-medium tracking-tight text-gradient-dark group-data-[dark]:text-white">
+            {title}
+          </p>
+          <p className="mt-2 max-w-[600px] text-sm/6 text-gray-600 group-data-[dark]:text-gray-400">
+            {description}
+          </p>
+          <a href={link} className="lg:text-xs mt-4 text-sm font-mono text-cyan-600  hover:text-purple-600">
+                    Learn More <span aria-hidden="true">→</span>
+         </a>
+        </div>
+      </motion.div>
+    )
+  }
+
+  return (
+    <Container>
+        <div className="relative pt-24 z-10 mx-auto max-w-2xl lg:mx-0 lg:max-w-5xl lg:pr-24">
+          <h2 className="text-base font-medium font-mono leading-7 text-cyan-700">Features</h2>
+          <h2 className="mt-2  h3-title">
+            Collaboration & Creation Tools
+          </h2>
+          <p className="mt-4 section-text">
+          Transform how you and your team work together with our innovative, real-time creative tools.
+          </p>
+        </div>
+      <div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
+        <BentoCard
+          eyebrow="Creativity"
+          title="3D Collaboration Tools"
+          description="Transform how you and your team work together with our innovative, real-time creative tools."
+          graphic={
+            <div className="h-80 bg-[url(/images/collaborate.jpg)] bg-cover bg-center bg-no-repeat" />
+          }
+          fade={['bottom']}
+          className="max-lg:rounded-t-4xl lg:col-span-3 lg:rounded-tl-4xl"
+          link="/features"
+        />
+        <BentoCard
+          eyebrow="Connected Experiences"
+          title="OurVerse Studio"
+          description="Elevate your virtual conferences with cutting-edge communication features designed to keep your audience connected and engaged."
+          graphic={
+            <div className="h-80 bg-[url(/images/studio.jpg)] bg-cover bg-center bg-no-repeat" />
+          }
+          fade={['bottom']}
+          className="lg:col-span-3 lg:rounded-tr-4xl"
+          link="/features"
+        />
+        <BentoCard
+          eyebrow="3D Modeling"
+          title="Verse Builder Pro"
+          description="Create and customize your virtual world with powerful tools that make building and managing your digital space easy and intuitive."
+          graphic={
+            <div className="h-80 bg-[url(/images/builder.jpg)] bg-cover bg-center bg-no-repeat" />
+          }
+          fade={['bottom']}
+          className="lg:col-span-2 lg:rounded-bl-4xl"
+        />
+        <BentoCard
+          eyebrow="Next-Gen Interactions"
+          title="Virtual Meeting Tools"
+          description="Elevate your virtual interactions with cutting-edge communication features designed to keep you connected and engaged.."
+          graphic={
+            <div className="h-80 bg-[url(/images/communicate.jpg)] bg-cover bg-center bg-no-repeat" />
+          }
+          fade={['bottom']}
+          className="lg:col-span-2"
+          link="/features"
+        />
+        <BentoCard
+          eyebrow="Business Platform"
+          title="Integrated CRM"
+          description="Manage customer interactions, tasks, and meetings seamlessly in one platform, helping your business transition smoothly to the digital landscape."
+          graphic={
+            <div className="h-80 bg-[url(/images/crm.png)] bg-cover bg-center bg-no-repeat" />
+          }
+          fade={['bottom']}
+          className="max-lg:rounded-b-4xl lg:col-span-2 lg:rounded-br-4xl"
+          link="/features"
+        />
+      </div>
+    </Container>
+  )
+}

src/components/Events.jsx

@@ -1,7 +1,7 @@
 const featuredPost = {
     id: 1,
     title: 'FutureFest 2024',
-    href: '/community/events/versefest',
+    href: '/events/versefest',
     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',
@@ -11,7 +11,7 @@ const featuredPost = {
     {
       id: 2,
       title: 'Building a Metaverse with Revenue: Insights from Arab Meta Summit 2022 Day 2',
-      href: '/community/events/blockchainweek1',
+      href: '/events/blockchainweek1',
       description:
         'At the Arab Meta Summit 2022, Christopher K, co-founder and CEO of Aviva Technologies, shared valuable insights on how to build a successful and revenue-generating metaverse.',
       date: 'Dec 21, 2022',
@@ -20,7 +20,7 @@ const featuredPost = {
     {
         id: 3,
         title: 'Real-World Applications of the Metaverse in AR: Insights from Omrei Abu Madi at the Arab Meta Summit 2022',
-        href: '/community/events/blockchainweek2',
+        href: '/events/blockchainweek2',
         description:
           'During Day 1 of the Arab Meta Summit 2022, Omrei Abu Madi, a visionary in both the tech and tourism industries, discussed the real-world applications of the Metaverse, particularly focusing on Augmented Reality (AR).',
         date: 'Dec 18, 2022',

src/components/Hero.jsx

@@ -6,35 +6,35 @@ const timeline = [
   {
     name: 'Early Online Collaboration',
     description:
-      'In the early days, digital collaboration was limited to basic tools like email and simple chat platforms. Communication was often slow, and interactions were minimal, making it challenging for teams to work effectively across distances.',
+      'In the early days, digital collaboration was limited to basic tools like email and simple chat platforms. Communication was often slow, and interactions were minimal.',
     date: 'Phase I',
     dateTime: '2021-08',
   },
   {
     name: 'The Rise of Video Conferencing',
     description:
-      'With the advent of video conferencing tools like Zoom and Microsoft Teams, people could interact face-to-face online. This brought teams closer, but still lacked the feeling of truly being together and required reliable internet access.',
+      'With the advent of video conferencing tools like Zoom and Microsoft Teams, people could interact face-to-face online.',
     date: 'Phase II',
     dateTime: '2021-12',
   },
   {
     name: 'Persistent Barriers',
     description:
-      'Despite technological advances, many still struggle to meet and collaborate due to lack of access to reliable tools or infrastructure. Geographic and economic limitations continue to hinder effective digital connection.',
+      'Despite technological advances, many still struggle to meet and collaborate due to lack of access to reliable tools or infrastructure.',
     date: 'Phase III',
     dateTime: '2022-02',
   },
   {
     name: 'The OurVerse Solution',
     description:
-      'OurVerse introduces a fully immersive metaverse platform that makes collaboration accessible to all. It offers real presence in virtual spaces, enabling dynamic interactions and creativity, regardless of location or technical constraints.',
+      'OurVerse introduces a fully immersive metaverse platform that makes collaboration accessible to all, enabling dynamic interactions and creativity beyond borders.',
     date: 'Phase IV',
     dateTime: '2022-12',
   },
   {
     name: 'Unlimited Possibilities',
     description:
-      "With OurVerse, we're breaking down barriers and unlocking unlimited possibilities. You can create your own immersive virtual world as you envision it, making collaboration inclusive and without limits—the future is now.",
+      "With OurVerse, you can create your own immersive virtual world as you envision it, making collaboration inclusive and without limits—the future is now.",
     date: 'Phase V',
     dateTime: '2022-12',
   },
@@ -57,14 +57,8 @@ export function Hero() {
             <span className='emphasis'>OurVerse</span> empowers users to build, manage, and monetize their unique virtual experiences by blending the latest advancements 
             in blockchain technology with immersive virtual reality, built on top of the <span className='emphasis'>ThreeFold Grid</span>.
             </p>
-            <p>Our mission is to make the metaverse accessible to all, fostering a vibrant community where creativity, commerce, and 
+            <p>Our mission is to make the metaverse accessible to all, fostering a creative, collaborative, and equitable digital community. By leveraging <span className='emphasis'>ThreeFold Grid</span>'s decentralized infrastructure, 
-              collaboration thrive in a borderless, equitable digital space. By leveraging <span className='emphasis'>ThreeFold Grid</span>'s decentralized hosting infrastructure', 
+            we aim to provide a platform where data confidentiality, scalability, and independence are paramount.</p>
-            we provide a platform where data confidentiality, scalability, and independence are paramount.</p>
-            <p>
-            Free from centralized control, your interactions are not only secure but also resilient, 
-            fostering a more democratic and trustworthy virtual space. OurVerse offers the freedom to collaborate and 
-            connect in ways that are cutting-edge, empowering, and reliable.
-            </p>
           </div>
           <dl className="mt-10 grid grid-cols-2 gap-x-10 gap-y-4 gap-x-16 gap-y-10 text-center lg:auto-cols-auto lg:grid-flow-col lg:grid-cols-none lg:justify-start lg:text-left">
             {[

src/components/Homepage.jsx

@@ -5,7 +5,7 @@ import { ChevronRightIcon } from '@heroicons/react/20/solid'
 
 export function Homepage() {
   return (
-    <Gradient className="pt-24 pb-12">
+    <Gradient className="lg:pt-24 pt-20 pb-12">
       <Container>
         {/* Background Video */}
         <video
@@ -20,17 +20,6 @@ export function Homepage() {
         </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 btn-gradient-lt lg:px-3 lg:py-1 px-0 lg:text-sm text-xs font-semibold lg:leading-6 leading-2 text-purple-900 ring-1 ring-inset ring-indigo-600/10">
-                      What's new
-                    </span>
-                    <a href="/community/blogs/herogpt" className="inline-flex items-center space-x-2 text-sm font-semibold leading-6 text-cyan-700 hover:text-purple-700">
-                    <span className="underline">HeroGPT v1.0.0</span>
-                    <ChevronRightIcon className="h-5 w-5 text-purple-700" aria-hidden="true" />
-                  </a>
-                  </div>
-          </div>
           <h1 className="font-display lg:max-w-2xl font-bold tracking-tighter text-gradient-dark lg:text-7xl text-5xl">
             The Future of Collaboration is Now.
           </h1>

src/components/logocluster.jsx

@@ -0,0 +1,125 @@
+'use client'
+
+import { clsx } from 'clsx'
+import { motion } from 'framer-motion'
+import { Mark } from './logo'
+
+function Circle({ size, delay, opacity }) {
+  return (
+    <motion.div
+      variants={{
+        idle: { width: `${size}px`, height: `${size}px` },
+        active: {
+          width: [`${size}px`, `${size + 10}px`, `${size}px`],
+          height: [`${size}px`, `${size + 10}px`, `${size}px`],
+          transition: {
+            duration: 0.75,
+            repeat: Infinity,
+            repeatDelay: 1.25,
+            ease: 'easeInOut',
+            delay,
+          },
+        },
+      }}
+      style={{ '--opacity': opacity }}
+      className={clsx(
+        'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full',
+        'bg-[radial-gradient(circle,transparent_25%,color-mix(in_srgb,_theme(colors.blue.500)_var(--opacity),transparent)_100%)]',
+        'ring-1 ring-inset ring-blue-500/[8%]',
+      )}
+    />
+  )
+}
+
+function Circles() {
+  return (
+    <div className="absolute inset-0">
+      <Circle size={528} opacity="3%" delay={0.45} />
+      <Circle size={400} opacity="5%" delay={0.3} />
+      <Circle size={272} opacity="5%" delay={0.15} />
+      <Circle size={144} opacity="10%" delay={0} />
+      <div className="absolute inset-0 bg-gradient-to-t from-white to-35%" />
+    </div>
+  )
+}
+
+function MainLogo() {
+  return (
+    <div className="absolute left-44 top-32 flex size-16 items-center justify-center rounded-full bg-white shadow ring-1 ring-black/5">
+      <Mark className="h-9 fill-black" />
+    </div>
+  )
+}
+
+function Logo({ src, left, top, hover }) {
+  return (
+    <motion.img
+      variants={{
+        idle: { x: 0, y: 0, rotate: 0 },
+        active: {
+          x: [0, hover.x, 0],
+          y: [0, hover.y, 0],
+          rotate: [0, hover.rotate, 0],
+          transition: {
+            duration: 0.75,
+            repeat: Infinity,
+            repeatDelay: 1.25,
+            ease: 'easeInOut',
+            delay: hover.delay,
+          },
+        },
+      }}
+      alt=""
+      src={src}
+      style={{ left, top }}
+      className="absolute size-16 rounded-full bg-white shadow ring-1 ring-black/5"
+    />
+  )
+}
+
+export function LogoCluster() {
+  return (
+    <div aria-hidden="true" className="relative h-full overflow-hidden">
+      <Circles />
+      <div className="absolute left-1/2 h-full w-[26rem] -translate-x-1/2">
+        <MainLogo />
+        <Logo
+          src="/logo-cluster/career-builder.svg"
+          left={360}
+          top={144}
+          hover={{ x: 6, y: 1, rotate: 5, delay: 0.38 }}
+        />
+        <Logo
+          src="/logo-cluster/dribbble.svg"
+          left={285}
+          top={20}
+          hover={{ x: 4, y: -5, rotate: 6, delay: 0.3 }}
+        />
+        <Logo
+          src="/logo-cluster/glassdoor.svg"
+          left={255}
+          top={210}
+          hover={{ x: 3, y: 5, rotate: 7, delay: 0.2 }}
+        />
+        <Logo
+          src="/logo-cluster/linkedin.svg"
+          left={144}
+          top={40}
+          hover={{ x: -2, y: -5, rotate: -6, delay: 0.15 }}
+        />
+        <Logo
+          src="/logo-cluster/upwork.svg"
+          left={36}
+          top={56}
+          hover={{ x: -4, y: -5, rotate: -6, delay: 0.35 }}
+        />
+        <Logo
+          src="/logo-cluster/we-work-remotely.svg"
+          left={96}
+          top={176}
+          hover={{ x: -3, y: 5, rotate: 3, delay: 0.15 }}
+        />
+      </div>
+    </div>
+  )
+}

src/components/map.jsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { motion } from 'framer-motion'
+
+function Marker({ src, top, offset, delay }) {
+  return (
+    <motion.div
+      variants={{
+        idle: { scale: 0, opacity: 0, rotateX: 0, rotate: 0, y: 0 },
+        active: { y: [-20, 0, 4, 0], scale: [0.75, 1], opacity: [0, 1] },
+      }}
+      transition={{ duration: 0.25, delay, ease: 'easeOut' }}
+      style={{ '--offset': `${offset}px`, top }}
+      className="absolute left-[calc(50%+var(--offset))] size-[38px] drop-shadow-[0_3px_1px_rgba(0,0,0,.15)]"
+    >
+      <svg fill="none" viewBox="0 0 38 38" className="absolute size-full">
+        <path
+          d="M29.607 5.193c5.858 5.857 5.858 15.355 0 21.213l-9.9 9.9-.707.706-.708-.708-9.899-9.898c-5.857-5.858-5.857-15.356 0-21.213 5.858-5.858 15.356-5.858 21.214 0Z"
+          className="fill-black/5"
+        />
+        <path
+          d="m28.9 25.698-9.9 9.9-9.9-9.9C3.634 20.232 3.634 11.367 9.1 5.9 14.569.432 23.433.432 28.9 5.9c5.467 5.468 5.467 14.332 0 19.8Z"
+          className="fill-white"
+        />
+      </svg>
+      <img
+        alt=""
+        src={src}
+        className="absolute left-[7px] top-[4px] size-6 rounded-full"
+      />
+    </motion.div>
+  )
+}
+
+export function Map() {
+  return (
+    <div aria-hidden="true" className="relative size-full">
+      <div className="absolute inset-0 bg-[url(/map.png)] bg-[length:530px_430px] bg-[center_-75px] bg-no-repeat [mask-image:linear-gradient(to_bottom,black_50%,transparent)]" />
+      <div className="absolute inset-0">
+        <Marker src="/map/1.jpg" top={96} offset={-128} delay={0.15} />
+        <Marker src="/map/2.jpg" top={160} offset={-16} delay={0.4} />
+        <Marker src="/map/3.jpg" top={144} offset={96} delay={0.3} />
+        <Marker src="/map/4.jpg" top={192} offset={64} delay={0.6} />
+        <Marker src="/map/5.jpg" top={224} offset={-32} delay={0.8} />
+      </div>
+    </div>
+  )
+}

src/components/text.jsx

@@ -0,0 +1,46 @@
+import { clsx } from 'clsx'
+
+export function Heading({
+  className,
+  as: Element = 'h2',
+  dark = false,
+  ...props
+}) {
+  return (
+    <Element
+      {...props}
+      data-dark={dark ? 'true' : undefined}
+      className={clsx(
+        className,
+        'text-pretty text-4xl font-medium tracking-tighter text-gray-950 data-[dark]:text-white sm:text-6xl',
+      )}
+    />
+  )
+}
+
+export function Subheading({
+  className,
+  as: Element = 'h2',
+  dark = false,
+  ...props
+}) {
+  return (
+    <Element
+      {...props}
+      data-dark={dark ? 'true' : undefined}
+      className={clsx(
+        className,
+        'font-mono text-xs/5 font-semibold uppercase tracking-widest text-gray-500 data-[dark]:text-gray-400',
+      )}
+    />
+  )
+}
+
+export function Lead({ className, ...props }) {
+  return (
+    <p
+      className={clsx(className, 'text-2xl font-medium text-gray-500')}
+      {...props}
+    />
+  )
+}