EngineTech | Custom Aerospace Engines

22:I[5034,["2260","static/chunks/2260-77a3f345bbc959a0.js","9356","static/chunks/9356-25b16f818c154d03.js","186","static/chunks/186-f0d420b86c8a5104.js","2879","static/chunks/2879-a133dff9dcb21fbb.js","5034","static/chunks/5034-0ef16291859fdba9.js","4995","static/chunks/app/(frontend)/%5Blocale%5D/(dashboard)/library/page-47aa2f755169809f.js"],"LibraryBrowser"] 23:Tf4c,Create a "BIONOVA" biotech consulting hero section that spans exactly 100vh on desktop (scrollable on mobile). Use Poppins font (imported from Google Fonts) as the heading font family. Install hls.js for video streaming. Design system: Background: white (hsl(0 0% 100%)) Foreground/text: dark gray (hsl(0 0% 17%)) Hero button color: soft blue (hsl(213 90% 78%)) Font: Poppins (400, 500, 600, 700 weights) Custom animation fade-up: translateY(20px) + opacity 0 + blur(4px) → translateY(0) + opacity 1 + blur(0), 700ms with cubic-bezier(0.16, 1, 0.3, 1) easing, forwards fill Navigation: Logo text "BIONOVA" (bold, tracking-tight, xl) on the left Center links (hidden on mobile): About, Offerings, Pricing, Blog — semibold, text-sm, 70% opacity, hover to full Right side (hidden on mobile): "Log in" text link + "Request a call" rounded-full pill button in hero-btn blue with white text Layout: Full section: min-h-screen lg:h-screen, flex column, lg:overflow-hidden Content area: px-5 lg:px-16, pb-8 lg:pb-[82px], flex-1 Two-column grid (lg:grid-cols-2), items-stretch, gap-8 Left column (flex col, justify-between, fade-up animation): Top group: H1 with text sizes: text-[2rem] sm:text-5xl lg:text-[3.5rem] xl:text-7xl, leading-[1.08], tracking-tight, font-normal First line: small rounded-full image pill (w-20 h-10 / sm:w-24 sm:h-12, bg-cover) inline next to "World-class" Second line: "consultants that" Third line: "empower" followed by an inline pill button with Play icon + "How do we work" (border-2, rounded-full, smaller text on mobile) Fourth line: "biotech leaders" CTAs directly under headline (pt-6): "Contact us" blue pill button with ArrowUpRight icon + "Request a call" underlined text link Bottom group (hidden on mobile, hidden lg:block): Description paragraph (text-sm, max-w-md) Logo bar: "Headway", "brightline", "hazel", "G&STC" — bold text-2xl, flex-wrap Right column (flex col, gap-4, fade-up with 150ms delay): Card 1 (top, larger): rounded-[1.5rem] lg:rounded-[2.5rem], bg-black, flex-1, min-h-[200px] on mobile Background: autoplay muted looping HLS video — https://stream.mux.com/1RdbcBtpEUK6501pc6yaIvwo9UfSnOg02k1uHxat00xR3w.m3u8 — object-cover, full size White heading (text-2xl lg:text-3xl): "If you're ready to build your bioventure, let's get in touch." Bottom: description text (white/85) + white circle arrow button (bg-background) Cards 2 & 3 (bottom row): grid-cols-2, gap-3 lg:gap-4, flex-1 Card 2: rounded-[1.5rem] lg:rounded-[2.5rem], bg-black, p-5 lg:p-8, min-h-[180px] Background: HLS video https://stream.mux.com/t1TbTB8M1VYHkhxBuap4A8Vm1x015HTHyuQxqchDBago.m3u8 — scaled to 150%, centered with top-1/2 left-1/2 -translate-x/y-1/2 Top: "locations" white pill badge + arrow circle button (both bg-background) Bottom: "United bio-entrepreneurs" heading (text-lg lg:text-2xl, white) + description (text-xs lg:text-sm, white/80) Card 3: same card style as Card 2 Background: HLS video https://stream.mux.com/6yvj9SR5bjmXq9N3ak7gy427RwUs8R2ZoH4ndA7Q1018.m3u8 — scaled to 280%, centered same way Top: "scientists" white pill badge Bottom: large "34" number (text-4xl lg:text-7xl, white) + description (text-xs lg:text-sm, white/80) HLS video implementation: Use hls.js library with useRef for each video element Loop through all 3 streams in a single useEffect Handle native HLS (Safari) with canPlayType fallback All videos: autoPlay, muted, loop, playsInline, preload="auto" All card content uses relative z-10 to sit above the video Responsive (mobile only): Section becomes min-h-screen (scrollable) instead of fixed h-screen Nav links and right-side buttons hidden below md Smaller padding (px-5), smaller border radius (rounded-[1.5rem]), smaller card padding (p-5/p-6) Bottom description/logo bar hidden below lg Headline button smaller on mobile (px-4 py-1.5 text-sm) Card text sizes scale down on mobile24:T151f,Create a single-page architecture / design studio landing page using React, Vite, TypeScript, and Tailwind CSS. The page is a fullscreen hero with a looping background video, overlaid navigation, headline, and two staggered project cards. --- **TECH STACK:** - React 18 + TypeScript + Vite - Tailwind CSS 3 - lucide-react (icons: Grid3X3, Menu, X) - No other dependencies --- **FONT:** - Load "Lexend" from `https://db.onlinewebfonts.com/c/42dbf00de1681d38477679d3eadad56a?family=Lexend` via a `` in index.html - In tailwind.config.js, extend fontFamily with: `vilsuve: ['Lexend', 'sans-serif']` --- **LOGO (inline SVG, white, 24x24):** ```svg ``` Use this as a React component `` (uses `fill="currentColor"`). --- **BACKGROUND VIDEO:** - URL: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260624_054830_07627566-fd88-4b82-9ee8-b5d78b1c4f36.mp4` - Attributes: autoPlay, muted, loop, playsInline - Positioned: absolute inset-0, w-full h-full, object-cover - Parent container: relative h-screen w-full overflow-hidden bg-black --- **LAYOUT STRUCTURE (all within the fullscreen container):** 1. **Navigation bar** (z-10, relative): - Left: Logo + desktop nav links ("Work" active/white, "Studio" and "Connect" white/70 with hover:white) - Right: "Enter" text (desktop only) + hamburger Menu icon - Padding: px-5 sm:px-6 md:px-12, py-5 md:py-6 - Desktop nav links hidden on mobile; hamburger shows on mobile (md:hidden), also visible on desktop 2. **Main content area** (flex-1, relative, same horizontal padding): - **Hero text block** (top-left, pt-4 sm:pt-8 md:pt-16, max-w-lg): - H1: "Shape your\nbold spaces" - font-vilsuve, text-3xl sm:text-4xl md:text-6xl lg:text-7xl, text-white, leading-[0.95], tracking-tight - Paragraph: "Designing bold forms, sculpting purposeful structures, and building a timeless legacy for all." - text-white/60, text-xs sm:text-sm md:text-base, max-w-xs, leading-relaxed - Button: "Our Projects" with Grid3X3 icon - border border-white/30, rounded-full, px-5 sm:px-6 py-2.5 sm:py-3, hover:bg-white/10 - **Two staggered cards** (absolute bottom-right): - Container: absolute bottom-6 sm:bottom-8 md:bottom-12 right-5 sm:right-6 md:right-12 - Grid: grid grid-cols-2 gap-3 sm:gap-4 md:gap-5 - Card 1: col-start-1 row-start-1, self-end, w-36 sm:w-44 md:w-52 lg:w-60 - Image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_052633_1cc62234-04fe-4fb5-905e-66254dd3c5db.png&w=1280&q=85` - Label: "CRAFT" (uppercase, text-white/60, text-[10px] sm:text-xs) - Title: "Spaces shaped with intention." (text-sm sm:text-base md:text-lg, font-semibold) - Grid3X3 icon bottom-right (text-white/70) - Card 2: col-start-2 row-start-2, w-36 sm:w-44 md:w-52 lg:w-60 - Image: `https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260624_052653_54120660-1330-4f38-92ab-a6ba7ac15397.png&w=1280&q=85` - Label: "ARCVAULT" (same style) - Title: "Form in Stone" (text-base sm:text-xl md:text-2xl, font-semibold) - Grid3X3 icon bottom-right - Both cards: rounded-xl sm:rounded-2xl, aspect-square, gradient overlay (bg-gradient-to-t from-black/60 via-black/20 to-transparent), content justified to bottom - **Floating labels** (lg only, absolute positioned on background): - "Concrete Atrium / 282 M" at top-[25%] right-[30%] - small white dot + text-xs - "Brutalist Arc / 67%" at top-[45%] right-[15%] - same style - **Scroll indicator** (absolute bottom-8 left-1/2, hidden md:flex): - Text "Scroll" - text-white/40, text-[10px], uppercase, tracking-[0.3em], vertical writing mode (writingMode: 'vertical-rl'), rotated 180deg 3. **Mobile menu overlay** (fixed inset-0 z-50): - Toggled by `menuOpen` state - Backdrop: bg-black/90 backdrop-blur-xl, opacity transition 500ms - Content slides in from top (-translate-y-8 to translate-y-0), 500ms ease-out - Header: Logo left, X close button right - Links: "Work", "Studio", "Connect", "Enter" - text-4xl, font-vilsuve, font-light, staggered entrance (each link delayed 75ms apart starting at 150ms), border-b border-white/10 - Footer: "Crafting bold spaces for an intentional world." - text-white/40 text-xs, delayed 450ms - pointer-events-none when closed, pointer-events-auto when open --- **CSS (index.css):** ```css @tailwind base; @tailwind components; @tailwind utilities; ``` No additional custom CSS needed. --- **KEY DESIGN DETAILS:** - Entire page is black with the video covering the background - All text is white with various opacity levels (white, white/70, white/60, white/50, white/40) - Fully responsive: mobile-first breakpoints at sm, md, lg - Cards use a CSS grid stagger pattern (not absolute positioning relative to each other) - Transitions on hover states and menu animations - No scrolling on the page (h-screen overflow-hidden)25:T2a46,Build a dark-themed FAQ section for a React 18 + Vite + TypeScript app using TailwindCSS, framer-motion, and Radix UI Accordion. Match these specs exactly. ## Stack & Global Setup - React 18, Vite, TypeScript, TailwindCSS - Dependencies: `framer-motion`, `@radix-ui/react-accordion`, `clsx`, `tailwind-merge` - `cn()` helper: `twMerge(clsx(inputs))` exported from `@/lib/utils` - Dark theme background `#000000`, font `Inter`, Material Symbols Outlined for icons - Tailwind `theme.extend.colors`: - `landing.surface: "rgba(255,255,255,0.10)"` - `landing.surface-hover: "rgba(255,255,255,0.16)"` - `border: "rgba(255,255,255,0.10)"` - `foreground: "hsl(0 0% 100%)"` (semantic; use `text-foreground`, `text-foreground/60`, `text-foreground/70`, `text-foreground/80`) - `background: "#000000"` (semantic) ## Helper Components ### MIcon (Material Symbols Outlined) ```tsx type Props = { name: string; size?: number; className?: string; fill?: 0|1; weight?: number; grade?: number; opsz?: number }; export const MIcon = ({ name, size=20, className, fill=0, weight=400, grade=0, opsz=24 }: Props) => ( {name} ); ``` Include in `index.html`: ```html ``` ### FadeUp (framer-motion scroll reveal) - `motion.div`, `initial={{opacity:0, y:24}}`, `whileInView={{opacity:1, y:0}}`, `viewport={{once:true, amount:0.3}}`, `transition={{duration:0.6, delay, ease:[0.22,1,0.36,1]}}`. Honors `useReducedMotion`. ### SpotlightBorder (cursor-tracked 1px gradient ring) - Wrapper `relative` with `rounded-{radius}` (xl/2xl/3xl/full). - Inside, an absolute-inset `` with style: ```ts { background: `radial-gradient(${size}px circle at var(--spot-x,-200px) var(--spot-y,-200px), rgba(255,255,255,${intensity}), rgba(255,255,255,0) 60%)`, padding: "1px", WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)", WebkitMaskComposite: "xor", maskComposite: "exclude", } ``` - Global mousemove listener writes `--spot-x` / `--spot-y` on the element (relative to its bounding rect). - Polymorphic `as`: div | button | section. Export both the component and `spotlightMaskStyle(size, intensity)` helper for reuse inline. ### Radix Accordion wrapper (shadcn-style) `Accordion`, `AccordionItem` (`border-b` default), `AccordionTrigger` (flex justify-between, hides built-in chevron when class includes `[&>svg]:hidden`), `AccordionContent` (with `data-[state=open]:animate-accordion-down`, `data-[state=closed]:animate-accordion-up`). Use standard shadcn accordion file. Tailwind keyframes (in config): ```js keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" } }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" } }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out" } ``` ## Data ```ts type CategoryKey = "general" | "ai" | "integrations"; const categories = [ { key: "general", label: "General" }, { key: "ai", label: "AI & Capabilities" }, { key: "integrations", label: "Integrations & Security" }, ]; const faqs: Record = { general: [ { q: "What is UI Rocket?", a: "UI Rocket is a learning platform for designers who want to master AI-powered design workflows and ship production-ready websites faster." }, { q: "Who is this for?", a: "Designers, founders, and creators who want to level up their AI design skills and build real, shippable products." }, { q: "Do I need prior design experience?", a: "No. The curriculum starts from fundamentals and progressively builds toward advanced AI-driven workflows." }, { q: "How long does it take?", a: "Most members make meaningful progress within a few weeks of consistent practice." }, { q: "Is there a community?", a: "Yes. You get access to a private community of designers and founders building with AI." }, ], ai: [ { q: "Which AI tools do you cover?", a: "We focus on Lovable, Figma AI, image generation models, and the workflows that tie them together into a real design process." }, { q: "Will AI replace designers?", a: "No. Designers who use AI fluently will replace those who don't. The course teaches you to be the former." }, { q: "Do I need API keys?", a: "No. Everything you need is included — no separate API keys, subscriptions, or hidden setup." }, { q: "Can I use these skills with any tool?", a: "Yes. The principles transfer across tools — you'll learn frameworks, not button-clicks." }, { q: "How often is the content updated?", a: "Regularly. As AI tools evolve, we update the curriculum so you're always learning what's current." }, ], integrations: [ { q: "Which tools does UI Rocket integrate with?", a: "UI Rocket works alongside Lovable, Figma, and the most common modern design and dev tools." }, { q: "Is my data secure?", a: "Yes. Your data is encrypted in transit and at rest, and never shared with third parties." }, { q: "Is my data used to train AI models?", a: "No. Your work and account data are never used to train AI models." }, { q: "Who can access our workspace data?", a: "Only members you explicitly invite. Access is fully under your control." }, { q: "Where is my data stored?", a: "On secure cloud infrastructure with industry-standard compliance and backups." }, ], }; ``` ## Section Layout (`FaqSection.tsx`) - `

` - Inner container: `mx-auto max-w-[1080px] px-4 sm:px-6` ### Header (top, two-column on lg) - Flex column on mobile, `lg:flex-row lg:items-end lg:justify-between`, `mb-14`, `gap-10`. - Left block (`max-w-2xl`): - Pill (FadeUp delay 1): `inline-flex items-center gap-2 rounded-full bg-landing-surface border border-white/10 px-3 py-1 text-xs text-foreground/80 backdrop-blur`, with leading `1.5×1.5` dot `bg-foreground/70`, label "FAQ". - Heading (FadeUp delay 0.1): `text-3xl sm:text-4xl font-normal tracking-[-0.02em] leading-[1.05] text-foreground` — "Answers to the questions" `
` " that come up most." - Right paragraph (FadeUp delay 0.2): `max-w-sm text-sm sm:text-base text-foreground/60` — "Learn how UI Rocket works, what it covers, how the workflow flows, and what you can expect day to day." ### Body grid `grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-8 lg:gap-12 items-stretch` #### Left column (sticky category list + "Got Questions" card) - Outer `flex flex-col gap-4 lg:h-full`. - Top wrapper `lg:flex-1` containing a `SpotlightBorder` (radius `2xl`, size 280) with classes `flex flex-col p-2 sm:p-3 lg:sticky lg:top-24`. - Inside, map `categories`. Each item is itself a `SpotlightBorder as="button" radius="full" size={200} intensity={0.4}` with classes: - Base: `w-full text-center px-5 py-3 text-sm transition-colors` - Active: `bg-landing-surface border border-white/10 text-foreground` - Inactive: `border border-transparent text-foreground/60 hover:text-foreground` - `onClick` sets `active` state (`useState("general")`). - Bottom "Got Questions?" card: `SpotlightBorder` radius `2xl` size 360 with `mt-8 lg:mt-0 p-2 sm:p-3`, containing nested `SpotlightBorder` radius `2xl` size 260 intensity 0.4 with `border border-white/10 bg-landing-surface p-6`: - `

Got Questions?

` - `

Need help with something? Our team is here to make things easy. Don't hesitate to reach out.

` - `Email us →` #### Right column (accordion) - Outer `SpotlightBorder radius="2xl" size={360} className="p-2 sm:p-3"`. - Inside: ``. - Use `itemRefs = useRef>([])` and a `useEffect` that adds a `mousemove` listener writing `--spot-x`/`--spot-y` on each item's bounding rect (so each card has its own spotlight). - Map `faqs[active]`. Each entry wrapped in ``. - `AccordionItem`: - `value={`${active}-${idx}`}`, ref into `itemRefs`. - Classes: `relative rounded-2xl border border-white/10 bg-landing-surface px-6 [&[data-state=open]]:bg-landing-surface-hover` - Inside, an absolute-inset `` to render the per-card spotlight ring. - `AccordionTrigger`: `py-7 text-left text-sm sm:text-base font-medium text-foreground hover:no-underline [&>svg]:hidden` - Children: `{q}` and a 28px circular icon button: `flex h-7 w-7 items-center justify-center rounded-full border border-white/15 bg-white/[0.04] text-foreground/70 transition-transform duration-200 group-data-[state=open]:rotate-180`, containing ``. - `AccordionContent`: `pb-7 text-sm text-foreground/60 leading-relaxed` — render `{a}`. ## Behavior - Switching category re-keys the AccordionItem `value` prefix so all items collapse when category changes. - Only one item open at a time (`type="single" collapsible`). - Spotlight ring follows mouse on the outer wrapper containers AND on every individual accordion item independently. - All entrance animations use FadeUp; reduced-motion disables translate but keeps opacity. ## Acceptance Checklist - Dark `#000000` background, Inter text, max width 1080px. - Header: small pill with dot + "FAQ", large heading "Answers to the questions / that come up most.", right-side paragraph aligned to bottom on lg. - Two-column body: left 280px sticky category list with pill buttons (active = filled surface, inactive = transparent), plus "Got Questions?" card with email CTA arrow. - Right column: cards stacked with `gap-3`, rounded-2xl, surface fill, open state slightly brighter, 28px circular chevron button rotating 180° on open, content fades/animates via Radix accordion keyframes. - 1px spotlight ring follows cursor on every SpotlightBorder wrapper and every accordion card. - Scroll-in FadeUp stagger on header items and on each FAQ row (`0.15 * idx`). - Switching categories collapses any open item and swaps the question list.26:T12a2,Please build a modern, two-column registration interface called "Aurora Sign Up". Use React, Tailwind CSS (v4), `motion/react` (for animations), and `lucide-react` (for icons). The app should be contained entirely in `App.tsx` and `index.css`. ### 1. Global Setup & CSS (`index.css`) - Import the "Inter" font from Google Fonts (weights 300, 400, 500, 600, 700). - Extend the Tailwind theme with `--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;` and a custom color: `--color-brand-gray: #1A1A1A`. - Apply base styles to the `body`: `@apply font-sans bg-black text-white antialiased;`. ### 2. Main Layout (`App.tsx` container) - The `

` element should have: `flex min-h-screen w-full bg-black selection:bg-white/30 p-2 transition-all duration-500`. - On `lg` breakpoints: `lg:h-screen lg:overflow-hidden lg:p-4`. - Split this container into a Left Column (Hero) and a Right Column (Form). ### 3. Left Column (Hero & Background Video) - Width on large screens should be exactly `w-[52%]`. It should be hidden on mobile/tablet and only visible `lg:flex`. - Styles: `relative flex-col items-center justify-end pb-32 px-12 rounded-3xl overflow-hidden shadow-2xl h-full`. - **Background Video**: Add an absolutely positioned `

Got Questions?

Demand for resilient propulsion is rising as aerospace programs move faster, fly farther, and require engines built with absolute precision.

Propulsion programs need a partner that can move from concept to certified hardware.

Unmatched propulsion data across every flight-critical layer.

Program stories from the people building flight-ready power.

How a reusable upper-stage program moved from thermal risk to stable qualification.

Inside the test cell where telemetry, vibration, and injector response converge.

Why sub-micron inspection changes the way aerospace teams plan reliability.

Designing feed systems and ignition envelopes for hydrogen-ready propulsion.

The operational cadence behind launch-window support and post-test analysis.

Explore Veldara

Unlock Three.js

Connect Everything

Instantly craft immersive 3D worlds on the web.

Veldara 8

` - Text: "Meet USD Halo." - Classes: `text-black text-4xl md:text-5xl font-medium leading-tight mb-8` - Inline style: `{ letterSpacing: '-0.03em' }` 2. CTA pill button (black capsule, text-left icon-right pattern): - Element: `

Meet USD Halo.

Plans

Mind Amplified.

Silent thought.

Cortex.

Cognitive flow.

Intuition.

Instant recall.

Insight.

Got Questions?

Demand for resilient propulsion is rising as aerospace programs move faster, fly farther, and require engines built with absolute precision.

Propulsion programs need a partner that can move from concept to certified hardware.

Unmatched propulsion data across every flight-critical layer.

Program stories from the people building flight-ready power.

How a reusable upper-stage program moved from thermal risk to stable qualification.

Inside the test cell where telemetry, vibration, and injector response converge.

Why sub-micron inspection changes the way aerospace teams plan reliability.

Designing feed systems and ignition envelopes for hydrogen-ready propulsion.

The operational cadence behind launch-window support and post-test analysis.

Explore Veldara

Unlock Three.js

Connect Everything

Instantly craft immersive 3D worlds on the web.

Veldara 8

Meet USD Halo.

AI analysis

Plans

Mind Amplified.

Silent thought.

Cortex.

Cognitive flow.

Intuition.

Instant recall.

Insight.

Bionova Biotech

Obsidian Hero

Rocket FAQ

Aurora Onboard

AeroCore

3D Story

Halo Benefits

Agency Services

Apex Pulse

Future-State

Prioritize

AI Meeting Notes

deep neural interface

SaaS Pricing Flow

Terra Geo Map

Luxury Botanical

Rocket CTA

F1 Driver Profile

Audio Showcase

Kova Testimonial