# Security Website Flip Cards

Prototype: https://location-aware-cyber-g2rb.bolt.host/

Interactive flip cards for cybersecurity company websites that reveal detailed service information on click, improving engagement without complex navigation.

## The Problem

Security company websites struggle with information presentation:
- Services pages have too much text (visitors bounce)
- Feature lists are boring and hard to scan
- Modal popups feel intrusive and break flow
- Multi-page navigation loses visitor attention
- Technical services need both "what" and "how" without overwhelming

**Result:** Prospects leave before understanding your value proposition.

## The Solution

Flip cards with smooth Y-axis rotation that show:
- **Front:** Service name, icon, brief value proposition
- **Back:** Key features, pricing indicator, CTA button

**Key Features:**
- Click to flip (intentional interaction, not accidental hover)
- 0.6s smooth Y-axis rotation animation
- Professional presentation for B2B cybersecurity audience
- Mobile-responsive (works on all devices)
- No JavaScript frameworks required

## Use Cases

### 1. Service Offerings Page

**Front:**
- Icon: Shield with checkmark
- Title: "MDR Alert Triage Automation"
- Tagline: "AI-powered threat detection and response"

**Back:**
- Features:
  - Automated IOC enrichment
  - 24/7 threat monitoring
  - 40% faster alert resolution
- Pricing: Starting at $5K/month
- CTA: [Schedule Demo]

### 2. Compliance Solutions

**Front:**
- Icon: Document with seal
- Title: "SOC 2 Compliance Automation"
- Tagline: "Continuous evidence collection and reporting"

**Back:**
- Features:
  - Automated control testing
  - Real-time audit dashboards
  - 80% less manual evidence gathering
- Pricing: Custom pricing
- CTA: [Get Assessment]

### 3. Product Features

**Front:**
- Icon: Cloud with lock
- Title: "Cloud Security Posture Management"
- Tagline: "Multi-cloud misconfiguration detection"

**Back:**
- Features:
  - AWS, Azure, GCP support
  - Auto-remediation workflows
  - Compliance framework mapping
- Availability: Enterprise plans
- CTA: [View Demo]

### 4. Team Introduction

**Front:**
- Photo: Team member headshot
- Name: "John Smith"
- Role: "Principal Security Engineer"

**Back:**
- Background:
  - 10+ years in offensive security
  - OSCP, GXPN certified
  - Former red team lead at Fortune 500
- Specialties: Cloud pentesting, web app security
- CTA: [LinkedIn Profile]

## Best Practices

**Do:**
- Keep front side concise (icon + title + 1-line value prop)
- Make back side actionable (features + clear CTA)
- Use consistent card sizes across the page
- Test on mobile devices (ensure tap works, not just hover)

**Don't:**
- Overload back side with walls of text
- Use auto-flip or hover (users need control)
- Mix card sizes randomly (looks unprofessional)
- Forget accessibility (add keyboard navigation)

<img width="1172" height="663" alt="image" src="https://github.com/user-attachments/assets/008e1fdb-ca4c-4c14-b6d9-f6f8b67c6781" />

https://github.com/user-attachments/assets/c945901a-d0d4-417a-83e8-09ec15d6d367


Built by Kunsh Tanwar | Founder of ETXcyberops | Contact: kunsh@etxhuman.com