replace

src/components/Timeline.jsx

@@ -12,6 +12,8 @@
   }
   ```
 */
+import { H2, PS } from '@/components/text'
+
 const features = [
     {
       name: 'Day 1: Luxor',
@@ -95,10 +97,10 @@ const features = [
       <div className="bg-transparent">
         <div className="mx-auto max-w-2xl px-4 py-24 sm:px-6 sm:py-32 lg:max-w-7xl lg:px-8">
           <div className="mx-auto max-w-3xl text-center">
-            <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">VEDA ITINERARY SAMPLE</h2>
-            <p className="mt-4 text-gray-500">
+            <H2>VEDA ITINERARY SAMPLE</H2>
+            <PS>
             Experience the magic of the Nile with our thoughtfully crafted 5-day VEDA Retreat itinerary. This sample journey showcases the highlights of a typical retreat, offering a blend of cultural exploration, relaxation, and rejuvenation. Each day is designed to provide a unique and enriching experience, from exploring ancient temples and charming towns to enjoying serene river cruises and immersive wellness activities. Whether you're seeking adventure or tranquility, this itinerary gives you a glimpse into the unforgettable experiences that await on your VEDA Retreat.
-            </p>
+            </PS>
           </div>
   
           <div className="mt-16 space-y-16">
@@ -114,9 +116,9 @@ const features = [
                   )}
                 >
                   <h3 className="text-lg font-medium text-gray-900">{feature.name}</h3>
-                  <p className="mt-2 text-sm text-gray-500">{feature.description}</p>
-                  <p className="mt-2 text-sm text-gray-500">{feature.description2}</p>
-                  <p className="mt-2 text-sm text-gray-500">{feature.description3}</p>
+                  <PS>{feature.description}</PS>
+                  <PS>{feature.description2}</PS>
+                  <PS>{feature.description3}</PS>
                 </div>
                 <div
                   className={classNames(