From 699e3a580eb99aec4ea9440e182820f451e6f0d7 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Fri, 22 Aug 2025 18:45:01 +0200
Subject: [PATCH] gone

---
 src/app/page.jsx                 |  5 +--
 src/components/Boat.jsx          |  6 +--
 src/components/CallToAction4.jsx | 24 +++++++++++
 src/components/Experiences.jsx   | 68 ++++++++++++++------------------
 src/components/text.jsx          | 36 +++++++++++++++--
 5 files changed, 90 insertions(+), 49 deletions(-)
 create mode 100644 src/components/CallToAction4.jsx

diff --git a/src/app/page.jsx b/src/app/page.jsx
index a2d5ebf..561cf17 100644
--- a/src/app/page.jsx
+++ b/src/app/page.jsx
@@ -18,6 +18,7 @@ import Activities from '@/components/Activities'
 import Boats from '@/components/Boats'
 import Carousel from '@/components/Carousel'
 import CnnVideo from '@/components/CNNVIDEO'
+import { CallToAction4 } from '@/components/CallToAction4'
 
 
 export default function Home() {
@@ -28,10 +29,8 @@ export default function Home() {
         <Hero />
       <CallToAction />
       <Boat />
+      <CallToAction4 />
         <Experiences />
-
-        <NewFeatures />
-        <NewFeatures2 />
         <CallToAction2 />
         <Carousel />
         <Route />
diff --git a/src/components/Boat.jsx b/src/components/Boat.jsx
index 2c39a68..221bc78 100644
--- a/src/components/Boat.jsx
+++ b/src/components/Boat.jsx
@@ -211,14 +211,12 @@ export function Boat() {
             
             {/* Progress Bar */}
             <div className="mt-6 mx-6 lg:mx-0 flex justify-center">
-              <div className="w-32 bg-gray-500 rounded-full h-0.5 relative">
+              <div className="w-52 bg-gray-400 rounded-full h-0.5 relative">
                 <div 
                   className="bg-darkgr-900 h-0.5 rounded-full transition-all duration-300 ease-out"
                   style={{ width: `${scrollProgress}%` }}
                 />
-                {/* Progress dots for visual clarity */}
-                <div className="absolute -top-1 left-0 w-2 h-2 bg-darkgr-900 rounded-full transform -translate-x-1"></div>
-                <div className="absolute -top-1 right-0 w-2 h-2 bg-gray-400 rounded-full transform translate-x-1"></div>
+
               </div>
             </div>
           </div>
diff --git a/src/components/CallToAction4.jsx b/src/components/CallToAction4.jsx
new file mode 100644
index 0000000..68e8256
--- /dev/null
+++ b/src/components/CallToAction4.jsx
@@ -0,0 +1,24 @@
+
+import { Container } from '@/components/Container'
+import { H3, P } from '@/components/text'
+
+export function CallToAction4() {
+  return (
+    <section
+      id="about"
+      className="relative overflow-hidden bg-bg-sand pt-16 pb-12"
+    >
+      <Container className="relative">
+        <div className="mx-auto max-w-6xl text-center">
+          <H3 className="mb-6">
+          Transformative Programs on the Nile
+          </H3>
+          <P className="mb-6">
+          From intimate community gatherings to professional retreats, VEDA offers transformative programs on the Nile. Each space is thoughtfully designed to foster connection, creativity, and personal growth in an inspiring riverside setting.
+          </P>
+
+        </div>
+      </Container>
+    </section>
+  )
+}
diff --git a/src/components/Experiences.jsx b/src/components/Experiences.jsx
index 6af196f..fdefce0 100644
--- a/src/components/Experiences.jsx
+++ b/src/components/Experiences.jsx
@@ -1,68 +1,60 @@
+import { H2, P , PS, PXS, H3, H4 } from "@/components/text";
+
+
 export function Experiences() {
   return (
-    <div className="pt-16 lg:pt-24 pb-12">
-      <div className="mx-auto max-w-2xl px-6  lg:max-w-7xl lg:px-8">
-        <p className="mt-2 max-w-lg text-3xl font-semibold tracking-[-0.05em] text-darkgr-700 lg:text-4xl">
-        Programs
-        </p>
-        
-        <p className="mt-4 max-w-5xl text-xl/5 font-medium tracking-[-0.045em] lg:tracking-[-0.02em] leading-[1.3] lg:leading-[1.4] lg:text-2xl text-darkgr">
-          From intimate community gatherings to professional retreats, VEDA offers transformative programs on the Nile. Each space is thoughtfully designed to foster connection, creativity, and personal growth in an inspiring riverside setting.
-        </p>
-        <div className="mt-8 sm:mt-16 grid grid-cols-1 gap-4 lg:grid-cols-8 lg:grid-rows-2">
-          <div className="flex p-px lg:col-span-5">
-            <div className="w-full overflow-hidden rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl lg:rounded-tl-4xl relative isolate flex flex-col justify-end h-80 lg:h-auto">
+    <div className="bg-bg-sand  pb-12">
+      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
+        <div className=" grid grid-cols-1 gap-4 lg:grid-cols-8 lg:grid-rows-2">
+          <div className="flex lg:col-span-5">
+            <div className="w-full overflow-hidden">
               <img
                 alt=""
                 src="/images/community.jpg"
-                className="absolute inset-0 -z-10 h-full w-full object-cover object-center"
+                className="h-80 w-full object-cover object-center"
               />
-              <div className="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40" />
-              <div className="px-8 py-4">
-                <p className="mt-2 text-lg font-semibold tracking-normal text-[#FEFFF6]">Community building Space</p>
-                <p className="mt-1 pb-2 text-sm lg:text-base font-medium text-[#FEFFF6]/80">Foster connections and meaningful relationships through shared experiences.</p>
+              <div className="py-4">
+                <H4>Community building Space</H4>
+                <PXS>Foster connections and meaningful relationships through shared experiences.</PXS>
               </div>
             </div>
           </div>
-          <div className="flex p-px lg:col-span-3">
-            <div className="w-full overflow-hidden rounded-lg shadow-sm outline outline-black/5 lg:rounded-tr-4xl relative isolate flex flex-col justify-end h-80">
+          <div className="flex lg:col-span-3">
+            <div className="w-full overflow-hidden">
               <img
                 alt=""
                 src="/images/private.jpg"
-                className="absolute inset-0 -z-10 h-full w-full object-cover object-center"
+                className="h-80 w-full object-cover object-center"
               />
-              <div className="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40" />
-              <div className="px-8 py-4">
-                <p className="mt-2 text-lg font-semibold tracking-normal text-[#FEFFF6]">Private Retreats</p>
-                <p className="mt-1 text-sm lg:text-base font-medium text-[#FEFFF6]/80">Exclusive experiences tailored for intimate groups and families.</p>
+              <div className="py-4">
+                <H4>Private Retreats</H4>
+                <PXS>Exclusive experiences  for intimate groups and families.</PXS>
               </div>
             </div>
           </div>
-          <div className="flex p-px lg:col-span-3">
-            <div className="w-full overflow-hidden rounded-lg shadow-sm outline outline-black/5 lg:rounded-bl-4xl relative isolate flex flex-col justify-end h-80">
+          <div className="flex lg:col-span-3">
+            <div className="w-full overflow-hidden">
               <img
                 alt=""
                 src="/images/events.jpg"
-                className="absolute inset-0 -z-10 h-full w-full object-cover object-center"
+                className="h-80 w-full object-cover object-center"
               />
-              <div className="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40" />
-              <div className="px-8 py-4">
-                <p className="mt-2 text-lg lg:text-xl font-semibold tracking-normal text-[#FEFFF6]">Events & Conferences</p>
-                <p className="mt-1 pb-2 text-sm lg:text-base font-medium text-[#FEFFF6]/80">Professional gatherings in an inspiring riverside setting.</p>
+              <div className="py-4">
+                <H4>Events & Conferences</H4>
+                <PXS>Professional gatherings in an inspiring riverside setting.</PXS>
               </div>
             </div>
           </div>
-          <div className="flex p-px lg:col-span-5">
-            <div className="w-full overflow-hidden rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-br-4xl relative isolate flex flex-col justify-end h-80">
+          <div className="flex lg:col-span-5">
+            <div className="w-full overflow-hidden">
               <img
                 alt=""
                 src="/images/nomads.jpg"
-                className="absolute inset-0 -z-10 h-full w-full object-cover object-center"
+                className="h-80 w-full object-cover object-center"
               />
-              <div className="absolute inset-0 -z-10 bg-gradient-to-t from-gray-900 via-gray-900/40" />
-              <div className="px-8 py-4">
-                <p className="mt-2 text-lg font-semibold tracking-normal text-[#FEFFF6]">Digital Nomad Hub</p>
-                <p className="mt-1 pb-2 text-sm lg:text-base font-medium text-[#FEFFF6]/80">Work remotely while surrounded by the tranquility of the Nile.</p>
+              <div className="py-4">
+                <H4>Digital Nomad Hub</H4>
+                <PXS>Work remotely while surrounded by the tranquility of the Nile.</PXS>
               </div>
             </div>
           </div>
diff --git a/src/components/text.jsx b/src/components/text.jsx
index a0e655b..e1f919c 100644
--- a/src/components/text.jsx
+++ b/src/components/text.jsx
@@ -30,15 +30,29 @@ export function H2({ className, children, ...props }) {
 
 export function H3({ className, children, ...props }) {
   return (
-    <h2
+    <h3
       className={clsx(
-        'mt-8 text-xl font-medium tracking-tight text-bg-darkbrown sm:text-2xl',
+        'mt-8 text-xl font-medium tracking-tight text-bg-darkbrown lg:text-2xl',
         className
       )}
       {...props}
     >
       {children}
-    </h2>
+    </h3>
+  )
+}
+
+export function H4({ className, children, ...props }) {
+  return (
+    <h4
+      className={clsx(
+        'text-base font-medium tracking-tight text-bg-darkbrown lg:text-lg',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </h4>
   )
 }
 
@@ -60,7 +74,21 @@ export function PS({ className, children, ...props }) {
   return (
     <p
       className={clsx(
-        'mt-4 text-base text-gray-700 font-extralight leading-snug',
+        'text-base text-gray-700 font-extralight leading-snug',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </p>
+  )
+}
+
+export function PXS({ className, children, ...props }) {
+  return (
+    <p
+      className={clsx(
+        'text-base/8 text-gray-700 font-extralight leading-snug',
         className
       )}
       {...props}