Original 2025 frontend implementation designed and developed for a Chilean corporate training company.
Important
This repository preserves the original frontend implementation delivered for Edvance in 2025.
The client later replaced the production website with a different design and implementation. Therefore, the current official Edvance website may not match the interface or source code contained in this repository.
This version is maintained as a professional portfolio project. The original design and development process are documented in the Edvance case study.
Edvance is a Chilean company focused on corporate training, organizational development and digital transformation services.
The project consisted of designing and developing an institutional landing page that clearly communicated the company's services and generated business inquiries through a contact form.
The website was built as a responsive single-page experience with a strong focus on:
- Professional and trustworthy visual communication
- Clear presentation of the company's services
- Responsive behavior across desktop and mobile devices
- Reusable React components
- Interactive sliders and visual content
- Direct lead generation through a contact form
I was responsible for the frontend design and development of the original website.
My work included:
- Translating the client's initial references into a complete interface
- Designing the visual structure of each section
- Presenting alternative uses of the brand identity
- Implementing the selected design with React
- Building reusable interface components
- Creating responsive desktop and mobile layouts
- Integrating the contact form with the client's backend endpoint
- Preparing the project for deployment and future expansion
- Navigation — Responsive header with links to the main content areas
- Hero — Institutional messaging, calls to action and animated image sliders
- Company information — Presentation of Edvance, its mission and its vision
- Services — Interactive slider describing the company's primary services
- Contact — Lead-generation form connected to the original client API
- Responsive single-page layout
- Component-based React architecture
- Reusable buttons, cards and form controls
- Smooth scrolling between page sections
- Text carousel with navigation controls
- Automatic vertical image sliders
- Interactive services carousel
- Responsive desktop and mobile navigation
- Contact form with controlled React inputs
- REST API form submission
- Shared visual tokens through CSS variables
- Custom layouts and responsive breakpoints
- Styled Components for component-level styling
- React
- JavaScript
- Vite
- Styled Components
- CSS3
- CSS variables
- Responsive media queries
- Swiper
- React Icons
- ESLint
- npm
- Git
- GitHub
The interface was divided into independent sections and reusable components.
Common interface elements such as buttons, cards, inputs and text areas were implemented separately to improve consistency and reduce duplicated code.
The page is organized into dedicated sections:
HeroSectionCardsSectionServiceSectionContactSection
This separation keeps the main application component small and makes each area of the landing page easier to understand and maintain.
Styled Components were used to keep styles close to their corresponding components.
Shared typography, colors, gradients and shadows are managed through CSS variables, helping maintain a consistent visual system across the website.
Desktop and mobile layouts use dedicated responsive rules.
The navigation, hero sliders, content cards, typography and spacing adapt to smaller screens without requiring separate page implementations.
Swiper is used for:
- Rotating hero messages
- Vertical autoplay image galleries
- Service presentation
- Navigation controls between slides
Edvance/
├── public/
│
├── src/
│ ├── assets/
│ │ ├── icons/
│ │ ├── images/
│ │ └── pattern/
│ │
│ ├── components/
│ │ ├── Button.jsx
│ │ ├── Card.jsx
│ │ ├── Form.jsx
│ │ ├── Input.jsx
│ │ ├── Menu.jsx
│ │ ├── Navbar.jsx
│ │ └── TextArea.jsx
│ │
│ ├── sections/
│ │ ├── CardsSection.jsx
│ │ ├── ContactSection.jsx
│ │ ├── HeroSection.jsx
│ │ └── ServiceSection.jsx
│ │
│ ├── styles/
│ ├── App.css
│ ├── App.jsx
│ └── main.jsx
│
├── index.html
├── package.json
├── vite.config.js
└── eslint.config.js
- Node.js
- npm
- Git
Clone the repository:
git clone https://github.com/Gxbito/Edvance.gitEnter the project directory:
cd EdvanceInstall the dependencies:
npm installStart the development server:
npm run devOpen the local URL displayed by Vite in the terminal.
| Command | Description |
|---|---|
npm run dev |
Starts the Vite development server |
npm run build |
Creates an optimized production build |
npm run preview |
Serves the production build locally |
npm run lint |
Runs ESLint across the project |
The contact form was originally connected to an API endpoint provided by the client.
That external service is not part of this repository and may no longer be available after the production website was replaced.
Before deploying this project, the form endpoint should be replaced with a currently active API or form service.
This repository represents the original version delivered in 2025.
It is not the source code of the current Edvance production website and should be evaluated as a historical client implementation and frontend case study.
A detailed explanation of the project, its design process and the delivered interface is available here:
This repository is publicly available for portfolio presentation and technical review purposes.
The Edvance name, logo, written content, photographs and related brand assets belong to their respective owners.
No permission is granted to reuse those assets or present this project as an official or current Edvance website.
Frontend Developer focused on building responsive, maintainable and visually polished web interfaces.
Original frontend implementation developed in 2025.