|
|
'use client';
|
|
|
|
|
|
import { motion } from 'framer-motion';
|
|
|
import { useRef, useState } from 'react';
|
|
|
import Image from 'next/image';
|
|
|
|
|
|
export default function Values() {
|
|
|
const sectionRef = useRef(null);
|
|
|
const [expandedSections, setExpandedSections] = useState<{ [key: string]: boolean }>({
|
|
|
tools: false,
|
|
|
questions: false,
|
|
|
});
|
|
|
|
|
|
const toggleSection = (key: string) => {
|
|
|
setExpandedSections(prev => ({
|
|
|
...prev,
|
|
|
[key]: !prev[key],
|
|
|
}));
|
|
|
};
|
|
|
|
|
|
const services = [
|
|
|
{
|
|
|
title: 'Bilingual Upbringing',
|
|
|
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>
|
|
|
),
|
|
|
},
|
|
|
];
|
|
|
|
|
|
const qualifications = [
|
|
|
{
|
|
|
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" 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" />
|
|
|
</svg>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
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" 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>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
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" 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>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
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" 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>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
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" 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>
|
|
|
),
|
|
|
},
|
|
|
{
|
|
|
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" 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>
|
|
|
),
|
|
|
},
|
|
|
];
|
|
|
|
|
|
return (
|
|
|
<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 }}
|
|
|
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-12"
|
|
|
>
|
|
|
<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="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="https://polishlessonsamsterdam.com/images/monika-small.jpg"
|
|
|
alt="Monika Zatylny"
|
|
|
fill
|
|
|
className="rounded-full object-cover shadow-lg"
|
|
|
style={{ borderColor: '#7D6E5E', borderWidth: '4px' }}
|
|
|
sizes="(max-width: 768px) 128px, 160px"
|
|
|
unoptimized
|
|
|
/>
|
|
|
</div>
|
|
|
<p className="text-xl md:text-2xl font-semibold mb-6" style={{ color: '#7D6E5E' }}>
|
|
|
Monika Zatylny, MA - Language Coach
|
|
|
</p>
|
|
|
</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 }}
|
|
|
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"
|
|
|
>
|
|
|
|
|
|
</motion.div>
|
|
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-12">
|
|
|
{qualifications.map((qual, 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: index * 0.1,
|
|
|
ease: [0.25, 0.1, 0.25, 1],
|
|
|
}}
|
|
|
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 style={{ color: '#00171F' }} className="text-xl md:text-2xl font-bold mb-4">
|
|
|
{qual.title}
|
|
|
</h3>
|
|
|
<p style={{ color: '#00171F' }} className="text-base leading-relaxed">
|
|
|
{qual.description}
|
|
|
</p>
|
|
|
</motion.div>
|
|
|
))}
|
|
|
</div>
|
|
|
</div>
|
|
|
</section>
|
|
|
);
|
|
|
}
|
|
|
|
