gitea
1 month ago
parent
38afbb49bc
commit
2c3e62c2c6
@ -1,36 +1,82 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
# Hanna L. Kim - Building Bridges Website
|
||||
|
||||
A modern, mobile-friendly website for Hanna L. Kim, showcasing her vision for healthcare reform and economic equality.
|
||||
|
||||
## Features
|
||||
|
||||
- **Responsive Design**: Fully mobile-friendly with a responsive navigation menu
|
||||
- **Modern Stack**: Built with Next.js 16, TypeScript, and Tailwind CSS
|
||||
- **Smooth Scrolling**: Smooth anchor link navigation
|
||||
- **Accessible**: Semantic HTML and ARIA labels for better accessibility
|
||||
- **Performance**: Optimized for fast loading and SEO
|
||||
|
||||
## Sections
|
||||
|
||||
- **Hero Section**: "Building Bridges" tagline with call-to-action
|
||||
- **About**: Introduction to Hanna L. Kim and her mission
|
||||
- **Values & Vision**: Four core values with icons and descriptions
|
||||
- **Contact**: Contact form for inquiries
|
||||
- **Footer**: Newsletter subscription and social media links
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
### Prerequisites
|
||||
|
||||
- Node.js 18+ and npm
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### Development
|
||||
|
||||
Run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.
|
||||
|
||||
### Build
|
||||
|
||||
Create a production build:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
Start the production server:
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
## Technologies Used
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
- **Next.js 16**: React framework with App Router
|
||||
- **TypeScript**: Type-safe JavaScript
|
||||
- **Tailwind CSS**: Utility-first CSS framework
|
||||
- **React 19**: Latest React version
|
||||
|
||||
## Learn More
|
||||
## Color Palette
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
The website uses a calming palette of:
|
||||
- **Blues**: Trust and confidence
|
||||
- **Teals/Greens**: Growth and harmony
|
||||
- **Neutrals**: Professional and accessible
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
## Customization
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
To customize the website:
|
||||
|
||||
## Deploy on Vercel
|
||||
1. Update content in the component files in `/components`
|
||||
2. Modify colors in Tailwind classes (teal-600, blue-50, etc.)
|
||||
3. Update contact information in the Footer component
|
||||
4. Add your own images by placing them in `/public` and updating image references
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
## License
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
© 2035 by Hanna L. Kim
|
||||
|
||||
@ -1,65 +1,19 @@
|
||||
import Image from "next/image";
|
||||
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';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<main className="min-h-screen">
|
||||
<Navigation />
|
||||
<Hero />
|
||||
<About />
|
||||
<Values />
|
||||
<Contact />
|
||||
<Footer />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
@ -0,0 +1,71 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef, useState, useEffect } from 'react';
|
||||
import Image from 'next/image';
|
||||
|
||||
export default function About() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
// Prevent hydration mismatch by using consistent initial state
|
||||
const shouldAnimate = mounted && isInView;
|
||||
|
||||
return (
|
||||
<section id="about" className="py-20 md:py-32 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-4xl mx-auto" ref={ref}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={shouldAnimate ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
|
||||
transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
|
||||
className="flex flex-col items-center mb-8"
|
||||
>
|
||||
<div className="relative w-32 h-32 md:w-40 md:h-40 mb-6">
|
||||
<Image
|
||||
src="https://polishlessonsamsterdam.com/images/monika-small.jpg"
|
||||
alt="Monika Zatylny"
|
||||
fill
|
||||
className="rounded-full object-cover border-4 border-orange-600 shadow-lg"
|
||||
sizes="(max-width: 768px) 128px, 160px"
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-slate-800 mb-4 text-center">
|
||||
About Me
|
||||
</h2>
|
||||
<p className="text-lg md:text-xl text-orange-600 font-semibold mb-8 text-center">
|
||||
Monika Zatylny, MA - Language Coach
|
||||
</p>
|
||||
</motion.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] }}
|
||||
className="prose prose-lg max-w-none text-slate-700 leading-relaxed"
|
||||
>
|
||||
<p className="text-lg md:text-xl mb-6">
|
||||
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 className="text-lg md:text-xl mb-6">
|
||||
I listen to really hear what you're saying and help you understand, strategise and grow.
|
||||
</p>
|
||||
<p className="text-lg md:text-xl">
|
||||
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>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@ -0,0 +1,163 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
|
||||
export default function Contact() {
|
||||
const ref = useRef(null);
|
||||
const isInView = useInView(ref, { once: true, margin: '-100px' });
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
// Prevent hydration mismatch by using consistent initial state
|
||||
const shouldAnimate = mounted && isInView;
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
message: '',
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Handle form submission here
|
||||
console.log('Form submitted:', formData);
|
||||
alert('Thank you for your message! We will get back to you soon.');
|
||||
setFormData({
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
message: '',
|
||||
});
|
||||
};
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="contact" className="py-20 md:py-32 bg-white" ref={ref}>
|
||||
<div className="max-w-4xl 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 }}
|
||||
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">
|
||||
Contact Me
|
||||
</h2>
|
||||
<p className="text-lg md:text-xl text-slate-600">
|
||||
I'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'll be happy to help!
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={shouldAnimate ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
|
||||
transition={{ duration: 0.8, delay: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
|
||||
>
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="space-y-6"
|
||||
>
|
||||
<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">
|
||||
First name <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="firstName"
|
||||
name="firstName"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="lastName" className="block text-sm font-medium text-slate-700 mb-2">
|
||||
Last name <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="lastName"
|
||||
name="lastName"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-slate-700 mb-2">
|
||||
Email <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-slate-700 mb-2">
|
||||
Phone
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-slate-700 mb-2">
|
||||
Message
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
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"
|
||||
/>
|
||||
</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"
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@ -0,0 +1,80 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function Footer() {
|
||||
const [email, setEmail] = useState('');
|
||||
|
||||
const handleNewsletterSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
console.log('Newsletter subscription:', email);
|
||||
alert('Thank you for subscribing!');
|
||||
setEmail('');
|
||||
};
|
||||
|
||||
return (
|
||||
<footer className="bg-slate-800 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">
|
||||
Guiding bilingual families and language learners on their multilingual journey.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Newsletter Section */}
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold mb-4">Stay Connected</h4>
|
||||
<form onSubmit={handleNewsletterSubmit} className="space-y-3">
|
||||
<input
|
||||
type="email"
|
||||
placeholder="Email*"
|
||||
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"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
<label htmlFor="subscribe" className="text-sm text-slate-300">
|
||||
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"
|
||||
>
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold mb-4">Contact Data</h4>
|
||||
<div className="space-y-2 text-slate-300">
|
||||
<p>monika@polishlessonsamsterdam.com</p>
|
||||
<p>(+31) 682 773 830</p>
|
||||
<p className="mt-4">Comsuo Professional</p>
|
||||
<p>KVK nr. 72903422</p>
|
||||
<p>BTW ID NL002462839B89</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Bar */}
|
||||
<div className="mt-8 pt-8 border-t border-slate-700 text-center text-sm text-slate-400">
|
||||
<p>Copyright 2025. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
@ -0,0 +1,63 @@
|
||||
'use client';
|
||||
|
||||
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">
|
||||
<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"
|
||||
>
|
||||
Multilingual Family Space
|
||||
</motion.h1>
|
||||
<motion.p
|
||||
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"
|
||||
>
|
||||
Guiding bilingual families and language learners on their multilingual journey
|
||||
</motion.p>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4, ease: [0.25, 0.1, 0.25, 1] }}
|
||||
>
|
||||
<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"
|
||||
>
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -0,0 +1,93 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function Navigation() {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||
|
||||
const navItems = [
|
||||
{ name: 'Home', href: '#home' },
|
||||
{ name: 'Services', href: '#services' },
|
||||
{ name: 'About', href: '#about' },
|
||||
];
|
||||
|
||||
return (
|
||||
<nav className="fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm shadow-sm">
|
||||
<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">
|
||||
Multilingual Family Space
|
||||
</Link>
|
||||
|
||||
{/* Desktop Navigation */}
|
||||
<div className="hidden md:flex items-center space-x-8">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="text-slate-700 hover:text-orange-600 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"
|
||||
>
|
||||
Contact Now
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
className="md:hidden p-2 text-slate-700 hover:text-orange-600"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
>
|
||||
{isMenuOpen ? (
|
||||
<path d="M6 18L18 6M6 6l12 12" />
|
||||
) : (
|
||||
<path d="M4 6h16M4 12h16M4 18h16" />
|
||||
)}
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{isMenuOpen && (
|
||||
<div className="md:hidden pb-4 space-y-3">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className="block text-slate-700 hover:text-orange-600 transition-colors font-medium py-2"
|
||||
>
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
<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"
|
||||
>
|
||||
Contact Now
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
@ -0,0 +1,193 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
import { useInView } from 'framer-motion';
|
||||
import { useRef, useState, useEffect } 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);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
// Prevent hydration mismatch by using consistent initial state
|
||||
const shouldAnimate = mounted && isInView;
|
||||
|
||||
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>
|
||||
),
|
||||
image: 'https://kagi.com/proxy/images?c=_m3km2RjA3G0qleowsZXHZb9NEn0fSsEYIHbKzMDyAFb4nUPIanknmQV_g0rmdCIsgzAMsPq08VleluyScXQQ4izz3KxqIw42uNpJM0UVdSW3vFxwNsADK8GLjDKETNDP1zByVU0b1ao6Y7_TdQpnQ%3D%3D',
|
||||
},
|
||||
];
|
||||
|
||||
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 text-orange-600" 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 text-orange-600" 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 text-orange-600" 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 text-orange-600" 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 text-orange-600" 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 text-orange-600" 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" className="py-20 md:py-32 bg-gradient-to-b from-white to-orange-50" 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 }}
|
||||
transition={{ duration: 0.8, 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">
|
||||
Services
|
||||
</h2>
|
||||
</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">
|
||||
<Image
|
||||
src={service.image}
|
||||
alt={service.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
sizes="(max-width: 768px) 100vw, 50vw"
|
||||
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>
|
||||
</div>
|
||||
</motion.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] }}
|
||||
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">
|
||||
{qualifications.map((qual, 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.5 + 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"
|
||||
>
|
||||
<div className="mb-6">{qual.icon}</div>
|
||||
<h3 className="text-xl md:text-2xl font-bold text-slate-800 mb-4">
|
||||
{qual.title}
|
||||
</h3>
|
||||
<p className="text-slate-600 text-base leading-relaxed">
|
||||
{qual.description}
|
||||
</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,18 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'polishlessonsamsterdam.com',
|
||||
},
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'kagi.com',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
Loading…
Reference in new issue