UI Components - VENCOL Front Template

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

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

Best Practices

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

Get Started

Core Concepts

Components

Pages

Guides

Documentation Index

​GlassCard

​Features

​Usage

​Props

​TypeScript Interface

​Styling

​Hover Effect

​Examples

​Basic Card

​Card with Hover Effect

​Card with Custom Classes

​Real-World Usage from Home Page

​Component Location

​BackgroundBlobs

​Features

​Usage

​Props

​Implementation

​Blob Details

​Blob 1 (Top-Left)

​Blob 2 (Bottom-Right)

​Blob 3 (Center)

​Styling Classes

​CSS Requirements

​Mix Blend Modes

​Z-Index Layering

​Pointer Events

​Animation

​Component Location

​Design System Integration

​Color Palette

​Glass Effects

​Common Patterns

​Best Practices

Build docs developers (and LLMs) love

GlassCard

Features

Usage

Props

TypeScript Interface

Styling

Hover Effect

Examples

Basic Card

Card with Hover Effect

Card with Custom Classes

Real-World Usage from Home Page

Component Location

BackgroundBlobs

Features

Usage

Props

Implementation

Blob Details

Blob 1 (Top-Left)

Blob 2 (Bottom-Right)

Blob 3 (Center)

Styling Classes

CSS Requirements

Mix Blend Modes

Z-Index Layering

Pointer Events

Animation

Component Location

Design System Integration

Color Palette

Glass Effects

Common Patterns

Best Practices