From 84d9e71b63cdaaa095bbcf91b475171793ffa06d Mon Sep 17 00:00:00 2001
From: gitea <gitea@satoshinakamoto.win>
Date: Wed, 19 Nov 2025 22:31:38 +0100
Subject: [PATCH] done

---
 app/globals.css           |  16 +-
 app/page.tsx              |   2 -
 components/Contact.tsx    |  36 ++--
 components/Footer.tsx     |  22 +-
 components/Hero.tsx       |  46 ++---
 components/Navigation.tsx |  17 +-
 components/Values.tsx     | 413 +++++++++++++++++++++++++++++++-------
 7 files changed, 420 insertions(+), 132 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 37ae37d..dbf9702 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,6 +3,10 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  --color-brown: #7D6E5E;
+  --color-pink: #EED2CC;
+  --color-cream: #FBF7F4;
+  --color-navy: #00171F;
 }
 
 body {
@@ -26,10 +30,18 @@ html {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #ea580c;
+  background: #7D6E5E;
   border-radius: 5px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: #c2410c;
+  background: #5d5247;
+}
+
+/* Form input focus styles */
+input:focus,
+textarea:focus {
+  border-color: #7D6E5E !important;
+  box-shadow: 0 0 0 2px rgba(125, 110, 94, 0.2) !important;
+  outline: none;
 }
diff --git a/app/page.tsx b/app/page.tsx
index c792607..7978e1f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,5 @@
 import Navigation from '@/components/Navigation';
 import Hero from '@/components/Hero';
-import About from '@/components/About';
 import Values from '@/components/Values';
 import Contact from '@/components/Contact';
 import Footer from '@/components/Footer';
@@ -10,7 +9,6 @@ export default function Home() {
     <main className="min-h-screen">
       <Navigation />
       <Hero />
-      <About />
       <Values />
       <Contact />
       <Footer />
diff --git a/components/Contact.tsx b/components/Contact.tsx
index 2546a50..6af4e65 100644
--- a/components/Contact.tsx
+++ b/components/Contact.tsx
@@ -54,14 +54,14 @@ export default function Contact() {
           transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
           className="text-center mb-12"
         >
-          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-slate-800 mb-4">
+          <h2 style={{ color: '#00171F' }} className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">
             Contact Me
           </h2>
-          <p className="text-lg md:text-xl text-slate-600">
+          <p style={{ color: '#00171F' }} className="text-lg md:text-xl">
             I&apos;m here for you!
           </p>
-          <p className="text-slate-600 mt-2">
-            If you have any questions concerning my services, would like to request a free, no-commitment quote or sign up for a course or a consultation, feel free to contact me, I&apos;ll be happy to help!
+          <p style={{ color: '#00171F' }} className="mt-2">
+             I'm available for both private sessions as well as public speaking arrangements and tailored workshops. Contact me directly for more detailed information and a non-commitment quote.
           </p>
         </motion.div>
 
@@ -76,7 +76,7 @@ export default function Contact() {
           >
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div>
-              <label htmlFor="firstName" className="block text-sm font-medium text-slate-700 mb-2">
+              <label htmlFor="firstName" className="block text-sm font-medium mb-2" style={{ color: '#00171F' }}>
                 First name <span className="text-red-500">*</span>
               </label>
               <input
@@ -86,11 +86,12 @@ export default function Contact() {
                 required
                 value={formData.firstName}
                 onChange={handleChange}
-                className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none transition-colors"
+                className="w-full px-4 py-3 border rounded-lg outline-none transition-all"
+                style={{ borderColor: '#EED2CC', color: '#00171F' }}
               />
             </div>
             <div>
-              <label htmlFor="lastName" className="block text-sm font-medium text-slate-700 mb-2">
+              <label htmlFor="lastName" className="block text-sm font-medium mb-2" style={{ color: '#00171F' }}>
                 Last name <span className="text-red-500">*</span>
               </label>
               <input
@@ -100,13 +101,14 @@ export default function Contact() {
                 required
                 value={formData.lastName}
                 onChange={handleChange}
-                className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none transition-colors"
+                className="w-full px-4 py-3 border rounded-lg outline-none transition-all"
+                style={{ borderColor: '#EED2CC', color: '#00171F' }}
               />
             </div>
           </div>
 
           <div>
-            <label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-2">
+            <label htmlFor="email" className="block text-sm font-medium mb-2" style={{ color: '#00171F' }}>
               Email <span className="text-red-500">*</span>
             </label>
             <input
@@ -116,12 +118,13 @@ export default function Contact() {
               required
               value={formData.email}
               onChange={handleChange}
-              className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none transition-colors"
+              className="w-full px-4 py-3 border rounded-lg outline-none transition-all"
+              style={{ borderColor: '#EED2CC', color: '#00171F' }}
             />
           </div>
 
           <div>
-            <label htmlFor="phone" className="block text-sm font-medium text-slate-700 mb-2">
+            <label htmlFor="phone" className="block text-sm font-medium mb-2" style={{ color: '#00171F' }}>
               Phone
             </label>
             <input
@@ -130,12 +133,13 @@ export default function Contact() {
               name="phone"
               value={formData.phone}
               onChange={handleChange}
-              className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none transition-colors"
+              className="w-full px-4 py-3 border rounded-lg outline-none transition-all"
+              style={{ borderColor: '#EED2CC', color: '#00171F' }}
             />
           </div>
 
           <div>
-            <label htmlFor="message" className="block text-sm font-medium text-slate-700 mb-2">
+            <label htmlFor="message" className="block text-sm font-medium mb-2" style={{ color: '#00171F' }}>
               Message
             </label>
             <textarea
@@ -144,13 +148,15 @@ export default function Contact() {
               rows={6}
               value={formData.message}
               onChange={handleChange}
-              className="w-full px-4 py-3 border border-slate-300 rounded-lg focus:ring-2 focus:ring-orange-600 focus:border-orange-600 outline-none transition-colors resize-none"
+              className="w-full px-4 py-3 border rounded-lg outline-none transition-all resize-none"
+              style={{ borderColor: '#EED2CC', color: '#00171F' }}
             />
           </div>
 
           <button
             type="submit"
-            className="w-full bg-orange-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-orange-700 transition-all transform hover:scale-105 shadow-lg hover:shadow-xl"
+            style={{ backgroundColor: '#00171F' }}
+            className="w-full text-white px-8 py-4 rounded-full text-lg font-semibold hover:opacity-90 transition-all transform hover:scale-105 shadow-lg hover:shadow-xl"
           >
             Send
           </button>
diff --git a/components/Footer.tsx b/components/Footer.tsx
index e0bd0d2..605e144 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -13,13 +13,13 @@ export default function Footer() {
   };
 
   return (
-    <footer className="bg-slate-800 text-white py-12 md:py-16">
+    <footer style={{ backgroundColor: '#00171F' }} className="text-white py-12 md:py-16">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
           {/* Brand Section */}
           <div>
             <h3 className="text-2xl font-bold mb-4">Multilingual Family Space</h3>
-            <p className="text-slate-300 mb-6">
+            <p className="mb-6" style={{ color: '#EED2CC' }}>
               Guiding bilingual families and language learners on their multilingual journey.
             </p>
           </div>
@@ -34,22 +34,28 @@ export default function Footer() {
                 required
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
-                className="w-full px-4 py-2 rounded-lg bg-slate-700 border border-slate-600 text-white placeholder-slate-400 focus:ring-2 focus:ring-orange-500 focus:border-orange-500 outline-none"
+                className="w-full px-4 py-2 rounded-lg text-white outline-none"
+                style={{ backgroundColor: '#7D6E5E', borderColor: '#7D6E5E', color: '#FBF7F4' }}
+                placeholder="Email*"
+                onFocus={(e) => { e.target.style.borderColor = '#EED2CC'; e.target.style.boxShadow = '0 0 0 2px rgba(238, 210, 204, 0.3)'; }}
+                onBlur={(e) => { e.target.style.borderColor = '#7D6E5E'; e.target.style.boxShadow = 'none'; }}
               />
               <div className="flex items-center space-x-2">
                 <input
                   type="checkbox"
                   id="subscribe"
                   defaultChecked
-                  className="w-4 h-4 text-orange-600 bg-slate-700 border-slate-600 rounded focus:ring-orange-500"
+                  className="w-4 h-4 rounded"
+                  style={{ accentColor: '#7D6E5E', backgroundColor: '#7D6E5E', borderColor: '#7D6E5E' }}
                 />
-                <label htmlFor="subscribe" className="text-sm text-slate-300">
+                <label htmlFor="subscribe" className="text-sm" style={{ color: '#EED2CC' }}>
                   Yes, subscribe me to your newsletter.
                 </label>
               </div>
               <button
                 type="submit"
-                className="w-full bg-orange-600 text-white px-6 py-2 rounded-lg hover:bg-orange-700 transition-colors font-medium"
+                style={{ backgroundColor: '#00171F' }}
+                className="w-full text-white px-6 py-2 rounded-lg hover:opacity-90 transition-colors font-medium"
               >
                 Subscribe
               </button>
@@ -59,7 +65,7 @@ export default function Footer() {
           {/* Contact Info */}
           <div>
             <h4 className="text-lg font-semibold mb-4">Contact Data</h4>
-            <div className="space-y-2 text-slate-300">
+            <div className="space-y-2" style={{ color: '#EED2CC' }}>
               <p>monika@polishlessonsamsterdam.com</p>
               <p>(+31) 682 773 830</p>
               <p className="mt-4">Comsuo Professional</p>
@@ -70,7 +76,7 @@ export default function Footer() {
         </div>
 
         {/* Bottom Bar */}
-        <div className="mt-8 pt-8 border-t border-slate-700 text-center text-sm text-slate-400">
+        <div className="mt-8 pt-8 text-center text-sm" style={{ borderTopColor: '#7D6E5E', color: '#EED2CC' }}>
           <p>Copyright 2025. All rights reserved.</p>
         </div>
       </div>
diff --git a/components/Hero.tsx b/components/Hero.tsx
index d59ba38..551fcac 100644
--- a/components/Hero.tsx
+++ b/components/Hero.tsx
@@ -2,19 +2,34 @@
 
 import Link from 'next/link';
 import { motion } from 'framer-motion';
-import Image from 'next/image';
 
 export default function Hero() {
   return (
-    <section id="home" className="pt-16 md:pt-20 min-h-screen flex items-center bg-gradient-to-br from-orange-50 via-orange-50 to-orange-100">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
+    <section 
+      id="home" 
+      className="pt-16 md:pt-20 min-h-screen flex items-center relative overflow-hidden"
+    >
+      {/* Blurred background image */}
+      <div 
+        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
+        style={{
+          backgroundImage: `url('/media/family-hero.jpg')`,
+          filter: 'blur(1.5px)',
+          transform: 'scale(1.05)'
+        }}
+      ></div>
+      
+      {/* Transparent overlay for better text readability */}
+      <div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/40 to-black/50"></div>
+      
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32 relative z-10">
+        <div className="max-w-3xl">
           <div className="text-center lg:text-left">
             <motion.h1
               initial={{ opacity: 0, y: 30 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
-              className="text-4xl md:text-6xl lg:text-7xl font-bold text-slate-800 mb-6 leading-tight"
+              className="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight drop-shadow-lg"
             >
               Multilingual Family Space
             </motion.h1>
@@ -22,7 +37,7 @@ export default function Hero() {
               initial={{ opacity: 0, y: 30 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.8, delay: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
-              className="text-xl md:text-2xl lg:text-3xl text-slate-600 mb-8 font-light"
+              className="text-xl md:text-2xl lg:text-3xl text-white mb-8 font-light drop-shadow-lg"
             >
               Guiding bilingual families and language learners on their multilingual journey
             </motion.p>
@@ -33,28 +48,13 @@ export default function Hero() {
             >
               <Link
                 href="#contact"
-                className="inline-block bg-orange-600 text-white px-8 py-4 rounded-full text-lg font-semibold hover:bg-orange-700 transition-all transform hover:scale-105 shadow-lg hover:shadow-xl"
+                style={{ backgroundColor: '#00171F' }}
+                className="inline-block text-white px-8 py-4 rounded-full text-lg font-semibold hover:opacity-90 transition-all transform hover:scale-105 shadow-lg hover:shadow-xl"
               >
                 Contact Now
               </Link>
             </motion.div>
           </div>
-          <motion.div
-            initial={{ opacity: 0, scale: 0.9 }}
-            animate={{ opacity: 1, scale: 1 }}
-            transition={{ duration: 0.8, delay: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
-            className="relative h-64 md:h-96 lg:h-[500px] rounded-2xl overflow-hidden shadow-2xl"
-          >
-            <Image
-              src="https://kagi.com/proxy/familys-circle-of-love.jpg?c=N7Pi3QNEaSL6_svD8glSC__wDVyV2V3zvCInmdfWCWKG-8Z-O9nEpHpluEteRgw0QoYCXXKIdy6hZg8Xfdp19tYAlt-dh2gMkJKZiY8dnDIjuZuYj6-QliCKHu5uJamh4tIksNx6ozWuccjRjCnOzyjYSoJf_uF4FtTBLvOFJjRYpeUUDKVWjmrJT1Pbv8A5qcv87GQINLuysB5dqMdkPg%3D%3D"
-              alt="Multilingual family"
-              fill
-              className="object-cover"
-              sizes="(max-width: 1024px) 100vw, 50vw"
-              priority
-              unoptimized
-            />
-          </motion.div>
         </div>
       </div>
     </section>
diff --git a/components/Navigation.tsx b/components/Navigation.tsx
index 0696a38..73bac63 100644
--- a/components/Navigation.tsx
+++ b/components/Navigation.tsx
@@ -17,7 +17,7 @@ export default function Navigation() {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between h-16 md:h-20">
           {/* Logo */}
-          <Link href="#home" className="text-2xl md:text-3xl font-bold text-slate-800 hover:text-orange-600 transition-colors">
+          <Link href="#home" style={{ color: '#00171F' }} className="text-2xl md:text-3xl font-bold hover:opacity-80 transition-colors">
             Multilingual Family Space
           </Link>
 
@@ -27,14 +27,16 @@ export default function Navigation() {
               <Link
                 key={item.name}
                 href={item.href}
-                className="text-slate-700 hover:text-orange-600 transition-colors font-medium"
+                style={{ color: '#00171F' }}
+                className="hover:opacity-70 transition-colors font-medium"
               >
                 {item.name}
               </Link>
             ))}
             <Link
               href="#contact"
-              className="bg-orange-600 text-white px-6 py-2 rounded-full hover:bg-orange-700 transition-colors font-medium"
+              style={{ backgroundColor: '#00171F' }}
+              className="text-white px-6 py-2 rounded-full hover:opacity-90 transition-colors font-medium"
             >
               Contact Now
             </Link>
@@ -43,7 +45,8 @@ export default function Navigation() {
           {/* Mobile Menu Button */}
           <button
             onClick={() => setIsMenuOpen(!isMenuOpen)}
-            className="md:hidden p-2 text-slate-700 hover:text-orange-600"
+            style={{ color: '#00171F' }}
+            className="md:hidden p-2 hover:opacity-70"
             aria-label="Toggle menu"
           >
             <svg
@@ -72,7 +75,8 @@ export default function Navigation() {
                 key={item.name}
                 href={item.href}
                 onClick={() => setIsMenuOpen(false)}
-                className="block text-slate-700 hover:text-orange-600 transition-colors font-medium py-2"
+                style={{ color: '#00171F' }}
+                className="block hover:opacity-70 transition-colors font-medium py-2"
               >
                 {item.name}
               </Link>
@@ -80,7 +84,8 @@ export default function Navigation() {
             <Link
               href="#contact"
               onClick={() => setIsMenuOpen(false)}
-              className="block bg-orange-600 text-white px-6 py-2 rounded-full hover:bg-orange-700 transition-colors font-medium text-center mt-4"
+              style={{ backgroundColor: '#00171F' }}
+              className="block text-white px-6 py-2 rounded-full hover:opacity-90 transition-colors font-medium text-center mt-4"
             >
               Contact Now
             </Link>
diff --git a/components/Values.tsx b/components/Values.tsx
index ab2def1..1be3088 100644
--- a/components/Values.tsx
+++ b/components/Values.tsx
@@ -1,42 +1,248 @@
 'use client';
 
 import { motion } from 'framer-motion';
-import { useInView } from 'framer-motion';
-import { useRef, useState, useEffect } from 'react';
+import { useRef, useState } from 'react';
 import Image from 'next/image';
 
 export default function Values() {
   const sectionRef = useRef(null);
-  const isInView = useInView(sectionRef, { once: true, margin: '-100px' });
-  const [mounted, setMounted] = useState(false);
+  const [expandedSections, setExpandedSections] = useState<{ [key: string]: boolean }>({
+    tools: false,
+    questions: false,
+  });
 
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  // Prevent hydration mismatch by using consistent initial state
-  const shouldAnimate = mounted && isInView;
+  const toggleSection = (key: string) => {
+    setExpandedSections(prev => ({
+      ...prev,
+      [key]: !prev[key],
+    }));
+  };
 
   const services = [
     {
       title: 'Bilingual Upbringing',
-      description: 'Living in a multilingual home is not always easy. Parents often lack guidance and support, and without a clear plan some children are left confused and unable to construct a coherent identity around their fragmented language skills. I\'m here to guide both (future) parents and adult bilinguals reconnecting with their roots.',
-      icon: (
-        <svg className="w-12 h-12 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-        </svg>
-      ),
-      image: 'https://kagi.com/proxy/OIP.UAcj5KYX7RKEhVZ6DRqGsgHaE7?c=MvlWCDdicm1aK3zpADFz56M-jyjW-k_WkjPX8kg3kd7yGoRM-QOn_I1vlzUgMSdd3ZA0VkTSDpsSnaT8MntfyiWi4KFJRlP6WmtGvfIyCytNxoxitLvzxtR-qUOcdepb',
-    },
-    {
-      title: 'Polish Lessons',
-      description: 'It is exciting to be in a relationship with a speaker of a different language. You are curious, motivated and you want to start speaking immediately. It sometimes takes a few Duolingo levels and a few \'classes\' with your partner before you understand it takes a professional teacher to do the job. I\'m here to assist you.',
-      icon: (
-        <svg className="w-12 h-12 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-        </svg>
+      description: (
+        <div className="space-y-16 md:space-y-24">
+          {/* (Future) Parents Section */}
+          <div className="grid grid-cols-1 lg:grid-cols-10 gap-12 lg:gap-16 items-start">
+            <div className="lg:col-span-7 lg:pr-8">
+              <div className="inline-block mb-4">
+          
+              </div>
+              <h3 style={{ color: '#00171F' }} className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 leading-tight">
+                (Future) Parents
+              </h3>
+              <p style={{ color: '#00171F' }} className="text-lg md:text-xl leading-relaxed mb-6 opacity-90">
+                Bringing up a bilingual child confronts parents with many choices they never imagined they would have to make, often without preparation and any proper guidance.
+              </p>
+              <p style={{ color: '#00171F' }} className="text-base md:text-lg leading-relaxed opacity-80">
+                Schools are often not ready to assist professionally, the extended family might have their own expectations and in the background you might be fighting your own migration struggle. From helping you put together a realistic language learning plan when you are expecting to assisting you in facing the linguistic reality of your teen, I'm here to guide you.
+              </p>
+            </div>
+            <div className="lg:col-span-3 flex justify-center lg:justify-end mb-8 lg:mb-0 lg:pt-10">
+              <div className="relative w-full max-w-full md:max-w-lg lg:w-full lg:max-w-none h-72 md:h-80 lg:h-96 rounded-2xl overflow-hidden">
+                <Image
+                  src="/media/parents-hero.jpg"
+                  alt="(Future) Parents"
+                  fill
+                  className="object-cover"
+                  sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 30vw"
+                  unoptimized
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Adult Bilinguals Section */}
+          <div className="grid grid-cols-1 lg:grid-cols-10 gap-12 lg:gap-16 items-start">
+            <div className="lg:col-span-3 flex justify-center lg:justify-start mb-8 lg:mb-0 lg:pt-10">
+              <div className="relative w-full max-w-full md:max-w-lg lg:w-full lg:max-w-none h-72 md:h-80 lg:h-96 rounded-2xl overflow-hidden">
+                <Image
+                  src="/media/adult-bilinguals.jpg"
+                  alt="Adult bilinguals"
+                  fill
+                  className="object-cover"
+                  sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 30vw"
+                  unoptimized
+                />
+              </div>
+            </div>
+            <div className="lg:col-span-7 lg:pl-8">
+              <div className="inline-block mb-4">
+           
+              </div>
+              <h3 style={{ color: '#00171F' }} className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 leading-tight">
+                Adult bilinguals
+              </h3>
+              <p style={{ color: '#00171F' }} className="text-lg md:text-xl leading-relaxed mb-6 opacity-90">
+                Growing up in a multilingual home does not always mean perfectly mastering all the languages spoken by our family members.
+              </p>
+              <p style={{ color: '#00171F' }} className="text-base md:text-lg leading-relaxed opacity-80">
+                Learning takes a lot of work and commitment, and life sometimes gets in the way. But it often remains an important aspect of who we are and many people wish to reconnect with that part of themselves later in life – in their journey of self-discovery, to understand and heal from the past, to get to know their family and culture better, to make new friends or get new career prospects. Whatever your reasons, you've come to the right place.
+              </p>
+            </div>
+          </div>
+
+          {/* What to expect Section */}
+          <div className="pt-12 border-t" style={{ borderColor: '#EED2CC' }}>
+            <div className="text-center mb-12">
+              <div className="inline-block mb-4">
+             
+              </div>
+              <h3 style={{ color: '#00171F' }} className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 leading-tight">
+                What to expect?
+              </h3>
+            </div>
+            
+            <div className="space-y-8 mb-12">
+              <div className="max-w-4xl mx-auto border rounded-lg overflow-hidden" style={{ borderColor: '#EED2CC' }}>
+                <button
+                  onClick={() => toggleSection('tools')}
+                  className="w-full text-left p-6 flex items-center justify-between hover:opacity-80 transition-opacity"
+                >
+                  <h4 style={{ color: '#7D6E5E' }} className="text-2xl md:text-3xl font-bold">
+                    I will give you tools.
+                  </h4>
+                  <svg
+                    className={`w-6 h-6 transition-transform duration-300 flex-shrink-0 ml-4`}
+                    style={{ color: '#7D6E5E', transform: expandedSections.tools ? 'rotate(180deg)' : 'rotate(0deg)' }}
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                  </svg>
+                </button>
+                {expandedSections.tools && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: 'auto', opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.3 }}
+                    className="overflow-hidden"
+                  >
+                    <div className="px-6 pb-6">
+                      <p style={{ color: '#00171F' }} className="text-lg md:text-xl leading-relaxed opacity-90">
+                        I can offer you a series of conversations where you have space to ask me questions about multilingualism, child development and language learning. It is not easy to make an actionable plan when you don't know where you are and where you are heading. Together we will rewrite your story from a subject-matter-expert perspective, I will help you understand your needs and objectives and assist you in making a realistic, step-by-step plan to reach them.
+                      </p>
+                    </div>
+                  </motion.div>
+                )}
+              </div>
+              
+              <div className="max-w-4xl mx-auto border rounded-lg overflow-hidden" style={{ borderColor: '#EED2CC' }}>
+                <button
+                  onClick={() => toggleSection('questions')}
+                  className="w-full text-left p-6 flex items-center justify-between hover:opacity-80 transition-opacity"
+                >
+                  <h4 style={{ color: '#7D6E5E' }} className="text-2xl md:text-3xl font-bold">
+                    I'm not afraid to ask difficult questions because I believe in you.
+                  </h4>
+                  <svg
+                    className={`w-6 h-6 transition-transform duration-300 flex-shrink-0 ml-4`}
+                    style={{ color: '#7D6E5E', transform: expandedSections.questions ? 'rotate(180deg)' : 'rotate(0deg)' }}
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                  </svg>
+                </button>
+                {expandedSections.questions && (
+                  <motion.div
+                    initial={{ height: 0, opacity: 0 }}
+                    animate={{ height: 'auto', opacity: 1 }}
+                    exit={{ height: 0, opacity: 0 }}
+                    transition={{ duration: 0.3 }}
+                    className="overflow-hidden"
+                  >
+                    <div className="px-6 pb-6">
+                      <p style={{ color: '#00171F' }} className="text-lg md:text-xl leading-relaxed opacity-90">
+                        I can also facilitate a series of conversations between you and the parts of yourself that you aren't communicating with for various reasons, e.g. it is too complex or too painful, you lack vocabulary to have that conversation with yourself, you need a fresh perspective on your situation or factual knowledge, etc. I will act as a catalyst of this process and guide you to build a clear picture of your situation, your real needs and the solutions that are available to you. My objective is to skillfully guide you through the process of searching for your own answers, I believe in your natural ability to create insights and ideas needed to move your situation forward.
+                      </p>
+                    </div>
+                  </motion.div>
+                )}
+              </div>
+            </div>
+            
+            {/* Benefits Section */}
+            <div className="mt-16 pt-12 border-t" style={{ borderColor: '#EED2CC' }}>
+              <div className="text-center mb-12">
+                <div className="inline-block mb-4">
+            
+                </div>
+                <h3 style={{ color: '#00171F' }} className="text-3xl md:text-4xl lg:text-5xl font-bold mb-6 leading-tight">
+                  Common benefits people experience from working with me
+                </h3>
+              </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4" style={{ color: '#00171F' }}>
+                <div className="rounded-lg p-5 border hover:shadow-md transition-all flex items-start gap-4" style={{ backgroundColor: '#FBF7F4', borderColor: '#EED2CC' }}>
+                  <div className="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" style={{ backgroundColor: '#EED2CC' }}>
+                    <svg className="w-6 h-6" style={{ color: '#7D6E5E' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                    </svg>
+                  </div>
+                  <p className="text-base md:text-lg leading-relaxed font-medium pt-1">Understanding their situation more clearly</p>
+                </div>
+                <div className="rounded-lg p-5 border hover:shadow-md transition-all flex items-start gap-4" style={{ backgroundColor: '#FBF7F4', borderColor: '#EED2CC' }}>
+                  <div className="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" style={{ backgroundColor: '#EED2CC' }}>
+                    <svg className="w-6 h-6" style={{ color: '#7D6E5E' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                    </svg>
+                  </div>
+                  <p className="text-base md:text-lg leading-relaxed font-medium pt-1">Improved sense of direction and increased motivation</p>
+                </div>
+                <div className="rounded-lg p-5 border hover:shadow-md transition-all flex items-start gap-4" style={{ backgroundColor: '#FBF7F4', borderColor: '#EED2CC' }}>
+                  <div className="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" style={{ backgroundColor: '#EED2CC' }}>
+                    <svg className="w-6 h-6" style={{ color: '#7D6E5E' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    </svg>
+                  </div>
+                  <p className="text-base md:text-lg leading-relaxed font-medium pt-1">Taking constructive action and planning ahead to get satisfying results</p>
+                </div>
+                <div className="rounded-lg p-5 border hover:shadow-md transition-all flex items-start gap-4" style={{ backgroundColor: '#FBF7F4', borderColor: '#EED2CC' }}>
+                  <div className="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" style={{ backgroundColor: '#EED2CC' }}>
+                    <svg className="w-6 h-6" style={{ color: '#7D6E5E' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+                    </svg>
+                  </div>
+                  <p className="text-base md:text-lg leading-relaxed font-medium pt-1">Developing new ideas and approaches for solving existing problems</p>
+                </div>
+                <div className="rounded-lg p-5 border hover:shadow-md transition-all flex items-start gap-4" style={{ backgroundColor: '#FBF7F4', borderColor: '#EED2CC' }}>
+                  <div className="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" style={{ backgroundColor: '#EED2CC' }}>
+                    <svg className="w-6 h-6" style={{ color: '#7D6E5E' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                    </svg>
+                  </div>
+                  <p className="text-base md:text-lg leading-relaxed font-medium pt-1">Increased knowledge of self (self-awareness)</p>
+                </div>
+                <div className="rounded-lg p-5 border hover:shadow-md transition-all flex items-start gap-4" style={{ backgroundColor: '#FBF7F4', borderColor: '#EED2CC' }}>
+                  <div className="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" style={{ backgroundColor: '#EED2CC' }}>
+                    <svg className="w-6 h-6" style={{ color: '#7D6E5E' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+                    </svg>
+                  </div>
+                  <p className="text-base md:text-lg leading-relaxed font-medium pt-1">Improved ability to relate to and influence others</p>
+                </div>
+                <div className="rounded-lg p-5 border hover:shadow-md transition-all flex items-start gap-4" style={{ backgroundColor: '#FBF7F4', borderColor: '#EED2CC' }}>
+                  <div className="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center" style={{ backgroundColor: '#EED2CC' }}>
+                    <svg className="w-6 h-6" style={{ color: '#7D6E5E' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
+                    </svg>
+                  </div>
+                  <p className="text-base md:text-lg leading-relaxed font-medium pt-1">Increased resourcefulness and resilience, e.g. ability to handle change</p>
+                </div>
+              </div>
+              
+              <p style={{ color: '#00171F' }} className="text-center mt-12 text-lg md:text-xl leading-relaxed opacity-90">
+                I'm available for both private sessions as well as public speaking arrangements and tailored workshops. Contact me directly for more detailed information and a non-committal quote.
+              </p>
+            </div>
+          </div>
+        </div>
       ),
-      image: 'https://kagi.com/proxy/images?c=_m3km2RjA3G0qleowsZXHZb9NEn0fSsEYIHbKzMDyAFb4nUPIanknmQV_g0rmdCIsgzAMsPq08VleluyScXQQ4izz3KxqIw42uNpJM0UVdSW3vFxwNsADK8GLjDKETNDP1zByVU0b1ao6Y7_TdQpnQ%3D%3D',
     },
   ];
 
@@ -45,7 +251,7 @@ export default function Values() {
       title: 'MA in Linguistics',
       description: 'My thesis focused on bilingualism and its challenges related with pronunciation and spelling',
       icon: (
-        <svg className="w-12 h-12 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg className="w-12 h-12" style={{ color: '#7D6E5E' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 14l9-5-9-5-9 5 9 5z" />
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 14v7M5.176 10.5a11.952 11.952 0 00-1.824 2.998M18.824 13.498a11.952 11.952 0 01-1.824-2.998" />
@@ -56,7 +262,7 @@ export default function Values() {
       title: '20 Years of Experience',
       description: 'I\'ve been teaching foreign languages in Austria, Poland, Spain and the Netherlands',
       icon: (
-        <svg className="w-12 h-12 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg className="w-12 h-12" style={{ color: '#7D6E5E' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
         </svg>
       ),
@@ -65,7 +271,7 @@ export default function Values() {
       title: 'Speech Therapy',
       description: 'During my professional education I mastered the basics of speech therapy and vocal emission',
       icon: (
-        <svg className="w-12 h-12 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg className="w-12 h-12" style={{ color: '#7D6E5E' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
         </svg>
       ),
@@ -74,7 +280,7 @@ export default function Values() {
       title: 'Dyslexia Support',
       description: 'I completed a professional training in "Supporting learners in difficulties with reading and writing"',
       icon: (
-        <svg className="w-12 h-12 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg className="w-12 h-12" style={{ color: '#7D6E5E' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
         </svg>
       ),
@@ -83,7 +289,7 @@ export default function Values() {
       title: 'Coaching and Counseling',
       description: 'I\'m a certified junior coach/counsellor and work with individual clients in Polish and English',
       icon: (
-        <svg className="w-12 h-12 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg className="w-12 h-12" style={{ color: '#7D6E5E' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
         </svg>
       ),
@@ -92,7 +298,7 @@ export default function Values() {
       title: 'Improv Theatre',
       description: 'I love theatre, comedy and improvisation! My hobby, and teaching tool is improvised comedy and physical theatre.',
       icon: (
-        <svg className="w-12 h-12 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg className="w-12 h-12" style={{ color: '#7D6E5E' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
         </svg>
@@ -101,66 +307,119 @@ export default function Values() {
   ];
 
   return (
-    <section id="services" className="py-20 md:py-32 bg-gradient-to-b from-white to-orange-50" ref={sectionRef}>
+    <section id="services" style={{ backgroundColor: '#FBF7F4' }} className="py-20 md:py-32" ref={sectionRef}>
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <motion.div
           initial={{ opacity: 0, y: 30 }}
-          animate={shouldAnimate ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-100px' }}
           transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
-          className="text-center mb-16"
+          className="text-center mb-12"
         >
-          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-slate-800 mb-4">
-            Services
+          <h2 style={{ color: '#00171F' }} className="text-3xl md:text-4xl lg:text-5xl font-bold mb-3">
+            Multilingual Coaching
           </h2>
+          <div className="w-24 h-1 mx-auto rounded-full" style={{ backgroundColor: '#7D6E5E' }}></div>
         </motion.div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12 mb-20">
-          {services.map((service, index) => (
-            <motion.div
-              key={index}
-              initial={{ opacity: 0, y: 50 }}
-              animate={shouldAnimate ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
-              transition={{
-                duration: 0.8,
-                delay: 0.2 + index * 0.1,
-                ease: [0.25, 0.1, 0.25, 1],
-              }}
-              className="bg-white rounded-2xl shadow-md hover:shadow-xl transition-shadow border border-slate-100 overflow-hidden"
-            >
-              {service.image && (
-                <div className="relative h-48 w-full">
+        <div className="flex justify-center mb-20">
+          <div className="w-full max-w-6xl">
+            {services.map((service, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 50 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true, margin: '-100px' }}
+                transition={{
+                  duration: 0.8,
+                  delay: 0.2 + index * 0.1,
+                  ease: [0.25, 0.1, 0.25, 1],
+                }}
+              >
+                {typeof service.description === 'string' ? (
+                  <p className="text-slate-700 text-lg leading-relaxed">
+                    {service.description}
+                  </p>
+                ) : (
+                  <div className="text-slate-700 text-lg leading-relaxed">
+                    {service.description}
+                  </div>
+                )}
+              </motion.div>
+            ))}
+          </div>
+        </div>
+
+        {/* About Me Section */}
+        <div id="about" className="scroll-mt-20 mb-20">
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: '-100px' }}
+            transition={{ duration: 0.8, delay: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
+            className="text-center mb-12"
+          >
+            <h2 style={{ color: '#00171F' }} className="text-3xl md:text-4xl lg:text-5xl font-bold mb-3">
+              About Me
+            </h2>
+            <div className="w-24 h-1 mx-auto rounded-full mb-8" style={{ backgroundColor: '#7D6E5E' }}></div>
+          </motion.div>
+
+          <div className="flex justify-center">
+            <div className="w-full max-w-4xl">
+              <motion.div
+                initial={{ opacity: 0, y: 50 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true, margin: '-100px' }}
+                transition={{
+                  duration: 0.8,
+                  delay: 0.3,
+                  ease: [0.25, 0.1, 0.25, 1],
+                }}
+              >
+              <div className="text-center mb-8">
+                <div className="relative w-32 h-32 md:w-40 md:h-40 mx-auto mb-6">
                   <Image
-                    src={service.image}
-                    alt={service.title}
+                    src="https://polishlessonsamsterdam.com/images/monika-small.jpg"
+                    alt="Monika Zatylny"
                     fill
-                    className="object-cover"
-                    sizes="(max-width: 768px) 100vw, 50vw"
+                    className="rounded-full object-cover shadow-lg"
+                    style={{ borderColor: '#7D6E5E', borderWidth: '4px' }}
+                    sizes="(max-width: 768px) 128px, 160px"
                     unoptimized
                   />
                 </div>
-              )}
-              <div className="p-8">
-                <div className="mb-6">{service.icon}</div>
-                <h3 className="text-2xl md:text-3xl font-bold text-slate-800 mb-4">
-                  {service.title}
-                </h3>
-                <p className="text-slate-600 text-lg leading-relaxed">
-                  {service.description}
+                <p className="text-xl md:text-2xl font-semibold mb-6" style={{ color: '#7D6E5E' }}>
+                  Monika Zatylny, MA - Language Coach
                 </p>
               </div>
-            </motion.div>
-          ))}
+              <div className="space-y-6 text-base md:text-lg leading-relaxed" style={{ color: '#00171F' }}>
+                <p>
+                  I like helping people find solutions that work. I've been studying multilingualism from different 
+                  perspectives for the past 20 years - as a linguist, teacher and coach/counsellor - so I see a bigger 
+                  picture than most people who are used to just one personal or occupational perspective.
+                </p>
+                <p>
+                  I listen to really hear what you're saying and help you understand, strategise and grow.
+                </p>
+                <p>
+                  My thesis focused on bilingualism and its challenges related with pronunciation and spelling. I've 
+                  been teaching foreign languages in Austria, Poland, Spain and the Netherlands for over 20 years.
+                </p>
+              </div>
+              </motion.div>
+            </div>
+          </div>
         </div>
 
         <motion.div
           initial={{ opacity: 0, y: 30 }}
-          animate={shouldAnimate ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
-          transition={{ duration: 0.8, delay: 0.4, ease: [0.25, 0.1, 0.25, 1] }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-100px' }}
+          transition={{ duration: 0.8, delay: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
           className="text-center mb-16"
         >
-          <h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-slate-800 mb-4">
-            Qualifications & Experience
-          </h2>
+      
         </motion.div>
 
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
@@ -168,19 +427,21 @@ export default function Values() {
             <motion.div
               key={index}
               initial={{ opacity: 0, y: 50 }}
-              animate={shouldAnimate ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: '-100px' }}
               transition={{
                 duration: 0.8,
-                delay: 0.5 + index * 0.1,
+                delay: index * 0.1,
                 ease: [0.25, 0.1, 0.25, 1],
               }}
-              className="bg-white p-8 rounded-2xl shadow-md hover:shadow-xl transition-shadow border border-slate-100"
+              className="p-8 rounded-2xl shadow-md hover:shadow-xl transition-shadow border"
+              style={{ backgroundColor: '#FBF7F4', borderColor: '#EED2CC' }}
             >
               <div className="mb-6">{qual.icon}</div>
-              <h3 className="text-xl md:text-2xl font-bold text-slate-800 mb-4">
+              <h3 style={{ color: '#00171F' }} className="text-xl md:text-2xl font-bold mb-4">
                 {qual.title}
               </h3>
-              <p className="text-slate-600 text-base leading-relaxed">
+              <p style={{ color: '#00171F' }} className="text-base leading-relaxed">
                 {qual.description}
               </p>
             </motion.div>