From 6d8428c1e5223cad01f8bb833a822e97b1c3b5b3 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Mon, 1 Sep 2025 16:13:28 +0200
Subject: [PATCH] edit

---
 src/components/Experiences.jsx |  2 +-
 src/components/Retreats.jsx    | 29 +++++++----------------------
 2 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/src/components/Experiences.jsx b/src/components/Experiences.jsx
index 0002044..e4c26b3 100644
--- a/src/components/Experiences.jsx
+++ b/src/components/Experiences.jsx
@@ -4,7 +4,7 @@ import { H1, H2, P , PS, PXS, H3, H4 } from "@/components/text";
 export function Experiences({ onExperienceSelect }) {
   return (           
     <div className="bg-transparent">    
-      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-0 mt-16">
+      <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-0 lg:pt-12 pt-6 lg:pb-6 pb-12">
         <div className="grid grid-cols-1 gap-4 lg:grid-cols-6 lg:grid-rows-2">
           {/* Photo 1 - Left large image */}
           <div className="flex lg:col-span-2 lg:row-span-2">
diff --git a/src/components/Retreats.jsx b/src/components/Retreats.jsx
index 7206cf6..26a04c7 100644
--- a/src/components/Retreats.jsx
+++ b/src/components/Retreats.jsx
@@ -61,7 +61,7 @@ function classNames(...classes) {
 
 export function Retreats() {
   return (
-    <div className="pb-24">
+    <div className="lg:pb-24 pb-12">
       <main className="mx-auto max-w-7xl sm:px-6 sm:pt-12 lg:px-0">
         <div className="mx-auto max-w-2xl lg:max-w-none">
           {/* Product */}
@@ -102,36 +102,21 @@ export function Retreats() {
             <div className="mt-6 px-6 sm:mt-16 sm:px-0 lg:mt-0">
               <H2 className="">{product.name}</H2>
 
-              <div className="mt-3">
-                <H2 className="sr-only">Product information</H2>
-              </div>
-
-              {/* Reviews */}
-              <div className="mt-3">
-                <h3 className="sr-only">Reviews</h3>
-              </div>
-
-              <div className="mt-4">
-                <h3 className="sr-only">Description</h3>
+              <div className="mt-2">
 
                 <div className="space-y-2 text-base text-gray-700">
                   <PS>{product.description}</PS>
                 </div>
               </div>
 
-              <section aria-labelledby="details-heading" className="mt-12">
-                <H2 id="details-heading" className="sr-only">
-                  Additional details
-                </H2>
+              <section aria-labelledby="details-heading" className="lg:pt-8 pt-6">
 
-                <div className="space-y-8 border-t border-gray-300 pt-8">
+                <div className="lg:space-y-8 space-y-4 border-t border-gray-300 lg:pt-8 pt-6">
                   {product.details.map((detail) => (
                     <div key={detail.name}>
-                      <h3>
-                        <PS className="font-medium text-gray-900 mb-4">
-                          {detail.name}
-                        </PS>
-                      </h3>
+                      <H3 className="font-medium text-gray-900 mb-4">
+                        {detail.name}
+                      </H3>
                       <ul
                         role="list"
                         className="list-disc space-y-2 pl-5 text-sm/6 text-gray-700 marker:text-gray-300"