diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4028b00..1548ba2 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,6 +2,7 @@ import { CallToAction } from '@/components/CallToAction'
 import { Faqs } from '@/components/Faqs'
 import { Footer } from '@/components/Footer'
 import { Header_darkbg } from '@/components/Header_darkbg'
+import { HomeAbout } from '@/components/HomeAbout'
 import { Hero } from '@/components/Hero'
 import { Pricing } from '@/components/Pricing'
 import { PrimaryFeatures } from '@/components/PrimaryFeatures'
@@ -14,6 +15,7 @@ export default function Home() {
       <Header_darkbg />
       <main>
         <Hero />
+        <HomeAbout />
         <PrimaryFeatures />
         <SecondaryFeatures />
         <CallToAction />
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 70a2475..08629b4 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -43,3 +43,18 @@
 
   --container-2xl: 40rem;
 }
+
+/* Custom component classes */
+@layer components {
+  .h2-default {
+    @apply text-2xl font-display font-medium tracking-tight text-pretty leading-tight lg:text-4xl lg:leading-tight;
+  }
+  
+  .subtitle {
+    @apply text-base/7 font-medium;
+  }
+  
+  .p-default {
+    @apply text-lg/8 lg:text-xl/8;
+  }
+}