add projects

src/app/projects/page.tsx

@@ -8,6 +8,9 @@ import { Heading, Lead, Subheading } from '@/components/text'
 import type { Metadata } from 'next'
 import Ecosystem from '@/components/ecosystem'
 import { RocketLaunchIcon } from '@heroicons/react/20/solid'
+import Portfolio from '@/components/portfolio'
+import { Testimonials } from '@/components/testimonials'
+import ProjectCard from '@/components/projectcards'
 
 export const metadata: Metadata = {
   title: 'Projects',
@@ -245,9 +248,7 @@ export default function Company() {
       </Container>
       <Header />
       <Overview />
-       <Ecosystem />
-      <Team />
-      <Investors />
+      <ProjectCard />
       <CTA />
       <Footer />
     </main>

src/components/projectcards.tsx

@@ -0,0 +1,125 @@
+'use client'
+import { Button } from './button'
+import { Heading, Subheading } from './text'
+import { clsx } from 'clsx'
+import { ChevronRightIcon } from '@heroicons/react/20/solid'
+import { useState } from 'react'
+
+const phases = ['All', 'Phase 1', 'Phase 2', 'Phase 3']
+
+const posts = [
+  {
+    id: 1,
+    title: 'Boost your conversion rate',
+    href: '#',
+    description:
+      'Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde..',
+    imageUrl:
+      'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80',
+    phase: 'Phase 1',
+    datetime: '2020-03-16',
+    },
+      {
+    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..',
+    imageUrl:
+      'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80',
+    phase: 'Phase 1',
+    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. ',
+    imageUrl:
+      'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80',
+    phase: 'Phase 1',
+    datetime: '2020-03-16',
+    },
+      {
+    id: 1,
+    title: 'Boost your conversion rate',
+    href: '#',
+    description:
+      'Illo sint voluptas. Error voluptates culpa eligendi. Hic vel totam vitae illo. Non aliquid explicabo necessitatibus unde. ',
+    imageUrl:
+      'https://images.unsplash.com/photo-1496128858413-b36217c2ce36?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3603&q=80',
+    phase: 'Phase 1',
+    datetime: '2020-03-16',
+    },
+
+  // More posts...
+]
+
+export default function ProjectCard() {
+  const [activePhase, setActivePhase] = useState('All')
+
+  const filteredPosts = activePhase === 'All' 
+    ? posts
+    : posts.filter(post => post.phase === activePhase)
+
+  return (
+    <div className="bg-white py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="flex flex-col items-center space-y-8">
+          <div className="mx-auto max-w-2xl text-center">
+          <h2 className="text-4xl font-semibold tracking-tight text-balance text-gray-900 sm:text-5xl">
+            From foundation to contribution
+          </h2>
+          <p className="mt-2 text-lg/8 text-gray-600">Deliver transformational experiences anywhere</p>
+          </div>
+          <div className="flex justify-center gap-4">
+            {phases.map((phase) => (
+              <button
+                key={phase}
+                onClick={() => setActivePhase(phase)}
+                className={clsx(
+                  'px-4 py-2 rounded-full text-sm font-medium transition-colors',
+                  activePhase === phase
+                    ? 'bg-indigo-600 text-white'
+                    : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+                )}
+              >
+                {phase}
+              </button>
+            ))}
+          </div>
+        </div>
+        <div className="mx-auto mt-16 grid max-w-2xl auto-rows-fr grid-cols-1 gap-4 sm:mt-20 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+          {filteredPosts.map((post) => (
+            <article
+              key={post.id}
+              className="relative isolate flex flex-col justify-end overflow-hidden rounded-2xl bg-gray-900 px-8 aspect-square"
+            >
+              <img alt="" src={post.imageUrl} className="absolute inset-0 -z-10 size-full object-cover aspect-square" />
+              <div className="absolute inset-0 -z-10 bg-linear-to-t from-gray-900 via-gray-900/40" />
+              <div className="absolute inset-0 -z-10 rounded-2xl ring-1 ring-gray-900/10 ring-inset" />
+
+              <div className="flex flex-wrap items-center gap-y-1 overflow-hidden text-sm/6 text-gray-300">
+                <time dateTime={post.datetime} className="mr-8">
+                  {post.phase}
+                </time>
+              </div>
+              <h3 className="mt-3 text-lg/6 font-semibold text-white">
+                <a href={post.href}>
+                  <span className="absolute inset-0" />
+                  {post.title}
+                </a>
+              </h3>
+              <p className="mt-5 text-sm/7 leading-tight text-gray-100">{post.description}</p>
+              <a href={post.href} className="mt-6 inline-flex items-center gap-x-2 text-sm font-semibold text-indigo-400">
+                Read more
+                <ChevronRightIcon className="h-5 w-5 flex-none" aria-hidden="true" />
+              </a>
+            </article>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}