edit

src/components/Casestudies.jsx

@@ -1,21 +1,136 @@
 const posts = [
     {
       id: 1,
-      title: 'Boost your conversion rate',
+      title: 'OurWorld Verse',
       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.',
+        'Illo sint voluptas. Error voluptates culpa eligendi.',
       imageUrl:
-        'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80',
-      date: 'Mar 16, 2020',
+        '/images/usecases/ow.jpg',
+      type: 'Education',
+      datetime: '2020-03-16',
+    },
+    {
+      id: 2,
+      title: 'Art Gallery',
+      href: '#',
+      description:
+        'Illo sint voluptas. Error voluptates culpa eligendi.',
+      imageUrl:
+        '/images/usecases/artgallery.jpg',
+      type: 'Education',
+      datetime: '2020-03-16',
+    },
+    {
+      id: 3,
+      title: 'Conference',
+      href: '#',
+      description:
+        'Illo sint voluptas. Error voluptates culpa eligendi.',
+      imageUrl:
+        '/images/usecases/conf.jpg',
+      type: 'Events',
+      datetime: '2020-03-16',
+    },
+    {
+      id: 4,
+      title: 'DJ Concert',
+      href: '#',
+      description:
+        'Illo sint voluptas. Error voluptates culpa eligendi.',
+      imageUrl:
+        '/images/usecases/dj.jpg',
+      type: 'Events',
+      datetime: '2020-03-16',
+    },
+    {
+      id: 5,
+      title: 'Frozen World',
+      href: '#',
+      description:
+        'Illo sint voluptas. Error voluptates culpa eligendi.',
+      imageUrl:
+        '/images/usecases/env.jpg',
+      type: 'Education',
+      datetime: '2020-03-16',
+    },
+    {
+      id: 6,
+      title: 'Hospital',
+      href: '#',
+      description:
+        'Illo sint voluptas. Error voluptates culpa eligendi.',
+      imageUrl:
+        '/images/usecases/hospital.jpg',
+      type: 'Healthcare',
+      datetime: '2020-03-16',
+    },
+    {
+      id: 7,
+      title: 'Office',
+      href: '#',
+      description:
+        'Real Estate',
+      imageUrl:
+        '/images/usecases/office.jpg',
+      type: 'Real Estate',
+      datetime: '2020-03-16',
+    },
+    {
+      id: 8,
+      title: 'Safer Office',
+      href: '#',
+      description:
+        'Real Estate',
+      imageUrl:
+        '/images/usecases/safer.jpg',
+      type: 'Real Estate',
+      datetime: '2020-03-16',
+    },
+    {
+      id: 9,
+      title: 'Store',
+      href: '#',
+      description:
+        'Commercials',
+      imageUrl:
+        '/images/usecases/store.jpg',
+      type: 'E-commerce',
+      datetime: '2020-03-16',
+    },
+    {
+      id: 10,
+      title: 'UAE Presidental Court',
+      href: '#',
+      description:
+        'Commercials',
+      imageUrl:
+        '/images/usecases/uae.jpg',
+      type: 'Government',
+      datetime: '2020-03-16',
+    },
+    {
+      id: 11,
+      title: 'KM Universe',
+      href: '#',
+      description:
+        'Commercials',
+      imageUrl:
+        '/images/usecases/universe.jpg',
+      type: 'Events',
+      datetime: '2020-03-16',
+    },
+    {
+      id: 12,
+      title: 'Anita Cafe',
+      href: '#',
+      description:
+        'Events',
+      imageUrl:
+        '/images/usecases/cafe.jpg',
+      type: 'Events',
       datetime: '2020-03-16',
-      author: {
-        name: 'Michael Foster',
-        imageUrl:
-          'https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
-      },
     },
-    // More posts...
   ]
   
   export default function Casestudies() {
@@ -40,17 +155,8 @@ const posts = [
   
                 <div className="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm leading-6 text-gray-300">
                   <time dateTime={post.datetime} className="mr-8">
-                    {post.date}
+                    {post.type}
                   </time>
-                  <div className="-ml-4 flex items-center gap-x-4">
-                    <svg viewBox="0 0 2 2" className="-ml-0.5 h-0.5 w-0.5 flex-none fill-white/50">
-                      <circle r={1} cx={1} cy={1} />
-                    </svg>
-                    <div className="flex gap-x-2.5">
-                      <img alt="" src={post.author.imageUrl} className="h-6 w-6 flex-none rounded-full bg-white/10" />
-                      {post.author.name}
-                    </div>
-                  </div>
                 </div>
                 <h3 className="mt-3 text-lg font-semibold leading-6 text-white">
                   <a href={post.href}>
@@ -58,6 +164,12 @@ const posts = [
                     {post.title}
                   </a>
                 </h3>
+                <h3 className="mt-3 text-sm font-normal leading-6 text-white">
+                  <a href={post.href}>
+                    <span className="absolute inset-0" />
+                    {post.description}
+                  </a>
+                </h3>
               </article>
             ))}
           </div>