Naturecore SaaS

Build a full-screen hero landing page for a renewable energy company using React, Vite, TypeScript, Tailwind CSS, Framer Motion, and Lucide React icons. Use the Inter font from Google Fonts (weights 300-900). The page background is `#F7F7F7`.

## Dependencies

```
react, react-dom, framer-motion, lucide-react, clsx, tailwind-merge
```

## Global CSS (`index.css`)

Import Inter from Google Fonts: `https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap`

Set `font-family: 'Inter', sans-serif` on the body.

Add a `.liquid-glass` utility class:
- `background: rgba(255, 255, 255, 0.01)` with `background-blend-mode: luminosity`
- `backdrop-filter: blur(4px)` and `-webkit-backdrop-filter: blur(4px)`
- No border, `box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1)`, `position: relative`, `overflow: hidden`
- A `::before` pseudo-element with `position: absolute; inset: 0; border-radius: inherit; padding: 1.4px` and a vertical linear gradient of white at varying opacities (`rgba(255,255,255,0.45)` at 0%/100%, `rgba(255,255,255,0.15)` at 20%/80%, `rgba(255,255,255,0)` at 40%/60%`), masked with `-webkit-mask-composite: xor` / `mask-composite: exclude` to create a glass border effect.

Add a `.tracking-tight-custom` utility with `letter-spacing: -0.06em`.

Add a `@keyframes scroll` animation: `0% { transform: translateX(0) }` to `100% { transform: translateX(-50%) }`.

## Utility: `cn()` helper

A small utility combining `clsx` and `tailwind-merge`:

```ts
import { type ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}
```

## Component: `<StaggeredFade>`

Props: `text: string`, `className?: string`, `style?: React.CSSProperties`.

Renders a `<motion.h1>` that splits the `text` into individual characters. Each character is a `<motion.span>` with a staggered fade-in animation: each letter delays by `i * 0.03` seconds with `0.3s` duration, transitioning from `opacity: 0` to `opacity: 1`. Uses `useInView` with `once: true` to trigger on scroll into view. The base className merges `'text-xl text-center sm:text-4xl font-bold tracking-tighter md:text-6xl md:leading-[4rem]'` with the passed `className` using the `cn()` helper.

## Component: `<FadeDown>`

Props: `children: React.ReactNode`, `delay?: number` (default `0`), `className?: string`.

A `<motion.div>` wrapper that animates from `{ opacity: 0, y: -20 }` to `{ opacity: 1, y: 0 }` over `0.6s` with the specified delay. Triggers once on entering the viewport via `useInView({ once: true })`.

## Component: `<BoomerangVideoBg>`

This is the key background video component that creates a forward/reverse boomerang loop effect.

**Video URL:** `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260527_061033_0f369854-8849-4214-8787-9181479c8121.mp4`

**How it works:**

1. Renders a `<video>` element (autoPlay, muted, playsInline, crossOrigin="anonymous") that plays through once (NOT looped).
2. While the video plays, it captures every frame into offscreen `<canvas>` elements using `requestVideoFrameCallback` (with a `setInterval` at 60fps fallback for unsupported browsers). Each captured frame is scaled to a max width of 960px maintaining aspect ratio.
3. When the video `ended` event fires, it sets a `ready` state to `true`.
4. Once ready, hides the `<video>` and shows a visible `<canvas>`. A `requestAnimationFrame` loop plays back the captured frames at 30fps in a boomerang pattern: forward through all frames, then reverse back to the start, repeating infinitely.
5. The outer wrapper div has classes: `absolute inset-0 w-full h-full`.
6. Both the `<video>` and `<canvas>` have classes: `w-full h-full object-cover`.
7. Visibility is toggled via `style={{ display: ready ? 'none' : 'block' }}` on the video and the inverse on the canvas.

## Main Layout (`App.tsx`)

The root is `<div className="h-screen flex flex-col bg-[#F7F7F7] relative overflow-hidden">`.

### Video Background

The `<BoomerangVideoBg>` is placed inside a container: `<div className="fixed inset-0 z-0" style={{ top: 200 }}>`. This pushes the video 200px down from the top of the viewport so it sits behind the lower portion of the hero.

### Navigation Bar

A `<nav>` with classes `flex items-center justify-between px-4 md:px-8 py-4 md:py-6 relative z-10`.

**Left side:**
- A logo image: `<img src="/image.png" alt="LGPSM" className="h-6 md:h-7" />` (user's own logo PNG)
- A language selector: `<Globe>` icon (lucide-react, `w-4 h-4`) + "En" text, `text-sm text-black`

**Center (hidden on mobile, `hidden lg:flex items-center gap-8`):**
- Nav links: "Renewables", "Strategies", "Photovoltaic", "Wind Systems", "Packages"
- Each link: `text-sm text-gray-700 hover:text-gray-900`

**Right side:**
- "Sign In" link (hidden on mobile `hidden sm:block`): `text-sm text-gray-700 hover:text-gray-900 border border-black/20 px-4 md:px-6 py-2 md:py-2.5 rounded-full transition-colors`
- "Clean Energy" button: `px-4 md:px-6 py-2 md:py-2.5 bg-black text-white text-sm rounded-full hover:bg-gray-900 transition-colors`

### Hero Content

Wrapper: `<div className="flex-1 flex flex-col items-center px-4 md:px-8 relative pt-4 md:pt-8">` with an inner `<div className="relative z-10 flex flex-col items-center">`.

**Badge pill** (top, centered):
- Classes: `mb-3 px-3 md:px-4 py-1.5 md:py-2 border border-black/20 rounded-full flex items-center gap-1.5 md:gap-2 text-xs md:text-sm`
- Content: sun emoji, arrow, globe emoji, text "Delivering power innovate" (hidden on mobile, shortened to "Power innovate" on small screens), arrow, plant emoji

**Main Heading** (using `<StaggeredFade>`):
- Text: `"Renewable Power For Tomorrow, Infinite Clean Solutions"`
- Classes: `text-3xl sm:text-4xl md:text-5xl lg:text-6xl leading-tight font-normal text-center max-w-5xl mb-3 md:mb-4 px-4`
- Color: `#31463B` (dark green) via inline style

**Subheading** (wrapped in `<FadeDown delay={0.5}>`):
- `<p>` with classes: `text-center text-gray-600 max-w-3xl mb-4 md:mb-5 text-sm md:text-base lg:text-lg px-4`
- Text: `"Sustainable Energy Platform. Engineering, deploying, and servicing solar arrays for homes, businesses, and large-scale operations worldwide."`

**CTA Buttons** (wrapped in `<FadeDown delay={0.7}>`):
- Wrapper classes: `flex flex-col sm:flex-row items-center gap-3 md:gap-4 px-4`
- **Primary button** ("Explore Options"):
  - Classes: `pl-4 md:pl-6 pr-2 py-2 bg-gradient-to-r from-[#3C684D] to-[#4A7144] text-white rounded-full flex items-center gap-2 hover:opacity-90 transition-opacity text-sm md:text-base`
  - Contains a `<Leaf>` icon (`w-4 h-4`), the text, and a circular icon container (`w-7 h-7 md:w-8 md:h-8 rounded-full`) with inline style `background: linear-gradient(59deg, #567A5E 0%, #78A873 100%)` containing a `<Play>` icon (`w-3 h-3 md:w-4 md:h-4 fill-white text-white`)
- **Secondary button** ("Start Network"):
  - Classes: `pl-4 md:pl-6 pr-2 py-2 bg-white text-gray-700 rounded-full flex items-center gap-2 hover:bg-gray-50 transition-colors text-sm md:text-base`
  - Contains the text and a circular icon container with inline style `background: linear-gradient(59deg, #EEEEEE 0%, #CBCBCB 100%)` containing an `<ArrowRight>` icon (`w-3 h-3 md:w-4 md:h-4 fill-black text-black`)

## Color Palette Summary

| Token | Value |
|---|---|
| Page background | `#F7F7F7` |
| Heading text | `#31463B` |
| Body text | Tailwind `gray-600` |
| Nav text | Tailwind `gray-700` |
| Primary CTA gradient | `#3C684D` to `#4A7144` |
| Primary CTA icon gradient | 59deg, `#567A5E` to `#78A873` |
| Secondary CTA icon gradient | 59deg, `#EEEEEE` to `#CBCBCB` |
| Nav button | `bg-black` / `text-white` |
| Sign-in border | `border-black/20` |

## Responsive Breakpoints

All elements use Tailwind's default breakpoints (`sm:`, `md:`, `lg:`). Nav links are hidden below `lg`. Sign-in button hidden below `sm`. CTA buttons stack vertically below `sm`. Font sizes scale from `text-3xl` to `lg:text-6xl`. Padding scales from `px-4` to `md:px-8`.