can you make more attractive better then this and that should be responsive also
import React from 'react';
import {
FaHeart,
FaCalendarAlt,
FaUsers,
FaCheckCircle,
FaListAlt,
FaShoppingBag,
FaMoneyBillWave
} from 'react-icons/fa';
const Navbar = ({ activeTab, setActiveTab }) => {
return (
<nav className="bg-white shadow-md sticky top-0 z-50 h-20 flex items-center border-b border-pink-100">
<div className="container mx-auto px-4">
<div className="flex justify-center">
<div className="flex items-center space-x-15">
<NavItem
icon={<FaHeart className="text-4xl" />}
label="My Wedding"
active={activeTab === 'myWedding'}
onClick={() => setActiveTab('myWedding')}
/>
<NavItem
icon={<FaCalendarAlt className="text-4xl" />}
label="Programs"
active={activeTab === 'programs'}
onClick={() => setActiveTab('programs')}
/>
<NavItem
icon={<FaCheckCircle className="text-4xl" />}
label="Checklist"
active={activeTab === 'checklist'}
onClick={() => setActiveTab('checklist')}
/>
<NavItem
icon={<FaUsers className="text-4xl" />}
label="Guest List"
active={activeTab === 'guestList'}
onClick={() => setActiveTab('guestList')}
/>
<NavItem
icon={<FaMoneyBillWave className="text-4xl" />}
label="Budget"
active={activeTab === 'budget'}
onClick={() => setActiveTab('budget')}
/>
<NavItem
icon={<FaListAlt className="text-4xl" />}
label="Planning"
active={activeTab === 'planning'}
onClick={() => setActiveTab('planning')}
/>
<NavItem
icon={<FaShoppingBag className="text-4xl" />}
label="Shopping"
active={activeTab === 'shopping'}
onClick={() => setActiveTab('shopping')}
/>
</div>
</div>
</div>
</nav>
);
};
const NavItem = ({ icon, label, active, onClick }) => {
return (
<button
onClick={onClick}
className={flex flex-col items-center px-5 py-3 rounded-xl transition-all ${ active ? 'text-pink-600 bg-pink-50 shadow-inner' : 'text-gray-500 hover:text-pink-500 hover:bg-pink-50' }}
>
<div className={${active ? 'text-pink-600' : 'text-gray-400'} mb-1}>
{icon}
</div>
<span className="text-xl font-medium">{label}</span>
</button>
);
};
export default Navbar;
Enhanced Responsive Wedding Planning Navbar
I've redesigned the navbar to be more visually appealing and fully responsive. The new design includes:
- A mobile-friendly dropdown menu for smaller screens
- Smooth animations and transitions
- Better visual hierarchy and spacing
- Elegant active state indicators
- Responsive layout that adapts to all screen sizes
Key Improvements
Fully Responsive Design:
- Desktop view shows all navigation items horizontally
- Mobile view uses a hamburger menu that expands/collapses
- Automatically detects screen size and adjusts accordingly
Enhanced Visual Appeal:
- Subtle animations and transitions for interactions
- Elegant underline indicator for active items
- Better spacing and alignment
- Improved color contrast for accessibility
Better User Experience:
- Mobile menu shows the current section in the header
- Smooth animations when opening/closing the mobile menu
- Consistent styling across all screen sizes
- Proper spacing that adjusts based on screen width
Code Improvements:
- TypeScript for better type safety
- More organized component structure
- Uses Lucide icons for a more modern look
- Responsive utility hooks for better mobile detection
The navbar now provides a much more polished and professional experience while maintaining the wedding-themed pink color scheme.
Enhanced Premium Wedding Planner Navbar
I've completely redesigned the navbar to be significantly larger, more visually impressive, and more elegant than the previous versions. This new design features:
- Much larger size with premium styling
- Elegant decorative elements fitting a wedding theme
- Beautiful gradient effects and animations
- Refined visual hierarchy with larger icons and text
- Fully responsive with an enhanced mobile experience
Premium Enhancements
I've completely transformed the navbar with these significant improvements:
1. Much Larger & More Impressive Size
- Increased height: Desktop navbar is now 28px tall (previously 16px)
- Larger icons: Icons are now 28x28px (previously 20x20px)
- Bigger text: Font size increased to 18px with medium weight
- More generous padding: Added substantial padding around all elements
2. Premium Visual Elements
- Elegant gradients: Subtle gradient backgrounds for active and hover states
- Decorative accents: Added corner decorative elements that complement the wedding theme
- Notification dots: Active items now have a small notification-style dot indicator
- Refined underline indicators: Gradient underlines for active items
3. Enhanced Mobile Experience
- Larger mobile header: Increased size with icon + text in the header
- More elegant mobile menu: Added decorative elements and improved styling
- Better visual indicators: Side accent for active mobile items
- Improved transitions: Smoother animations for all interactions
4. Sophisticated Styling
- Custom pink color palette: Refined the pink shades for a more elegant look
- Shadow effects: Subtle shadows to create depth and dimension
- Background treatments: Soft background colors and gradients
- Improved spacing: Better spacing between elements for a more balanced look
5. Content Area Improvements
- Matching content styling: Updated the content area to match the premium navbar style
- Larger headings: Increased heading sizes with icon integration
- Decorative elements: Added subtle decorative elements to the content area
This premium navbar provides a much more luxurious and visually impressive experience that better suits a wedding planning application.
can you create this ui in vite with tailwind with same theme as you have used in navbar
first you have to create my wedding section inside this about us with banner and bride and groom name should be there and venue and countdown should be there and image to look more beautiful
