src/app/page.tsx

@@ -9,6 +9,7 @@ import { PrimaryFeatures } from '@/components/PrimaryFeatures'
 import { SecondaryFeatures } from '@/components/SecondaryFeatures'
 import { Testimonials } from '@/components/Testimonials'
 import { HomePrinciples } from '@/components/HomePrinciples'
+import { HomeMilestones } from '@/components/HomeMilestones'
 
 export default function Home() {
   return (
@@ -18,6 +19,7 @@ export default function Home() {
         <Hero />
         <HomeAbout />
         <HomePrinciples />
+        <HomeMilestones />
         <SecondaryFeatures />
         <CallToAction />
         <Testimonials />

src/components/HomeMilestones.tsx

@@ -0,0 +1,57 @@
+const timeline = [
+  {
+    name: 'Founded company',
+    description:
+      'Nihil aut nam. Dignissimos a pariatur et quos omnis. Aspernatur asperiores et dolorem dolorem optio voluptate repudiandae.',
+    date: 'Aug 2021',
+    dateTime: '2021-08',
+  },
+  {
+    name: 'Secured $65m in funding',
+    description:
+      'Provident quia ut esse. Vero vel eos repudiandae aspernatur. Cumque minima impedit sapiente a architecto nihil.',
+    date: 'Dec 2021',
+    dateTime: '2021-12',
+  },
+  {
+    name: 'Released beta',
+    description:
+      'Sunt perspiciatis incidunt. Non necessitatibus aliquid. Consequatur ut officiis earum eum quia facilis. Hic deleniti dolorem quia et.',
+    date: 'Feb 2022',
+    dateTime: '2022-02',
+  },
+  {
+    name: 'Global launch of product',
+    description:
+      'Ut ipsa sint distinctio quod itaque nam qui. Possimus aut unde id architecto voluptatem hic aut pariatur velit.',
+    date: 'Dec 2022',
+    dateTime: '2022-12',
+  },
+]
+
+export function HomeMilestones() {
+  return (
+    <div className="bg-black py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto grid max-w-2xl grid-cols-1 gap-8 overflow-hidden lg:mx-0 lg:max-w-none lg:grid-cols-4">
+          {timeline.map((item) => (
+            <div key={item.name}>
+              <time dateTime={item.dateTime} className="flex items-center text-sm/6 font-semibold text-indigo-400">
+                <svg viewBox="0 0 4 4" aria-hidden="true" className="mr-4 size-1 flex-none">
+                  <circle r={2} cx={2} cy={2} fill="currentColor" />
+                </svg>
+                {item.date}
+                <div
+                  aria-hidden="true"
+                  className="absolute -ml-2 h-px w-screen -translate-x-full bg-white/20 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0"
+                />
+              </time>
+              <p className="mt-6 text-lg/8 font-semibold tracking-tight text-white">{item.name}</p>
+              <p className="mt-1 text-base/7 text-gray-300">{item.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}