Features Sections

JetShip provides five meticulously designed Features sections, built using React and TypeScript. Each section is tailored with unique layouts and styles to effectively showcase your product's features. Below, you'll find an overview of the available feature sections, along with their previews and implementation examples for seamless integration into your project.

---

1. Outlined Features Section

The Outlined Features Section provides a sleek and modern layout to display key features of your product. It combines images, titles, descriptions, and customizable feature lists, making it a versatile component for showcasing your product’s strengths in a clean, engaging manner.

⚙️ Props

• icon (required): The icon representing the feature section.
• title (required): The main title of the feature section.
• description (required): A detailed description of the feature section.
• image (required): Either an image tag (<img src={src} />) or an object with the following properties for responsive handling:
  • srcLight: Image URL for light mode.
  • srcDark: Image URL for dark mode.
  • alt (optional): Alt text for accessibility.
  • className (optional): Tailwind CSS classes for styling the image.
• imageDirection (optional): Position of the image relative to the text. Accepts "left" (default) or "right".
• features (required): An array of feature objects containing icon, title, and description of the feature.
• className (optional): Tailwind CSS classes to apply to the section’s main container.
• animationDelay (optional): Delay before the animation starts for the image outline effect.
• transitionDelay (optional): Delay for transitions within the section.
• transitionDuration (optional): Duration for transitions and animations inside the feature section.

👀 Preview and Code

You can update the data used in the Outlined Features Section from the apps/web/src/assets/data/featuresImageOutlinedData.tsx file. This file contains the data such as icons, titles, descriptions, and images, allowing you to easily customize the content displayed in the feature section.

Preview

Code

import FeaturesImageOutlined from '@repo/ui/blocks/features/FeaturesImageOutlined'
import SectionWrapper from '@repo/ui/blocks/others/SectionWrapper'
import featuresImageOutlinedData from '@/assets/data/featuresImageOutlinedData'

const Component = () => {
  return (
    <SectionWrapper className='...'>
      {featuresImageOutlinedData.map((item, index) => (
        <FeaturesImageOutlined
          key={index}
          icon={item.icon}
          title={item.title}
          description={item.description}
          image={item.image}
          imageDirection={item.reverse ? 'right' : 'left'}
          features={item.features}
          animationDelay={index * 0.75}
        />
      ))}
    </SectionWrapper>
  )
}

export default Component

---

2. Features Section With Accordion

The Features Section With Accordion presents your product features in an interactive accordion format, ideal for showing detailed content while keeping the layout clean and organized. This section provides an interactive way for users to explore your product's key features.

⚙️ Props

• icon (required): The icon representing the feature section.
• content (required): The introductory content or description for the section.
• title (required): The title of the feature section.
• description (required): A brief description providing context about the section’s content.
• image (required): Either an image tag (<img src={src} />) or an object with the following properties:
  • srcLight: Image URL for light mode.
  • srcDark: Image URL for dark mode.
  • alt (optional): Alt text for accessibility.
  • className (optional): Tailwind CSS classes for styling the image.
• imageDirection (optional): Position of the image relative to the text. Accepts "left" (default) or "right".
• features (required): An array of feature objects containing icon, title, and description of the feature.
• className (optional): Tailwind CSS classes to apply to the section’s main container.
• transitionDelay (optional): Delay for the accordion transitions, allowing control over when each section is revealed.
• transitionDuration (optional): Duration for the accordion transition, ensuring smooth effects when expanding or collapsing sections.

👀 Preview and Code

You can update the data used in the Features Section With Accordion from the apps/web/src/assets/data/featuresImageAccordionData.tsx file. This file contains the data such as icons, titles, descriptions, and images, allowing you to easily customize the content displayed in the feature section.

Preview

Code

import { Fragment } from 'react'
import FeaturesImageAccordion from '@repo/ui/blocks/features/FeaturesImageAccordion'
import SectionWrapper from '@repo/ui/blocks/others/SectionWrapper'
import Separator from '@repo/ui/blocks/others/Separator'
import featuresImageAccordionData from '@/assets/data/featuresImageAccordionData'

const Component = () => {
  return (
    <SectionWrapper className='...'>
      {featuresImageAccordionData.map((item, index) => (
        <Fragment key={index}>
          <FeaturesImageAccordion
            icon={item.icon}
            content={item.content}
            title={item.title}
            description={item.description}
            image={item.image}
            imageDirection={item.reverse ? 'right' : 'left'}
            features={item.features}
          />
          {featuresImageAccordionData.length - 1 !== index && <Separator />}
        </Fragment>
      ))}
    </SectionWrapper>
  )
}

export default Component

---

3. Features Section With Gradient

The Features Section With Gradient provides an eye-catching gradient background to highlight your product features. This section combines engaging visual elements, like icons and images, with smooth transitions to create a dynamic presentation of your product's core features.

⚙️ Props

• icon (required): The icon representing the feature section.
• content (required): The introductory content or description for the section.
• title (required): The section's title that summarizes the feature set.
• description (required): A brief description that gives additional context or explanation for the feature section.
• image (required): Either an image tag (<img src={src} />) or an object with the following properties for light/dark mode images:
  • srcLight: Image URL for light mode.
  • srcDark: Image URL for dark mode.
  • alt (optional): Alt text for the image.
  • className (optional): Tailwind CSS classes for styling the image.
• imageDirection (optional): Position of the image relative to the text. Accepts "left" (default) or "right".
• features (required): An array of ReactNode elements, representing the individual features that will be displayed in the section.
• className (optional): Tailwind CSS classes for styling the section's main container.
• transitionDelay (optional): Defines the delay before the transitions start in the section.
• transitionDuration (optional): Duration for transitions in the section, ensuring smooth animations when the section is displayed.

👀 Preview and Code

You can update the data used in the Features Section With Gradient from the apps/web/src/assets/data/featuresImageGradientData.tsx file. This file contains the data such as icons, titles, descriptions, and images, allowing you to easily customize the content displayed in the feature section.

Preview

Code

import { Fragment } from 'react'
import FeaturesImageGradient from '@repo/ui/blocks/features/FeaturesImageGradient'
import SectionWrapper from '@repo/ui/blocks/others/SectionWrapper'
import Separator from '@repo/ui/blocks/others/Separator'
import featuresImageGradientData from '@/assets/data/featuresImageGradientData'

const Component = () => {
  return (
    <SectionWrapper className='...'>
      {featuresImageGradientData.map((item, index) => (
        <Fragment key={index}>
          <FeaturesImageGradient
            icon={item.icon}
            content={item.content}
            title={item.title}
            description={item.description}
            image={item.image}
            imageDirection={item.reverse ? 'right' : 'left'}
            features={item.features}
          />
          {featuresImageGradientData.length - 1 !== index && <Separator />}
        </Fragment>
      ))}
    </SectionWrapper>
  )
}

export default Component

---

4. Feature Cards Section

The Feature Cards Section displays your product's key features in individual cards, each containing an icon, title, description, and a list of features. This section is perfect for presenting multiple features in a compact, visually appealing format, allowing users to quickly understand your product’s offerings.

⚙️ Props

• data (required): An array of card data objects. Each object contains:
  • icon: The icon representing the feature card.
  • title: The title of the feature card.
  • description (optional): A brief description explaining the feature.
  • features: An array of features to display within the card.
  • className (optional): Tailwind CSS classes for styling the card.
• className (optional): Tailwind CSS classes for styling the section’s main container.
• transitionDelay (optional): Delay time for the transition of the section’s elements.
• transitionDuration (optional): Duration for the transition effect when the feature cards appear.

👀 Preview and Code

You can update the data used in the Feature Cards Section from the apps/web/src/assets/data/featuresCardsData.tsx file. This file contains the data such as icons, titles and descriptions, allowing you to easily customize the content displayed in the feature section.

Preview

Code

import FeaturesCards from '@repo/ui/blocks/features/FeaturesCards'
import SectionWrapper from '@repo/ui/blocks/others/SectionWrapper'
import featuresCardsData from '@/assets/data/featuresCardsData'

const Component = () => {
  return (
    <SectionWrapper className='...'>
      <FeaturesCards data={featuresCardsData} />
    </SectionWrapper>
  )
}

export default Component

---

5. Outlined Feature Cards Section

The Outlined Feature Cards Section offers a stylish way to present your product's features, with each feature displayed in a bordered card layout. The cards include an icon, title, description, and a list of features, making it perfect for visually distinguishing key features of your product while maintaining a clean, modern design.

⚙️ Props

• data (required): An array of card data objects. Each object contains:
  • icon: The icon representing the feature card.
  • title: The title of the feature card.
  • description (optional): A brief description of the feature.
  • features: An array of features to display within the card.
  • className (optional): Tailwind CSS classes for styling the card.
• className (optional): Tailwind CSS classes for styling the section’s main container.
• transitionDelay (optional): Delay time for the transition of the section’s elements.
• transitionDuration (optional): Duration for the transition effect when the outlined feature cards appear.

👀 Preview and Code

You can update the data used in the Outlined Feature Cards Section from the apps/web/src/assets/data/featuresCardsOutlinedData.tsx file. This file contains the data such as icons, titles and descriptions, allowing you to easily customize the content displayed in the feature section.

Preview

Code

import FeaturesCardsOutlined from '@repo/ui/blocks/features/FeaturesCardsOutlined'
import SectionWrapper from '@repo/ui/blocks/others/SectionWrapper'
import featuresCardsOutlinedData from '@/assets/data/featuresCardsOutlinedData'

const Component = () => {
  return (
    <SectionWrapper className='...'>
      <FeaturesCardsOutlined data={featuresCardsOutlinedData} />
    </SectionWrapper>
  )
}

export default Component