@ -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 ( ( ) = > {
set Mounted( true ) ;
} , [ ] ) ;
// Prevent hydration mismatch by using consistent initial state
const shouldAnimate = mounted && isInView ;
const toggleSection = ( key : string ) = > {
set ExpandedSections( 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" = "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-1 6 "
className = "text-center mb-1 2 "
>
< h2 = "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 : * 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 = "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 = " text-slate-600 text-base leading-relaxed">
< p style= { { color : '#00171F' } } className= " text-base leading-relaxed">
{ qual . description }
< / p >
< / motion.div >
gitea
1 month ago