# Development - [Folder structure](/saasable/ui-kit/development/folder-structure.md) - [Routing](/saasable/ui-kit/development/routing.md) - [Env Variables](/saasable/ui-kit/development/env-variables.md) - [Dependencies](/saasable/ui-kit/development/dependencies.md): NPM third-party plugins - [SEO - Metadata](/saasable/ui-kit/development/seo-metadata.md) - [Favicon](/saasable/ui-kit/development/favicon.md) - [MailerLite](/saasable/ui-kit/development/mailerlite.md) - [Error Handling](/saasable/ui-kit/development/error-handling.md) - [Analytics](/saasable/ui-kit/development/analytics.md) - [Branding](/saasable/ui-kit/development/branding.md) - [Components](/saasable/ui-kit/development/components.md) - [About](/saasable/ui-kit/development/components/about.md) - [About 1](/saasable/ui-kit/development/components/about/about-1.md): The About1 component is designed to display a section with a heading, two descriptions, and an image. - [About 2](/saasable/ui-kit/development/components/about/about-2.md): The About2 component is structured to display a section with a heading, caption, image, description, title, and a button. - [About 3](/saasable/ui-kit/development/components/about/about-3.md): The About3 component is designed to display content in two main columns: one with text (including the heading, description, and list) and one with an image. - [Auth](/saasable/ui-kit/development/components/auth.md) - [Login](/saasable/ui-kit/development/components/auth/login.md) - [Login1](/saasable/ui-kit/development/components/auth/login/login1.md): The Login1 component renders a two-column layout for a login page, featuring a login form with social and email options on the left, and a testimonial slider with an image on the right. - [Login2](/saasable/ui-kit/development/components/auth/login/login2.md): The Login2 component renders a responsive login page with a heading, optional caption, and background image, featuring social and email login options, and a sign-up link. - [Login3](/saasable/ui-kit/development/components/auth/login/login3.md): The Login3 component renders a full-height login page with a centered logo, a heading, optional caption, a login form, social login options, copyright footer, with a background of decorative circle - [Login4](/saasable/ui-kit/development/components/auth/login/login4.md): The Login4 component renders a login page with user reviews, a main heading, counters for additional details, and authentication forms with social login options. - [Login5](/saasable/ui-kit/development/components/auth/login/login5.md): The Login5 component renders a login page featuring a carousel of testimonials, a main heading and caption, and authentication forms, with responsive design elements and styling. - [Forgot Password](/saasable/ui-kit/development/components/auth/forgot-password.md): The Forgot Password component renders a page for resetting passwords with a title, optional subtitle, a form to request a password reset, and a resend code link. - [New Password](/saasable/ui-kit/development/components/auth/new-password.md): The NewPassword component renders a page where users can set a new password, featuring a title, optional subtitle, a password reset form, and decorative background elements. - [OTP Verification](/saasable/ui-kit/development/components/auth/otp-verification.md): The OTP Verification component renders an OTP verification page with a title, a caption showing an email address, an OTP input form, and a "Resend Code" link, styled with background elements . - [Register](/saasable/ui-kit/development/components/auth/register.md): The Register component provides a registration page with a title, optional subtitle, registration form, social login options, and decorative background elements. - [Blog](/saasable/ui-kit/development/components/blog.md) - [Blog1](/saasable/ui-kit/development/components/blog/blog1.md): The Blog1 component displays a blog section with a heading, caption, and a slider of blog cards featuring images, titles, and clickable links to individual blog posts. - [Blog2](/saasable/ui-kit/development/components/blog/blog2.md): The Blog2 component presents a blog section with a central slider that displays blog cards featuring images, titles, and links to blog posts, along with a heading and caption. - [Blog3](/saasable/ui-kit/development/components/blog/blog3.md): The Blog3 component displays a grid of blog posts with animated transitions, including a heading, caption, and optional profile details, using Material UI and framer-motion for styling and animations. - [Blog4](/saasable/ui-kit/development/components/blog/blog4.md): The Blog4 component renders a blog section with a title, a caption, a responsive slider of blog cards, and an optional "explore more" button. - [Blog5](/saasable/ui-kit/development/components/blog/blog5.md): The Blog5 component renders a section of blog posts with a main heading, a featured blog card, additional blog cards in a grid layout, and a "View More" button, using Material UI and responsive design - [Blog6](/saasable/ui-kit/development/components/blog/blog6.md): Blog6 component renders a section of blog posts with a main heading, a featured blog card, additional blog cards in a grid layout, and "Explore More" button, using Material UI and responsive design - [Blog7](/saasable/ui-kit/development/components/blog/blog7.md): Blog7 component renders a section of blog posts with a main heading, a featured blog card, additional blog cards in a grid layout, and "Explore More" button, using Material UI and responsive design - [Blog8](/saasable/ui-kit/development/components/blog/blog8.md): Blog8 renders a categorized blog section with a main heading, optional caption, and an "Explore More" button. - [Blog9](/saasable/ui-kit/development/components/blog/blog9.md): Blog9 is a responsive animated blog section component in MUI React that displays a list of blog cards with headings, captions, and optional "Explore More" button. - [Blog10](/saasable/ui-kit/development/components/blog/blog10.md): Blog10 is a responsive MUI React component that displays a featured blog post alongside a grid of additional blog cards using GraphicsCard, Typeset, and custom layout components. - [BlogDetails](/saasable/ui-kit/development/components/blogdetails.md): A responsive blog detail page built with MUI, displaying an article with author info, social icons, a featured image, and a breakdown of the five stages of design thinking. - [Clientele](/saasable/ui-kit/development/components/clientele.md) - [Clientele1](/saasable/ui-kit/development/components/clientele/clientele1.md): The Clientele1 component displays a horizontally scrolling marquee of client logos with an optional title, adjusting for RTL language direction. - [Clientele2](/saasable/ui-kit/development/components/clientele/clientele2.md): The Clientele2 component renders a list of client logos in a flexible row layout, with an optional title, and features a fade-in animation. - [Clientele3](/saasable/ui-kit/development/components/clientele/clientele3.md): The Clientele3 component displays an optional title and a responsive carousel of client logos, styled as Chip components with a gradient overlay effect. - [Clientele4](/saasable/ui-kit/development/components/clientele/clientele4.md): The Clientele4 component displays an optional title and a grid of client logos with responsive layout and spacing. - [Clientele5](/saasable/ui-kit/development/components/clientele/clientele5.md): The Clientele5 component features an optional title, a responsive slider for client logos, and an optional description, all within a structured layout. - [Clientele6](/saasable/ui-kit/development/components/clientele/clientele6.md): The Clientele6 component displays an optional title and a grid of client logos styled as Chip components, all within a responsive layout. - [Clientele7](/saasable/ui-kit/development/components/clientele/clientele7.md): The Clientele7 component displays an optional title, an optional button for navigation or actions, and a grid of client logos, all within a responsive layout. - [Clientele8](/saasable/ui-kit/development/components/clientele/clientele8.md): The Clientele8 component displays a centered heading and caption followed by a responsive, animated carousel of client logos. - [Contact-us](/saasable/ui-kit/development/components/contact-us.md) - [ContactUs1](/saasable/ui-kit/development/components/contact-us/contactus1.md): The ContactUs1 defines a "Contact Us" section with a card layout using Material UI components, displaying contact information alongside a contact form, all wrapped within a responsive grid. - [ContactUs2](/saasable/ui-kit/development/components/contact-us/contactus2.md): The ContactUs2 component that displays contact information in a responsive grid layout with background image and animations, including a form and contact details using themed cards and icons. - [ContactUs3](/saasable/ui-kit/development/components/contact-us/contactus3.md) - [ContactUs4](/saasable/ui-kit/development/components/contact-us/contactus4.md) - [ContactUs5](/saasable/ui-kit/development/components/contact-us/contactus5.md) - [ContactUs6](/saasable/ui-kit/development/components/contact-us/contactus6.md): The ContactUs6 component displays a contact section with a map, contact details, and a form, using a responsive layout with Material UI and Next.js. - [Cookie](/saasable/ui-kit/development/components/cookie.md) - [Cookie1](/saasable/ui-kit/development/components/cookie/cookie1.md): The Cookie1 component displays a customizable cookie consent message with a heading, content, and two buttons, styled within a responsive card. - [Cookie2](/saasable/ui-kit/development/components/cookie/cookie2.md): The Cookie2 component displays a customizable cookie consent message with a heading, content, and two buttons, styled within a responsive card. - [Cookie3](/saasable/ui-kit/development/components/cookie/cookie3.md): The Cookie3 component displays a cookie notification with a customizable heading, message, and buttons, styled within a responsive graphics card layout. - [Cta](/saasable/ui-kit/development/components/cta.md) - [Cta1](/saasable/ui-kit/development/components/cta/cta1.md): The Cta1 renders a call-to-action section featuring a background image with a gradient overlay, a heading, and a primary button, all within a responsive layout provided by Material-UI components. - [Cta2](/saasable/ui-kit/development/components/cta/cta2.md): The Cta2 renders a call-to-action section featuring a background image with a gradient overlay, a heading, and a primary button, all within a responsive layout provided by Material-UI components. - [Cta3](/saasable/ui-kit/development/components/cta/cta3.md) - [Cta4](/saasable/ui-kit/development/components/cta/cta4.md): Cta4 displays a call-to-action section featuring a headline, a button, profile avatars, a list of items, and client content, all presented within a responsive grid layout and enhanced with animation - [Cta5](/saasable/ui-kit/development/components/cta/cta5.md) - [Cta6](/saasable/ui-kit/development/components/cta/cta6.md) - [Cta7](/saasable/ui-kit/development/components/cta/cta7.md): Cta7 component renders a call-to-action section featuring an optional headline, a caption, and a primary button, all set against a styled background with a radial gradient and dotted pattern - [Cta8](/saasable/ui-kit/development/components/cta/cta8.md): Cta8 component creates a visually engaging call-to-action section with a centered heading, caption, primary button, complemented by an image that features a gradient overlay and responsive scaling - [Cta9](/saasable/ui-kit/development/components/cta/cta9.md): Cta9 component creates a call-to-action section with a responsive layout, heading and caption alongside a prominent button, and an image with a gradient overlay that adjusts based on text direction - [Cta10](/saasable/ui-kit/development/components/cta/cta10.md): The Cta10 component is a call-to-action section featuring a profile group with review highlights, a list of features with icons and text, and two buttons, alongside a prominent image on the other side - [Cta11](/saasable/ui-kit/development/components/cta/cta11.md): The Cta11 component displays a call-to-action section with an image on one side, a list of features with icons and text on the other, and primary and secondary buttons for user interaction. - [Cta12](/saasable/ui-kit/development/components/cta/cta12.md): The Cta12 component displays a call-to-action section with a heading, caption, and a primary button on one side, and a styled image on the other. It uses animations to reveal content on scroll. - [Cta13](/saasable/ui-kit/development/components/cta/cta13.md): This code defines a React functional component Cta13 that renders a call-to-action section with animated elements, utilizing Material-UI components and Framer Motion for transitions. - [Cta14](/saasable/ui-kit/development/components/cta/cta14.md): Cta14 is a responsive MUI component that showcases a product or service. It includes an image, avatar, rating, heading, caption, price, and an optional action button. - [Faq](/saasable/ui-kit/development/components/faq.md) - [Faq1](/saasable/ui-kit/development/components/faq/faq1.md): The Faq1 component displays an FAQ section with animated accordion panels and a styled header, featuring motion effects on scroll. - [Faq2](/saasable/ui-kit/development/components/faq/faq2.md): The Faq2 component renders an FAQ section with expandable accordion panels and a "Get in Touch" card, adapting layout and styles based on screen size and user focus. - [Faq3](/saasable/ui-kit/development/components/faq/faq3.md): The Faq3 component displays a section with a heading, description, and a list of FAQs in collapsible panels, alongside a "Get in Touch" card with a background image. - [Faq4](/saasable/ui-kit/development/components/faq/faq4.md): The Faq4 component that renders a FAQ section with accordion panels, styled with MUI components, and includes a call-to-action button for users to get in touch. - [Faq5](/saasable/ui-kit/development/components/faq/faq5.md): The Faq5 component that displays a FAQ section with accordion panels, an optional image, and a "Get in Touch" call-to-action, using MUI and custom components for layout and styling. - [Faq6](/saasable/ui-kit/development/components/faq/faq6.md): The Faq6 component that renders a FAQ section with animated accordion panels, a "Get in Touch" button, and topic slider using MUI, Framer Motion, and React Slick for enhanced interactivity and style - [Faq7](/saasable/ui-kit/development/components/faq/faq7.md): The Faq7 component that renders a FAQ section with expandable accordions and a "Get in Touch" button, using MUI and custom styling. - [Faq8](/saasable/ui-kit/development/components/faq/faq8.md): The Faq8 component that renders a FAQ section with expandable accordions and a "Get in Touch" button, using MUI and custom styling. - [Feature](/saasable/ui-kit/development/components/feature.md) - [Feature1](/saasable/ui-kit/development/components/feature/feature1.md): The Feature1 component renders a section with a heading and caption, displays two image blocks side-by-side, and includes a third block with an image, title, description, and an optional action button - [Feature2](/saasable/ui-kit/development/components/feature/feature2.md): The Feature2 component displays a section with a heading, optional caption, an optional image, and a list of feature cards, each with an icon and description, all within a responsive grid layout. - [Feature3](/saasable/ui-kit/development/components/feature/feature3.md): The Feature3 component renders a section with a heading and optional caption, featuring three blocks of content: one prominent block with an image and optional action button, and two additional image - [Feature4](/saasable/ui-kit/development/components/feature/feature4.md): The Feature4 component displays a section with a heading and caption, a list of feature cards, and an optional image, all styled responsively using Material-UI. - [Feature5](/saasable/ui-kit/development/components/feature/feature5.md): The Feature5 component creates a responsive, multi-section feature display with images, feature cards, avatar groups, and optional action buttons. - [Feature6](/saasable/ui-kit/development/components/feature/feature6.md): The Feature6 component displays a responsive feature section with animated headings, optional images, and a grid of feature cards, utilizing Framer Motion for smooth transitions. - [Feature7](/saasable/ui-kit/development/components/feature/feature7.md): The Feature7 component presents a testimonial slider with animated progress bars, breadcrumb navigation, and images, using React Slick for carousel functionality and styled components. - [Feature8](/saasable/ui-kit/development/components/feature/feature8.md): The Feature8 component displays a vertical stepper with icons and titles on the left and a dynamic graphic image on the right, allowing users to navigate through different steps with updated content. - [Feature9](/saasable/ui-kit/development/components/feature/feature9.md): The Feature9 component renders a section with a heading and caption at the top, followed by a grid of animated icon cards that display features with custom icons and content. - [Feature10](/saasable/ui-kit/development/components/feature/feature10.md) - [Feature11](/saasable/ui-kit/development/components/feature/feature11.md) - [Feature12](/saasable/ui-kit/development/components/feature/feature12.md) - [Feature13](/saasable/ui-kit/development/components/feature/feature13.md) - [Feature14](/saasable/ui-kit/development/components/feature/feature14.md) - [Feature15](/saasable/ui-kit/development/components/feature/feature15.md) - [Feature16](/saasable/ui-kit/development/components/feature/feature16.md) - [Feature17](/saasable/ui-kit/development/components/feature/feature17.md) - [Feature18](/saasable/ui-kit/development/components/feature/feature18.md) - [Feature19](/saasable/ui-kit/development/components/feature/feature19.md) - [Feature20](/saasable/ui-kit/development/components/feature/feature20.md) - [Feature21](/saasable/ui-kit/development/components/feature/feature21.md) - [Feature22](/saasable/ui-kit/development/components/feature/feature22.md) - [Feature23](/saasable/ui-kit/development/components/feature/feature23.md) - [Feature24](/saasable/ui-kit/development/components/feature/feature24.md) - [Feature25](/saasable/ui-kit/development/components/feature/feature25.md) - [Feature26](/saasable/ui-kit/development/components/feature/feature26.md) - [Feature27](/saasable/ui-kit/development/components/feature/feature27.md) - [Footer](/saasable/ui-kit/development/components/footer.md): This is a static footer component. Simply import it wherever you need to use it in your project. - [Gallery](/saasable/ui-kit/development/components/gallery.md) - [Gallery1](/saasable/ui-kit/development/components/gallery/gallery1.md): This Gallery1 component renders a heading caption and responsive grid of images. Clicking on any image opens it in a lightbox for a larger view. - [Gallery2](/saasable/ui-kit/development/components/gallery/gallery2.md) - [Gallery3](/saasable/ui-kit/development/components/gallery/gallery3.md) - [Gallery4](/saasable/ui-kit/development/components/gallery/gallery4.md): The Gallery4 component is a responsive image gallery with tab navigation, carousel slider, and lightbox functionality, allowing users to view and organize images by topics. - [Hero](/saasable/ui-kit/development/components/hero.md) - [Hero1](/saasable/ui-kit/development/components/hero/hero1.md) - [Hero2](/saasable/ui-kit/development/components/hero/hero2.md) - [Hero3](/saasable/ui-kit/development/components/hero/hero3.md): Hero3 React component that renders a hero section layout with customizable elements including images, text, a list, and a button, styled using Material-UI and Next.js components. - [Hero4](/saasable/ui-kit/development/components/hero/hero4.md) - [Hero5](/saasable/ui-kit/development/components/hero/hero5.md) - [Hero6](/saasable/ui-kit/development/components/hero/hero6.md): The Hero6 component is a responsive hero section featuring an optional chip, a centered heading with caption, primary and secondary buttons, and a carousel of images displayed using react-slick. - [Hero7](/saasable/ui-kit/development/components/hero/hero7.md): Hero7 component that displays a headline, caption, primary button, and images with decorative patterns, styled according to the theme's direction and responsive breakpoints. - [Hero8](/saasable/ui-kit/development/components/hero/hero8.md) - [Hero9](/saasable/ui-kit/development/components/hero/hero9.md) - [Hero10](/saasable/ui-kit/development/components/hero/hero10.md) - [Hero11](/saasable/ui-kit/development/components/hero/hero11.md) - [Hero12](/saasable/ui-kit/development/components/hero/hero12.md) - [Hero13](/saasable/ui-kit/development/components/hero/hero13.md): Hero13 is a hero section featuring a centered heading and caption, a call-to-action button, and a responsive image carousel created with react-slick, all styled with MUI components and custom styling. - [Hero14](/saasable/ui-kit/development/components/hero/hero14.md) - [Hero15](/saasable/ui-kit/development/components/hero/hero15.md) - [Hero16](/saasable/ui-kit/development/components/hero/hero16.md): The Hero16 is a hero section featuring a responsive video player that auto-plays when scrolled into view, combined with review data, a headline with optional caption, and a secondary button. - [Hero17](/saasable/ui-kit/development/components/hero/hero17.md) - [Hero18](/saasable/ui-kit/development/components/hero/hero18.md) - [Hero19](/saasable/ui-kit/development/components/hero/hero19.md) - [Integration](/saasable/ui-kit/development/components/integration.md) - [Integration1](/saasable/ui-kit/development/components/integration/integration1.md) - [Integration2](/saasable/ui-kit/development/components/integration/integration2.md): Integration2 that displays a section with a headline, caption, a list of tags with optional icons, and a primary button, all styled with Material-UI and animated with Framer Motion. - [Integration3](/saasable/ui-kit/development/components/integration/integration3.md) - [Integration4](/saasable/ui-kit/development/components/integration/integration4.md) - [Integration5](/saasable/ui-kit/development/components/integration/integration5.md): Integration5 will display a headline, a caption, and a button, alongside a grid of icons and curved elements. - [Integration6](/saasable/ui-kit/development/components/integration/integration6.md) - [Integration7](/saasable/ui-kit/development/components/integration/integration7.md): Integration7 that displays a headline, a primary button, and a series of tags with icons and labels that scroll horizontally in a marquee, using Material-UI for styling and layout. - [Integration8](/saasable/ui-kit/development/components/integration/integration8.md): Integration8 that displays a series of integration icons in a responsive layout with customizable heading, caption, and primary button, using Material-UI components for styling and layout. - [Integration9](/saasable/ui-kit/development/components/integration/integration9.md): The Integration9 component displays a two-column layout with a heading, caption, and button on the left and a vertically auto-scrolling list of integration tags on the right using a React-Slick slider - [maintenance](/saasable/ui-kit/development/components/maintenance.md) - [Error404](/saasable/ui-kit/development/components/maintenance/error404.md): Error404Page that displays a full-page error 404 message with an image, a heading, and an optional button, all within a styled container. - [Error500](/saasable/ui-kit/development/components/maintenance/error500.md) - [Under Maintenance](/saasable/ui-kit/development/components/maintenance/under-maintenance.md): "Under Maintenance" page in MUI React, displaying a heading, illustration, and maintenance graphic using reusable components. - [Metrics](/saasable/ui-kit/development/components/metrics.md) - [Metrics1](/saasable/ui-kit/development/components/metrics/metrics1.md): The Metrics1 component displays a section with a background image, a heading caption and multiple counter blocks with numerical values and descriptions, adjusting layout based on screen size. - [Metrics2](/saasable/ui-kit/development/components/metrics/metrics2.md): The Metrics2 component displays a section with a background image, a heading, and multiple counter blocks with numerical values and descriptions, adjusting layout based on screen size. - [Metrics3](/saasable/ui-kit/development/components/metrics/metrics3.md): The Metrics3 component displays a layout with a GraphicsCard containing a heading, optional button, and CounterCard components arranged in a responsive grid layout. - [Metrics4](/saasable/ui-kit/development/components/metrics/metrics4.md): The Metrics4 component displays a section with a title and description, an optional button, and a grid of counters and captions within a GraphicsCard layout. - [Metrics5](/saasable/ui-kit/development/components/metrics/metrics5.md): The Metrics5 component renders a section with a heading, caption, and a grid of animated statistic cards, each displaying a counter, unit, and description. - [Metrics6](/saasable/ui-kit/development/components/metrics/metrics6.md): The Metrics6 component displays a section with a background image, heading, caption, and a grid of CounterCard components showing statistics with dynamic layouts and dividers. - [Metrics7](/saasable/ui-kit/development/components/metrics/metrics7.md): The Metrics7 component renders a section with a responsive layout featuring background images, a heading, caption, and multiple counter and card components with custom styling and overlay effects. - [Metrics8](/saasable/ui-kit/development/components/metrics/metrics8.md): The Metrics8 component displays a section with a heading and caption in one column, and a list of progress indicators and counters in another column, all within a responsive grid layout. - [Metrics9](/saasable/ui-kit/development/components/metrics/metrics9.md): The Metrics9 component uses several props to render a styled layout with headings, details, and an action button. Here's a detailed explanation of each prop along with its usage in the component. - [Metrics10](/saasable/ui-kit/development/components/metrics/metrics10.md): The Metrics10 component is a visually structured metrics highlights section that displays a set of counters with captions in a grid layout. - [MegaMenu](/saasable/ui-kit/development/components/megamenu.md) - [MegaMenu1](/saasable/ui-kit/development/components/megamenu/megamenu1.md) - [MegaMenu2](/saasable/ui-kit/development/components/megamenu/megamenu2.md): The MegaMenu2 component renders a list of menu items with optional icons and text, styled with Material UI components to be responsive and interactive, including visual feedback for selected items. - [MegaMenu3](/saasable/ui-kit/development/components/megamenu/megamenu3.md): The MegaMenu3 component displays a responsive menu with icons and text, and optionally includes a footer section. It supports customizable popper width and styling for the footer. - [MegaMenu4](/saasable/ui-kit/development/components/megamenu/megamenu4.md): The MegaMenu4 component renders a grid of menu items as clickable cards, optionally including a footer section, with customizable width and footer styling. - [MegaMenu5](/saasable/ui-kit/development/components/megamenu/megamenu5.md) - [Navbar](/saasable/ui-kit/development/components/navbar.md) - [NavMenu](/saasable/ui-kit/development/components/navbar/navmenu.md) - [Navbar-content](/saasable/ui-kit/development/components/navbar/navbar-content.md) - [NavbarContent1](/saasable/ui-kit/development/components/navbar/navbar-content/navbarcontent1.md) - [NavbarContent2](/saasable/ui-kit/development/components/navbar/navbar-content/navbarcontent2.md) - [NavbarContent3](/saasable/ui-kit/development/components/navbar/navbar-content/navbarcontent3.md) - [NavbarContent4](/saasable/ui-kit/development/components/navbar/navbar-content/navbarcontent4.md) - [NavbarContent5](/saasable/ui-kit/development/components/navbar/navbar-content/navbarcontent5.md) - [NavbarContent6](/saasable/ui-kit/development/components/navbar/navbar-content/navbarcontent6.md) - [NavbarContent7](/saasable/ui-kit/development/components/navbar/navbar-content/navbarcontent7.md) - [NavbarContent8](/saasable/ui-kit/development/components/navbar/navbar-content/navbarcontent8.md) - [NavbarContent9](/saasable/ui-kit/development/components/navbar/navbar-content/navbarcontent9.md) - [NavbarContent10](/saasable/ui-kit/development/components/navbar/navbar-content/navbarcontent10.md) - [Navbar1](/saasable/ui-kit/development/components/navbar/navbar1.md): Navbar1 is a responsive navigation bar component that uses MUI's AppBar and Toolbar, allowing customizable content through the children prop, wrapped in a ContainerWrapper. - [Navbar2](/saasable/ui-kit/development/components/navbar/navbar2.md) - [Navbar3](/saasable/ui-kit/development/components/navbar/navbar3.md) - [Navbar4](/saasable/ui-kit/development/components/navbar/navbar4.md) - [Navbar5](/saasable/ui-kit/development/components/navbar/navbar5.md) - [Navbar6](/saasable/ui-kit/development/components/navbar/navbar6.md) - [Navbar7](/saasable/ui-kit/development/components/navbar/navbar7.md) - [Navbar8](/saasable/ui-kit/development/components/navbar/navbar8.md) - [Navbar9](/saasable/ui-kit/development/components/navbar/navbar9.md) - [Navbar10](/saasable/ui-kit/development/components/navbar/navbar10.md) - [Other](/saasable/ui-kit/development/components/other.md) - [Other1](/saasable/ui-kit/development/components/other/other1.md): The Other1, which renders a section with a heading, description, and a list of animated cards, each linking to different pages, using Material-UI and Framer Motion for styling and animations. - [Other2](/saasable/ui-kit/development/components/other/other2.md) - [Other3](/saasable/ui-kit/development/components/other/other3.md) - [Privacy policy](/saasable/ui-kit/development/components/privacy-policy.md) - [Privacy policy 1](/saasable/ui-kit/development/components/privacy-policy/privacy-policy-1.md): Privacy Policy - 1 displays a scrollspy privacy policy page with a sticky sidebar and section highlights using Material-UI. - [Privacy policy 2](/saasable/ui-kit/development/components/privacy-policy/privacy-policy-2.md): Privacy Policy - 2 renders a vertical list of privacy policy sections with headings and descriptions using Material-UI layout and styling. - [Pricing](/saasable/ui-kit/development/components/pricing.md) - [Pricing1](/saasable/ui-kit/development/components/pricing/pricing1.md) - [Pricing2](/saasable/ui-kit/development/components/pricing/pricing2.md) - [Pricing3](/saasable/ui-kit/development/components/pricing/pricing3.md) - [Pricing4](/saasable/ui-kit/development/components/pricing/pricing4.md): The Pricing4 component displays two pricing plans with a toggle to switch between monthly and yearly pricing, featuring detailed plan information, a list of features, and action buttons. - [Pricing5](/saasable/ui-kit/development/components/pricing/pricing5.md) - [Pricing6](/saasable/ui-kit/development/components/pricing/pricing6.md) - [Pricing7](/saasable/ui-kit/development/components/pricing/pricing7.md): The Pricing7 component displays a pricing section with toggleable monthly and yearly views, featuring a main plan card with price details and a benefits list with icons and descriptions. - [Pricing8](/saasable/ui-kit/development/components/pricing/pricing8.md): The Pricing8 component presents a pricing section with toggleable monthly and yearly plans, featuring cards for each plan that include a price, quantity controls, and a list of features. - [Pricing9](/saasable/ui-kit/development/components/pricing/pricing9.md): The Pricing9 component displays a pricing section with animated cards for different plans, each featuring a title, price, list of features, and buttons for exploring or linking to more information. - [Pricing10](/saasable/ui-kit/development/components/pricing/pricing10.md): Pricing10 displays animated pricing cards with monthly/yearly toggle, showing plan icons, titles, prices, features, and action buttons. - [Process](/saasable/ui-kit/development/components/process.md) - [Process1](/saasable/ui-kit/development/components/process/process1.md): The Process1 component displays a section with an accordion-style card list and an optional side image, incorporating animations and dynamic content based on the provided props. - [Process2](/saasable/ui-kit/development/components/process/process2.md): The Process2 component renders a section with a background image card and a list of feature cards, displaying a heading, caption, and each feature card’s title, description, and icon. - [Process3](/saasable/ui-kit/development/components/process/process3.md) - [Process4](/saasable/ui-kit/development/components/process/process4.md): The Process4 component renders an interactive timeline with a changing image carousel, updating every 5 seconds and allowing manual step selection. - [Process5](/saasable/ui-kit/development/components/process/process5.md) - [Process6](/saasable/ui-kit/development/components/process/process6.md): The Process6 component displays a grid of cards, each featuring a rounded avatar, title, description, and a list of items with icons, all within a responsive layout. - [Process7](/saasable/ui-kit/development/components/process/process7.md): The Process7 component presents a responsive layout with two images, a title and caption, and dynamically rendered process steps in either a timeline or stepper format, depending on screen size. - [Process8](/saasable/ui-kit/development/components/process/process8.md): Process8 is a responsive UI component that displays a heading, caption, image, and a list of process steps—each with an icon, title, and description—using Material-UI layout and styling. - [Process8](/saasable/ui-kit/development/components/process/process8-1.md): The Process8 component displays a centered heading with an image and a list of process steps, each containing an icon, title, and description. - [SmallHero](/saasable/ui-kit/development/components/smallhero.md) - [SmallHero1](/saasable/ui-kit/development/components/smallhero/smallhero1.md): The SmallHero1 component displays a centered hero section with an optional chip, a headline, and a caption, all within a styled container. - [SmallHero2](/saasable/ui-kit/development/components/smallhero/smallhero2.md): The SmallHero2 component renders a centered hero section with an optional chip, headline, and caption, styled with a background color for the chip. - [SmallHero3](/saasable/ui-kit/development/components/smallhero/smallhero3.md): The SmallHero3 component creates a hero section with a chip, headline, optional caption, and a configurable "explore" button, all arranged with responsive layout and spacing. - [SmallHero4](/saasable/ui-kit/development/components/smallhero/smallhero4.md): The SmallHero4 React component that renders a responsive section with a heading, caption, optional chip, and an optional image, using Material-UI for styling and layout. - [SmallHero5](/saasable/ui-kit/development/components/smallhero/smallhero5.md) - [SmallHero6](/saasable/ui-kit/development/components/smallhero/smallhero6.md): The SmallHero6 component presents a hero section with a headline, tagline, an email sign-up input with a primary button, and a list of items with icons and titles arranged in a grid. - [SmallHero7](/saasable/ui-kit/development/components/smallhero/smallhero7.md): The SmallHero7 component features a hero section with a heading and caption on a graphics card, a primary button, and an image section with a gradient overlay, arranged in a responsive grid layout. - [SmallHero8](/saasable/ui-kit/development/components/smallhero/smallhero8.md): SmallHero8 is a responsive hero section component that displays a heading, caption, and a clickable video thumbnail that opens a modal with video playback. - [Team](/saasable/ui-kit/development/components/team.md) - [Team1](/saasable/ui-kit/development/components/team/team1.md): The Team1 component displays a section with a title and caption, followed by a responsive grid of profile cards for team members. - [Team2](/saasable/ui-kit/development/components/team/team2.md) - [Team3](/saasable/ui-kit/development/components/team/team3.md) - [Team4](/saasable/ui-kit/development/components/team/team4.md) - [Team5](/saasable/ui-kit/development/components/team/team5.md) - [Team6](/saasable/ui-kit/development/components/team/team6.md) - [Team7](/saasable/ui-kit/development/components/team/team7.md): The Team7 component renders a responsive team member section with styled cards that reveal member details on hover. - [Team8](/saasable/ui-kit/development/components/team/team8.md): The Team8, renders a styled team member carousel with headings, captions, and member details using MUI, react-slick, and custom components. - [Testimonial](/saasable/ui-kit/development/components/testimonial.md) - [Testimonial1](/saasable/ui-kit/development/components/testimonial/testimonial1.md): The Testimonial1 component displays a section with a video testimonial and several review cards, using animations for entrance effects and managing video playback based on viewport visibility. - [Testimonial2](/saasable/ui-kit/development/components/testimonial/testimonial2.md) - [Testimonial3](/saasable/ui-kit/development/components/testimonial/testimonial3.md) - [Testimonial4](/saasable/ui-kit/development/components/testimonial/testimonial4.md) - [Testimonial5](/saasable/ui-kit/development/components/testimonial/testimonial5.md) - [Testimonial6](/saasable/ui-kit/development/components/testimonial/testimonial6.md): The Testimonial6 component is designed to display a carousel of testimonials with a focus on integrating avatars and optional images. Here’s a breakdown of its features. - [Testimonial7](/saasable/ui-kit/development/components/testimonial/testimonial7.md): The Testimonial7 component presents a vertically scrolling testimonial slider alongside a heading and optional primary button, using MUI components and react-slick for the carousel functionality. - [Testimonial8](/saasable/ui-kit/development/components/testimonial/testimonial8.md): The Testimonial8 component features a slider that showcases testimonials with titles, reviews, profile information, and images, using MUI components and react-slick for the carousel functionality. - [Testimonial9](/saasable/ui-kit/development/components/testimonial/testimonial9.md): The Testimonial9 that displays a grid layout of testimonials using two horizontally scrolling marquees, with styling and gradient effects determined by the theme direction. - [Testimonial10](/saasable/ui-kit/development/components/testimonial/testimonial10.md) - [Testimonial11](/saasable/ui-kit/development/components/testimonial/testimonial11.md): This testimonial11 renders a testimonial section with a centered heading and a grid of testimonial cards, each displaying a review, an avatar, and the reviewer's name and role. - [Testimonial12](/saasable/ui-kit/development/components/testimonial/testimonial12.md): Testimonial12 is a testimonial slider component that showcases user feedback in a clean, responsive layout. It displays an avatar, a quote, the user's name, and their role. - [Testimonial13](/saasable/ui-kit/development/components/testimonial/testimonial13.md): The Testimonial13 component is a responsive testimonial carousel built using Material-UI (MUI), react-slick (for the slider), and Framer Motion (for animations). - [TopOffer](/saasable/ui-kit/development/components/topoffer.md) - [TopOffer1](/saasable/ui-kit/development/components/topoffer/topoffer1.md): The TopOffer1 component renders a collapsible alert card with customizable heading, caption, and buttons, and includes an icon with responsive styling and conditional layout adjustments. - [TopOffer2](/saasable/ui-kit/development/components/topoffer/topoffer2.md) - [TopOffer3](/saasable/ui-kit/development/components/topoffer/topoffer3.md): The TopOffer3 component displays a collapsible alert card with a central message and optional link, including customizable styling and focus-visible enhancements. - [TopOffer4](/saasable/ui-kit/development/components/topoffer/topoffer4.md): The TopOffer4 component renders a collapsible alert card with a customizable message and optional secondary label and link, featuring central alignment and responsive styling. - [TopOffer5](/saasable/ui-kit/development/components/topoffer/topoffer5.md): The TopOffer5 component displays a collapsible alert card with a background image, featuring a customizable message, email input with a button, and responsive styling for different screen sizes. - [Terms conditions](/saasable/ui-kit/development/components/terms-conditions.md): This code implements a responsive Terms and Conditions page with a sticky scrollspy navigation menu using Material-UI in a React app. - [ComingSoon](/saasable/ui-kit/development/components/comingsoon.md) - [EarlyAccess](/saasable/ui-kit/development/components/earlyaccess.md) - [Onboard](/saasable/ui-kit/development/components/onboard.md)