Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/luislopez-stack/landing-pages/llms.txt

Use this file to discover all available pages before exploring further.

The Appointments page is served at the /about route and is the primary contact and booking surface for the dental practice. It is built from two components: About.js (the page layout wrapper) and AboutCard.js (the contact card with address, WhatsApp instructions, and call-to-action items). The page heading reads “Realiza Cita” by default and is intended to be the destination users land on after clicking any Cita button across the site.

​
About component

About.js renders a full-width Bootstrap container with a <Particle> background and a two-column row. Left column (md={7}) — contains the page heading and the <Aboutcard> component with all contact copy:
src/components/About/About.js
<Col md={7} style={{ justifyContent: "center", paddingTop: "30px", paddingBottom: "50px" }}>
  <h1 style={{ fontSize: "2.1em", paddingBottom: "20px" }}>
    Realiza <strong className="purple">Cita</strong>
  </h1>
  <Aboutcard />
</Col>
Right column (md={5}) — displays the appointments illustration image imported from src/Assets/citas.png:
src/components/About/About.js
import laptopImg from "../../Assets/citas.png";

<Col md={5} style={{ paddingTop: "120px", paddingBottom: "50px" }} className="about-img">
  <img src={laptopImg} alt="about" className="img-fluid" />
</Col>
The page heading “Realiza Cita” is set as plain JSX text inside About.js. Change Realiza and Cita to any strings that suit your business — for example “Agenda tu” and “Consulta”.

​
AboutCard content

AboutCard.js renders a Bootstrap <Card> with a quote-card-view class containing a <blockquote>. The card has four distinct content areas:
src/components/About/AboutCard.js
import React from "react";
import Card from "react-bootstrap/Card";
import { ImPointRight } from "react-icons/im";

function AboutCard() {
  return (
    <Card className="quote-card-view">
      <Card.Body>
        <blockquote className="blockquote mb-0">
          <p style={{ textAlign: "justify" }}>
            Hola, nos puedes enontrarnos en <span className="purple">Av. direccion </span>
            en <span className="purple"> Aguascalientes.</span>
            <br />
            Recuerda que el equipo esta siempre atento a whatsapp en nuestro horario corporativo.
            <br />
            Podras enviar tus dudas o solicitudes, escribenos directamente!
            Te invitamos a que vivas la experiencia.
            <br /><br />
            Reserva una cita y conocenos!
          </p>
          <ul>
            <li className="about-activity">
              <ImPointRight /> Contactanos
            </li>
            <li className="about-activity">
              <ImPointRight /> Reserva una cita
            </li>
            <li className="about-activity">
              <ImPointRight /> Mejora tu salud bucal
            </li>
          </ul>
          <p style={{ color: "rgb(155 126 172)" }}>
            "Esfuérzate por construir cosas que marquen la diferencia!"{" "}
          </p>
          <footer className="blockquote-footer">Soumyajit</footer>
        </blockquote>
      </Card.Body>
    </Card>
  );
}
The card contains:
  • Introductory paragraph — greets the visitor and shows the practice address. The address placeholders Av. direccion and Aguascalientes are wrapped in <span className="purple"> for visual emphasis. The paragraph also mentions WhatsApp availability during business hours and invites the user to make an appointment.
  • WhatsApp hours note — the sentence “el equipo esta siempre atento a whatsapp en nuestro horario corporativo” informs patients of the communication channel without specifying hours; update this line to include your actual working hours.
  • Three CTA list items — Contactanos, Reserva una cita, and Mejora tu salud bucal are rendered with <ImPointRight> pointer icons from react-icons/im. These act as visual highlights for the three main patient actions.
  • Blockquote footer — a motivational quote and a <footer> attribution currently set to "Soumyajit".

​
Updating contact info

To personalize the card, locate the following lines in AboutCard.js and replace the placeholder values:
src/components/About/AboutCard.js
// Update address — replace the text inside the purple spans
en <span className="purple">Av. direccion </span>
en <span className="purple"> Aguascalientes.</span>

// Update WhatsApp / hours note — edit the sentence directly
Recuerda que el equipo esta siempre atento a whatsapp en nuestro horario corporativo.

// Update or rename CTA list items
<li className="about-activity"><ImPointRight /> Contactanos</li>
<li className="about-activity"><ImPointRight /> Reserva una cita</li>
<li className="about-activity"><ImPointRight /> Mejora tu salud bucal</li>

// Update the blockquote footer attribution
<footer className="blockquote-footer">Soumyajit</footer>
1

Replace the address

Edit the two <span className="purple"> elements inside the intro paragraph with your actual street address and city.
2

Update the WhatsApp line

Replace the WhatsApp sentence with your real business hours and preferred contact channel (e.g. phone number, WhatsApp link via wa.me).
3

Customize the CTA list

Edit, add, or remove <li className="about-activity"> items. Each <ImPointRight /> icon is optional — swap it for any other react-icons icon if preferred.
4

Change the footer attribution

Replace Soumyajit in the <footer> tag with the dentist’s name or the practice name.

​
Appointments image

The right-column image is imported at the top of About.js:
src/components/About/About.js
import laptopImg from "../../Assets/citas.png";
To swap it, either:
  • Replace src/Assets/citas.png with your own image (keeping the same filename), or
  • Change the import path to point to a new file: import laptopImg from "../../Assets/your-image.png".
The className="img-fluid" ensures the image scales responsively within its column.

​
Commented-out features

About.js imports three additional components — Techstack, Toolstack, and Github — that are currently wrapped in a JSX block comment and not rendered:
src/components/About/About.js
{/* <h1 className="project-heading">
  Professional <strong className="purple">Skillset </strong>
</h1>

<Techstack />

<h1 className="project-heading">
  <strong className="purple">Tools</strong> I use
</h1>
<Toolstack />

<Github /> */}
These components were part of the original developer-portfolio template and display tech stack icons and a GitHub contribution graph. If you are adapting the template back to a tech portfolio use case, remove the comment delimiters ({/* and */}) to restore these sections. For a dental or service business site they can be safely left commented out or deleted entirely along with their imports.

Build docs developers (and LLMs) love

Get started for freeTalk to us