change bg

public/images/components/Boats.jsx

@@ -58,7 +58,7 @@ const people = [
 
 export default function Boats() {
     return (
-        <div className="bg-creme-600 py-24">
+        <div className="bg-bg-sand py-24">
             <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
                 <div className="mx-auto max-w-2xl lg:mx-0">
                     <h2 className="text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">Our team</h2>

public/images/components/Daha1.jsx

@@ -1,6 +1,6 @@
 export default function Example() {
     return (
-      <div className="relative isolate overflow-hidden bg-creme-600 py-24 sm:py-32">
+      <div className="relative isolate overflow-hidden bg-bg-sand py-24 sm:py-32">
         <img
           alt=""
           src="/images/daha1.jpg"

public/images/components/Daha2.jsx

@@ -33,7 +33,7 @@ const categories = [
 
 export default function Example() {
   return (
-    <div className="bg-creme-600">
+    <div className="bg-bg-sand">
       <div className="mx-auto max-w-xl px-6 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
         <h2 className="text-2xl font-bold tracking-tight text-gray-900">DAHABIYAS</h2>
         <p className="mt-4 text-base text-gray-500">

public/images/components/Exp.jsx

@@ -9,7 +9,7 @@ const features = [
   
   export default function Example() {
     return (
-      <div className="bg-creme-600">
+      <div className="bg-bg-sand">
         <div className="mt-24 relative mx-auto  max-w-7xl px-6 pb-16 sm:px-6 sm:pb-24 lg:px-8">
           <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
             <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">VEDA EXPERIENCES</h2>

public/images/components/Exp1.jsx

@@ -1,6 +1,6 @@
 export default function Example() {
     return (
-      <div className="relative isolate overflow-hidden bg-creme-600 py-24 sm:py-32">
+      <div className="relative isolate overflow-hidden bg-bg-sand py-24 sm:py-32">
         <img
           alt=""
           src="/images/daha1.jpg"

public/images/components/Exp2.jsx

@@ -2,7 +2,7 @@
   
   export  function Experience() {
     return (
-      <div className="bg-creme-600">
+      <div className="bg-bg-sand">
         <div aria-hidden="true" className="relative">
           <img
             alt=""

public/images/components/FreeflowVideo.jsx

@@ -8,7 +8,7 @@ const FFVid = () => {
         <section
       id="testimonials"
       aria-label="What our customers are saying"
-      className="bg-creme-600 pt-6 pb-24"
+      className="bg-bg-sand pt-6 pb-24"
     >
       <Container>
         <div className="mx-auto max-w-5xl md:text-center">

public/images/components/Iti1.jsx

@@ -1,6 +1,6 @@
 export default function Example() {
     return (
-      <div className="relative isolate overflow-hidden bg-creme-600 py-24 sm:py-32">
+      <div className="relative isolate overflow-hidden bg-bg-sand py-24 sm:py-32">
         <img
           alt=""
           src="/images/iti.jpg"

public/images/components/Story.jsx

@@ -1,4 +1,5 @@
 import { CloudArrowUpIcon, LockClosedIcon, ServerIcon, SparklesIcon } from '@heroicons/react/20/solid'
+import { H2, P, H3,  } from './text'
 
 const features = [
 
@@ -6,7 +7,7 @@ const features = [
 
 export default function NewFeatures() {
   return (
-    <div className="overflow-hidden bg-creme-600 pb-0 pt-12 lg:pt-12">
+    <div className="overflow-hidden bg-bg-sand pb-0 pt-12 lg:pt-12">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
         <div className="flex items-start justify-end lg:justify-start lg:order-first">
@@ -19,17 +20,17 @@ export default function NewFeatures() {
         </div>
           <div className="lg:ml-auto lg:pl-4 lg:pt-0">
             <div className="lg:max-w-lg">
-              <p className="mt-2 text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">OUR STORY</p>
-              <p className="mt-4 text-xl leading-8 tracking-wide ITALIC font-normal text-gray-200">
+              <H2 className="mt-2">Our Story</H2>
+              <P className="mt-4 tracking-wide italic  text-gold-900">
               THE TALE OF SACRED ENERGIES OF THE NILE
-              </p>
-              <p className="mt-6 text-lg leading-7 font-light text-gray-500">
+              </P>
+              <P className="mt-6 ">
               Our founders, Isabelle Peeters and Kristof De Spiegeleer fell in love with the Nile and envisioned creating clean, unique, and high-energy boats for people to experience its sacred energies.
-              </p>
-              <p className="mt-6 text-lg leading-7 font-light text-gray-500">
+              </P>
+              <p className="mt-6 ">
               Their goal is to offer a sanctuary for the body, mind, and spirit, a safe space to open yourself to new experiences, and allow these sacred energies to enter your consciousness, helping you reconnect with your true essence.
               </p>
-              <p className="mt-4 text-lg leading-7 font-light text-gray-500">
+              <p className="mt-4">
               We are in unique times, marked by the energies of the Aquarian Age. As chaotic as these times may seem, they bring a shift in energies and an opportunity for transformation. The Nile is a powerful energy vortex, and we are here to help you align with its frequencies.
               </p>
             </div>

public/images/components/Story2.jsx

@@ -5,7 +5,7 @@ const features = [
 
 export default function NewFeatures2() {
   return (
-    <div className="overflow-hidden bg-creme-600 pb-10 pt-0 lg:pt-10 lg:pb-24">
+    <div className="overflow-hidden bg-bg-sand pb-10 pt-0 lg:pt-10 lg:pb-24">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
           <div className="lg:order-first">

public/images/components/Team.jsx

@@ -28,7 +28,7 @@ const people = [
   
   export default function Team() {
     return (
-      <div className="bg-creme-600 py-12 md:py-32 lg:py-12">
+      <div className="bg-bg-sand py-12 md:py-32 lg:py-12">
         <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
           <div className="mx-auto max-w-2xl lg:mx-0">
             <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">OUR PEOPLE</h2>

public/images/components/Testimonials.jsx

@@ -122,7 +122,7 @@ export function Testimonials() {
                             {testimonial.author.role}
                           </div>
                         </div>
-                        <div className="overflow-hidden rounded-full bg-creme-600">
+                        <div className="overflow-hidden rounded-full bg-bg-sand">
                           <img
                             className="h-14 w-14 object-cover"
                             src={testimonial.author.image}

public/images/components/Timeline.jsx

@@ -92,7 +92,7 @@ const features = [
   
   export default function Example() {
     return (
-      <div className="bg-creme-600">
+      <div className="bg-bg-sand">
         <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>

public/images/components/Veda1.jsx

@@ -101,7 +101,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-creme-600">
+    <div className="bg-bg-sand">
       <div className="mx-auto max-w-2xl px-6 py-12 sm:px-6 lg:max-w-7xl lg:px-8">
         <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
           {/* Image gallery */}

public/images/components/Veda2.jsx

@@ -96,7 +96,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-creme-600">
+    <div className="bg-bg-sand">
       <div className="mx-auto max-w-2xl px-6 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
         <div className="lg:grid lg:grid-cols-2 lg:gap-x-8">
           {/* Image gallery */}

public/images/components/Veda3.jsx

@@ -98,7 +98,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-creme-600">
+    <div className="bg-bg-sand">
       <div className="mx-auto max-w-2xl px-6 py-12 sm:px-6 lg:max-w-7xl lg:px-8">
         <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
           {/* Image gallery */}

public/images/components/Veda4.jsx

@@ -96,7 +96,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-creme-600">
+    <div className="bg-bg-sand">
       <div className="mx-auto max-w-2xl px-6 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
         <div className="lg:grid lg:grid-cols-2 lg:gap-x-8">
           {/* Image gallery */}

src/components/Boats.jsx

@@ -58,7 +58,7 @@ const people = [
 
 export default function Boats() {
     return (
-        <div className="bg-creme-600 py-24">
+        <div className="bg-bg-sand py-24">
             <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
                 <div className="mx-auto max-w-2xl lg:mx-0">
                     <h2 className="text-3xl font-bold tracking-tight text-gray-800 sm:text-4xl">Our team</h2>

src/components/Daha1.jsx

@@ -1,6 +1,6 @@
 export default function Example() {
     return (
-      <div className="relative isolate overflow-hidden bg-creme-600 py-24 sm:py-32">
+      <div className="relative isolate overflow-hidden bg-bg-sand py-24 sm:py-32">
         <img
           alt=""
           src="/images/daha1.jpg"

src/components/Daha2.jsx

@@ -33,7 +33,7 @@ const categories = [
 
 export default function Example() {
   return (
-    <div className="bg-creme-600">
+    <div className="bg-bg-sand">
       <div className="mx-auto max-w-xl px-6 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
         <h2 className="text-2xl font-bold tracking-tight text-gray-900">DAHABIYAS</h2>
         <p className="mt-4 text-base text-gray-500">

src/components/Exp.jsx

@@ -9,7 +9,7 @@ const features = [
   
   export default function Example() {
     return (
-      <div className="bg-creme-600">
+      <div className="bg-bg-sand">
         <div className="mt-24 relative mx-auto  max-w-7xl px-6 pb-16 sm:px-6 sm:pb-24 lg:px-8">
           <div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
             <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">VEDA EXPERIENCES</h2>

src/components/Exp1.jsx

@@ -1,6 +1,6 @@
 export default function Example() {
     return (
-      <div className="relative isolate overflow-hidden bg-creme-600 py-24 sm:py-32">
+      <div className="relative isolate overflow-hidden bg-bg-sand py-24 sm:py-32">
         <img
           alt=""
           src="/images/daha1.jpg"

src/components/Exp2.jsx

@@ -2,7 +2,7 @@
   
   export  function Experience() {
     return (
-      <div className="bg-creme-600">
+      <div className="bg-bg-sand">
         <div aria-hidden="true" className="relative">
           <img
             alt=""

src/components/FreeflowVideo.jsx

@@ -8,7 +8,7 @@ const FFVid = () => {
         <section
       id="testimonials"
       aria-label="What our customers are saying"
-      className="bg-creme-600 pt-6 pb-24"
+      className="bg-bg-sand pt-6 pb-24"
     >
       <Container>
         <div className="mx-auto max-w-5xl md:text-center">

src/components/Iti1.jsx

@@ -1,6 +1,6 @@
 export default function Example() {
     return (
-      <div className="relative isolate overflow-hidden bg-creme-600 py-24 sm:py-32">
+      <div className="relative isolate overflow-hidden bg-bg-sand py-24 sm:py-32">
         <img
           alt=""
           src="/images/iti.jpg"

src/components/Story.jsx

@@ -6,7 +6,7 @@ const features = [
 
 export default function NewFeatures() {
   return (
-    <div className="overflow-hidden bg-creme-600 pb-0 pt-12 lg:pt-12">
+    <div className="overflow-hidden bg-bg-sand pb-0 pt-12 lg:pt-12">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
         <div className="flex items-start justify-end lg:justify-start lg:order-first">

src/components/Story2.jsx

@@ -5,7 +5,7 @@ const features = [
 
 export default function NewFeatures2() {
   return (
-    <div className="overflow-hidden bg-creme-600 pb-10 pt-0 lg:pt-10 lg:pb-24">
+    <div className="overflow-hidden bg-bg-sand pb-10 pt-0 lg:pt-10 lg:pb-24">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-2">
           <div className="lg:order-first">

src/components/Team.jsx

@@ -29,7 +29,7 @@ const people = [
   
   export default function Team() {
     return (
-      <div className="bg-creme-600 py-12 md:py-32 lg:py-12">
+      <div className="bg-bg-sand py-12 md:py-32 lg:py-12">
         <div className="mx-auto grid max-w-7xl grid-cols-1 gap-x-8 gap-y-20 px-6 lg:px-8 xl:grid-cols-3">
           <div className="mx-auto max-w-2xl lg:mx-0">
             <H2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">OUR PEOPLE</H2>

src/components/Testimonials.jsx

@@ -123,7 +123,7 @@ export function Testimonials() {
                             {testimonial.author.role}
                           </div>
                         </div>
-                        <div className="overflow-hidden rounded-full bg-creme-600">
+                        <div className="overflow-hidden rounded-full bg-bg-sand">
                           <img
                             className="h-14 w-14 object-cover"
                             src={testimonial.author.image}

src/components/Timeline.jsx

@@ -92,7 +92,7 @@ const features = [
   
   export default function Example() {
     return (
-      <div className="bg-creme-600">
+      <div className="bg-bg-sand">
         <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>

src/components/Veda1.jsx

@@ -124,7 +124,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-creme-600">
+    <div className="bg-bg-sand">
       <div className="mx-auto max-w-2xl px-6 py-12 sm:px-6 lg:max-w-7xl lg:px-8">
         <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
           {/* Image gallery */}

src/components/Veda2.jsx

@@ -96,7 +96,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-creme-600">
+    <div className="bg-bg-sand">
       <div className="mx-auto max-w-2xl px-6 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
         <div className="lg:grid lg:grid-cols-2 lg:gap-x-8">
           {/* Image gallery */}

src/components/Veda3.jsx

@@ -98,7 +98,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-creme-600">
+    <div className="bg-bg-sand">
       <div className="mx-auto max-w-2xl px-6 py-12 sm:px-6 lg:max-w-7xl lg:px-8">
         <div className="lg:grid lg:grid-cols-2 lg:items-start lg:gap-x-8">
           {/* Image gallery */}

src/components/Veda4.jsx

@@ -96,7 +96,7 @@ export default function Example() {
   const [selectedColor, setSelectedColor] = useState(product.colors[0])
 
   return (
-    <div className="bg-creme-600">
+    <div className="bg-bg-sand">
       <div className="mx-auto max-w-2xl px-6 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
         <div className="lg:grid lg:grid-cols-2 lg:gap-x-8">
           {/* Image gallery */}