Docs
Native Modules
Comparison

Comparison Module

Overview

The Comparison module is a customizable component designed to visually compare the time savings and efficiency gains achieved by using your solution versus your competitors' or traditional solutions.

Location

The source code for the Comparison module can be found in the /modules/native/Comparison.js file.

Usage

The Comparison module can be customized using props. Most props have default values, which can be modified directly within the module itself or overridden by passing custom values.

Props

1. sectionColors

  • Default Value: 
    const defaultSectionColors = {
    background: "bg-background",
    foreground: "text-foreground",
    boxHeadingBackground: "bg-accent",
    boxHeadingBForeground: "text-accent-foreground",
    beforeForeground: "text-red-600",
    afterForeground: "text-green-600"
}
  • Description: The sectionColors prop allows you to customize the color scheme of the Comparison module, ensuring it aligns with your site's design.
  • Property Descriptions:
    • background: Sets the background color of the entire comparison section.
    • foreground: Sets the text color for the main content within the section.
    • boxHeadingBackground: Defines the background color for the headings of each comparison box.
    • boxHeadingBForeground: Defines the text color for the headings of each comparison box.
    • beforeForeground: Sets the color for the "Before" section text and icon.
    • afterForeground: Sets the color for the "After" section text and icon.
  • Additional Notes:
    • bg-background, text-foreground, etc., are theme colors. For more information, refer to the documentation: Theming.
    • You can easily swap main and accent colors. Just apply accent colors by setting background: "bg-accent" and foreground: "text-accent-foreground".
    • If you want to use your own colors and maintain dark mode support, you can specify classes like bg-white dark:bg-black to ensure the color changes appropriately based on the theme.
    • The sectionColors object can be partially updated with props. For example, if you only want to change the background color while keeping other defaults, you can do it like this: 
      <Comparison 
    sectionColors={{ 
        background: "bg-blue-200 dark:bg-blue-700" 
    }}
/>

2. text

  • Default Value: 
    const defaultText = {
    heading: "Supercharge Your Development",
}
  • Description: The text prop allows you to customize the textual content of the Comparison module, particularly the main heading.
  • Property Descriptions:
    • heading: Sets the heading text displayed at the top of the Comparison section.
  • Additional Notes:
    • Customize the text content to align with your brand's messaging.
    • If no text prop is provided, the default values will be used.

3. comparison

  • Default Value: 
    const comparisonData = [
    {
        task: "Authentication and Private/Protected Pages",
        before: { time: "2-4 days", icon: ClockIcon },
        after: { time: "15 minutes", icon: BoltIcon }
    },
    {
        task: "Payment Integration (Stripe & LemonSqueezy)",
        before: { time: "3-5 days", icon: ClockIcon },
        after: { time: "30 minutes", icon: BoltIcon }
    },
    {
        task: "Responsive UI with Dark Mode",
        before: { time: "4-6 days", icon: ClockIcon },
        after: { time: "1 hour", icon: BoltIcon }
    },
    {
        task: "SEO, Documentation, Email, etc.",
        before: { time: "Countless hours", icon: ClockIcon },
        after: { time: "45 minutes", icon: BoltIcon }
    }
];
  • Description: The comparison prop allows you to define the specific tasks being compared, along with the time taken "Before" and "After" using your platform.
  • Property Descriptions:
    • task: The name of the task being compared.
    • before: An object containing the time taken for the task before using your platform and the corresponding icon.
    • after: An object containing the time taken for the task after using your platform and the corresponding icon.
  • Additional Notes:
    • The comparison array can be customized to reflect the specific tasks and time savings relevant to your project.

Usage Example without Props

If you want to use the Comparison module with all the default settings, you can simply include it without passing any props:

import Comparison from "@/modules/native/Comparison";
 
const MyPage = () => {
  return (
    <Comparison />
  );
}
 
export default MyPage;

Usage Example with Props

Here’s an example of how to use the Comparison module in your project, fully customized with props:

import Comparison from "@/modules/native/Comparison";
 
const MyPage = () => {
  return (
    <Comparison 
      sectionColors={{ 
        background: "bg-blue-200 dark:bg-blue-700", 
        foreground: "text-blue-900", 
        boxHeadingBackground: "bg-blue-300",
        boxHeadingBForeground: "text-blue-700",
        beforeForeground: "text-red-500",
        afterForeground: "text-green-500"
      }}
      text={{
        heading: "Optimize Your Workflow"
      }}
      comparison={[
        {
          task: "Database Setup",
          before: { time: "1-2 days", icon: ClockIcon },
          after: { time: "30 minutes", icon: BoltIcon }
        },
        {
          task: "UI Development",
          before: { time: "3-4 days", icon: ClockIcon },
          after: { time: "1 hour", icon: BoltIcon }
        }
      ]}
    />
  );
}
 
export default MyPage;

In this example:

  • Colors: Custom colors are applied to match a blue theme.
  • Text: The main heading has been changed to "Optimize Your Workflow."
  • Comparison Tasks: Specific tasks like "Database Setup" and "UI Development" are compared.

Conclusion

The Comparison module is a powerful tool for showcasing the efficiency and time-saving benefits of your platform. By customizing the colors, text, and tasks, you can align this module perfectly with your brand's messaging and design. Implement it in your project to visually communicate the value your tools bring to users.

BeforeAfterSliderCTA