Customization

Overview

This guide will walk you through common customization tasks for ESBO Web, from changing brand colors to adding new sections and features.

Changing Brand Colors

Open Tailwind Configuration

Navigate to tailwind.config.js in the project root:

tailwind.config.js

export default {
  theme: {
    extend: {
      colors: {
        'institucional-dorado': '#c29b47',
        'institucional-claro': '#fdfaf5',
      }
    },
  },
}

Update Color Values

Replace the hex color codes with your brand colors:

tailwind.config.js

colors: {
  'institucional-dorado': '#YOUR_PRIMARY_COLOR',
  'institucional-claro': '#YOUR_BACKGROUND_COLOR',
}

Update Additional Colors in App.jsx

Some colors are defined as arbitrary values in the component. Search for:

bg-[#0b132b] - Dark navy background
bg-[#d4af37] - Accent gold
bg-[#a3823a] - Hover state gold
text-[#d4af37] - Text accent

Replace these with your colors or add them to tailwind.config.js.

Test Your Changes

Run the development server to see your changes:

npm run dev

The page will automatically reload with your new colors.

To add new custom colors, follow the same pattern in tailwind.config.js and use them with bg-your-color-name or text-your-color-name.

Updating Text Content

Header Text
Hero Text
Feature Text
Contact Info

Change Site Title

In src/App.jsx, find the header section:

src/App.jsx

<h1 className="text-2xl sm:text-3xl font-bold text-institucional-dorado tracking-wide">
  ESBO
</h1>

Replace ESBO with your organization name.

Change Button Text

src/App.jsx

<button className="bg-institucional-dorado text-white px-4 sm:px-6 py-2 rounded-sm font-semibold hover:bg-[#a3823a] transition-colors shadow-sm text-xs sm:text-sm">
  Acceso Estudiantes / Staff
</button>

Update the button text to match your call-to-action.

Update Hero Headings

src/App.jsx

<h2 className="text-white text-3xl md:text-4xl font-bold tracking-widest mb-2 drop-shadow-md">
  SINTEGRA:
</h2>
<h3 className="text-white text-4xl md:text-5xl font-serif mb-10 drop-shadow-md">
  Salud Mental y Formación de Excelencia
</h3>

Replace these with your tagline or mission statement.

Update Hero Buttons

src/App.jsx

<button className="bg-institucional-dorado text-white px-8 py-3 rounded font-bold hover:bg-[#a3823a] transition-colors shadow-lg text-lg">
  Agenda tu Cita
</button>
<button className="bg-white text-institucional-dorado px-8 py-3 rounded font-bold hover:bg-gray-100 transition-colors shadow-lg text-lg">
  Ver Diplomados y Cursos
</button>

Update Feature Labels

In the icon features section:

src/App.jsx

<p className="font-bold text-gray-800 text-lg">
  Repositorio Académico
</p>

Change each of the three feature labels:

Repositorio Académico
Convenios Internacionales
Validación de Certificados

Update Contact Details

src/App.jsx

<a href="mailto:[email protected]" 
   className="hover:text-[#d4af37] transition-colors text-sm sm:text-base">
  [email protected]
</a>

<a href="tel:+59172160914" 
   className="hover:text-[#d4af37] transition-colors text-sm sm:text-base">
  +591 72160914
</a>

Replace email addresses and phone number with your contact information.

Make sure to update both the display text AND the href attribute for links to work correctly.

Changing Images

Replace Logo

Add your logo file to src/assets/ and update the import:

src/App.jsx

import logo from './assets/your-logo.jpg';

Supported formats: JPG, PNG, SVG, WebP

Update Hero Background Images

Replace the Unsplash URLs with your own images:

src/App.jsx

<div className="w-1/2 h-full bg-cover bg-center" 
     style={{ backgroundImage: "url('YOUR_IMAGE_URL')" }}>
</div>

You can use:

External URLs (Unsplash, CDN, etc.)
Local images in src/assets/ (imported like the logo)
Image optimization services

Update Favicon

Replace public/vite.svg with your favicon and update index.html:

index.html

<link rel="icon" type="image/svg+xml" href="/your-favicon.svg" />

For best performance, optimize images before adding them. Recommended sizes:

Logo: 200x200px or smaller
Hero images: 1920x1080px
Favicon: 32x32px or 64x64px

Locate Social Links Section

Find the social media section in src/App.jsx (around line 97-121):

src/App.jsx

<div className="flex flex-col gap-5">
  <h4 className="text-[#d4af37] font-bold text-xl mb-2 tracking-wide">
    REDES SOCIALES
  </h4>
  {/* Links here */}
</div>

Update Facebook Links

src/App.jsx

<a href="https://www.facebook.com/YOUR_PAGE" 
   target="_blank" 
   rel="noopener noreferrer" 
   className="hover:text-[#d4af37] transition-colors">
  Your Page Name
</a>

Update Instagram Link

src/App.jsx

<a href="https://www.instagram.com/YOUR_HANDLE" 
   target="_blank" 
   rel="noopener noreferrer" 
   className="hover:text-[#d4af37] transition-colors">
  @your_handle
</a>

Add More Social Networks (Optional)

Import additional icons and add new links:

src/App.jsx

import { Facebook, Instagram, Twitter, Linkedin, Youtube } from 'lucide-react';

<div className="flex items-center gap-4">
  <Twitter className="text-white shrink-0" size={22} />
  <a href="https://twitter.com/YOUR_HANDLE" 
     target="_blank" 
     rel="noopener noreferrer" 
     className="hover:text-[#d4af37] transition-colors">
    @your_handle
  </a>
</div>

Browse all available Lucide icons at lucide.dev to find icons for other social networks.

Modifying Sections

Rearrange Sections

Sections in App.jsx are ordered as:

Header (line 11-22)
Hero (line 25-39)
Icon Features (line 42-65)
Contact (line 68-124)
Footer (line 127-135)
Floating Chat Button (line 138-140)

To rearrange, simply cut and paste the entire <section> or <header> block to a new position.

Add a New Section

Choose Section Location

Decide where your new section should appear in the page flow.

Create Section Element

Add a new <section> element:

src/App.jsx

<section className="bg-white py-16 px-8">
  <div className="max-w-6xl mx-auto">
    <h2 className="text-3xl font-bold text-center text-institucional-dorado mb-8">
      Your Section Title
    </h2>
    {/* Your content here */}
  </div>
</section>

Add Content

Use existing patterns from other sections:

Flexbox layouts for columns
Icons from Lucide React
Consistent spacing and colors
Responsive classes

Remove a Section

Simply delete the entire <section> block you want to remove. Make sure to:

Remove any unused icon imports at the top
Check that z-index layering still works
Test responsive layout

Customizing Icons

Browse Available Icons

Visit lucide.dev to browse thousands of icons.

Import Icon

Add the icon name to your imports:

src/App.jsx

import { BookOpen, Globe, Award, Heart } from 'lucide-react';

Use Icon in Component

src/App.jsx

<div className="text-institucional-dorado mb-4">
  <Heart size={50} strokeWidth={1.5} />
</div>

Customize with props:

size: Icon size in pixels
strokeWidth: Line thickness (1-3)
color: Override color (not recommended, use Tailwind classes)

Style with Tailwind

Icons inherit color from parent element:

<div className="text-institucional-dorado">  {/* Gold icon */}
  <Heart size={50} />
</div>

<div className="text-white">  {/* White icon */}
  <Heart size={50} />
</div>

Button Customization

Button Styles
Secondary Button
Small Button
Add Links

Primary Button

<button className="
  bg-institucional-dorado
  text-white
  px-8 py-3
  rounded
  font-bold
  hover:bg-[#a3823a]
  transition-colors
  shadow-lg
  text-lg
">
  Your Text
</button>

<button className="
  bg-white
  text-institucional-dorado
  px-8 py-3
  rounded
  font-bold
  hover:bg-gray-100
  transition-colors
  shadow-lg
  text-lg
">
  Your Text
</button>

<button className="
  bg-institucional-dorado
  text-white
  px-4 sm:px-6
  py-2
  rounded-sm
  font-semibold
  hover:bg-[#a3823a]
  transition-colors
  shadow-sm
  text-xs sm:text-sm
">
  Your Text
</button>

To make buttons functional, wrap them in links or add onClick:

{/* External link */}
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  <button className="...">
    Visit Website
  </button>
</a>

{/* Internal link */}
<a href="#contact">
  <button className="...">
    Contact Us
  </button>
</a>

{/* JavaScript action */}
<button 
  onClick={() => alert('Clicked!')} 
  className="...">
  Click Me
</button>

Making the Chat Button Functional

The floating chat button is currently decorative. To make it functional:

Add onClick Handler

src/App.jsx

<div 
  onClick={() => window.open('https://wa.me/59172160914', '_blank')}
  className="fixed bottom-6 right-6 bg-[#d4af37] text-white w-14 h-14 rounded-full flex items-center justify-center shadow-2xl cursor-pointer hover:bg-yellow-500 transition-colors z-50 border-2 border-white">
  <MessageCircle size={28} />
</div>

This opens WhatsApp with your phone number.

Alternative: Open Chat Widget

If using a chat service like Intercom, Crisp, or Tawk.to:

<div 
  onClick={() => {
    if (window.Intercom) {
      window.Intercom('show');
    }
  }}
  className="...">
  <MessageCircle size={28} />
</div>

Alternative: Scroll to Contact

<div 
  onClick={() => {
    document.getElementById('contact').scrollIntoView({ 
      behavior: 'smooth' 
    });
  }}
  className="...">
  <MessageCircle size={28} />
</div>

Don’t forget to add id="contact" to your contact section.

Responsive Design Tips

Mobile-First Approach

Start with mobile styles, then add larger breakpoints:

{/* Base styles for mobile */}
<div className="text-sm px-4 flex-col">
  {/* Content */}
</div>

{/* Add tablet styles */}
<div className="text-sm sm:text-base px-4 sm:px-8 flex-col sm:flex-row">
  {/* Content */}
</div>

Hide Elements on Mobile

Use responsive display utilities:

{/* Hidden on mobile, visible on desktop */}
<div className="hidden md:block">
  Desktop only content
</div>

{/* Visible on mobile, hidden on desktop */}
<div className="block md:hidden">
  Mobile only content
</div>

Responsive Text Sizes

<h1 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl">
  Scales across all screen sizes
</h1>

Responsive Spacing

<section className="py-8 sm:py-12 md:py-16 px-4 sm:px-8 md:px-12">
  {/* Content with responsive padding */}
</section>

Testing Your Changes

Development Server

Run the dev server to see changes in real-time:

npm run dev

Open http://localhost:5173 in your browser.

Test Responsive Design

Open browser DevTools (F12)
Click device toolbar icon
Test on various screen sizes
Check mobile, tablet, and desktop views

Build for Production

When ready to deploy:

npm run build

This creates optimized files in the dist/ folder.

Preview Production Build

Test the production build locally:

npm run preview

Common Customization Recipes

Change Page Title

Edit index.html:

<title>Your Site Name</title>

Add Google Fonts

Add to index.html <head>:

<link href="https://fonts.googleapis.com/css2?family=Your+Font" rel="stylesheet">

Then use in tailwind.config.js

Add Analytics

Add tracking code to index.html before </head>

Enable Dark Mode

Add darkMode: 'class' to tailwind.config.js and use dark: prefix

Getting Help

Tailwind CSS Docs: tailwindcss.com/docs
React Docs: react.dev
Lucide Icons: lucide.dev
Vite Docs: vitejs.dev

Next Steps

Project Structure

Understand the codebase organization

Components

Deep dive into React components

Get Started

Development

Deployment

Reference

Overview

Changing Brand Colors

Updating Text Content

Change Site Title

Change Button Text

Update Hero Headings

Update Hero Buttons

Update Feature Labels

Update Contact Details

Changing Images

Modifying Sections

Rearrange Sections

Add a New Section

Remove a Section

Customizing Icons

Button Customization

Primary Button

Making the Chat Button Functional

Responsive Design Tips

Testing Your Changes

Common Customization Recipes

Change Page Title

Add Google Fonts

Add Analytics

Enable Dark Mode

Getting Help

Next Steps

Project Structure

Components

Build docs developers (and LLMs) love

Get Started

Development

Deployment

Reference

​Overview

​Changing Brand Colors

​Updating Text Content

​Change Site Title

​Change Button Text

​Update Hero Headings

​Update Hero Buttons

​Update Feature Labels

​Update Contact Details

​Changing Images

​Updating Social Media Links

​Modifying Sections

​Rearrange Sections

​Add a New Section

​Remove a Section

​Customizing Icons

​Button Customization

​Primary Button

​Making the Chat Button Functional

​Responsive Design Tips

​Testing Your Changes

​Common Customization Recipes

Change Page Title

Add Google Fonts

Add Analytics

Enable Dark Mode

​Getting Help

​Next Steps

Project Structure

Components

Build docs developers (and LLMs) love

Overview

Changing Brand Colors

Updating Text Content

Change Site Title

Change Button Text

Update Hero Headings

Update Hero Buttons

Update Feature Labels

Update Contact Details

Changing Images

Updating Social Media Links

Modifying Sections

Rearrange Sections

Add a New Section

Remove a Section

Customizing Icons

Button Customization

Primary Button

Making the Chat Button Functional

Responsive Design Tips

Testing Your Changes

Common Customization Recipes

Getting Help

Next Steps