Additional Features Blocks

JetShip provides three interactive and visually appealing Additional Features Blocks, each offering a unique way to display key features of your product or service. These blocks are designed to engage users with smooth hover effects and transitions, ensuring an interactive and polished experience. Built with React and TypeScript, these blocks are highly customizable, making it easy to integrate them into your project.

---

1. Outlined Additional Feature Cards Section

The Outlined Additional Feature Cards Section allows you to display features in cards with an engaging hover effect. When a user hovers over a card, the card glows around the cursor, and the border color transitions to the primary color, enhancing the visual appeal. This effect is smooth, providing a polished user experience.

⚙️ Props

• data (required): An array of objects representing each feature card. Each object contains:
  • icon: The icon representing the feature.
  • title: The title of the feature.
  • description (optional): A brief description of the feature.
• className (optional): Tailwind CSS classes to style the section’s main container.
• transitionDelay (optional): The delay for the hover effect to trigger.
• transitionDuration (optional): The duration for the hover effect to complete.

👀 Preview and Code

You can update the data used in the Outlined Additional Feature Cards Section from the apps/web/src/assets/data/additionalFeaturesOutlinedData.tsx file. This file contains the feature icons, titles, and descriptions that are displayed in the section.

Preview

Code

import AdditionalFeaturesOutlined from '@repo/ui/blocks/additional-features/AdditionalFeaturesOutlined'
import SectionWrapper from '@repo/ui/blocks/others/SectionWrapper'
import additionalFeaturesOutlinedData from '@/assets/data/additionalFeaturesOutlinedData'

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

export default Component

---

2. Vertical Additional Feature Cards Section

The Vertical Additional Feature Cards Section provides a vertical layout for feature cards. When hovered, the active card’s border changes to the primary color at the bottom of the card, drawing attention to the selected card. The smooth transition between colors creates a visually pleasing effect.

⚙️ Props

• data (required): An array of objects representing each feature card. Each object contains:
  • icon: The icon representing the feature.
  • title: The title of the feature.
  • description (optional): A brief description of the feature.
• className (optional): Tailwind CSS classes to style the section’s main container.
• transitionDelay (optional): The delay for the hover effect to trigger.
• transitionDuration (optional): The duration for the hover effect to complete.

👀 Preview and Code

You can update the data used in the Vertical Additional Feature Cards Section from the apps/web/src/assets/data/additionalFeaturesVerticalData.tsx file. This file contains the feature icons, titles, and descriptions that are displayed in the section.

Preview

Code

import AdditionalFeaturesVertical from '@repo/ui/blocks/additional-features/AdditionalFeaturesVertical'
import SectionWrapper from '@repo/ui/blocks/others/SectionWrapper'
import additionalFeaturesVerticalData from '@/assets/data/additionalFeaturesVerticalData'

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

export default Component

---

3. Horizontal Additional Feature Cards Section

The Horizontal Additional Feature Cards Section showcases feature cards in a horizontal layout. When a card is hovered, it displays a primary color border on the left side of the card, and an active shadow effect is applied to the hovered card. This effect provides a dynamic, interactive feel for the section.

⚙️ Props

• data (required): An array of objects representing each feature card. Each object contains:
  • icon: The icon representing the feature.
  • title: The title of the feature.
  • description (optional): A brief description of the feature.
• className (optional): Tailwind CSS classes to style the section’s main container.
• transitionDelay (optional): The delay for the hover effect to trigger.
• transitionDuration (optional): The duration for the hover effect to complete.

👀 Preview and Code

You can update the data used in the Horizontal Additional Feature Cards Section from the apps/web/src/assets/data/additionalFeaturesHorizontalData.tsx file. This file contains the feature icons, titles, and descriptions that are displayed in the section.

Preview

Code

import AdditionalFeaturesHorizontal from '@repo/ui/blocks/additional-features/AdditionalFeaturesHorizontal'
import SectionWrapper from '@repo/ui/blocks/others/SectionWrapper'
import additionalFeaturesHorizontalData from '@/assets/data/additionalFeaturesHorizontalData'

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

export default Component