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
|
## Getting Started
|
||||||
|
|
||||||
First, run the development server:
|
### Prerequisites
|
||||||
|
|
||||||
|
- Node.js 18+ and npm
|
||||||
|
|
||||||
|
### Installation
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Development
|
||||||
|
|
||||||
|
Run the development server:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
npm run dev
|
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.
|
## Customization
|
||||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
|
||||||
|
|
||||||
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() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
<main className="min-h-screen">
|
||||||
<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">
|
<Navigation />
|
||||||
<Image
|
<Hero />
|
||||||
className="dark:invert"
|
<About />
|
||||||
src="/next.svg"
|
<Values />
|
||||||
alt="Next.js logo"
|
<Contact />
|
||||||
width={100}
|
<Footer />
|
||||||
height={20}
|
</main>
|
||||||
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>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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";
|
import type { NextConfig } from "next";
|
||||||
|
|
||||||
const nextConfig: NextConfig = {
|
const nextConfig: NextConfig = {
|
||||||
/* config options here */
|
images: {
|
||||||
|
remotePatterns: [
|
||||||
|
{
|
||||||
|
protocol: 'https',
|
||||||
|
hostname: 'polishlessonsamsterdam.com',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
protocol: 'https',
|
||||||
|
hostname: 'kagi.com',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default nextConfig;
|
export default nextConfig;
|
||||||
|
|||||||
Loading…
Reference in new issue