UB MAKEOVERS

As a frontend developer, implement the CTASection which includes a call-to-action card with a glowing effect, a title, descriptive text, and action buttons for booking appointments and contacting via phone. Ensure social media links are functional and styled according to the provided CSS.

As a frontend developer, implement the Footer which includes brand information, navigation links, and contact details. Ensure the footer is styled according to the provided CSS and is responsive. Note that this component may already exist from a previous page.

As a frontend developer, implement the HeroSection which includes a parallax scrolling effect using GSAP and ScrollTrigger. The section features a title, description, and action buttons. Ensure the animations are smooth and the section is styled according to the provided CSS.

As a frontend developer, implement the OffersSection which displays a list of current offers using a grid layout. Each offer includes a badge, title, description, price, and a button to claim the offer. Ensure the section is styled according to the provided CSS.

As a frontend developer, implement the PortfolioSection which displays a gallery of work using a grid layout. Each item includes an image, tag, and title. Ensure the section is styled according to the provided CSS and images are lazy-loaded for performance.

As a frontend developer, implement the PriceListSection which displays a list of services and their prices using a table layout. Ensure the section is styled according to the provided CSS and is responsive.

As a frontend developer, implement the RatingsSection which displays customer reviews using a grid layout. Each review includes a name, look, star rating, and text. Ensure the section is styled according to the provided CSS.

As a frontend developer, implement the Navbar section for the Login page. This component includes a responsive navigation menu with links to various pages such as Landing, Portfolio, Ratings, Offers, PriceList, Booking, and Login. It features a toggleable burger menu for mobile views, which uses a state hook to manage its open/close state. Ensure the Navbar is consistent with the design used on the Landing page, and note that it may already exist from the Landing page implementation.

As a Backend Developer, implement a scheduled job to send appointment reminders via email or SMS. Ensure reminders are sent at the correct time and handle any delivery failures.

As a frontend developer, implement the LoginFormContainer section for the Login page. This component includes animated particles and glow effects for visual enhancement. It serves as a container for the login form, displaying a welcome message and a feature highlight about appointment reminders. The component uses CSS animations for particles and glows, enhancing the user experience.

As a frontend developer, implement the Footer section for the Login page. This component includes branding, navigation links to explore the site, account management, and social media connections. It may already exist from the Landing page implementation, so ensure consistency across pages.

As a frontend developer, implement the PortfolioHero section for the Portfolio page. This section includes a visually appealing hero area with glowing effects, a badge, a title with an accent, a description, and a scroll indicator. It sets the stage for the portfolio content with a focus on bridal transformations and artistry.

As a frontend developer, implement the PortfolioFilter section for the Portfolio page. This section provides buttons for filtering portfolio items by categories such as All, Bridal, Hair, Makeup, and Events. It uses props to manage the active filter state and triggers a callback on filter change.

As a frontend developer, implement the PortfolioGrid section for the Portfolio page. This section displays a grid of portfolio items filtered by category. It uses useMemo for efficient filtering and useState to manage the active item. Each item is displayed with an image, category, title, and service details.

As a frontend developer, implement the PortfolioAchievements section for the Portfolio page. This section highlights the salon's achievements with icons, titles, and descriptions. It showcases the salon's trusted bridal portfolio, seasoned artistry, award-winning team, and features in beauty publications.

As a frontend developer, implement the PortfolioTestimonials section for the Portfolio page. This section features a carousel of client testimonials with navigation buttons and dots. It uses useState to manage the current testimonial index and displays client initials, names, roles, and quotes.

As a frontend developer, implement the PortfolioCTA section for the Portfolio page. This section includes a call-to-action with a title, description, and buttons for booking a session or viewing pricing. It also provides a phone link for direct contact.

As a frontend developer, implement the DashboardWelcome section which includes a personalized welcome message for the user, Ananya Shah. This section displays the user's avatar, next appointment details, total bookings, last visit date, and a link to view the full profile. Ensure the glow effect and status dot are correctly styled as per the design.

As a frontend developer, implement the AdminHeader section which displays the current date and time, a welcome message, and an admin profile section with an avatar and role. It includes a logout button with an SVG icon. Ensure the component is styled according to the provided CSS and integrates with the existing Navbar from the Login page.

As a frontend developer, implement the CredentialsForm section for the Login page. This component includes input fields for email and password, with validation error handling and a toggle for password visibility. It uses state hooks to manage form data and password visibility. The form also includes a 'Remember me' checkbox and a link to recover forgotten passwords.

As a frontend developer, implement the RatingsHero section which includes a title, subtitle, and an eyebrow text. This section introduces the customer ratings and reviews with a decorative line. Ensure the layout matches the design and the text is styled according to the provided CSS.

As a frontend developer, implement the OverviewCards section which displays key metrics such as Total Bookings, Completed, Pending, Active Offers, New Reviews, and Revenue. Each card should show an icon, value, label, and trend indicator (up or down).

As a frontend developer, implement the ManagementTabs section which allows switching between 'Work' and 'Achievements' tabs. The active tab should be visually distinct, and clicking a tab should trigger the onTabChange callback.

As a frontend developer, implement the BookingsHeader section which includes a breadcrumb navigation, action buttons for viewing the calendar and creating a new booking, and a title with a subtitle. This section should display the total count of bookings and provide navigation links to the Dashboard and Bookings pages.

As a frontend developer, implement the ContentPageHeader section which includes a breadcrumb navigation, a title and description for content management, a search input with state handling for searchTerm, and filter buttons for content categories. Ensure the search input updates the searchTerm state and the filter buttons update the activeFilter state. This section depends on the AdminHeader from the Admin Dashboard.

As a frontend developer, implement the LoginSubmit section for the Login page. This component allows users to select their user type (Customer or Admin) and submit the login form. It displays loading states and success/error messages based on the login attempt. The component uses role-based tabs for user type selection and manages loading states for the submit button.

As a frontend developer, implement the RatingsSummaryBadge section which displays the average rating and total number of reviews. It includes a star rating visualization and a count of verified reviews. Ensure the component dynamically updates based on props and matches the design specifications.

As a frontend developer, implement the RatingsFilter section which allows users to filter reviews by star rating and sort them by different criteria. This section includes interactive elements such as dropdowns and buttons, and uses GSAP for animations. Ensure the state management and animations are implemented as per the design.

As a frontend developer, implement the RatingsCardList section which displays a list of review cards. It should handle an empty state by showing a message when no reviews match the filters. Ensure the grid layout is responsive and matches the design specifications.

As a frontend developer, implement the RatingsStatsBars section which visualizes the distribution of ratings using animated bars. This section uses GSAP for animations triggered on scroll. Ensure the animations are smooth and the component matches the design.

As a frontend developer, implement the RatingsStatsMetrics section which displays key metrics such as total reviews and recommendation percentage. Ensure the component is styled according to the design and dynamically updates based on props.

As a frontend developer, implement the ContentWorkPanel section which includes an image upload zone and a gallery displaying uploaded images. Each image card should have a delete button to remove the image.

As a frontend developer, implement the ContentAchievementsPanel section which displays a list of achievements with badges. Each achievement should have edit and delete actions, and there should be a button to add new achievements.

As a frontend developer, implement the ContentBookingsPanel section which displays a table of bookings with filters for different statuses. Each booking row should have edit and delete actions.

As a frontend developer, implement the ContentOffersPanel section which manages promotional offers. It includes a form to add new offers and a grid to display existing offers with edit and delete actions.

As a frontend developer, implement the ContentPriceListPanel section which displays a table of service pricing. It should allow inline editing of prices with save and cancel actions.

As a frontend developer, implement the OffersHero section which includes a glowing background and content highlighting current offers. The section uses classes like 'oh-root', 'oh-glow', and 'oh-content' to style the hero area. It features a title with an accent span, a subtitle, and a description encouraging users to book appointments. Ensure the design aligns with the theme of the website.

As a frontend developer, implement the BookingsNav section which provides a filterable list of booking statuses. This section includes buttons for each status (All Bookings, Upcoming, Past, Cancelled, Pending Confirmation) that update the active filter and display the count of bookings for each status.

As a frontend developer, implement the BookingsSearchBar section which allows users to search for bookings by customer name or booking ID. This section includes an input field with a clear button that resets the search query.

As a frontend developer, implement the BookingsDateFilter section which allows users to filter bookings by a date range. This section includes date input fields for start and end dates, and buttons to apply or reset the date filter.

As a frontend developer, implement the BookingsTypeAndSort section which allows users to filter bookings by service type and sort them by various criteria. This section includes dropdowns for selecting service type and sort order, and a reset button to clear filters.

As a frontend developer, implement the BookingsTable section which displays a table of bookings with sortable columns for customer name, service, date, time, status, and notes. This section includes checkboxes for selecting bookings and a header checkbox for selecting all bookings on the page.

As a frontend developer, implement the ContentManagementTabs section which includes tab navigation for 'Work Gallery', 'Achievements', and 'Offers'. Each tab should update the activeTab state when clicked, and display an unsaved indicator if there are unsaved changes. Ensure proper styling and accessibility for the tabs.

As a frontend developer, implement the WorkGalleryGrid section which displays a grid of work items. Each item should be selectable, updating the selectedId state. If no items are present, display a message prompting the user to add new work. Ensure images are lazy-loaded for performance.

As a frontend developer, implement the AchievementsList section which displays a list of achievements. Each achievement should have options to edit or delete, and display a 'Featured' badge if applicable. Handle empty state when no achievements are present.

As a frontend developer, implement the OffersList section which displays a list of offers with filtering options for status. Each offer should have options to edit, delete, or toggle active status. Handle empty state when no offers match the filter.

As a frontend developer, implement the SocialLogin section for the Login page. This component provides buttons for social login options, such as Google and WhatsApp. It manages loading states for each provider and simulates a connection process with a timeout. The component enhances user experience by offering alternative login methods.

As a frontend developer, implement the RatingsCardItem section which displays individual review details including user avatar, rating, and review text. This component includes animations using GSAP and allows users to vote on the helpfulness of reviews. Ensure the component is interactive and visually matches the design.

As a frontend developer, implement the RatingsPagination section which provides navigation controls for paginating through reviews. It should handle edge cases such as disabling buttons when on the first or last page. Ensure the component is accessible and matches the design.

As a frontend developer, implement the OffersGrid section which displays a grid of offer cards. Each card includes a title, description, discount badge, validity, and a 'Book Now' link. The section uses an array of offers mapped to 'og-card' elements, styled with classes like 'og-root', 'og-inner', and 'og-grid'. Ensure the grid is responsive and visually appealing.

As a frontend developer, implement the OffersDetails section featuring an accordion component for displaying offer details. Use state management with 'useState' to toggle accordion items open and closed. Each item includes a title and content, styled with classes like 'od-root', 'od-inner', and 'od-accordion'. Ensure accessibility with aria-expanded attributes.

As a frontend developer, implement the CallToAction section which encourages users to book appointments. The section includes a headline, text, and two call-to-action buttons linking to booking and a phone call. Styled with classes like 'cta-root', 'cta-inner', and 'cta-actions', ensure the section is prominent and aligns with the overall page design.

As a frontend developer, implement the BookingsRowActions section which provides action buttons for each booking row in the table. This section includes buttons for editing, rescheduling, sending reminders, and cancelling bookings.

As a frontend developer, implement the BookingsPagination section which provides pagination controls for navigating through pages of bookings. This section includes buttons for previous and next pages, page number buttons, and a dropdown for selecting the number of items per page.

As a frontend developer, implement the BookingsBulkActions section which provides bulk action controls for selected bookings. This section includes buttons for sending reminders, exporting as CSV, and deleting cancelled bookings.

As a frontend developer, implement the WorkGalleryActions section which allows users to add, edit, delete, and reorder work items. Implement drag-and-drop functionality for reordering, and forms for adding and editing items with validation. Manage state for dragIndex, editingItem, and uploadForm.

As a frontend developer, implement the AchievementsForm section which allows users to add or edit achievements. Include form validation for title, date, and description fields, and manage state for form inputs and errors. Implement a toggle for marking achievements as featured.

As a frontend developer, implement the OffersForm section which allows users to create or edit offers. Include form validation for title, discount, start and end dates, and manage state for form inputs and errors. Ensure the form handles image uploads for offer banners.

As a frontend developer, implement the PriceListHero section using React and GSAP for animations. This section includes a vertical accent line animation, staggered fade-up animations for content elements like badges, titles, subtitles, and reminders. Ensure the animations are smooth and responsive. This section sets the tone for the PriceList page with a focus on transparency and service offerings.

As a Tech Lead, verify the end-to-end integration between the Offers frontend implementation and the Offers backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a Tech Lead, verify the end-to-end integration between the Ratings frontend implementation and the Ratings backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a frontend developer, implement the LoginFooterLinks section for the Login page. This component provides links for new users to create an account and for existing users to recover their account details. It serves as a supportive navigation element at the bottom of the login form.

As a frontend developer, implement the ServiceTiers section using React and GSAP with ScrollTrigger for animations. This section features service cards with icons, descriptions, and links. Implement scroll-triggered stagger reveal animations and magnetic tilt effects for interactive card experiences. Ensure the section is visually engaging and responsive.

As a frontend developer, implement the PricingTable section using React and GSAP with ScrollTrigger. This section includes categories with expandable service lists, each with a name, description, and price. Implement animations for rows appearing on scroll and ensure the section is interactive and responsive.

As a frontend developer, implement the PricingAddOns section using React and GSAP with ScrollTrigger. This section allows users to select additional services, updating the total price dynamically. Implement animations for addon cards and ensure the section is interactive and responsive.

As a frontend developer, implement the PackageOffers section using React and GSAP with ScrollTrigger. This section displays various service packages with details like included services, original and discounted prices, and savings. Implement animations for package cards and ensure the section is visually appealing and responsive.

As a frontend developer, implement the PricingCTA section using React and GSAP with ScrollTrigger. This section includes a call-to-action card with interactive mouse movement effects and links to booking and contact options. Ensure the section is engaging and responsive.

As a frontend developer, implement the BookingHero section which includes a title, subtitle, and description encouraging users to book appointments. This section uses a simple layout with a decorative accent line and may already exist from previous pages. Ensure it aligns with the theme of the website.

As a frontend developer, implement the ServiceSelection section which allows users to select a service from a list. Each service is displayed as a card with an icon, category, name, duration, and price. The section supports selecting a service and highlights the selected service.

As a frontend developer, implement the DatePicker section which allows users to select a date for their appointment. This section includes navigation for months, displays available dates, and highlights the selected date. It uses state hooks to manage the current view month and year.

As a frontend developer, implement the TimePicker section which allows users to select a time slot for their appointment. The section displays available time slots and highlights the selected time. It also indicates unavailable slots and shows the time zone.

As a frontend developer, implement the StaffAvailability section which displays the number of available stylists and allows users to filter and sort them by category and rating. This section uses state hooks to manage filter and sort options.

As a frontend developer, implement the StaffSelection section which allows users to choose a stylist. The section supports multi-select and displays each stylist's photo, name, specialization, rating, and booking count. It highlights selected stylists.

As a frontend developer, implement the CustomerContactInfo section which collects the user's full name, email, and phone number. The section includes input validation and displays error messages for invalid inputs.

As a frontend developer, implement the CustomerAddressInfo section which collects optional address details including street, city, zip code, and special instructions. The section includes input validation and displays error messages for invalid inputs.

As a frontend developer, implement the PriceBreakdown section which displays a summary of the booking costs including service cost, staff premium, discount, tax, and total. It also shows any applicable offers.

As a frontend developer, implement the SocialHero section using the provided JSX. This section includes a glowing background, a badge with a dot, a headline with an accent span, and descriptive text about the salon's social media engagement. Ensure the divider with diamond is styled correctly. This section sets the tone for the social page and should be visually engaging.

As a frontend developer, implement the SocialChannels section using the provided JSX. This section displays a grid of social media channels with icons, descriptions, follower counts, and CTAs. Each channel card should be styled with its respective color and link to the appropriate social media page. Ensure accessibility features like aria-labels are correctly implemented.

As a frontend developer, implement the SocialEngagement section using the provided JSX. This section features engagement data for each social media channel, including icons, benefits, and CTAs. Implement the IntersectionObserver to animate tiles as they come into view. Ensure the section is interactive and visually appealing.

As a frontend developer, implement the SocialIntegration section using the provided JSX. This section includes toggle switches for enabling/disabling social media integrations and a time input for scheduling broadcasts. Implement state management for toggles and save status feedback. Ensure the admin panel badge is styled correctly.

As a Tech Lead, verify the end-to-end integration between the Booking frontend implementation and the Booking backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.