As a frontend developer, implement the CTASection which includes a motion-enhanced background and content using framer-motion. The section features a call-to-action with a title, subtitle, and a 'Get Started Free' button. The background and content have parallax scrolling effects using useScroll and useTransform hooks.
As a frontend developer, implement the Navbar which includes navigation links, login/signup actions, and a responsive hamburger menu for mobile views. The Navbar changes style on scroll to indicate page position.
As a frontend developer, implement the RoleSelector section which allows users to choose between Creator and Business roles. This section includes interactive 3D scenes for each role using Three.js, with floating geometries and lights. The section uses framer-motion for animations and transitions between role selections.
As a frontend developer, implement the StepIndicator section which displays the current step in the onboarding process. This section includes a progress bar with animated fill using framer-motion, clickable step circles that allow navigation to previous steps, and glow dots indicating progress.
As a frontend developer, implement the OnboardingFormContent section which includes multiple steps for user input such as account creation, profile building, social media linking, and preference settings. This section uses validation helpers for email and URL, password strength indicators, and dynamic form fields based on the current step.
As a frontend developer, implement the OnboardingFormNavigation section which provides navigation controls for the onboarding form. This includes back, skip, and next buttons with loading states and animations using framer-motion. Ensure the navigation logic correctly updates the current step and handles edge cases like the first and last steps.
As a frontend developer, implement the OnboardingHelp section which provides tips, FAQs, and support links to assist users during onboarding. This section includes interactive magnetic tip cards using framer-motion and useMotionValue for 3D tilt effects, and a list of FAQs with expandable answers.
As a frontend developer, implement the WorkspaceSidebar section which includes toggling functionality, displays project phases with progress bars, team members with avatars, and a list of attachments. Ensure the sidebar is responsive and integrates smoothly with the rest of the workspace layout.
As a frontend developer, implement the WorkspaceViewTabs section which allows users to switch between different views such as tasks, deliverables, and milestones. Ensure the active tab is highlighted and the tab change triggers the appropriate view update.
As a frontend developer, implement the WorkspaceViewControls section which provides sorting and filtering options for the active tab. Include a search input with dynamic placeholder text based on the active view and ensure the controls are functional and responsive.
As a frontend developer, implement the WorkspaceTaskBoard section which displays tasks in a kanban-style board with columns for different task statuses. Implement drag-and-drop functionality to move tasks between columns and ensure tasks are displayed with priority badges and assignee avatars.
As a frontend developer, implement the WorkspaceDeliverablesGrid section which displays deliverables in a grid format with thumbnails, status badges, and contributor information. Ensure the grid is responsive and allows for selecting deliverables to trigger further actions.
As a frontend developer, implement the WorkspaceMilestoneLine section which displays a timeline of milestones with status indicators. Ensure the timeline is visually appealing and accurately reflects the milestone data.
As a frontend developer, implement the WorkspaceMilestoneList section which provides a detailed list of milestones with expandable details. Include functionality to update milestone status and ensure the list is interactive and user-friendly.
As a frontend developer, implement the EventsPageSubtitle section which includes a paragraph describing the management and tracking capabilities of the events. Ensure the styling matches the design specifications in EventsPageSubtitle.css.
As a frontend developer, implement the EventsCreateButton section which includes a button with an SVG icon for creating new events. Ensure the button is styled according to EventsCreateButton.css and is accessible.
As a frontend developer, implement the EventsNav section which includes a responsive navigation bar with tabs for different event categories. Implement state management for mobile view toggle and active tab selection using useState hooks.
As a frontend developer, implement the EventsSearchBar section which includes an input field for searching events by name. Implement state management for the search query and a clear button functionality using useState hooks.
As a frontend developer, implement the EventsSortAndFilters section which includes a dropdown for sorting events and a modal for advanced filters. Implement state management for sort selection and filter modal visibility using useState hooks.
As a frontend developer, implement the EventsViewToggle section which includes buttons to toggle between grid and list views. Implement state management for view mode selection using useState hooks.
As a frontend developer, implement the EventsGrid section which displays a grid of event cards. Each card includes an image, title, date, location, and attendee count. Ensure lazy loading for images and apply styles from EventsGrid.css.
As a Backend Developer, create API endpoints for user authentication, campaign management, profile management, and analytics data retrieval. Ensure endpoints are secure and follow RESTful principles.
As a Data Engineer, design and implement database models for users, creators, businesses, campaigns, and analytics. Ensure models are optimized for performance and scalability.
As a frontend developer, implement the FeaturesSection which displays a grid of feature cards with icons, titles, and descriptions. Each card uses framer-motion for staggered fade-in animations. The section header also animates into view with a parallax effect.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the Footer which includes multiple columns of links categorized under Platform, Account, and Resources. The footer also contains social media links and a copyright notice. Ensure responsive design and accessibility.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the ForWhomSection which highlights benefits for creators and businesses. The section uses framer-motion for animated entry of content and includes interactive elements like buttons for joining as a creator or business.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the HeroSection featuring a 3D interactive canvas using @react-three/fiber and @react-three/drei. The section includes floating elements that users can interact with to learn more about different features. Ensure smooth animations and responsive design.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the StatsSection which displays animated statistics using framer-motion. The section includes a header with parallax effect and dynamically updates stats as the user scrolls into view.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the Navbar section for the Login page. This includes a responsive header with navigation links to Dashboard, Campaigns, Marketplace, Discovery, and Analytics. The Navbar should have a scroll effect that changes its style when the page is scrolled. It includes a hamburger menu for mobile view, which toggles the menu open and closed. The Navbar also has login and signup actions. Note: This component may already exist from the Landing Page.
Depends on:#1
Waiting for dependencies
As a frontend developer, implement the WorkspaceDeliverablesActions section which provides action buttons for approving, rejecting, and managing deliverables. Include a comment input for approval comments and ensure actions trigger appropriate alerts or updates.
Depends on:#97
Waiting for dependencies
As a frontend developer, implement the EventsCardActions section which includes buttons for editing, viewing registrations, and deleting events. Implement state management for delete confirmation modal using useState hooks.
Depends on:#108
Waiting for dependencies
As a Backend Developer, implement business rules for campaign management, user roles, and payment processing. Ensure rules are enforced consistently across the application.
Depends on:#135
Waiting for dependencies
As a QA Engineer, develop integration tests for critical user flows such as onboarding, campaign management, and payment processing. Ensure tests cover both frontend and backend interactions.
Depends on:#135#136
Waiting for dependencies
As a Full Stack Developer, implement authentication middleware to protect routes and ensure secure access to resources. Integrate JWT for session management.
Depends on:#135
Waiting for dependencies
As a Frontend Developer, map backend data to visual components for dashboards and analytics. Ensure data is displayed accurately and updates dynamically.
Depends on:#135
Waiting for dependencies
As a frontend developer, implement the LoginBackgroundLayer section for the Login page. This section includes decorative elements such as orbs and a grid background that enhance the visual appeal of the login page. These elements are purely aesthetic and do not interact with the user.
Depends on:#8
Waiting for dependencies
As a frontend developer, implement the LoginFormCard section for the Login page. This includes a form with fields for email and password, validation logic, and error messages. The form should handle state changes for showing/hiding the password and remembering the user. It also includes a loading state during form submission.
Depends on:#8
Waiting for dependencies
As a frontend developer, implement the Footer section for the Login page. This includes links to various platform, account, and resource pages. Note: This component may already exist from the Landing Page.
Depends on:#8
Waiting for dependencies
As a frontend developer, implement the SignupHero section for the Signup page. This section includes a title and subtitle encouraging users to create a KATR account. It features decorative accent dots for visual appeal. Ensure the section is responsive and aligns with the overall design aesthetic.
Depends on:#8
Waiting for dependencies
As a frontend developer, implement the SignupFormPanel section for the Signup page. This component includes a role selector with buttons for 'Creator' and 'Business', each with an SVG icon. The panel should handle role selection state and pass it to the parent component. Ensure the form is responsive and accessible.
Depends on:#8
Waiting for dependencies
As a frontend developer, implement the SignupFormFields section for the Signup page. This component includes input fields for email and password with validation and error handling. Implement password strength indication using color-coded labels. Ensure the form fields are accessible and responsive.
Depends on:#8
Waiting for dependencies
As a frontend developer, implement the SignupFormActions section for the Signup page. This component includes a terms acceptance checkbox, error and success messages, and a submit button with loading state. Implement social signup buttons for Google and Instagram. Ensure the actions are responsive and accessible.
Depends on:#8
Waiting for dependencies
As a frontend developer, implement the SignupBenefits section for the Signup page. This section highlights the benefits of using KATR with cards displaying icons, titles, and descriptions. Ensure the section is visually appealing, responsive, and aligns with the overall design aesthetic.
Depends on:#8
Waiting for dependencies
As a frontend developer, implement the AdminSidebar section which includes a navigation menu with items such as 'Platform Stats', 'User Management', 'Creator Management', etc. Each menu item should display a badge if applicable and highlight the active section. The sidebar should allow switching sections by updating the activeSection state. This component may already exist from a previous page.
Depends on:#8
Waiting for dependencies
As a Tech Lead, verify the end-to-end integration between the Creator Dashboard frontend implementation and the backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.
Depends on:#135#140
Waiting for dependencies
As a Tech Lead, verify the end-to-end integration between the Business Dashboard frontend implementation and the backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.
Depends on:#135#140
Waiting for dependencies
As a frontend developer, implement the LoginSocialDivider section for the Login page. This component visually separates the login form from social login options with a line and text 'Or continue with'.
Depends on:#10
Waiting for dependencies
As a frontend developer, implement the OnboardingHero section which includes a 3D decorative geometry that reacts to cursor movements using Three.js and @react-three/fiber. The section features a floating icosahedron with a meshPhysicalMaterial, ambient and directional lights, and a motion badge that animates on load. Ensure the mouse movement updates the rotation of the 3D object smoothly.
Depends on:#15
Waiting for dependencies
As a frontend developer, implement the AdminPageHeader section which includes a title 'Platform Administration', a description, and a 'Last updated' timestamp. It also features action buttons for 'Export Report' and 'Refresh Data'. Ensure the layout is responsive and matches the design specifications.
Depends on:#26
Waiting for dependencies
As a frontend developer, implement the AdminPlatformStats section which displays various platform statistics such as 'Total Users', 'Active Creators', 'Platform Revenue', etc. Each stat should show a value and a trend indicator with appropriate styling for positive or stable trends.
Depends on:#26
Waiting for dependencies
As a frontend developer, implement the AdminUserFilters section which includes input fields for searching users by username or email, and dropdowns for filtering by role and status. Implement the onChange handler to update the filters state and a reset button to clear all filters.
Depends on:#26
Waiting for dependencies
As a frontend developer, implement the AdminCreatorFilters section which includes input fields for searching creators by name, and dropdowns for filtering by verification status and tier. Implement the onChange handler to update the filters state and a reset button to clear all filters.
Depends on:#26
Waiting for dependencies
As a frontend developer, implement the AdminBusinessFilters section which includes input fields for searching businesses by name, and dropdowns for filtering by industry and tier. Implement the onChange handler to update the filters state and a reset button to clear all filters.
Depends on:#26
Waiting for dependencies
As a frontend developer, implement the SettingsNav section which includes a responsive navigation bar with tabs for different settings categories. The component uses state hooks to manage the mobile menu toggle and active tab selection. Ensure the navigation is accessible with appropriate aria-labels and keyboard navigation support.
Depends on:#26
Waiting for dependencies
As a frontend developer, implement the LoginSocialButtons section for the Login page. This includes buttons for social login options like Google and Apple. Each button should handle a loading state when clicked, simulating an API call.
Depends on:#11
Waiting for dependencies
As a frontend developer, implement the AdminUserTable section which displays a paginated and sortable table of users. The table should allow sorting by columns such as 'Username', 'Email', 'Role', etc., and include action buttons for each user row. Implement pagination controls to navigate through pages.
Depends on:#29
Waiting for dependencies
As a frontend developer, implement the AdminCreatorTable section which displays a paginated and sortable table of creators. The table should allow sorting by columns such as 'Creator Name', 'Followers', etc., and include action buttons for each creator row. Implement pagination controls to navigate through pages.
Depends on:#31
Waiting for dependencies
As a frontend developer, implement the AdminBusinessTable section which displays a paginated and sortable table of businesses. The table should allow sorting by columns such as 'Business Name', 'Industry', etc., and include action buttons for each business row. Implement pagination controls to navigate through pages.
Depends on:#33
Waiting for dependencies
As a frontend developer, implement the DashboardHeader section which includes a time-based greeting, date and time display, and a subtle 3D geometric accent using @react-three/fiber. The header should animate its elements using framer-motion with staggered child animations. Ensure the greeting updates based on the current time and the 3D accent rotates continuously.
Depends on:#8#20
Waiting for dependencies
As a frontend developer, implement the ProfileCoverImage section using Three.js to create a dynamic 3D scene with floating particles and accent glow particles. Ensure the canvas is responsive using ResizeObserver and handle animations with requestAnimationFrame. This section should depend on the Onboarding page's OnboardingHero task for page-level dependency.
Depends on:#20
Waiting for dependencies
As a frontend developer, implement the SettingsHeader section which includes breadcrumb navigation and a help link. The component should be styled to match the overall theme of the settings page and ensure the breadcrumb links are functional.
Depends on:#50
Waiting for dependencies
As a frontend developer, implement the ProfileSettings section which allows users to update their profile information including avatar, display name, bio, location, and website. The component uses state hooks to manage form inputs and includes a file input for avatar uploads. Implement form validation and feedback for successful updates.
Depends on:#50
Waiting for dependencies
As a frontend developer, implement the AccountSecurity section which includes features for changing passwords, managing two-factor authentication, and viewing active sessions. The component uses state hooks to manage form inputs and session data. Implement validation for password changes and ensure secure handling of sensitive information.
Depends on:#50
Waiting for dependencies
As a frontend developer, implement the NotificationPrefs section which allows users to manage their notification preferences for email and push notifications. The component uses state hooks to manage toggle switches and dropdown selections for notification settings.
Depends on:#50
Waiting for dependencies
As a frontend developer, implement the ThemeSettings section which allows users to select their preferred color theme for the platform. The component uses state hooks to manage the active theme selection and provides a preview of each theme option.
Depends on:#50
Waiting for dependencies
As a frontend developer, implement the AccessibilitySettings section which allows users to customize language, text size, and sidebar position for accessibility. The component uses state hooks to manage user preferences and includes a range input for text size adjustment.
Depends on:#50
Waiting for dependencies
As a frontend developer, implement the InstagramIntegration section which allows users to connect and manage their Instagram account integration. The component uses state hooks to manage connection status and provides actions for connecting, disconnecting, and re-authorizing the account.
Depends on:#50
Waiting for dependencies
As a frontend developer, implement the APIKeysSettings section which allows users to manage their API keys. The component uses state hooks to manage the list of keys and includes functionality for generating new keys, revoking existing keys, and copying keys to the clipboard.
Depends on:#50
Waiting for dependencies
As a frontend developer, implement the LoginSignupPrompt section for the Login page. This component provides a prompt for users who do not have an account, with a link to the signup page.
Depends on:#12
Waiting for dependencies
As a frontend developer, implement the DashboardSidebar section which includes navigation items categorized under 'Main', 'Tools', and 'More'. Each item should have an icon from lucide-react and support state management for active item highlighting. Implement a collapsible sidebar feature and a rotating 3D shape using @react-three/fiber for the brand accent.
Depends on:#35
Waiting for dependencies
As a frontend developer, implement the WelcomeBanner section which displays a personalized greeting with role-specific messages and call-to-action buttons. The banner should be dismissible and restorable, using framer-motion for smooth animations during visibility changes.
Depends on:#35
Waiting for dependencies
As a frontend developer, implement the OverviewStats section which displays key metrics using animated counters. Utilize framer-motion for number animations and ensure the section triggers animations when scrolled into view. Include a decorative Three.js background for visual enhancement.
Depends on:#35
Waiting for dependencies
As a frontend developer, implement the ActivityFeed section which lists recent activities with icons and details. Use framer-motion for staggered animations of activity items. Ensure the section is responsive and visually aligns with the dashboard's design.
Depends on:#35
Waiting for dependencies
As a frontend developer, implement the UpcomingCampaigns section which displays a list of campaigns with status labels and call-to-action buttons. Use framer-motion for card entrance animations and include a 3D decorative accent using @react-three/fiber.
Depends on:#35
Waiting for dependencies
As a frontend developer, implement the ProfileAvatarAndIdentity section featuring a Three.js animated avatar ring and a cursor-reactive tilt effect using framer-motion. Ensure the avatar image and ring are interactive and responsive to mouse movements.
Depends on:#41
Waiting for dependencies
As a frontend developer, implement the ProfileBioText section with a fade-up animation using framer-motion. Ensure the text content is revealed as the section comes into view, using IntersectionObserver for visibility detection.
Depends on:#41
Waiting for dependencies
As a frontend developer, implement the ProfileSocialLinks section with animated social media link cards using framer-motion. Each card should include an icon and handle, and animate on hover and tap.
Depends on:#41
Waiting for dependencies
As a frontend developer, implement the ProfileStats section with animated count-up effects for various statistics using framer-motion. Ensure each stat card includes an icon, trend badge, and is responsive to viewport visibility.
Depends on:#41
Waiting for dependencies
As a frontend developer, implement the ProfilePortfolioGrid section with a 3D background scene using Three.js. Display portfolio items with detailed descriptions and tags, ensuring the grid is interactive and responsive.
Depends on:#41
Waiting for dependencies
As a frontend developer, implement the ProfileInstagramStatus section with decorative 3D floating rings using Three.js. Include interactive buttons with magnetic effects and ensure the section is visually engaging.
Depends on:#41
Waiting for dependencies
As a frontend developer, implement the ProfileInstagramFeed section with interactive post cards that tilt based on cursor position using framer-motion. Ensure each post displays an image, caption, likes, and comments.
Depends on:#41
Waiting for dependencies
As a frontend developer, implement the ProfileActionButtons section with magnetic buttons that follow the cursor using spring physics. Include role-based button sets for business and creator roles, and handle clipboard interactions for sharing.
Depends on:#41
Waiting for dependencies
As a frontend developer, implement the CampaignsHeader section which includes a title, subtitle, and a call-to-action button to open the campaign creation flow. The button includes an SVG icon and should trigger a function to open the creation flow when clicked.
Depends on:#35
Waiting for dependencies
As a frontend developer, implement the MarketplacePageHeader section which includes a title, subtitle, and a count of active campaigns. This section should display 'Campaign Marketplace' as the title, a subtitle describing the opportunities available, and a dynamic count of active campaigns. Ensure the styling matches the design specifications in MarketplacePageHeader.css. This component may already exist from a previous page.
Depends on:#35
Waiting for dependencies
As a frontend developer, implement the CampaignsSearchInput section which includes a search input field with an SVG icon. The input should allow users to search campaigns by updating the searchTerm state and provide a clear button to reset the search.
Depends on:#59
Waiting for dependencies
As a frontend developer, implement the CampaignsFilterDropdowns section which includes dropdowns for filtering campaigns by status, date range, and budget. Implement handlers for changing these filters and a reset button to clear all filters.
Depends on:#59
Waiting for dependencies
As a frontend developer, implement the CampaignsViewToggle section which allows users to switch between 'Kanban' and 'Table' views. Each button should update the view state and visually indicate the active view.
Depends on:#59
Waiting for dependencies
As a frontend developer, implement the CampaignsSidebar section which displays quick stats for campaign statuses, recent campaigns, and archived campaigns. Implement click handlers for filtering campaigns by status.
Depends on:#59
Waiting for dependencies
As a frontend developer, implement the CampaignsKanban section which allows users to drag and drop campaigns between status columns. Implement handlers for updating campaign status on drop and deleting campaigns.
Depends on:#59
Waiting for dependencies
As a frontend developer, implement the CampaignsTable section which displays campaigns in a sortable and paginated table. Implement sorting by different fields, row selection, and bulk actions like deleting selected campaigns.
Depends on:#59
Waiting for dependencies
As a frontend developer, implement the MarketplaceSearch section which includes a search input with a clear button and a submit button. The search input should allow users to search campaigns by brand, category, or platform. Implement state management using useState for handling the search input value and ensure the form submission is handled correctly. Style the component according to MarketplaceSearch.css.
Depends on:#66
Waiting for dependencies
As a frontend developer, implement the MarketplaceFilterBar section which includes filters for budget, category, platform, and type. Use useState to manage the state of selected filters and implement functionality to toggle platform and type selections. Ensure the component is responsive and styled according to MarketplaceFilterBar.css. Implement a clear all filters function.
Depends on:#66
Waiting for dependencies
As a frontend developer, implement the MarketplaceSortDropdown section which allows users to sort campaigns by various criteria such as 'Most Recent', 'Most Popular', etc. Use useState to manage the selected sort option and ensure the dropdown is styled according to MarketplaceSortDropdown.css.
Depends on:#66
Waiting for dependencies
As a frontend developer, implement the MarketplaceCampaignGrid section which displays a grid of campaign cards. Each card should include an image, type badge, campaign name, brand, budget, followers, deadline, and an apply button. Ensure the grid is responsive and styled according to MarketplaceCampaignGrid.css.
Depends on:#66
Waiting for dependencies
As a frontend developer, implement the MarketplacePagination section which includes pagination controls to navigate through campaign pages. Use useState to manage the current page and items per page. Ensure the component is styled according to MarketplacePagination.css and is responsive.
Depends on:#66
Waiting for dependencies
As a frontend developer, implement the DiscoveryHeader section using Three.js for rendering floating node particles and subtle connection lines. Utilize the `useRef` and `useMemo` hooks to manage particle positions and animations. Ensure the header integrates with the existing styles and provides a visually engaging introduction to the Discovery page.
Depends on:#59
Waiting for dependencies
As a frontend developer, implement the CampaignBreadcrumb section which includes a breadcrumb navigation component. This component uses a breadcrumbTrail array to map through and display links with a ChevronRight icon as a separator. The current page is displayed as plain text. Ensure the component is styled according to the provided CSS and integrates with the existing navigation structure. This component may already exist from a previous page.
Depends on:#66
Waiting for dependencies
As a frontend developer, implement the DiscoverySearch section with a search input that allows users to search creators by name, bio, or keyword. Use `useState` for managing the search query state and `useCallback` for handling input changes and clearing the search. Integrate animations using `framer-motion` for the clear button.
Depends on:#72
Waiting for dependencies
As a frontend developer, implement the DiscoveryFilterBar section to allow users to filter creators by categories, niche tags, and sort options. Use `useState` to manage active filters and `useEffect` to handle sticky state and dropdown interactions. Ensure the filter bar is responsive and integrates seamlessly with the page layout.
Depends on:#72
Waiting for dependencies
As a frontend developer, implement the DiscoveryCreatorGrid section to display a grid of creator profiles with background particles using Three.js. Use `useMemo` for optimizing particle data and `framer-motion` for animations. Ensure the grid is responsive and visually appealing, with each creator card displaying relevant information.
Depends on:#72
Waiting for dependencies
As a frontend developer, implement the DiscoveryCreatorActions section to provide interactive actions for each creator, such as favoriting and sending quick messages. Use `useState` for managing action states and `useCallback` for handling user interactions. Integrate `framer-motion` for animations and ensure accessibility.
Depends on:#72
Waiting for dependencies
As a frontend developer, implement the DiscoveryPagination section to allow users to navigate through pages of creator results. Use `useState` and `useMemo` to manage pagination state and calculate page numbers. Integrate `framer-motion` for button animations and ensure the component is responsive.
Depends on:#72
Waiting for dependencies
As a frontend developer, implement the DiscoveryCTA section to encourage users to engage with the platform. Use `framer-motion` for staggered animations of text and buttons. Ensure the call-to-action is prominent and aligns with the overall design aesthetic of the Discovery page.
Depends on:#72
Waiting for dependencies
As a frontend developer, implement the CampaignHero section which includes a hero component with animations and a 3D rotating torus knot using Three.js. The component displays campaign data such as title, creator, status, description, and meta information with icons. Utilize framer-motion for animations and ensure the 3D element rotates smoothly. The component should be responsive and styled according to the provided CSS.
Depends on:#79
Waiting for dependencies
As a frontend developer, implement the CampaignDetails section which includes a tabbed interface for displaying campaign information such as overview, deliverables, timeline, budget, and expectations. Use framer-motion for animations and Three.js for a 3D decorative shape. Ensure the tabs are interactive and the content is dynamically displayed based on the selected tab. The component should be styled according to the provided CSS.
Depends on:#79
Waiting for dependencies
As a frontend developer, implement the CampaignRequirements section which lists the requirements for campaign participation. This includes displaying a list of requirements with status icons and demographic information. Use framer-motion for animations and ensure the component is styled according to the provided CSS. The component should be responsive and integrate with the campaign details.
Depends on:#79
Waiting for dependencies
As a frontend developer, implement the CreatorMatches section which displays a list of matched creators for the campaign. Use framer-motion for animations and Three.js for 3D elements. The component should display creator details such as name, handle, avatar, followers, engagement, and match score. Ensure the component is styled according to the provided CSS and is responsive.
Depends on:#79
Waiting for dependencies
As a frontend developer, implement the CampaignFAQ section which provides a list of frequently asked questions related to the campaign. Use framer-motion for animations to toggle the visibility of answers. Ensure the component is styled according to the provided CSS and integrates seamlessly with the rest of the campaign page.
Depends on:#79
Waiting for dependencies
As a frontend developer, implement the CampaignCTA section which includes a call-to-action component with interactive elements and 3D decorative shapes using Three.js. The component should allow users to save the campaign, share it, and switch view modes. Use framer-motion for animations and ensure the component is styled according to the provided CSS.
Depends on:#79
Waiting for dependencies
As a frontend developer, implement the ApplicationsHeader section which includes a breadcrumb navigation, a title, a subtitle, and a set of summary cards displaying application statistics (total, pending, approved, rejected). Ensure the breadcrumb dynamically reflects the current campaign name and the summary cards update based on the provided stats prop.
Depends on:#72
Waiting for dependencies
As a frontend developer, implement the WorkspaceCampaignHeader section which displays the campaign title, status, collaborators with avatars, and action buttons for sharing, inviting, and exporting. Ensure the header is styled according to the design and includes dynamic data rendering for campaign details.
Depends on:#79
Waiting for dependencies
As a frontend developer, implement the ApplicationsFilters section which includes status tabs, a search input with debounced state updates, and a sort dropdown. Ensure the status tabs allow filtering by application status, the search input updates the search term with a delay, and the sort dropdown changes the sorting criteria.
Depends on:#86
Waiting for dependencies
As a frontend developer, implement the ApplicationsList section which displays a list of application cards. Each card should show the applicant's avatar, name, status badge, niche, application date, and match score. Include actions for viewing, approving, and rejecting applications, with appropriate status-based styling.
Depends on:#86
Waiting for dependencies
As a frontend developer, implement the EventsPageTitle section which includes a main title 'Events' with a styled accent span. Ensure the styling matches the design specifications in EventsPageTitle.css.
Depends on:#86
Waiting for dependencies
As a frontend developer, implement the PortfolioHeader section which includes a 3D animated torus using @react-three/fiber, state management for editing and visibility toggles, and animated breadcrumb navigation using framer-motion. Ensure the 3D elements rotate continuously and the visibility badge updates correctly.
Depends on:#92
Waiting for dependencies
As a frontend developer, implement the ApplicationsDetailPanel section which displays detailed information about a selected application. Include the applicant's profile picture, name, niche, followers, rating, match score, bio, and links to social media and website. Ensure the match score is visually represented with a conic gradient.
Depends on:#88
Waiting for dependencies
As a frontend developer, implement the PortfolioGallery section featuring a carousel of portfolio items with animated transitions using framer-motion. Include a Three.js particle field for visual enhancement. Ensure the carousel supports swipe gestures and dynamic content loading.
Depends on:#110
Waiting for dependencies
As a frontend developer, implement the PortfolioGridView section which displays projects in a grid format with category filters. Integrate a subtle Three.js particle background and ensure smooth animations for grid item interactions using framer-motion.
Depends on:#110
Waiting for dependencies
As a frontend developer, implement the PortfolioDetailModal section which displays detailed information about a selected project. Include a rotating 3D shape using @react-three/fiber and ensure modal animations are smooth using framer-motion.
Depends on:#110
Waiting for dependencies
As a frontend developer, implement the AffiliateLinks section which allows users to manage and track affiliate links. Include functionality for adding, editing, and deleting links, and display total earnings and clicks. Ensure copy-to-clipboard functionality works smoothly.
Depends on:#110
Waiting for dependencies
As a frontend developer, implement the PortfolioActions section which provides primary and secondary actions for the portfolio. Include functionality for previewing, sharing, and downloading the portfolio. Ensure button animations are smooth using framer-motion.
Depends on:#110
Waiting for dependencies
As a frontend developer, implement the AnalyticsHeader section which includes a 3D decorative particle field using @react-three/fiber and framer-motion for animations. The section also includes inline SVG icons for calendar, chevron, export, and chart functionalities. Ensure the 3D elements are animated with subtle rotations and position changes over time.
Depends on:#101
Waiting for dependencies
As a frontend developer, implement the PaymentsHeader section which includes a header element with a title 'Payments & Earnings' and a subtitle describing the features of the page. Ensure the styling matches the design specifications in PaymentsHeader.css. This component establishes the page-level dependency with the Portfolio page.
Depends on:#110
Waiting for dependencies
As a frontend developer, implement the ApplicationsDetailReview section which includes an application message, a portfolio gallery with navigation, and a match score breakdown. Ensure the gallery supports navigation through images and the breakdown provides detailed insights into the match score.
Depends on:#89
Waiting for dependencies
As a frontend developer, implement the ApplicationsDetailActions section which provides action buttons for approving, rejecting, messaging, and saving applications. Include modals for entering approval notes, rejection reasons, and messages. Ensure state resets on application change.
Depends on:#89
Waiting for dependencies
As a frontend developer, implement the AnalyticsFilters section which includes interactive date presets, campaign selection, and metrics options using React state hooks. The section should support toggling metrics, applying filters, and resetting to defaults. Utilize framer-motion for animations and ensure the filters update the active filter count dynamically.
Depends on:#116
Waiting for dependencies
As a frontend developer, implement the AnalyticsMetrics section which displays various metrics using icons from lucide-react and animated count-up effects. Utilize @react-three/fiber for a 3D particle field background. Ensure metrics are formatted correctly as currency or percentage and include trend indicators with animations.
Depends on:#116
Waiting for dependencies
As a frontend developer, implement the AnalyticsCharts section using react-chartjs-2 to display line, bar, and doughnut charts. Ensure the charts are interactive with tooltips and animations. Configure datasets for revenue, platform fees, impressions, and distribution with appropriate colors and styles.
Depends on:#116
Waiting for dependencies
As a frontend developer, implement the AnalyticsTable section which displays campaign data in a sortable and paginated table. Use React state hooks for sorting and pagination, and framer-motion for row animations. Ensure data formatting for numbers and currency is accurate.
Depends on:#116
Waiting for dependencies
As a frontend developer, implement the AnalyticsInsights section which displays insights as cards with animations using framer-motion. Each card should include an icon, title, description, and action link. Ensure the cards are styled according to their type (alert, positive, recommendation, etc.).
Depends on:#116
Waiting for dependencies
As a frontend developer, implement the EarningsBalance section which displays the total earnings, pending earnings, next payout date, campaigns completed, and total campaign revenue. Use the DollarSign and Trello icons from lucide-react for visual representation. Ensure the styling matches the design specifications in EarningsBalance.css.
Depends on:#122
Waiting for dependencies
As a frontend developer, implement the PaymentMethods section which allows users to view, add, edit, and delete payment methods. Use state hooks to manage the list of payment methods and handle interactions such as adding a new method and deleting existing ones. Ensure the styling matches the design specifications in PaymentMethods.css.
Depends on:#122
Waiting for dependencies
As a frontend developer, implement the WithdrawalForm section which allows users to request fund withdrawals. This includes selecting a payment method, entering an amount, and accepting terms. Use state hooks to manage form inputs and submission state. Ensure the styling matches the design specifications in WithdrawalForm.css.
Depends on:#122
Waiting for dependencies
As a frontend developer, implement the TransactionHistoryControls section which provides filtering and sorting options for transaction history. Use state hooks to manage filter inputs and reset functionality. Ensure the styling matches the design specifications in TransactionHistoryControls.css.
Depends on:#122
Waiting for dependencies
As a frontend developer, implement the TransactionHistoryTable section which displays a sortable table of transactions. Use state hooks to manage sorting logic and expand/collapse details for each transaction. Ensure the styling matches the design specifications in TransactionHistoryTable.css.
Depends on:#122
Waiting for dependencies
As a frontend developer, implement the TransactionHistoryPagination section which provides pagination controls for navigating through transaction history pages. Use state hooks to manage current page and items per page. Ensure the styling matches the design specifications in TransactionHistoryPagination.css.
Depends on:#122
Waiting for dependencies
As a frontend developer, implement the PaymentSupport section which provides a FAQ list related to payment issues. Use state hooks to manage the open/close state of each FAQ item. Ensure the styling matches the design specifications in PaymentSupport.css.
Depends on:#122
Waiting for dependencies
As a frontend developer, implement the AIAssistantHeader section which includes a Three.js particle background and interactive example prompts using icons like TrendingUp and Zap. The section uses Framer Motion for animations and manages state with useState for active prompts and CTA clicks. Ensure the Three.js scene is responsive and integrates smoothly with the rest of the page.
Depends on:#122
Waiting for dependencies
As a frontend developer, implement the ConversationMessages section which displays a demo conversation between a user and the AI Assistant. Use Framer Motion for animations and manage state with useState. The section should support dynamic message rendering and timestamp display, ensuring smooth transitions and interactions.
Depends on:#130
Waiting for dependencies
As a frontend developer, implement the TypingIndicator section which includes a Three.js ambient particle effect and animated dots using Framer Motion. The component should simulate a typing indicator with smooth animations and responsive design.
Depends on:#130
Waiting for dependencies
As a frontend developer, implement the MessageComposer section which includes a Three.js particle background and supports text input with character limits. The component should handle file attachments, voice recording state, and focus management. Ensure the UI is responsive and integrates with the rest of the page.
Depends on:#130
Waiting for dependencies
As a frontend developer, implement the MessageActions section which provides interactive buttons for actions like copy, regenerate, thumbs up/down, edit, and delete. Use Framer Motion for animations and manage state for feedback and action states. Ensure the component is responsive and integrates with the message components.
Depends on:#130
Waiting for dependencies
No comments yet. Be the first!