AI website build-prompts for Figma Make

Copy this promptPrompt page

Create a mobile travel app UI mockup displayed inside a realistic iPhone-style phone frame, centered on a white webpage. Tech stack: React + TypeScript, Tailwind CSS, Lucide React icons, Vite. Font: Google Fonts "Inter" (weights 300-900).

---

**PAGE WRAPPER:**

Full viewport (`h-screen w-screen`), solid white background, flexbox centered, overflow hidden.

---

**PHONE FRAME:**

- Dimensions: 375px x 780px
- Background: `#0a0a0c`
- Border-radius: 52px
- Overflow: hidden
- Box-shadow (layered bezel effect):
  ```
  inset 0 0 0 2px rgba(255, 255, 255, 0.08),
  0 0 0 1px rgba(0, 0, 0, 0.6),
  0 0 0 10px #1a1a1e,
  0 0 0 11px rgba(255, 255, 255, 0.06),
  0 0 60px rgba(0, 0, 0, 0.5)
  ```

**Dynamic Island notch:** Absolute, top-0, centered horizontally, 120px wide, 28px tall, solid black, `rounded-b-2xl`, z-50.

---

**HEADER (absolute, top):**

- Z-index: 30
- `backdrop-filter: blur(12px)` with `background-color: rgba(10, 10, 12, 0.75)`
- Padding: `px-6 pt-14 pb-4`
- Left side: Button with "Asia" text (text-lg, font-semibold, white) + ChevronDown icon (size 18, text-white/70)
- Right side: Calendar icon button (size 22, text-white/70)

---

**SCROLLABLE CONTENT:**

- `overflow-y-auto` with hidden scrollbar
- Padding: `px-6 pt-28 pb-24`
- Vertical spacing: `space-y-4` (16px gap)

---

**DESTINATION CARDS (4 total):**

Each card:
- Full width, height 200px, rounded-2xl, overflow hidden, position relative
- Full-bleed background image (`absolute inset-0, object-cover`)
- Gradient overlay: `bg-gradient-to-t from-black/20 to-transparent`
- **Top-left:** liquid-glass pill (`rounded-full px-3 py-1`) with "{N} moments" text (text-white/90, text-xs, font-normal)
- **Top-right:** liquid-glass circle (w-8 h-8, rounded-full) with MoreHorizontal icon (size 16, text-white/80)
- **Bottom:** Destination name in 96px bold font, centered horizontally, clipped in an 80px tall container with `overflow: hidden`. Color: `rgba(255, 255, 255, 0.55)`, tracking-tight, leading-none, margin-top 2px

**Card data with exact image URLs:**

1. **Tokyo** - 23 moments
   `https://meez.design/web/media/ext/bf4221c9788892cc.webp`

2. **Seoul** - 18 moments
   `https://meez.design/web/media/ext/266bc9680f31a324.webp`

3. **Bali** - 29 moments
   `https://meez.design/web/media/ext/4111355756d31bad.webp`

4. **Rome** - 15 moments
   `https://meez.design/web/media/ext/17f0095a938bcda0.webp`

---

**FLOATING BOTTOM NAV BAR:**

- Absolute, bottom-6, centered horizontally, z-30
- liquid-glass pill (`rounded-full, flex, gap-6, px-6 py-2`)
- 3 nav items (flex-col, items-center, gap-0.5):
  - "Feed" + Home icon (size 20) -- inactive (`text-white/50`)
  - "Account" + User icon (size 20) -- inactive (`text-white/50`)
  - "Trips" + FileText icon (size 20) -- active (`text-white`)
- Label style: `text-[10px] font-medium`

---

**LIQUID-GLASS CSS:**

```css
.liquid-glass {
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.4px;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
```

---

**STAGGERED ENTRANCE ANIMATION:**

Each card starts at `opacity: 0` and `transform: translateY(24px)`. On component mount, a `setTimeout` triggers a state change that transitions to `opacity: 1` and `translateY(0)`. Transition: `transition-all duration-700 ease-out`. Stagger delay: first card 150ms, each subsequent +120ms (150, 270, 390, 510ms). Implemented with React `useState` + `useEffect`.

---

**SCROLLBAR HIDING:**

```css
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
```

---

**GLOBAL:**

```css
* { font-family: 'Inter', sans-serif; }
```

Load in HTML head:
```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
```

Copy this promptPrompt page

Build a mobile coffee profile screen inside a phone mockup frame. Use vanilla HTML, CSS, and JS with Vite as the bundler. The design is dark/warm-toned, inspired by iOS profile screens with glassmorphic UI elements.

**Phone mockup:**
- 390x844px at zoom 0.78, black background, 44px border-radius, overflow hidden, strong drop shadow
- Internal `.screen` div with dark background (`#180a06`), vertical scroll, hidden scrollbar

**Hero section (top):**
- Full-width, 430px tall
- Contains a looping muted autoplay video: `https://meez.design/web/media/ext/9e21d3642a50b515.mp4`
- Video covers the area with `object-fit: cover; object-position: center top`
- Bottom gradient overlay fading from transparent at 52% to the background color at 100%
- Top bar with two glass circle buttons (edit icon on left, X close SVG on right), positioned absolute top 18px

**Identity section (overlaps hero by -112px margin-top):**
- Centered name "Dasha" (28px, weight 500)
- Left and right laurel images flanking the name (local assets `/assets/images/laurel-left.png` and `laurel-right.png`), 73px tall, 0.6 opacity, positioned via `right: calc(50% + 66px)` / `left: calc(50% + 66px)`
- Subtitle "Plum Parfait Latte" below (15px, muted color `rgba(235, 220, 205, 0.55)`)

**Achievements pill (centered, 30px below identity):**
- Glass pill button, 54px tall, 225px wide, 27px border-radius
- Trophy icon (local `/assets/images/icon-trophy.png`, 18px) + text "12 achievements" (18px, weight 500)

**Stats grid (3 columns, 12px gap, 26px top padding, 16px horizontal padding):**
- Each card: semi-transparent background `rgba(255,255,255,0.06)`, 24px border-radius
- Card 1: coffee image `https://meez.design/web/media/ext/c5085b098c51af7a.png` (84x84), number "154", label "drinks consumed"
- Card 2: sandwich image `https://meez.design/web/media/ext/683693767fd81bd8.png` (84x84), number "36", label "sandwiches eaten"
- Card 3: cafe image `https://meez.design/web/media/ext/c6274ffbf93131f6.png` (84x84), number "12", label "cafes visited"
- Numbers: 25px, weight 500. Labels: 13px, color `#BAAA9A8C`

**Favorite card (12px below stats, 16px horizontal margin):**
- Same card background, 24px radius, 110px height, flex row with 16px gap
- Latte image `https://meez.design/web/media/ext/ff2382c37f897c16.png` (108x108, object-fit contain)
- Text column: "Favorite" (13px, weight 500), "Latte" (19px, weight 500), "Ordered 73 times" (13px, color `#BAAA9A8C`)
- Shuffle button on right (glass circle, local icon `/assets/images/icon-shuffle.png` 19px)

**Partial next card:** Same card style but only 34px tall with flat bottom corners (teaser for scroll)

**Glass button system:**
- Shared `.glass` class: no border, `rgba(255,255,255,0.03)` background, subtle inset box-shadows for edge highlights, `backdrop-filter: blur(2px) saturate(1.3)`, scale-down on `:active`
- `.glass.circle`: 58x44px, 22px radius
- `.glass.pill`: 54px tall, pill-shaped

**Fonts:**
- Primary: "Neue Haas Unica" (loaded from local `/assets/fonts/neue-haas-unica/stylesheet.css`)
- Also load "Helvetica Now Display" from `/assets/fonts/helvetica-now/stylesheet.css`
- Fallbacks: -apple-system, SF Pro Display, Inter, Segoe UI, Roboto

**Page background (behind phone):**
- Multiple warm-toned radial gradients over `#070402`:
  - `radial-gradient(ellipse 65% 55% at 15% 52%, rgba(168, 78, 10, 0.22))`
  - `radial-gradient(ellipse 52% 48% at 83% 26%, rgba(122, 52, 8, 0.17))`
  - `radial-gradient(ellipse 44% 52% at 56% 92%, rgba(98, 36, 5, 0.14))`
  - `radial-gradient(ellipse 30% 30% at 72% 75%, rgba(60, 20, 5, 0.10))`

**Entry animations (respects prefers-reduced-motion):**
- Hero: `heroReveal` - opacity 0 + scale(1.01) to normal, 1.9s, cubic-bezier(0.16, 1, 0.3, 1)
- Top bar buttons: `dropIn` from translateY(-10px), 0.7s, staggered 0.35s/0.42s
- Laurels: `fadeIn` 0.8s, delay 0.5s
- Name: `fadeRise` from translateY(16px), 0.7s, delay 0.5s
- Subtitle: same, delay 0.58s
- Achievements: same, delay 0.66s
- Stat cards: staggered at 0.74s, 0.80s, 0.86s
- Favorite card: delay 0.94s
- Next card: fadeIn delay 1.02s
- All use cubic-bezier(0.16, 1, 0.3, 1) except simple fadeIn which uses ease-out

**JavaScript (liquid glass effect):**
- Generates a displacement map canvas for each `[data-liquid]` element based on its dimensions and border-radius
- Uses SDF (signed distance field) of a rounded rectangle to compute refraction vectors
- Creates SVG `<feDisplacementMap>` filters and applies them as `backdrop-filter: url(#id) blur(0.3px) saturate(1.3)`
- Falls back to standard blur if SVG filter not supported

**CSS variables:**
```
--bg: #180a06
--card: rgba(255, 255, 255, 0.06)
--text: #ede4d8
--muted: rgba(235, 220, 205, 0.55)
--radius-card: 24px
```

**Responsive:** At 440px viewport, phone scales to zoom 0.6. Body flex-wraps at 900px.

Copy this promptPrompt page

Create a mobile-first logistics company landing page for "CARGOX GROUP" displayed inside an iPhone 15 Pro mockup frame. Use React, TypeScript, Tailwind CSS, and the `motion` library (motion/react) for animations. Use Vite as the build tool.

## Structure

The page is wrapped in a realistic iPhone 15 Pro mockup (aspect ratio 393:852) with:
- Dark frame (#1a1a1a) with 54px border-radius, 8px border (#2a2a2a), inset highlight (#3a3a3a)
- Dynamic Island (126x36px, centered at top, black, 20px border-radius, z-200)
- Home indicator at bottom (134x5px, white 30% opacity)
- Scrollable content area inside with hidden scrollbar and `container-type: size`

The body background is #111111. The scrollable container uses `container-type: size; container-name: phone;` for container queries.

## Fonts

- Import **Barlow Condensed 800** from Google Fonts
- Body font: Helvetica, Arial, sans-serif

## SECTION 1: Hero (full viewport height of the container using `100cqb`)

**Background:** Autoplaying, muted, looping video:
```
https://meez.design/web/media/ext/597d53d9b15f2d2d.mp4
```

**Navbar (absolute, top):**
- Left: "CARGOX" (white) / "GROUP" (yellow #ffda00) in Barlow Condensed 800, uppercase, clamp(22px, 6vw, 32px)
- Right: Hamburger menu icon (lucide-react Menu/X, 28px, white)
- Both slide in from left/right with 0.6s expo-out ease

**Mobile menu overlay:** Fixed, z-99, background #6682c2, centered nav items (Services, Industries, Company) in white 24px. AnimatePresence with scale + opacity transitions. Items stagger in from bottom.

**Hero content (bottom of section, z-10, padding 0 20px 24px):**
- Large headline in Barlow Condensed 800, uppercase, clamp(48px, 14vw, 72px), line-height 0.82:
  - "BEYOND" (white) - slides from x:-400
  - "BORDERS" (yellow #ffda00, text-align right) - slides from x:+400
  - "AND LIMITS" (white) - slides from x:-400
  - Staggered delays: 0s, 0.13s, 0.26s. Duration 0.85s, expo-out [0.16, 1, 0.3, 1]
- CTA Button: Custom SVG pill shape (fill #ffda00) with a circular end section containing a rotating arrow (white stroke, rotates from -135deg to -90deg on hover). Text "Get in touch" centered in the non-circle area. Font: Helvetica 20px, color #002a35. Hover: scale 1.08, y:-2. Tap: scale 0.97.

**Show hero content only after video `onCanPlay` fires** (fade in with AnimatePresence).

## SECTION 2: Info Card

**Background:** `linear-gradient(180deg, #C8C7B3 0%, #F0B172 50%, #EA7C58 100%)`
**Padding:** clamp(60px, 12vh, 120px) 20px

**Tagline** (scroll-triggered, slides from left):
- "LOGISTICS" in Barlow Condensed 800, white, clamp(44px, 13vw, 64px)
- "shaped by scale" / "powered by precision" in Helvetica, clamp(18px, 5vw, 26px), color #1a1a1a

**World Map:**
- Background map image: `https://meez.design/web/media/ext/f9ce5f887859208d.png`
- Aspect ratio 435/340, extends 20px beyond container edges
- SVG overlay (viewBox 0 0 299.037 142.509) at left:10%, top:18%, width:80% with 4 curved route paths in yellow (#FFDA00, 2.5 stroke):
  ```
  M128.161 74.6764C79.9989 130.001 71.9994 46.0005 20.9815 111.737
  M216.999 9.99985C260.499 12.4998 222.499 71.9998 291.999 58.9998
  M130.102 70.9998C144.499 -32.0002 183.852 70.2739 219.999 3.99985
  M14.4999 16.9998C111 20.9998 -53.0003 73.4998 21.4999 107
  ```
- Route lines animate with `pathLength` from 0 to 1, staggered
- Animated yellow arrow polygons (points="0,-4 8,0 0,4") using SVG `<animateMotion>` along each path, rotating automatically
- 5 stop dots at coordinates: [9.519,15.519], [289.519,59.518], [220.519,9.519], [125.518,78.519], [19.519,104.519] - each is a yellow circle r=9.519 with dark center r=3.389 (#002A35). They pop in with scale animation.
- 3 floating transport icons (white circle bg, 16% width, rounded-full, box-shadow):
  - Ship: `https://meez.design/web/media/ext/0d3cbcc042a65ea1.png` at left:26%, top:28.9%
  - Car: `https://meez.design/web/media/ext/457552dcad941164.png` at left:70.8%, top:15.6%, rotate(9.73deg)
  - Plane: `https://meez.design/web/media/ext/c4fe9416e8e5502f.png` at left:55.2%, top:52.1%, rotate(180deg) scaleY(-1)
  - Icons pop in (scale 0.5 -> 1), then continuously float up/down with infinite y animation

**Stats** (scroll-triggered, slide in from opposite sides):
- "3M+" white Barlow Condensed 800, clamp(50px, 14vw, 72px) + "tons of cargo / delivered / without delays" in #1a1a1a, clamp(14px, 3.8vw, 18px)
- "13+" same styling, indented left clamp(40px, 12vw, 90px) + "years of trusted / and reliable / operations"

## SECTION 3: Contact Us

**Background:** #0a1f2b
**Padding:** clamp(48px, 10vh, 96px) 20px clamp(32px, 6vh, 64px)

**Heading** (scroll-triggered fade+slide from bottom):
- "CONTACT " (white) + "US" (yellow #ffda00), Barlow Condensed 800, clamp(44px, 13vw, 64px)
- Subtitle: "Complete the form and our team will contact you soon." in #b0b8bc, clamp(14px, 3.8vw, 18px)

**Form fields** (scroll-triggered, stagger from bottom):
- 3 inputs (First Name, Last Name, E-mail): pill-shaped (40px radius), bg rgba(255,255,255,0.08), white text, clamp(14px, 3.5vw, 16px). On focus: bg brightens to 0.14, slight scale 1.01.
- "Send" button: pill, bg #FFDA00, color #0a1f2b, font-weight 700, clamp(16px, 4vw, 20px). Hover: scale 1.03, y:-2, bg #ffe84d. Tap: scale 0.97.

**Footer info:**
- Email: info@cargox-group.com
- Phone: +380 44 234-7890
- Color #b0b8bc, hover slides right 4px and turns white

**Social icons** (3 white circles 44x44, hover: scale 1.15, y:-3):
- Instagram, LinkedIn, Facebook (inline SVG icons, fill #0a1f2b)

**Scroll-to-top button** (right side): white 44x44 circle with up-arrow SVG, same hover animation.

**Copyright:** "(c) 2025. All rights reserved." in #6b7a80, clamp(12px, 3.2vw, 14px)

## Animation System

- Use `motion/react` (NOT framer-motion)
- Easing curves: EXPO_OUT = [0.16, 1, 0.3, 1], EASE_OUT = [0.25, 0.46, 0.45, 0.94]
- Scroll-triggered reveals using `useInView` from motion/react with `once: true` and margin: '0px 0px -40px 0px' or '0px 0px -60px 0px'
- All scroll animations fire only once
- Transport icons have infinite floating y-axis animation with varying durations (2.5-3.3s)
- Mobile menu uses AnimatePresence for enter/exit

## Dependencies

```json
{
  "motion": "^12.40.0",
  "lucide-react": "^0.344.0",
  "react": "^18.3.1",
  "react-dom": "^18.3.1"
}
```

Copy this promptPrompt page

Build a mobile wellness quiz screen inside a realistic phone frame mockup, centered on a white page. Use React with Tailwind CSS and Lucide React icons.

**Phone Frame:**
- Dimensions: 375px wide x 780px tall
- Border radius: 52px
- Background color: `#8a9aaa`
- Box shadow to simulate a real phone bezel: `inset 0 0 0 2px rgba(255,255,255,0.08), 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 10px #1a1a1e, 0 0 0 11px rgba(255,255,255,0.06), 0 0 60px rgba(0,0,0,0.5)`
- A black pill-shaped Dynamic Island at the top center: 120px wide, 32px tall, fully rounded, z-index 50

**Background:**
- Full-bleed background image using this exact URL: `https://meez.design/web/media/ext/6034ecdbf191b497.webp`
- Apply `blur(12px)` and `scale(1.1)` to the background image
- Semi-transparent overlay: `#8a9aaa` at 30% opacity on top

**Font:**
- Load "Helvetica Now Var" from: `https://db.onlinewebfonts.com/c/e66905e07608167a84e6ad52f638c3c6?family=Helvetica+Now+Var`
- Fallback stack: 'Helvetica Neue', Helvetica, Arial, sans-serif
- Apply globally to all elements

**Content Layout (flex column, padding: 56px top, 24px sides, 24px bottom):**

1. **Header Badge** (top, with 40px margin-bottom):
   - Liquid glass pill with Timer icon (12px, white/80) + text "Vitaforge Daily" (12px, white/90, medium weight)
   - Padding: 10px vertical, 12px horizontal

2. **Title Section** (32px margin-bottom):
   - Subtitle: "Choose all that apply" - white/60, 14px
   - Heading: "What aspects of your wellness would you like to boost?" - white, 28px, normal weight, tight leading and tracking

3. **Selection Grid** (2 columns, 12px gap, pushes to fill available space):
   - 4 cards: "Sleep quality", "Stress", "Weight", "Skin"
   - Each card: rounded-[32px], 100px height, padding 16px
   - Shows a number label (01, 02, etc.) in white/50, 11px, medium weight
   - Option text in white, 16px, medium weight
   - "Stress" (id:2) and "Skin" (id:4) are pre-selected
   - Cards are toggleable on click

4. **Voice Button** (centered, 24px vertical margin):
   - Yellow/gold radial glow behind: `radial-gradient(ellipse at center, rgba(220,200,80,0.5) 0%, rgba(180,160,40,0.2) 40%, transparent 70%)`
   - 64px circular liquid glass button with a waveform SVG icon (white strokes, strokeWidth 2, strokeLinecap round) showing 5 vertical bars of varying heights
   - "voice" label below in white/70, 12px

5. **Slide-to-Confirm Button** (bottom, inside 24px horizontal padding):
   - Full-width rounded-full track, 56px tall, liquid glass style
   - White circular thumb (44px) on the left with ArrowRight icon (gray-800)
   - "Done" text centered in white/60, 14px, medium weight
   - 3 ChevronRight icons on the right (14px) at white/40, white/50, white/60 opacity
   - Draggable thumb with pointer events: snaps back if not dragged past 85%, snaps to end if past 85%

**Liquid Glass Effect (CSS classes):**

`.liquid-glass`:
- Background: `rgba(255,255,255,0.01)` with luminosity blend mode
- Backdrop filter: `blur(4px)`
- Box shadow: `inset 0 1px 1px rgba(255,255,255,0.1)`
- `::before` pseudo-element for gradient border: `linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%)` with 1.4px padding and mask-composite exclude technique

`.liquid-glass-selected`:
- Same as above but background: `rgba(255,255,255,0.12)`, blur 8px, stronger box shadow (`inset 0 1px 2px rgba(255,255,255,0.2)`), and brighter gradient border (0.6 alpha at edges, 0.25 at 20%/80%)

**Animations:**
- Staggered fade-up animation on all elements
- Keyframes: from `opacity:0, translateY(16px)` to `opacity:1, translateY(0)`
- Duration: 0.5s, easing: `cubic-bezier(0.22, 1, 0.36, 1)`, fill: forwards
- Delays: header 0.1s, title 0.25s, grid cards 0.4s/0.48s/0.56s/0.64s, voice 0.7s, slider 0.85s

**Dependencies:**
- React 18, Tailwind CSS 3, Lucide React, Vite, TypeScript