> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/Mich9025/vencol-front/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```tsx theme={null}
import { GlassCard } from '../components/ui/GlassCard';

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

### Props

<ParamField path="children" type="ReactNode" required>
  The content to be rendered inside the card
</ParamField>

<ParamField path="className" type="string" default="''">
  Additional CSS classes to apply to the card. These will be merged with the base classes.
</ParamField>

<ParamField path="hoverEffect" type="boolean" default="false">
  Enable hover animations including scale, translate, and shadow effects
</ParamField>

### TypeScript Interface

```typescript theme={null}
interface GlassCardProps {
  children: ReactNode;
  className?: string;
  hoverEffect?: boolean;
}
```

### Styling

The GlassCard applies the following base styles:

```tsx theme={null}
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

```tsx theme={null}
<GlassCard>
  <h2>Simple Card</h2>
  <p>No hover effects</p>
</GlassCard>
```

#### Card with Hover Effect

```tsx theme={null}
<GlassCard hoverEffect>
  <h2>Interactive Card</h2>
  <p>Hover over me!</p>
</GlassCard>
```

#### Card with Custom Classes

```tsx theme={null}
<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

```tsx theme={null}
// 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

```tsx theme={null}
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

```tsx theme={null}
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

<ParamField path="blob" type="className">
  Custom class for styling individual blobs. Should be defined in your CSS with `position: absolute` and `filter: blur()`.
</ParamField>

### CSS Requirements

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

```css theme={null}
.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:

```tsx theme={null}
<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:

```tsx theme={null}
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:

```css theme={null}
.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