Alternating Features

Zigzag layout with text on one side and image on the other, alternating each row. Scroll-triggered entrance animations with gradient blob behind images.

featureszigzagalternatingimages

Installation

bash

# Copy alternating-features.tsx to your project
cp components/ui/alternating-features.tsx your-project/components/ui/alternating-features.tsx

How to use

tsx

import { AlternatingFeatures } from "@/components/ui/alternating-features";

tsx

<AlternatingFeatures
  heading="How it works"
  features={[
    { title: "Step 1", description: "Connect your data", imageSrc: "/step1.jpg", badge: "Getting Started" },
    { title: "Step 2", description: "Configure automations", imageSrc: "/step2.jpg" },
  ]}
/>

Dependencies

framer-motion

Exports

AlternatingFeatures

File

components/ui/alternating-features.tsx

Preview

How it works

Three simple steps to get started

Step 1

Connect your data sources

Integrate with your existing tools in minutes. We support 200+ data sources including databases, APIs, spreadsheets, and cloud storage. No complex configuration needed.

Step 2

Build automated workflows

Use our visual builder to create powerful automations. Drag and drop actions, set triggers, and add conditional logic without writing a single line of code.

Step 3

Deploy and monitor

Ship to production with one click. Real-time monitoring, alerts, and detailed logs help you stay on top of everything.