diff --git a/README.md b/README.md
index ba26321..09de86e 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,280 @@
# Ternity Education
-This website is currently under construction, please check back later!
-Questions may be directed to [contact\@ternity.education](mailto:contact@ternity.education)
+**Education for the 22nd Century**
+
+A refined minimalist website for Ternity Education, showcasing AI safety and literacy programs for international schools across Asia-Pacific.
+
+## ๐ฏ Project Overview
+
+This website is designed with a sophisticated minimalist approach, focusing on:
+- Clean, professional design
+- Strategic use of Ternity Blue (#7DD3E8)
+- Large, bold typography
+- Smooth animations and micro-interactions
+- Exceptional user experience
+- Performance and accessibility
+
+## ๐จ Design Philosophy
+
+The website embodies "intelligent restraint" - using minimal visual elements to create maximum impact. Every element serves a purpose, guided by:
+
+- **Minimalist Color Palette**: Primarily white and Ternity Blue with strategic accents
+- **Typography as Visual System**: Large, bold headlines with generous spacing
+- **Subtle, Intelligent Motion**: Purposeful animations that enhance UX
+- **Generous Whitespace**: Let designs breathe
+- **Responsive Design**: Optimized for all devices
+
+## ๐ Project Structure
+
+```
+ternity/
+โโโ index.html # Main HTML structure
+โโโ styles.css # Complete design system and styles
+โโโ script.js # Interactive behaviors and animations
+โโโ img/ # Logo and images
+โ โโโ header_logo.svg
+โ โโโ favicon files
+โโโ README.md # This file
+โโโ CNAME # Domain configuration
+```
+
+## ๐ Key Features
+
+### Sections
+
+1. **Hero Section**
+ - Full viewport height
+ - Animated geometric background
+ - Bold headline with staggered animations
+ - Clear CTAs
+ - Trust badges (MIT, Harvard, Boston College)
+
+2. **Problem Section** ("The Challenge")
+ - Two-column layout
+ - Animated statistics counter
+ - Visual chart showing the gap
+ - Compelling narrative
+
+3. **Solution Section** ("How We're Different")
+ - Three rotating cards
+ - Hover effects with straightening
+ - Teacher training, student curriculum, school consulting
+
+4. **Meet Haihao Section**
+ - Split layout with diagonal divider
+ - Professional credentials
+ - Image placeholder (ready for photo)
+ - CTA to book a call
+
+5. **Process Timeline**
+ - 4-step process
+ - Animated connecting line
+ - Clear, actionable steps
+
+6. **Booking Section**
+ - Centered, focused form
+ - Clean input fields
+ - Form validation
+ - Alternative contact option
+
+7. **Footer**
+ - Navigation links
+ - Social/contact info
+ - Copyright and location
+
+### Interactive Elements
+
+- **Smooth Scroll Navigation**: Animated scrolling to sections
+- **Sticky Navigation**: Becomes solid on scroll with smooth transition
+- **Mobile Menu**: Full-screen overlay menu for mobile devices
+- **Counter Animations**: Stats count up when entering viewport
+- **Chart Line Drawing**: SVG path animation
+- **Card Hover Effects**: Rotate and lift effects
+- **Parallax Background**: Subtle movement on hero section
+- **Floating CTA**: Appears after hero, hides at booking section
+- **Form Handling**: Real-time validation and submission feedback
+
+## ๐จ Design System
+
+### Colors
+
+```css
+--color-white: #FFFFFF
+--color-ternity-blue: #7DD3E8
+--color-light-gray: #F3F4F6
+--color-text-gray: #6B7280
+--color-dark-gray: #374151
+--color-almost-black: #1F2937
+```
+
+### Typography
+
+- **Font**: Inter (400, 500, 600, 700, 900)
+- **Hero**: clamp(3rem, 8vw, 7rem)
+- **H2**: clamp(2rem, 5vw, 4rem)
+- **Body**: clamp(1rem, 2vw, 1.25rem)
+- **Line Heights**: 1.1 (tight), 1.5 (normal), 1.7 (relaxed)
+
+### Spacing
+
+```css
+--space-xs: 0.5rem (8px)
+--space-sm: 1rem (16px)
+--space-md: 2rem (32px)
+--space-lg: 4rem (64px)
+--space-xl: 6rem (96px)
+--space-2xl: 8rem (128px)
+```
+
+## ๐ฑ Responsive Breakpoints
+
+- **Desktop**: 1024px+
+- **Tablet**: 768px - 1023px
+- **Mobile**: < 768px
+
+All sections adapt gracefully with:
+- Stacked layouts on mobile
+- Adjusted spacing
+- Touch-friendly interactions
+- Optimized typography
+
+## โก Performance
+
+The website is optimized for:
+- **Fast Load Times**: Minimal dependencies, optimized assets
+- **Smooth Animations**: 60fps animations using GPU acceleration
+- **Efficient Code**: Debounced scroll handlers, Intersection Observer
+- **Progressive Enhancement**: Works without JavaScript
+
+## โฟ Accessibility
+
+- Semantic HTML structure
+- ARIA labels where appropriate
+- Keyboard navigation support
+- Focus visible styles
+- Reduced motion support
+- Color contrast compliance (WCAG AA)
+
+## ๐ ๏ธ Technologies Used
+
+- **HTML5**: Semantic markup
+- **CSS3**: Modern features (Grid, Flexbox, Custom Properties)
+- **Vanilla JavaScript**: No frameworks needed
+- **SVG**: Scalable icons and illustrations
+- **Google Fonts**: Inter font family
+
+## ๐ Content Management
+
+### To Update Content
+
+1. **Hero Section**: Edit lines 64-87 in `index.html`
+2. **Statistics**: Update `data-count` attributes in lines 148, 152, 156
+3. **Cards**: Modify card content in lines 196-233
+4. **Credentials**: Update list items in lines 264-281
+5. **Form**: Customize fields in lines 360-390
+
+### To Add Haihao's Photo
+
+Replace the SVG placeholder (lines 246-251) with:
+```html
+
+```
+
+Recommended specs:
+- Format: WebP with JPG fallback
+- Resolution: 800px width minimum
+- File size: < 200KB
+- Style: Professional, neutral background
+
+## ๐ Deployment
+
+This is a static website that can be deployed to:
+- GitHub Pages (already configured with CNAME)
+- Netlify
+- Vercel
+- Any static hosting service
+
+### GitHub Pages Setup
+
+The site is configured to work with GitHub Pages. Simply push to the main branch and enable Pages in repository settings.
+
+## ๐ง Customization
+
+### Changing Brand Colors
+
+Update CSS variables in `styles.css` (lines 31-40):
+```css
+--color-ternity-blue: #7DD3E8; /* Your brand color */
+```
+
+### Adjusting Animations
+
+Modify animation durations in `styles.css` (lines 71-73):
+```css
+--transition-fast: 200ms;
+--transition-normal: 400ms;
+--transition-slow: 600ms;
+```
+
+### Form Submission
+
+The form currently logs to console. To connect to a backend:
+
+1. Update `handleFormSubmit()` in `script.js` (line 286)
+2. Replace the setTimeout with actual API call:
+```javascript
+fetch('/api/contact', {
+ method: 'POST',
+ body: JSON.stringify(data),
+ headers: { 'Content-Type': 'application/json' }
+})
+.then(response => response.json())
+.then(data => {
+ // Handle success
+});
+```
+
+Or integrate with:
+- Formspree
+- Netlify Forms
+- EmailJS
+- Custom backend
+
+## ๐ Performance Metrics
+
+Target metrics:
+- First Contentful Paint: < 1.2s
+- Largest Contentful Paint: < 2s
+- Cumulative Layout Shift: < 0.05
+- First Input Delay: < 100ms
+
+## ๐ฏ Conversion Optimization
+
+The website is designed to drive consultations through:
+- Clear CTAs throughout
+- Low-friction booking form
+- Trust signals (credentials, statistics)
+- Floating CTA for persistent visibility
+- Optimized user flow
+
+## ๐ Support & Questions
+
+For questions or support:
+- **Email**: [hello@ternity.education](mailto:hello@ternity.education)
+- **Website**: [ternity.education](https://ternity.education)
+
+## ๐ License
+
+Copyright ยฉ 2025 Ternity Education. All rights reserved.
+
+---
+
+## ๐จ Design Credits
+
+Inspired by:
+- Apple's product pages (restraint, whitespace)
+- Linear's website (sophisticated minimalism)
+- Stripe's design system (purposeful design)
+- Swiss design principles (typography-first, grid-breaking)
+
+Built with attention to detail and modern web standards.
diff --git a/img/haihao.jpeg b/img/haihao.jpeg
new file mode 100644
index 0000000..b17dd47
Binary files /dev/null and b/img/haihao.jpeg differ
diff --git a/img/tim.jpeg b/img/tim.jpeg
new file mode 100644
index 0000000..8eb2d8d
Binary files /dev/null and b/img/tim.jpeg differ
diff --git a/index.css b/index.css
deleted file mode 100644
index 2c96220..0000000
--- a/index.css
+++ /dev/null
@@ -1,353 +0,0 @@
-/* Hero Section */
-
-.hero{
- padding: 0;
- position: relative;
- margin-top: 7rem; /* See comment at fleet_style_en.css > #fleet */
-}
-
-.hero-container {
- height: calc(100vh - 9rem);
-}
-
-.hero-container video {
- object-fit: cover;
- width: 100%;
- height: 100%;
-}
-
-.hero-overlay {
- position: absolute;
- top: 30%;
- left: 0;
- padding: 0.5rem 2rem;
- background-color: white;
- text-align: left;
-}
-
-.hero-overlay h2 {
- font-size: 3rem;
- color: var(--primary-color);
-}
-.hero-overlay h1 {
- font-size: 4rem;
- color: var(--tertiary-color);
-}
-
-@media screen and (max-width: 850px) {
- .hero-overlay {
- padding: 1rem;
- }
- .hero-overlay h2 {
- font-size: 2rem;
- }
- .hero-overlay h1 {
- font-size: 3rem;
- }
-}
-
-/* About Section */
-
-.counter-container{
- display: flex;
- margin: 0 4rem 2rem;
- gap: 2rem;
-}
-
-.counter-container .counter-box{
- background-color: white;
- position: relative;
- flex: 1;
- display: flex;
- flex-direction: column;
-}
-
-.counter {
- flex: 1;
- font-size: 3rem;
- color: var(--primary-color);
- visibility: hidden;
- padding: 2rem 0rem;
-}
-
-.counter-text {
- background-color: black;
- font-size: 1.2rem;
- font-weight: 700;
- color: white;
- padding: 0.5rem 0rem;
- border-bottom: var(--tertiary-color) 1rem solid;
-}
-
-.about-container {
- display: flex;
- flex-direction: column;
- gap: 30px;
-}
-
-.about {
- background-color: white;
- display: flex;
- align-items: center;
- text-align: left;
- hyphens: auto;
- position: relative;
-}
-
-.about:nth-child(even) {
- flex-direction: row-reverse;
- background-color: var(--primary-color);
-}
-
-.about:nth-child(even) .about-info {
- color: white;
- margin-right: 50%;
-}
-
-.about > div {
- width: 50%;
-}
-
-.about > img {
- position: absolute;
- width: 50%;
- height: 100%;
- object-fit: cover;
-}
-
-.about-info {
- color: var(--primary-color);
- padding: 4vw;
- margin-left: auto;
-}
-
-.about-info h2 {
- display: flex;
- align-items: center;
- justify-content: center;
- padding-bottom: min(3%, 20px);
-}
-
-.about-info img {
- width: 2rem;
- margin-right: 20px;
-}
-
-@media (max-width: 850px) {
- .counter{
- padding: 1rem 0rem;
- font-size: 2.5rem;
- }
- .counter-text{
- font-size: 1rem;
- font-weight: normal;
- }
- .counter-container{
- flex-direction: column;
- }
- .about, .about:nth-child(even) {
- flex-direction: column;
- position: static;
- }
- .about p {
- font-size: 1rem;
- line-height: 1.4rem;
- }
- .about > div, .about > img {
- position: static;
- width: 100%;
- }
- .about-info, .about:nth-child(even) .about-info {
- padding: max(5vw, 25px) max(8vw, 40px);
- margin: 0;
- }
- .about-info h2 {
- padding-bottom: max(2vw, 10px);
- /* all padding fixed below 500px vw */
- }
-}
-
-/* Partners Section */
-
-.swiper-container {
- --swiper-card-height: 270px;
- --swiper-navigation-top-offset: calc(var(--swiper-card-height)/2);
- --swiper-navigation-sides-offset: 0;
- --swiper-pagination-bottom: 0;
- position: relative;
-}
-
-.swiper {
- width: min(90%, 100% - 80px);
- height: calc(var(--swiper-card-height) + 30px);
-}
-
-.slide-card {
- background-color: white;
- height: var(--swiper-card-height);
- position: relative;
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 24px 10%;
-}
-
-.slide-card img {
- margin-top: auto;
- max-width: 100%;
- max-height: 150px;
-}
-
-.slide-card h4 {
- margin-top: auto;
- font-size: 1.2rem;
- color: var(--secondary-color);
-}
-
-.swiper-slide a {
- text-decoration: none;
-}
-
-/* Fleet Section */
-
-.fleet-overview {
- display: flex;
- justify-content: space-evenly; /* or space-evenly */
- justify-content: space-between;
-}
-
-.fleetoverview-info p {
- padding: 0em 2em;
- font-size: 16px;
-}
-
-.overview-card {
- width: 50%;
- padding: 2em 0em;
- position: relative;
- filter: grayscale(100%);
- transition: all .5s linear;
-}
-.overview-card a {
- text-decoration: none;
-}
-
-.overview-card h4 {
- color: white;
-}
-
-.overview-name {
- width: 30%;
- padding: 0.5em 1em;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background-color: rgba(0, 0, 0, 0.64);
- transition: 0.5s ease ;
-}
-
-.overview-img{
- height: 100%;
- width: 100%;
- aspect-ratio: 16/9;
-}
-
-.overview-card:hover {
- filter: none;
-}
-
-.overview-card:hover .overview-name{
- width: 100%;
-}
-
-.fleet-overview a {
- display: block;
-}
-
-#fleet > a {
- text-decoration: none;
-}
-
-#fleet h2 {
- color: white;
- background-color: var(--tertiary-color);
-}
-
-@media (max-width: 850px) {
- .fleet-overview {
- flex-direction: column;
- }
-
- .overview-card {
- width: 100%;
- }
-}
-
-@media (max-width: 450px) {
- .overview-name {
- width: 40%;
- }
- .overview-card h4 {
- font-size: 16px;
- }
-}
-/* Partnerships Section */
-
-.partnerships {
- padding: 0;
-}
-.customers-info p {
- padding: 0em 2em 2em 2em;
- font-size: 16px;
-}
-.customer-slider {
- overflow: hidden;
- display: flex;
-}
-
-.customer-slide {
- animation: 42s linear infinite scroll;
- display: flex;
- align-items: center;
- background-color: white;
-}
-
-.customer-slide img {
- max-height: 180px;
- max-width: 400px;
- padding: 50px;
-}
-
-@keyframes scroll {
- 0% {transform: translateX(0);}
- 100% {transform: translateX(-100%);}
-}
-
-/* Community Section */
-
-.memberships-container {
- display: flex;
- flex-wrap: wrap;
- justify-content: center;
- align-items: center;
- background-color: white;
- padding: 1em 2em;
- max-width: 1000px;
- margin: auto;
-}
-
-.member-card img:hover {
- transform: scale(1.1);
-}
-
-.memberships-container img {
- max-height: 100px;
- max-width: 150px;
- margin: 0.5em;
- transition: .5s ease;
-}
-
-.member-name {
- font-size: 16px;
-}
diff --git a/index.html b/index.html
index b179c78..012c71e 100644
--- a/index.html
+++ b/index.html
@@ -1,496 +1,560 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Home | Ternity Education
-
-
-
-
-
-
-