# unknown

> 00:00:00.000 No text 00:00:00.320 think front-end development is dead AI is taking your job and no code tools are putting you out of business think again 00:00:06.960 sure AI can spit out cookie cutter UIs but it can't craft experiences worthy of 00:00:12.559 awards or create interactions that make people stop and say "How the heck did you just pull that off?" This is where 00:00:19.840 real front-end skills and real front-end developers step into the spotlight hey 00:00:25.119 I'm Adrian and...

- Author: SankrityaT
- Repository: SankrityaT/SeeMeLandingPage
- Version: 20260205011135
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-07
- Source: https://github.com/SankrityaT/SeeMeLandingPage
- Web: https://mule.run/skillshub/@@SankrityaT/SeeMeLandingPage~unknown:20260205011135

---

# 🌟 SeeMe Landing Page

Ultra-minimalistic horizontal scroll landing page for SeeMe - AI-powered mental health & life coaching app.

## 🎯 Features

- **Horizontal GSAP Scroll** - Cinematic one-page experience
- **5 Seasonal Scenes** - Spring, Summer, Autumn, Winter transitions
- **Fixed iPhone Mockup** - Centered with floating animation
- **Parallax Backgrounds** - Depth and movement
- **Zero Vertical Scroll** - Pure horizontal navigation
- **Responsive** - Mobile & desktop optimized

## 🚀 Quick Start

```bash
npm install
npm run dev
```

Open [http://localhost:3000](http://localhost:3000)

## 📁 Structure

```
/components
  HorizontalScroll.tsx  # Main scroll container
  Scene.tsx             # Individual scene component
  IPhoneMockup.tsx      # Centered phone mockup
/app
  page.tsx              # Entry point
  globals.css           # Global styles
```

## 🎨 Customization

### Replace Background Images

Edit `/components/HorizontalScroll.tsx` - update the `scenes` array:

```typescript
const scenes = [
  {
    background: '/your-spring-image.jpg', // Replace with your AI-generated images
    title: 'Welcome to SeeMe',
    // ...
  },
  // ...
]
```

### Update Content

- **Titles/Subtitles**: Edit `scenes` array in `HorizontalScroll.tsx`
- **iPhone Screen**: Modify `IPhoneMockup.tsx` component
- **Colors**: Update Tailwind classes in components

### Add Real App Store Link

In `Scene.tsx`, update the App Store URL:

```typescript
<a href="YOUR_APP_STORE_LINK">
```

## 🛠️ Tech Stack

- Next.js 15 (App Router)
- TypeScript
- Tailwind CSS
- GSAP 3 + ScrollTrigger
- React 19

## 📝 TODO

- [ ] Replace Unsplash placeholders with AI-generated seasonal backgrounds
- [ ] Add real iPhone screen content (videos/screenshots)
- [ ] Update App Store link
- [ ] Add analytics
- [ ] Optimize images for production

## 🎬 Animation Details

- **Horizontal Scroll**: GSAP ScrollTrigger with scrub
- **Parallax**: Background moves slower than scroll
- **iPhone Float**: Subtle y-axis animation
- **Smooth Transitions**: 60fps performance

Built with ❤️ for SeeMe