Access Denied

HACKED SMD SLEEPY JOE NOT 2024

[Viktor Oddy @viktoroddy]

Access ALL prompts for stunning animated websites in one click: https://t.co/N0kni8z7CJ

## Prompt

Build a fullscreen hero section for a site called "Orbis.Nft" using React, TypeScript, Tailwind CSS, and Vite. Recreate every detail below precisely.

---

### Video Background with Mouse-Scrub Effect

Use this video as the fullscreen background:
```
https://t.co/b7TxOua2iH
```

The video does NOT autoplay. Instead, implement a **mouse-scrub interaction**: as the user moves their mouse left/right across the viewport, the video scrubs forward/backward through its timeline. Implementation details:

- The video is paused on load at `currentTime = 0`.
- Track the mouse's horizontal position as a normalized value (0 to 1) across `window.innerWidth`.
- On each `mousemove`, compute the delta from the previous X position. Multiply that delta by a `SENSITIVITY` constant of `0.8` and by the video's `duration` to get a time offset.
- Maintain a `targetTime` that accumulates these offsets, clamped between 0 and `duration`.
- Use the video's `seeked` event to chain seeks: when a seek completes, if `targetTime` has diverged from `currentTime` by more than 0.01s, seek again. This prevents dropped seeks since the browser can only process one seek at a time.
- Use a `useRef` to store mutable state (`targetTime`, `isSeeking` flag, `prevX`) to avoid re-renders.
- The `<video>` element has attributes: `muted`, `playsInline`, `preload="auto"`, and is styled `absolute inset-0 h-full w-full object-cover`.

---

### Google Fonts

Load two Google Fonts in `index.html` via `<link>`:
```
https://t.co/akiDhw9HNK
```
- **Anton** -- used for the hero heading (mapped to Tailwind as `font-grotesk`).
- **Condiment** -- a cursive script used for the accent text (mapped as `font-condiment`).

Include `<link rel="preconnect">` tags for `https://t.co/tFUobTvSHj` and `https://t.co/OT5vqgkuTF` (with `crossorigin`).

---

### Tailwind Config

Extend the default Tailwind theme with:
- **Colors:**
- `background`: `#010828` (deep navy)
- `cream`: `#EFF4FF` (off-white for heading text)
- `neon`: `#6FFF00` (bright green for the cursive accent)
- **Font families:**
- `grotesk`: `['Anton', 'sans-serif']`
- `condiment`: `['Condiment', 'cursive']`

---

### Global CSS (`index.css`)

```css
body {
background-color: #010828;
color: #EFF4FF;
margin: 0;
overflow-x: hidden;
}
```

Also include a `.liquid-glass` utility class (not used in the hero itself, but part of the design system):
- `background: rgba(255, 255, 255, 0.01)` with `background-blend-mode: luminosity`
- `backdrop-filter: blur(4px)` (with `-webkit-` prefix)
- `border: none`
- `box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1)`
- A `::before` pseudo-element creating a gradient border effect using a `mask-composite: exclude` technique. The gradient goes from `rgba(255,255,255,0.45)` at top/bottom to transparent in the middle, with `padding: 1.4px`.

---

### Navbar

A `<nav>` fixed to the top (`fixed top-0 left-0 right-0 z-50`), using `flex items-center justify-between`, with padding `px-5 sm:px-8 py-4 sm:py-5`.

**Left: Logo (inline SVG)**
A custom geometric SVG logo, 28x28, viewBox `0 0 256 256`, filled `#111111`:
```
M 256 64 L 256 128 L 192.5 128 L 160 95 L 128 64 L 96 95 L 63.5 128 L 64 128 L 128 192 L 128 256 L 64.5 256 L 32 223 L 0 192 L 0 64 L 64 0 L 192 0 Z M 256 192 L 256 256 L 192.5 256 L 160 223 L 128 192 L 128 128 L 192 128 Z
```

**Center: Desktop pill navigation (hidden on mobile, `hidden md:flex`)**
Absolutely centered with `absolute left-1/2 -translate-x-1/2`. Dark pill container: `bg-gray-900 rounded-full px-2 py-1.5`. Contains 5 nav items: `['Device', 'Real Stories', 'Science', 'Plans', 'Reach Us']`. The first item is the active state: `bg-white text-gray-900 text-sm font-medium px-4 py-1.5 rounded-full`. All others: `text-gray-300 text-sm font-medium px-4 py-1.5 rounded-full hover:text-white transition-colors`.

**Right: Desktop CTA button (hidden on mobile, `hidden md:flex`)**
`bg-gray-900 text-white text-sm font-medium px-5 py-2 rounded-full` with `hover:bg-gray-700 transition-colors`. Contains a small green dot (`w-2 h-2 rounded-full bg-green-400`) followed by text "Reserve Yours".

**Mobile: Hamburger toggle (`md:hidden`)**
Uses `Menu` and `X` icons from `lucide-react` at `size={22}`, colored `text-gray-900`. Toggles a dropdown.

**Mobile dropdown menu**
When open: `fixed top-0 left-0 right-0 z-40 bg-white pt-16 pb-6 px-5 shadow-lg flex flex-col gap-1 md:hidden`. Each nav item is a full-width button: `text-gray-800 text-base font-medium py-3 border-b border-gray-100 text-left hover:text-gray-500 transition-colors`. Includes the same "Reserve Yours" CTA at the bottom with `mt-4`, centered, `rounded-full`.

---

### Hero Text (Bottom-Left)

Positioned inside a `relative z-10 flex flex-col h-full` container. The text block is anchored to the bottom: `flex-1 flex items-end pb-16 sm:pb-20 lg:pb-24 px-6 lg:px-12`. Inner wrapper: `relative lg:ml-12 max-w-[780px]`.

**Main heading `<h1>`:**
- Font: `font-grotesk` (Anton)
- Size: `text-[40px] sm:text-[60px] md:text-[75px] lg:text-[90px]`
- `uppercase`, color `text-cream` (#EFF4FF)
- Line height: `leading-[1.05] sm:leading-[1] md:leading-[1] lg:leading-[1]`
- Text content (with line breaks):
```
Beyond earth
and ( its ) familiar
boundaries
```
The parentheses around "its" have spaces inside them: `{'( '}its{' )'}`.

**Cursive accent `<span>`:**
- Absolutely positioned relative to the heading wrapper: `absolute -right-4 sm:right-0 md:right-4 top-0 sm:top-2 md:top-4`
- Font: `font-condiment` (Condiment cursive)
- Size: `text-[24px] sm:text-[32px] md:text-[40px] lg:text-[48px]`
- Color: `text-neon` (#6FFF00)
- Slight rotation: `-rotate-1`
- `opacity-90`
- Inline style: `mixBlendMode: 'exclusion'`
- Text: "Nft collection"

---

### Overall Layout

The root `<section>` is `relative h-screen w-full overflow-hidden bg-background`. The video sits at `absolute inset-0` behind everything. The content layer sits at `relative z-10`. The nav is `fixed z-50`.

The page title in `index.html` is "Orbis.Nft".

---

### Dependencies

- `react`, `react-dom` (v18)
- `lucide-react` (for Menu and X icons)
- Tailwind CSS 3, PostCSS, Autoprefixer
- Vite with `@vitejs/plugin-react`
- TypeScript

No other UI libraries needed.

[Access Denied @AMBAccessDenied]

@Clip_Master__ can definitely see usage of steroids

[Access Denied @AMBAccessDenied]

@san37082579 @Leomalno @Semejantes men often sexualize women but in the same context as women themselves like to be objectified and sexualized. men always called women whore/304s for being promiscuous, seeking attention from other men, and showing cleavages.

[Access Denied @AMBAccessDenied]

@san37082579 @Leomalno @Semejantes you dead serious? men always preferred women’s chastity and purity from a test of times. hookup culture was normalized by top 1% of men (rich men) and about 80% of modern women (even previous generations of women). lets be fr, 33% of men in the US are virgins vs women.

[Access Denied @AMBAccessDenied]

@Only_RubyLane @Semejantes last thing I would want to hear is whore giving any advice. selling the body for 5.99$ subscription 💀

[Access Denied @AMBAccessDenied]

@FlamebearerEno @Fight_Master__ you meant princess? cuz that looked like princess to me 😭

[Access Denied @AMBAccessDenied]

@jdubmoney1 @Rebellious1776X @EndWokeness never knew you needed a knife to a track meeting for another school?

[Access Denied @AMBAccessDenied]

@nesha4sho @thequeen_val_ @aalexismariie @Fight_Master__ sorry but don’t tell me what to do… go back to kitchen tho

[Access Denied @AMBAccessDenied]

@nesha4sho @thequeen_val_ @aalexismariie @Fight_Master__ sound like a entitled brat

[Access Denied @AMBAccessDenied]

@nesha4sho @thequeen_val_ @Fight_Master__ good heart? she caused the scene. if you gonna be that pussy to let that dude constantly abuse and you’re pussy about your brother beating the shit out of him for you

[Access Denied @AMBAccessDenied]

@Fight_Master__ gay shouldn’t have bothered, that chick likes that and crocodile tears

[Access Denied @AMBAccessDenied]

@Fight_Master__ justice was served. ninja would never dare to colonize 😭

[Access Denied @AMBAccessDenied]

@jordan_leveritt @Fight_Master__ well stats says otherwise. black commits more crimes per capita

[Access Denied @AMBAccessDenied]

@madalynjoyrose baddy

[Access Denied @AMBAccessDenied]

@MayaSpielman hth did you come to that conclusions

[BRITT @54BRITT54]

@libsoftiktok White liberal women are the most dangerously confused animal on earth.🌏

[Elon Musk @elonmusk]

The legacy media is pure propaganda.

You are the media now.

[Access Denied @AMBAccessDenied]

@pringlegodx @kornpopdog @krassenstein @elonmusk I dont think, you ever had one.

[Charlie Kirk @charliekirk11]

President Trump just put this man, Tom Homan, in charge of deportations. 🔥🔥 https://t.co/S5xYeV1Nmm

[Access Denied @AMBAccessDenied]

@ImMeme0 bold and clear, ICE on the way