diff --git a/README.md b/README.md index e215bc4..37d909a 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/app/globals.css b/app/globals.css index a2dc41e..37ae37d 100644 --- a/app/globals.css +++ b/app/globals.css @@ -5,22 +5,31 @@ --foreground: #171717; } -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); +body { + background: var(--background); + color: var(--foreground); + font-family: var(--font-inter), system-ui, -apple-system, sans-serif; } -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } +/* Smooth scrolling for anchor links */ +html { + scroll-behavior: smooth; } -body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; +/* Custom scrollbar */ +::-webkit-scrollbar { + width: 10px; +} + +::-webkit-scrollbar-track { + background: #f1f1f1; +} + +::-webkit-scrollbar-thumb { + background: #ea580c; + border-radius: 5px; +} + +::-webkit-scrollbar-thumb:hover { + background: #c2410c; } diff --git a/app/layout.tsx b/app/layout.tsx index f7fa87e..75768a1 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,20 +1,15 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { Inter } from "next/font/google"; import "./globals.css"; -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", +const inter = Inter({ subsets: ["latin"], + variable: "--font-inter", }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Multilingual Family Space - Monika Zatylny", + description: "Guiding bilingual families and language learners on their multilingual journey. Polish lessons, bilingual upbringing support, and language coaching.", }; export default function RootLayout({ @@ -23,9 +18,9 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - + {children} diff --git a/app/page.tsx b/app/page.tsx index 295f8fd..c792607 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -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 ( -
-
- Next.js logo -
-

- To get started, edit the page.tsx file. -

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -

-
-
- - Vercel logomark - Deploy Now - - - Documentation - -
-
-
+
+ + + + + +
); } diff --git a/components/About.tsx b/components/About.tsx new file mode 100644 index 0000000..805d189 --- /dev/null +++ b/components/About.tsx @@ -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 ( +
+
+
+ +
+ Monika Zatylny +
+

+ About Me +

+

+ Monika Zatylny, MA - Language Coach +

+ + +

+ 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. +

+

+ I listen to really hear what you're saying and help you understand, strategise and grow. +

+

+ 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. +

+ +
+
+
+ ); +} + diff --git a/components/Contact.tsx b/components/Contact.tsx new file mode 100644 index 0000000..2546a50 --- /dev/null +++ b/components/Contact.tsx @@ -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) => { + setFormData({ + ...formData, + [e.target.name]: e.target.value, + }); + }; + + return ( +
+
+ +

+ Contact Me +

+

+ I'm here for you! +

+

+ 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! +

+ + + +
+
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+ +