Skip to main content

​
About Page Component

The About page (pages/About.tsx) presents detailed information about VENCOL, including company history, values, and partnerships.

​
Purpose

The About page serves to:
  • Communicate the company’s mission and values
  • Display the 3P’s methodology (Personas, Planeta, Producto)
  • Showcase experience and expertise
  • Present partner relationships
  • Build trust with potential clients

​
Data Sources

​
Static Content

import { siteContent } from '../data/data';

const { about, home } = siteContent;
The component uses two main data sources:
  • siteContent.about - About page-specific content (hero section, meta tags)
  • siteContent.home - Shared content reused from home page (about section, 3P’s, partners)
The About page reuses several sections from the Home page data structure to maintain consistency across the application.

​
Page Structure

The About page consists of three main sections:

​
1. Hero Section

Full-width hero with background image and page introduction: 
<div className="relative h-[60vh] min-h-[500px]">
  <div className="absolute inset-0 z-0">
    <img src={about.hero.image} alt="About Hero" />
    <div className="absolute inset-0 bg-brand-dark/80 backdrop-blur-[2px]" />
    <div className="absolute inset-0 bg-gradient-to-b from-transparent to-brand-dark" />
  </div>
  
  <div className="relative z-10 max-w-5xl mx-auto px-4 text-center">
    <div className="inline-flex items-center px-4 py-1.5 rounded-full">
      <span className="w-2 h-2 rounded-full bg-brand-green animate-pulse" />
      <span>{about.hero.badge}</span>
    </div>
    <h1>{about.hero.title}</h1>
    <p>{about.hero.description}</p>
  </div>
</div>
Location: pages/About.tsx:18-46 Features:
  • Background image with dark overlay
  • Gradient overlay for text readability
  • Animated badge indicator
  • Responsive text sizing

​
2. Content Section

Two-column layout showcasing company information: Left Column - Image:
  • Company team/office image
  • Animated experience badge overlay
  • Hover effects (grayscale to color transition)
  • Decorative background blurs
Right Column - Content:
  • Company description
  • Highlighted quote in glassmorphic card
  • Feature list with checkmarks
  • Company values and mission
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
  {/* Left: Image with badge */}
  <div className="relative group">
    <img 
      src={home.about.image} 
      className="grayscale-[20%] group-hover:grayscale-0 transition-all"
    />
    <div className="absolute bottom-6 right-6 glass-panel">
      <Sparkles className="w-5 h-5" />
      <p>{home.about.experienceBadge.text}</p>
      <p>{home.about.experienceBadge.value}</p>
    </div>
  </div>

  {/* Right: Content */}
  <div className="space-y-8">
    <p>{home.about.description}</p>
    
    {/* Quote Card */}
    <GlassCard className="border-l-4 border-l-brand-green">
      <Quote className="text-brand-green" />
      <p>"{home.about.quote}"</p>
    </GlassCard>
    
    {/* Features */}
    {home.about.features.map((feature) => (
      <div className="flex items-center">
        <Check className="text-brand-green" />
        <span>{feature}</span>
      </div>
    ))}
  </div>
</div>
Location: pages/About.tsx:51-134

​
3. The 3P’s Section

Displays the company’s core methodology - Personas, Planeta, Producto: 
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
  {home.threePs.items.map((item) => (
    <GlassCard key={item.id} hoverEffect className="text-center py-12">
      <div className="absolute inset-0 z-[-1]">
        <img src={item.bgImage} className="w-full h-full object-cover" />
        <div className="absolute inset-0 bg-brand-dark/80 backdrop-blur-[2px]" />
      </div>
      
      <div className={`w-20 h-20 rounded-full ${item.iconBg}`}>
        <item.icon className={`h-10 w-10 ${item.iconColor}`} />
      </div>
      
      <h3>{item.title}</h3>
      <p>{item.description}</p>
      <span className="text-brand-green">{item.result}</span>
    </GlassCard>
  ))}
</div>
Location: pages/About.tsx:136-169 Data Structure: 
interface ThreePItem {
  id: string;
  title: string;
  description: string;
  result: string;
  icon: LucideIcon;
  iconBg: string;      // Tailwind classes for background
  iconColor: string;   // Tailwind classes for icon color
  bgImage: string;     // Background image URL
}

​
4. Partners Section

Infinite scrolling marquee of partner logos: 
<div className="animate-marquee whitespace-nowrap flex gap-16 items-center">
  {home.partners.logos.map((logo, index) => (
    <div key={`p1-${index}`} className="w-32 h-32 bg-white rounded-xl">
      <img src={logo} alt="Partner Logo" className="grayscale hover:grayscale-0" />
    </div>
  ))}
  {/* Duplicate for seamless loop */}
  {home.partners.logos.map((logo, index) => (
    <div key={`p2-${index}`} className="w-32 h-32 bg-white rounded-xl">
      <img src={logo} alt="Partner Logo" />
    </div>
  ))}
</div>
Location: pages/About.tsx:172-202

​
Components Used

​
GlassCard

Glassmorphic card component for modern UI: 
import { GlassCard } from '../components/ui/GlassCard';

<GlassCard className="bg-black/40 border-l-4 border-l-brand-green" hoverEffect>
  {children}
</GlassCard>
Props:
  • className - Additional Tailwind classes
  • hoverEffect - Enable hover animations
  • children - Card content

​
SEO Component

SEO meta tags for the About page: 
import { SEO } from '../components/SEO';

<SEO 
  title={about.meta.title} 
  description={about.meta.description} 
  image={about.hero.image}
/>

​
Icons

Lucide React icons used: 
import { ArrowRight, Quote, Check, Sparkles, Shield } from 'lucide-react';

​
Styling Patterns

​
Glassmorphism

The page extensively uses glassmorphic design: 
/* Applied via glass-panel class */
backdrop-blur-md
bg-white/5
border border-white/10

​
Gradient Overlays

/* Hero section */
bg-gradient-to-b from-transparent to-brand-dark

/* Cards */
bg-gradient-to-br from-emerald-950/50 to-brand-green/10

​
Hover Effects

// Image grayscale transition
className="grayscale-[20%] group-hover:grayscale-0 transition-all duration-500"

// Card hover
className="hover:bg-white/5 hover:-translate-y-1 hover:shadow-lg"

​
Responsive Design

  • Single column layout
  • Stacked sections
  • Reduced text sizes
  • Full-width images

​
Code Example

import React from 'react';
import { GlassCard } from '../components/ui/GlassCard';
import { Quote, Check, Sparkles, Shield } from 'lucide-react';
import { siteContent } from '../data/data';
import { SEO } from '../components/SEO';

export const About: React.FC = () => {
  const { about, home } = siteContent;
  
  return (
    <div className="min-h-screen bg-brand-dark">
      <SEO 
        title={about.meta.title} 
        description={about.meta.description} 
        image={about.hero.image}
      />
      
      {/* Hero Section */}
      {/* Content Section */}
      {/* 3P's Section */}
      {/* Partners Section */}
    </div>
  );
};
The About page is accessed via:
  • Navigation menu: /nosotros
  • Home page CTA button
  • Footer links

Build docs developers (and LLMs) love

Get started for freeTalk to us