principles

src/app/page.tsx

@@ -8,6 +8,7 @@ import { Pricing } from '@/components/Pricing'
 import { PrimaryFeatures } from '@/components/PrimaryFeatures'
 import { SecondaryFeatures } from '@/components/SecondaryFeatures'
 import { Testimonials } from '@/components/Testimonials'
+import { HomePrinciples } from '@/components/HomePrinciples'
 
 export default function Home() {
   return (
@@ -16,6 +17,7 @@ export default function Home() {
       <main>
         <Hero />
         <HomeAbout />
+        <HomePrinciples />
         <SecondaryFeatures />
         <CallToAction />
         <Testimonials />

src/components/HomePrinciples.tsx

@@ -0,0 +1,32 @@
+const stats = [
+  { id: 1, name: 'Build in ways that respect and protect natural resources.', value: 'Planet First' },
+  { id: 2, name: 'Ensure equality and equity in our ecosystem.', value: 'People First' },
+  { id: 3, name: 'Promote collaborative development across all our projects.', value: 'Open Source' },
+  { id: 4, name: 'Uphold an ethos of transparency and trust.', value: 'Authenticity' },
+  { id: 5, name: 'Eliminate design complexities to foster rapid progress.', value: 'Simplicity' },
+]
+
+export function HomePrinciples() {
+  return (
+    <div className="bg-white py-24 sm:py-32">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto max-w-2xl lg:max-w-none">
+          <div className="text-center">
+            <h2 className="h2-default  text-gray-900 ">
+              Trusted by creators worldwide
+            </h2>
+            <p className="mt-4 p-default text-gray-600">Lorem ipsum dolor sit amet consect adipisicing possimus.</p>
+          </div>
+          <dl className="mt-16 grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-5">
+            {stats.map((stat) => (
+              <div key={stat.id} className="flex flex-col bg-gray-400/5 p-8">
+                <dt className="mt-2 text-sm/6 font-medium leading-tight text-gray-600">{stat.name}</dt>
+                <dd className="order-first text-xl font-semibold tracking-tight text-gray-900">{stat.value}</dd>
+              </div>
+            ))}
+          </dl>
+        </div>
+      </div>
+    </div>
+  )
+}