## Add Component: Header 02 Pixa ### File: /components/ui/header-02-pixa.tsx ```tsx "use client"; import React from "react"; import { ArrowUpRight, Search, ChevronDown } from "lucide-react"; import { motion } from "framer-motion"; const fadeUpVariants = { hidden: { opacity: 0, y: 30, filter: "blur(4px)" }, visible: (delay: number) => ({ opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: 0.8, delay, ease: [0.25, 0.1, 0.25, 1] as const, }, }), }; interface AnimatedContentProps { children: React.ReactNode; delay?: number; className?: string; } function AnimatedContent({ children, delay = 0, className = "" }: AnimatedContentProps) { return ( {children} ); } function LogoMark() { return ( ); } function TopBar() { return (

Use this space to share key info or link to a feature — Learn more

); } function Navigation() { return (

); } interface PrimaryButtonProps { children: React.ReactNode; className?: string; onClick?: () => void; } function PrimaryButton({ children, className = "", onClick }: PrimaryButtonProps) { return ( {children} ); } interface SecondaryButtonProps { children: React.ReactNode; className?: string; onClick?: () => void; } function SecondaryButton({ children, className = "", onClick }: SecondaryButtonProps) { return ( {children} ); } export default function Header02Pixa() { const logos = [ { name: "Lightspeed", url: "https://pub-2df60d97ace544a68c00aa294c98f8e5.r2.dev/Pixa/Lightspeed.svg" }, { name: "Warpspeed", url: "https://pub-2df60d97ace544a68c00aa294c98f8e5.r2.dev/Pixa/Wrapspeed.svg" }, { name: "Peregrin", url: "https://pub-2df60d97ace544a68c00aa294c98f8e5.r2.dev/Pixa/Peregrin.svg" }, { name: "Quixotic", url: "https://pub-2df60d97ace544a68c00aa294c98f8e5.r2.dev/Pixa/Quxotic.svg" }, { name: "GlobalBank", url: "https://pub-2df60d97ace544a68c00aa294c98f8e5.r2.dev/Pixa/Globalbank.svg" }, { name: "Warpspeed", url: "https://pub-2df60d97ace544a68c00aa294c98f8e5.r2.dev/Pixa/Wrapspeed.svg" }, ]; const features = [ { icon: "https://pub-2df60d97ace544a68c00aa294c98f8e5.r2.dev/Pixa/lightbulb-flash-fill.svg", title: "Spark new ideas", description: "Merge your banks, wallets, and cards to see balances in one view", link: "Learn more", }, { icon: "https://pub-2df60d97ace544a68c00aa294c98f8e5.r2.dev/Pixa/stack-overflow-fill.svg", title: "Organize your thinking", description: "Merge your banks, wallets, and cards to see balances in one view", link: "Learn more", }, { icon: "https://pub-2df60d97ace544a68c00aa294c98f8e5.r2.dev/Pixa/graduation-cap-fill.svg", title: "Power study", description: "Merge your banks, wallets, and cards to see balances in one view", link: "Learn more", }, ]; return (

New Experience next-gen AI chat

The AI notepad for people in back-to-back meetings

NoteAI takes your raw meeting notes and makes them awesome

Download for Mac Play

See how it works

{logos.map((logo, idx) => (

))}

{features.map((feature, idx) => (

{feature.title}

{feature.description}

{feature.link}

))}

From secure payments to account sync,{" "} everything runs in one place.

); } ``` ### Install Dependencies: ```bash npm install framer-motion lucide-react ``` ### Update /app/page.tsx: Add this import at the top: ```tsx import Header02Pixa from "@/components/ui/header-02-pixa"; ``` Add this inside `

`, as the very first child (so the announcement bar sits at the top of the page): ```tsx ``` ### Rules: - Copy the code EXACTLY as provided - Do NOT modify, refactor, or rename anything - Do NOT change any Tailwind classes - Do NOT add features or "improvements" - The top bar and navigation are intentionally non-sticky — they scroll away with the page - Inter Tight font is used; make sure it is loaded globally in your project (via Google Fonts, next/font, or similar) - Just create the file and update page.tsx