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 Services page is served at the /project route and is powered by two components: Projects.js (the page wrapper) and ProjectCards.js (the individual card). In the current dental customization the page is titled Recientes Tratamientos and displays six dental service cards, but the generic card-grid layout works equally well for portfolio items, product listings, or any other content you want to showcase with a thumbnail, description, and action button.

​
ProjectCards props

ProjectCards is a presentational component that receives all its data via props. It renders a Bootstrap <Card> with a top image, a title, a body description, and one or two action buttons.
PropTypeRequiredDescription
imgPathimage importYesThumbnail displayed at the top of the card via <Card.Img variant="top">
isBlogbooleanYesWhen true, the primary button label is “Blog”; when false, it shows “Cita”
titlestringYesCard heading rendered as <Card.Title>
descriptionstringYesBody text rendered inside <Card.Text> with textAlign: "justify"
ghLinkstringYeshref for the primary action button (internal route or external URL)
demoLinkstringNohref for an optional secondary “Demo” button; the button is hidden entirely when this prop is absent or an empty string
The conditional demo button logic inside ProjectCards.js:
src/components/Projects/ProjectCards.js
{!props.isBlog && props.demoLink && (
  <Button
    variant="primary"
    href={props.demoLink}
    target="_blank"
    style={{ marginLeft: "10px" }}
  >
    <CgWebsite /> &nbsp;
    {"Demo"}
  </Button>
)}
The button only renders when both isBlog is false and demoLink is a non-empty, truthy string.

​
Adding a new service card

1

Import your image

Add your image file to src/Assets/Projects/ and import it at the top of Projects.js:
src/components/Projects/Projects.js
import yourImage from "../../Assets/Projects/your-image.png";
2

Add a new Col + ProjectCard block

Copy the pattern below and paste it inside the <Row> in Projects.js. Update every prop to match your new service:
src/components/Projects/Projects.js
<Col md={4} className="project-card">
  <ProjectCard
    imgPath={yourImage}
    isBlog={false}
    title="Your Service Title"
    description="A short description of this service or project."
    ghLink="/about"
    demoLink="https://example.com/demo"
  />
</Col>
3

Adjust ghLink and demoLink

Set ghLink to the internal booking route (e.g. "/about") or an external URL. If there is no demo, omit demoLink entirely or leave it as an empty string — the Demo button will not render.

​
Current services

The six cards defined in the current source are:
TitleDescription summary
Blanqueamiento Estético DentalWhitening procedure that lightens stained or discoloured teeth; performed in a single 30–60 min office session
Endodoncia DentalRoot canal treatment that preserves teeth affected at the nerve (pulp) and its surrounding tissue, avoiding extraction
Resinas de EsteticaAesthetic resin solution for small imperfections, minor fractures, cavities, colour irregularities, and misshapen or small teeth
Carillas DentalesCustom thin-porcelain veneers made to measure, bonded to the front surface of teeth to close gaps, cover stains, or correct mild misalignment
OrtodonciaAlignment treatment using metal brackets, aesthetic brackets, ligature-free brackets, or fully transparent aligner systems
Peridoncia DentalGum health care that diagnoses and treats tartar, gingivitis, and periodontitis to prevent tooth loss
All six cards currently set ghLink="/about" so the primary Cita button routes the user to the appointments page. Update any ghLink value to point to a different route or external booking URL as needed.

​
Layout

The cards are arranged in a Bootstrap <Row> where each <Col> uses md={4}. This produces a three-column grid on desktop (≥ 768 px). On smaller screens Bootstrap stacks each <Col> to full width, giving a single-column list on mobile.
src/components/Projects/Projects.js
<Row style={{ justifyContent: "center", paddingBottom: "10px" }}>
  <Col md={4} className="project-card">
    {/* card */}
  </Col>
  <Col md={4} className="project-card">
    {/* card */}
  </Col>
  <Col md={4} className="project-card">
    {/* card */}
  </Col>
</Row>
To display two columns on desktop instead of three, change md={4} to md={6}. For a four-column grid use md={3}.
See /customization/content for a step-by-step walkthrough of editing card text, swapping images, and reordering the service cards.

Build docs developers (and LLMs) love

Get started for freeTalk to us