UI Components

Reusable UI components including GlassCard and BackgroundBlobs

The VENCOL Front Template includes several reusable UI components for creating consistent, visually appealing interfaces with glassmorphism effects.

GlassCard

A versatile card component with glassmorphism styling and optional hover effects.

Features

• Semi-transparent background with backdrop blur
• Optional hover animations (scale, translate, shadow)
• Flexible children composition
• Custom className support
• Consistent rounded corners and padding

Usage

import { GlassCard } from '../components/ui/GlassCard';

function MyComponent() {
  return (
    <GlassCard hoverEffect>
      <h3>Card Title</h3>
      <p>Card content goes here</p>
    </GlassCard>
  );
}

Props

children · ReactNode · required

The content to be rendered inside the card

className · string · default: "''"

Additional CSS classes to apply to the card. These will be merged with the base classes.

hoverEffect · boolean · default: "false"

Enable hover animations including scale, translate, and shadow effects

TypeScript Interface

interface GlassCardProps {
  children: ReactNode;
  className?: string;
  hoverEffect?: boolean;
}

Styling

The GlassCard applies the following base styles:

className={`
  glass-panel rounded-2xl p-6 transition-all duration-300
  ${hoverEffect ? 'hover:bg-white/5 hover:-translate-y-1 hover:shadow-lg hover:shadow-brand-green/10' : ''}
  ${className}
`}

Hover Effect

When hoverEffect={true}, the card will:

• Increase background opacity slightly
• Translate upward by 4px (-translate-y-1)
• Add a large shadow with green tint

Examples

Basic Card

<GlassCard>
  <h2>Simple Card</h2>
  <p>No hover effects</p>
</GlassCard>

Card with Hover Effect

<GlassCard hoverEffect>
  <h2>Interactive Card</h2>
  <p>Hover over me!</p>
</GlassCard>

Card with Custom Classes

<GlassCard className="bg-black/40 border-l-4 border-l-brand-green">
  <h2>Custom Styled Card</h2>
  <p>With additional styling</p>
</GlassCard>

Real-World Usage from Home Page

// From pages/Home.tsx:230
<GlassCard 
  key={item.id} 
  hoverEffect 
  className="text-center py-12 border-brand-green/30 shadow-[0_0_20px_rgba(86,181,1,0.1)]"
>
  <div className={`mx-auto w-20 h-20 rounded-full flex items-center justify-center mb-6 ${item.iconBg}`}>
    <item.icon className={`h-10 w-10 ${item.iconColor}`} />
  </div>
  <h3 className="text-2xl font-bold text-white mb-4">{item.title}</h3>
  <p className="text-glass-muted mb-4">{item.description}</p>
  <span className="text-brand-green font-medium block">{item.result}</span>
</GlassCard>

Component Location

components/ui/GlassCard.tsx:9

---

BackgroundBlobs

Decorative background component that adds animated gradient blobs for visual interest.

Features

• Fixed positioning covering entire viewport
• Non-interactive (pointer-events-none)
• Multiple colored gradient spheres
• Mix-blend modes for visual effects
• Pulse animation on one blob
• z-index 0 to stay behind content

Usage

import { BackgroundBlobs } from '../components/ui/BackgroundBlobs';

function App() {
  return (
    <div>
      <BackgroundBlobs />
      {/* Your content goes here */}
    </div>
  );
}

Props

This component does not accept any props.

Implementation

export const BackgroundBlobs: React.FC = () => {
  return (
    <div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
      <div className="blob bg-zinc-600/20 w-96 h-96 rounded-full top-0 left-0 -translate-x-1/2 -translate-y-1/2 mix-blend-screen animate-pulse duration-[10000ms]"></div>
      <div className="blob bg-brand-green/10 w-[500px] h-[500px] rounded-full bottom-0 right-0 translate-x-1/3 translate-y-1/3 mix-blend-screen"></div>
      <div className="blob bg-gray-500/10 w-80 h-80 rounded-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 mix-blend-overlay"></div>
    </div>
  );
};

Blob Details

The component renders three gradient blobs:

Blob 1 (Top-Left)

• Color: Zinc gray with 20% opacity
• Size: 384px × 384px (w-96 h-96)
• Position: Top-left corner, offset by -50% in both directions
• Effect: mix-blend-screen with 10-second pulse animation

Blob 2 (Bottom-Right)

• Color: Brand green with 10% opacity
• Size: 500px × 500px
• Position: Bottom-right corner, offset by +33% in both directions
• Effect: mix-blend-screen

Blob 3 (Center)

• Color: Gray with 10% opacity
• Size: 320px × 320px (w-80 h-80)
• Position: Perfectly centered
• Effect: mix-blend-overlay

Styling Classes

blob · className

Custom class for styling individual blobs. Should be defined in your CSS with position: absolute and filter: blur().

CSS Requirements

You’ll need to define the .blob class in your global CSS:

.blob {
  position: absolute;
  filter: blur(80px);
}

Mix Blend Modes

• mix-blend-screen: Brightens the background, useful for light-colored blobs
• mix-blend-overlay: Combines multiply and screen based on background color

Z-Index Layering

The component uses z-0 to ensure it stays behind all content. Make sure your content has a higher z-index:

<div className="relative z-10">
  {/* Your content will appear above the blobs */}
</div>

Pointer Events

The pointer-events-none class ensures the blobs don’t interfere with user interactions like clicking or hovering.

Animation

The first blob uses Tailwind’s animate-pulse with a custom duration:

className="animate-pulse duration-[10000ms]"

This creates a slow, subtle pulsing effect over 10 seconds.

Component Location

components/ui/BackgroundBlobs.tsx:3

---

Design System Integration

Both UI components follow the VENCOL design system:

Color Palette

• brand-green: Primary accent color (green)
• brand-dark: Dark background color
• glass-muted: Muted text color for secondary content
• white/[opacity]: White with various opacity levels

Glass Effects

The glass-panel class provides the glassmorphism effect:

.glass-panel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

Common Patterns

1. Responsive Spacing: Use Tailwind’s responsive utilities
2. Smooth Transitions: transition-all duration-300
3. Rounded Corners: rounded-2xl or rounded-3xl
4. Subtle Borders: border-white/5 or border-white/10

Best Practices

1. Use GlassCard for content containers - Provides consistent styling
2. Enable hoverEffect on interactive cards - Improves user experience
3. Place BackgroundBlobs at app root - Ensures consistent background
4. Layer content with z-index - Keep content above decorative elements
5. Combine with custom classes - GlassCard’s className prop allows customization