SectionWrapper Component

A versatile section wrapper with animated backgrounds and gradient variants for creating visually appealing page sections.

Quick Example

Primary Section

This is a primary section with animated background orbs.

Secondary Section

This is a secondary section with different gradient colors.

Dark Section

This is a dark section with subtle background effects.

<SectionWrapper variant="primary">
  <h3>Primary Section</h3>
  <p>Content goes here</p>
</SectionWrapper>

<SectionWrapper variant="secondary">
  <h3>Secondary Section</h3>
  <p>Content goes here</p>
</SectionWrapper>

<SectionWrapper variant="dark">
  <h3>Dark Section</h3>
  <p>Content goes here</p>
</SectionWrapper>

Props

Prop	Type	Default	Description
variant	'primary' \| 'secondary' \| 'dark'	'primary'	The visual variant of the section
class	string	''	Additional CSS classes

Variants

Primary Variant

Features a blue-purple gradient background with animated orbs.

Welcome Section

This is perfect for hero sections or important content areas.

<SectionWrapper variant="primary">
  <div class="text-center">
    <h4>Welcome Section</h4>
    <p>This is perfect for hero sections.</p>
    <Button variant="primary">Get Started</Button>
  </div>
</SectionWrapper>

Secondary Variant

Features a purple-pink gradient background with animated orbs.

Features Section

Great for highlighting features or secondary content.

<SectionWrapper variant="secondary">
  <div class="text-center">
    <h4>Features Section</h4>
    <p>Great for highlighting features.</p>
    <Button variant="secondary">Learn More</Button>
  </div>
</SectionWrapper>

Dark Variant

Features a dark background with subtle animated effects.

About Section

Perfect for content sections that need a subtle background.

<SectionWrapper variant="dark">
  <div class="text-center">
    <h4>About Section</h4>
    <p>Perfect for content sections.</p>
    <Button variant="outline">Contact Us</Button>
  </div>
</SectionWrapper>

Features

🎨 Animated Backgrounds

Each variant includes animated orbs that move smoothly across the background.

🌈 Gradient Overlays

Beautiful gradient overlays that enhance the visual appeal of content.

📱 Responsive Design

Fully responsive and adapts to different screen sizes seamlessly.

⚡ Performance Optimized

CSS animations are optimized for smooth performance across devices.

Animation Details

Floating Orbs

Each section includes animated orbs that float across the background:

• Multiple orbs with different sizes and colors
• Smooth floating animation with varying speeds
• Blur effects for depth and visual interest
• Opacity variations for subtle layering

Performance Considerations

Animations are optimized for performance:

• Uses CSS transforms for hardware acceleration
• Reduced motion support for accessibility
• Efficient keyframe animations
• Minimal impact on page performance

Common Use Cases

Hero Sections

Use the primary variant for impactful hero sections.

<SectionWrapper variant="primary" class="min-h-screen flex items-center">
  <div class="container mx-auto text-center">
    <h1>Welcome to My Portfolio</h1>
    <p>Full-stack developer and designer</p>
    <Button>View My Work</Button>
  </div>
</SectionWrapper>

Feature Sections

Use the secondary variant for highlighting features or services.

<SectionWrapper variant="secondary" class="py-20">
  <div class="container mx-auto">
    <h2>My Services</h2>
    <div class="grid md:grid-cols-3 gap-8">
      
    </div>
  </div>
</SectionWrapper>

Content Sections

Use the dark variant for content-heavy sections.

<SectionWrapper variant="dark" class="py-16">
  <div class="container mx-auto">
    <h2>About Me</h2>
    <p>Detailed content about experience and background...</p>
  </div>
</SectionWrapper>

Usage Examples

Basic Usage

<SectionWrapper>
  <h2>Section Title</h2>
  <p>Section content</p>
</SectionWrapper>

With Custom Classes

<SectionWrapper variant="secondary" class="py-20 px-4">
  <div class="max-w-4xl mx-auto">
    <h2>Centered Content</h2>
    <p>Content with custom spacing</p>
  </div>
</SectionWrapper>

Full Height Section

<SectionWrapper variant="primary" class="min-h-screen flex items-center justify-center">
  <div class="text-center">
    <h1>Full Height Hero</h1>
    <Button>Call to Action</Button>
  </div>
</SectionWrapper>

Import

import SectionWrapper from '../ui/atoms/SectionWrapper.astro';