Editing Content in Soumyajit Landing Pages

All user-visible copy in the Soumyajit Landing Pages template lives directly inside the component files under src/components/ — there is no CMS, config file, or separate data layer to manage. Every piece of text you want to change is a string or JSX literal inside one of the files below, and the Vite/CRA dev server hot-reloads it instantly as you save.

Hero section (Home.js)

The main greeting and the business owner’s name are hardcoded in src/components/Home/Home.js.

src/components/Home/Home.js

<h1 style={{ paddingBottom: 15 }} className="heading">
  Hola!{" "}
  <span className="wave" role="img" aria-labelledby="wave">
    👋🏻
  </span>
</h1>

<h1 className="heading-name">
  Soy
  <strong className="main-name"> NAYELLI LIZHETT AGUILAR LOPEZ</strong>
</h1>

Replace NAYELLI LIZHETT AGUILAR LOPEZ inside the <strong> tag with your own name or business name. The .main-name class applies a distinct highlight color (set separately from --imp-text-color; see src/style.css → .main-name). The hero image displayed on the right column is imported at the top of the same file:

src/components/Home/Home.js

import homeLogo from "../../Assets/dentista.png";

Swap dentista.png for your own image by replacing the file or updating the import path.

Typewriter strings (Type.js)

The animated typewriter beneath the hero name is controlled entirely by the strings array in src/components/Home/Type.js.

src/components/Home/Type.js

import React from "react";
import Typewriter from "typewriter-effect";

function Type() {
  return (
    <Typewriter
      options={{
        strings: [
          "Consultoria",
          "Limpiezas",
          "Extraciones",
          "",
        ],
        autoStart: true,
        loop: true,
        deleteSpeed: 50,
      }}
    />
  );
}

export default Type;

Edit the strings array to list your own services, roles, or taglines:

src/components/Home/Type.js

strings: [
  "Family Dentistry",
  "Cosmetic Whitening",
  "Orthodontics",
  "Emergency Care",
],

Each string is typed out in sequence, then deleted (at deleteSpeed milliseconds per character) before the next one starts. Set loop: false if you only want the animation to run once.

Business intro (Home2.js)

The “about” block directly beneath the hero — the heading, body paragraph, and social icon row — lives in src/components/Home/Home2.js.

src/components/Home/Home2.js

<h1 style={{ fontSize: "2.6em" }}>
  CONOCE SOBRE<span className="purple"> DENTAL </span>
</h1>
<p className="home-about-body">
  Especializados en tratamientos dentales correctivos y estéticos, preocupados
  por el bienestar y la salud de la sociedad mexicana, ofrecemos alternativas
  con tecnología de punta para garantizar la calidad de nuestro servicio.
  <br />
  <br />
  Todos nuestros tratamientos y servicios se brindan en
  <i>
    <b className="purple"> cómodas instalaciones </b>
  </i>
  <br />
  <br />
  Tratamientos con los más altos&nbsp;
  <i>
    <b className="purple">estándares de calidad. </b>
    y{" "}
    <b className="purple">atencion.</b>
  </i>
</p>

Update the <h1> text and the <p> body to describe your own business. Wrap any words you want highlighted in the accent color with <b className="purple">…</b> or <span className="purple">…</span>. The avatar/tilt image on the right is imported as:

src/components/Home/Home2.js

import myImg from "../../Assets/homeImg.png";

Replace homeImg.png with your own image to update the profile photo in this section.

Services / project cards (Projects.js)

The services grid is built from <ProjectCard> components in src/components/Projects/Projects.js. Here is a representative card:

src/components/Projects/Projects.js

<ProjectCard
  imgPath={chatify}
  isBlog={false}
  title="Blanqueamiento Estético Dental"
  description="El blanqueamiento es un procedimiento que aclara los dientes que están
    manchados, decolorados o que se han oscurecido. El procedimiento se lleva
    a cabo en el consultorio dental y toma de treinta minutos a una hora en
    una sola sesión."
  ghLink="/about"
  demoLink=""
/>

Each prop controls one part of the card:

Prop	Type	Description
`imgPath`	Image import	Card thumbnail image. Import your image at the top of `Projects.js` and pass the variable here.
`isBlog`	`boolean`	When `true`, the primary button label reads “Blog”; when `false` it reads “Cita”.
`title`	`string`	Bold heading displayed on the card.
`description`	`string`	Body text beneath the title. Keep it concise — around 2–3 sentences.
`ghLink`	`string`	URL or internal route for the primary call-to-action button (e.g., `"/about"` or `"https://example.com"`).
`demoLink`	`string` (optional)	URL for a secondary “Demo” button. Omit the prop or pass an empty string to hide the button entirely.

To add a new card, import a new image and add a <Col> block:

src/components/Projects/Projects.js

import myService from "../../Assets/Projects/my-service.png";

// Inside the <Row>:
<Col md={4} className="project-card">
  <ProjectCard
    imgPath={myService}
    isBlog={false}
    title="My New Service"
    description="A short description of the service offered."
    ghLink="/about"
  />
</Col>

Appointment / contact info (AboutCard.js)

The contact card shown on the About / Citas page is rendered by src/components/About/AboutCard.js.

src/components/About/AboutCard.js

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>
  );
}

Update the address

Replace Av. direccion and Aguascalientes (both wrapped in <span className="purple">) with your real street address and city.

Update the WhatsApp / hours copy

Edit the second sentence that mentions WhatsApp business hours to reflect your actual availability (e.g., “Mon–Fri, 9 am–6 pm”).

Update the CTA list items

The three <li className="about-activity"> items are your call-to-action bullet points. Replace Contactanos, Reserva una cita, and Mejora tu salud bucal with actions relevant to your business.

Update the closing quote and attribution

The <p> near the bottom holds a motivational quote. Update the quote text and the <footer className="blockquote-footer"> attribution line to suit your brand voice.

Both Home2.js (the hero section social row) and Footer.js render GitHub, Twitter, LinkedIn, and Instagram icons, but all href values are currently empty strings. src/components/Home/Home2.js — hero social icons:

src/components/Home/Home2.js

<li className="social-icons">
  <a
    href=""                     {/* ← Add your GitHub URL */}
    target="_blank"
    rel="noreferrer"
    className="icon-colour home-social-icons"
  >
    <AiFillGithub />
  </a>
</li>
<li className="social-icons">
  <a
    href=""                     {/* ← Add your Twitter URL */}
    target="_blank"
    rel="noreferrer"
    className="icon-colour home-social-icons"
  >
    <AiOutlineTwitter />
  </a>
</li>
<li className="social-icons">
  <a
    href=""                     {/* ← Add your LinkedIn URL */}
    target="_blank"
    rel="noreferrer"
    className="icon-colour home-social-icons"
  >
    <FaLinkedinIn />
  </a>
</li>
<li className="social-icons">
  <a
    href=""                     {/* ← Add your Instagram URL */}
    target="_blank"
    rel="noreferrer"
    className="icon-colour home-social-icons"
  >
    <AiFillInstagram />
  </a>
</li>

src/components/Footer.js — footer social icons (same four icons, same empty href values):

src/components/Footer.js

<li className="social-icons">
  <a href="" style={{ color: "white" }} target="_blank" rel="noopener noreferrer">
    <AiFillGithub />
  </a>
</li>
<li className="social-icons">
  <a href="" style={{ color: "white" }} target="_blank" rel="noopener noreferrer">
    <AiOutlineTwitter />
  </a>
</li>
<li className="social-icons">
  <a href="" style={{ color: "white" }} target="_blank" rel="noopener noreferrer">
    <FaLinkedinIn />
  </a>
</li>
<li className="social-icons">
  <a href="" style={{ color: "white" }} target="_blank" rel="noopener noreferrer">
    <AiFillInstagram />
  </a>
</li>

Fill in the href="" attribute in both files with the full URLs to your profiles (e.g., href="https://github.com/yourhandle"). If you don’t use a particular platform, remove its <li> block entirely.

After editing any component file, the development server hot-reloads automatically — you will see your changes in the browser within a second or two, with no need to restart npm start.

Get Started

Customization

Components

Deployment

Editing Content in Soumyajit Landing Pages

Hero section (Home.js)

Typewriter strings (Type.js)

Business intro (Home2.js)

Services / project cards (Projects.js)

Appointment / contact info (AboutCard.js)

Build docs developers (and LLMs) love

Get Started

Customization

Components

Deployment

Documentation Index

​Hero section (Home.js)

​Typewriter strings (Type.js)

​Business intro (Home2.js)

​Services / project cards (Projects.js)

​Appointment / contact info (AboutCard.js)

​Social media links

Build docs developers (and LLMs) love

Hero section (Home.js)

Typewriter strings (Type.js)

Business intro (Home2.js)

Services / project cards (Projects.js)

Appointment / contact info (AboutCard.js)

Social media links