Home
Get Started
Toggle Menu
create a landing page for my SaaS named mailerbro which is a email marketing Software | A shadcn/ui and v0 generation - v0
Link to sayeed205's v0.app Profile
import React, { useState, useEffect } from 'react'; import { Link } from '@inertiajs/react'; import Icons from '~/lib/components/icons'; const Header: React.FC = () => { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [isScrolled, setIsScrolled] = useState(false); useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 0); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); return ( <header className={`fixed w-full z-10 transition-all ${isScrolled ? 'bg-white shadow-md' : ''}`}> <div className="container mx-auto px-4 sm:px-6 lg:px-8"> <div className="flex justify-between items-center py-6 md:justify-start md:space-x-10"> <div className="flex justify-start lg:w-0 lg:flex-1"> <Link href="/"> <span className="sr-only">MailerBro</span> <Icons.logo/> </Link>
Add
component
to project
Learn more
npx v0 add
a1B2c3d4
component.jsx
(read-only)
Log In to Copy Code
To enable copying code, saving to favorites, forking, and other features, please sign up or log in.
Authenticate
Copy Code
Copy CLI command
Link to sayeed205's v0.app Profile
import React, { useState, useEffect } from 'react'; import { Link } from '@inertiajs/react'; import Icons from '~/lib/components/icons'; const Header: React.FC = () => { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); const [isScrolled, setIsScrolled] = useState(false); useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 0); }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); return ( <header className={`fixed w-full z-10 transition-all ${isScrolled ? 'bg-white shadow-md' : ''}`}> <div className="container mx-auto px-4 sm:px-6 lg:px-8"> <div className="flex justify-between items-center py-6 md:justify-start md:space-x-10"> <div className="flex justify-start lg:w-0 lg:flex-1"> <Link href="/"> <span className="sr-only">MailerBro</span> <Icons.logo/> </Link>
History
Toggle
v0
v1
Desktop
Tablet
Mobile
Full Screen
History
Theme
Code