ShopKart About Us, Contact Us & Footer

Business Scenario

Hello talented developers!

In the previous lab, Lab 6 — ShopKart Login, Registration & Forms, you improved the ShopKart application by adding user authentication forms. Now, the application requires more pages to inform users about the platform and connect them with the ShopKart team.

In this lab, you will continue working on the ShopKart website and implement three important website sections:

The About Us page will introduce ShopKart, explain its purpose, highlight the shopping experience, and display the trusted brands available on the platform.

The Contact Us page provides ShopKart's contact info, office location map, social media links, and a contact form for queries or feedback.

The Footer serves as a reusable component for quick navigation, customer-service links, company info, payment methods, and secure-payment details.

git pull origin branchName

Git Pull

Task 1 : Implement the About Us page

Create the About.jsx page inside the pages folder

Inside About.jsx - Create the About Hero Section

<main className="about-page">
  <section className="about-hero">
    <div className="about-content">

      <div className="about-label">
        <span></span>
        ABOUT US
      </div>

      <h1>About <span>us</span></h1>

      <h2> Making everyday shopping simpler, <br /> faster and more enjoyable. </h2>

      <p>At ShopKart, we believe great products should be accessible
        to everyone. We are an online shopping destination offering
        a wide range of high-quality products at great prices,
        delivered right to your doorstep.
      </p>

      <p>From fashion and electronics to home essentials and more —
        we're here to make shopping easier, better, and more
        delightful for you.
      </p>

      <div className="about-buttons">
        <Link to="/products" className="shop-btn">
          Shop now
          <span>→</span>
        </Link>

        <a href="#brands" className="learn-btn">Learn more</a>
      </div>

      <div className="about-tagline">
        Shop Smarter, Live Better
        <span></span>
      </div>
    </div>
  </section>
</main>

Style the About-Hero section

Click here for : About-hero.css

Create the Trusted Brands Section

Add the brands array at the top of the About.jsx file, below the imports. This array stores the brand name, unique ID, and image path for each trusted brand that will be displayed on the About Us page.

const brands = [
  { id: 1, name: "Samsung", image: "/images/brands/samsung.png" },
  { id: 2, name: "boAt", image: "/images/brands/boat.png" },
  { id: 3, name: "Puma", image: "/images/brands/puma.png" },
  { id: 4, name: "LG", image: "/images/brands/lg.png" },
  { id: 5, name: "Philips", image: "/images/brands/philips.png" },
  { id: 6, name: "The Ordinary", image: "/images/brands/ordinary.png" },
  { id: 7, name: "Nivea", image: "/images/brands/nivea.png" },
  { id: 8, name: "Himalaya", image: "/images/brands/himalaya.png" },
  { id: 9, name: "Apple", image: "/images/brands/apple.png" },
  { id: 10, name: "Fastrack", image: "/images/brands/fastrack.png" },
  { id: 11, name: "Amazon", image: "/images/brands/amazon.png" },
  { id: 12, name: "Levi's", image: "/images/brands/levis.png" },
  { id: 13, name: "Nike", image: "/images/brands/nike.png" },
  { id: 14, name: "Adidas", image: "/images/brands/adidas.png" },
  { id: 15, name: "Zara", image: "/images/brands/zara.png" },
  { id: 16, name: "H&M", image: "/images/brands/hm.png" },
  { id: 17, name: "Canon", image: "/images/brands/canon.png" },
  { id: 18, name: "Dyson", image: "/images/brands/dyson.png" },
  { id: 19, name: "Intel", image: "/images/brands/intel.png" },
  { id: 20, name: "Ray-Ban", image: "/images/brands/rayban.png" }
];

<section className="brands-section" id="brands">
          <div className="brands-heading">
            <h2>Trusted by leading brands</h2>

            <p>
              We're proud to partner with some of the world's most trusted
              brands to bring you the best products and shopping experience.
            </p>
          </div>

          <div className="brands-grid">
            {brands.map((brand) => (
              <div className="brand-item" key={brand.id}>
                <img src={brand.image} alt={brand.name} />
              </div>
            ))}
          </div>
        </section>

Then add this below the Hero section to create the Trusted Brands section and display
the brands using the brands.map() method.

Style the trusted brand section

Click here for : Trusted-Brands.css

Make the About page responsive

Click here for : About-Responsive.css

Add About Page Route in App.jsx

<Route path="/about" element={<About />}/>

Task 2 : SHOPKART CONTACT US PAGE

The Contact page will have two major sides:

Contact Information

Contact Form

Chat
Call
Office

Map (for office location)

Social Icons

Heading

Form Fields

Create Contact Information section

Now, We create the left-side contact information.

It includes: Chat with us ,Call us, Visit our office

function Contact() {
return (
    <main className="contact-page">
      <section className="contact-wrapper">
        <div className="contact-info">
          <div className="info-block">
            <div className="info-icon"><img src="/icons/chat-icon.png" /></div>

            <div>
              <h3>Chat with us</h3>
              <p>Our friendly team is here to help.</p>
              <strong>support@shopkart.com</strong>
            </div>
          </div>

          <div className="info-block">
            <div className="info-icon"><img src="/icons/contact-call.png" /></div>
            <div>
              <h3>Call us</h3>
              <p>Mon - Sat from 9AM to 6PM.</p>
              <strong>+91 98765 43210</strong>
            </div>
          </div>

          <div className="info-block">
            <div className="info-icon"><img src="/icons/location.png" /></div>
            <div>
              <h3>Visit our office</h3>
              <p>Come say hello at our office.</p>
              <strong> 123 Shopping Street, <br /> Bangalore, Karnataka 560001 </strong>
            </div>
          </div>

          <div className="map-section">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3768.016736181310
              5!2d72.94758897381992!3d19.194471348245365!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!
              4f13.1!3m3!1m2!1s0x3be7b92e8437d15b%3A0x8b55216ca2b2ebe9!2sI.T.VEDANT!5e0!3m
              2!1sen!2sin!4v1789454072911!5m2!1sen!2sin"
              title="I.T.VEDANT location"
              loading="lazy"
              referrerPolicy="strict-origin-when-cross-origin"
              allowFullScreen  />
          </div>

          <div className="social-section">
            <h3>Follow us</h3>

            <div className="social-icons">
              <span><img src="/icons/contact-facebook.png" /></span>
              <span><img src="/icons/contact-twitter.png" /></span>
              <span><img src="/icons/contact-x.png" /></span>
              <span><img src="/icons/contact-youtube.png" /></span>
              <span><img src="/icons/contact-instagram.png" /></span>
            </div>
          </div>
        </div>

Style Contact Information

Click here for : Contact-info.css

Create the Contact Form

Now we create the complete form structure.

 <div className="contact-form-section">
          <div className="form-content">
            <h1>
              Have a question?
              <br />
              We're here for <span>you!</span>
            </h1>

            <p className="form-intro">
              Tell us more about your query, suggestion, or feedback.
              <br />
              We'd love to hear from you and get back as soon as possible.
            </p>

            <form onSubmit={handleSubmit}>
              <div className="form-field">
                <label htmlFor="name">Your name *</label>
                <input id="name" type="text" name="name" value={formData.name} 
                       onChange={handleChange} placeholder="Enter your name" required />
              </div>

The form contains : Name, Email, Order ID, Message, Character counter, Help options, Submit button

              <div className="form-field">
                <label htmlFor="email">Your email *</label>
                <input id="email" type="email" name="email" value={formData.email} 
                onChange={handleChange} placeholder="Enter your email" required />
              </div>

              <div className="form-field">
                <label htmlFor="orderId">Order ID</label>
                <input id="orderId" type="text" name="orderId" value={formData.orderId} 
                onChange={handleChange} placeholder="Enter your order ID (optional)" />
              </div>

              <div className="form-field message-field">
                <label htmlFor="message">Your message *</label>
                <textarea id="message" name="message" value={formData.message} 
                onChange={handleChange} placeholder="Type your message here..." 
                maxLength="500" required />
                <span className="character-count">{formData.message.length}/500</span>
              </div>

              <div className="help-section">
                <p> How can we help you? <span> Select all that apply</span> </p>
                <div className="help-options">
                  <label><input type="checkbox" value="Order Issue" 
                  onChange={handleHelpChange} /><span>Order Issue</span></label>
                  <label><input type="checkbox" value="Return / Refund"
                  onChange={handleHelpChange} /><span>Return / Refund</span></label>
                  <label><input type="checkbox" value="Payment Help" 
                  onChange={handleHelpChange} /><span>Payment Help</span></label>

                  <label><input type="checkbox" value="Account Support"
                  onChange={handleHelpChange} /><span>Account Support</span></label>
                  <label><input type="checkbox" value="Product Inquiry" 
                  onChange={handleHelpChange} /><span>Product Inquiry</span></label>
                  <label><input type="checkbox" value="Other" 
                  onChange={handleHelpChange} /><span>Other</span></label>
                </div>
              </div>

              <button type="submit" className="contact-submit">
                Send Message <span>→</span>
              </button>
            </form>
          </div>
        </div>

      </section>
    </main>
  );
}

export default Contact;

Add Form Functionality

  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    orderId: "",
    message: "",
    help: []
  });
 const [submitted, setSubmitted] = useState(false);

It stores all the values entered by the user in the contact form.

formData → contains the current form values.
setFormData → function used to update those values.
useState({...}) → gives the form its initial values.

2. Submitted : This state keeps track of whether the form has been submitted.

Initially: submitted = false
When the user clicks Send Message setSubmitted(true);
Then React can conditionally display :{submitted && <p>Thanks! Your ...

 const handleChange = (e) => {
    const { name, value } = e.target;

    setFormData((prev) => ({
      ...prev,
      [name]: value
    }));

    setSubmitted(false);
  };

Handle Input Changes

const { name, value } = e.target; -> Get the field name and value

e.target -> refers to the input field that the user is currently typing in.

Update formData

setFormData((prev) => ({

...prev,

[name]: value

}));

prev → contains the previous form data.
...prev → keeps all the existing form values.
[name]: value → updates only the field that was changed.

setSubmitted(false); -> If the success message was already displayed and the user starts editing the form again, the success message is hidden.

Handle Form Submission

const handleSubmit = (e) => {
  e.preventDefault();
  setSubmitted(true);
};

e -> is the event object generated when the form is submitted.

e.preventDefault(); -> Normally, submitting an HTML form causes the browser to reload the page. preventDefault() stops that default behavior.

setSubmitted(true); -> This changes: submitted = false to submitted = true

Add Success Message

Now We display a message after successful form submission.

{submitted && (
  <p className="success-message">
    Thanks! Your message has been submitted.
  </p>
)}

Style the Contact form

Click here for : Contact-form.css

Make the contact page responsive

Click here for : Contact-Responsive.css

Add Contact Page Route

<Route path="/contact" element={<Contact />}/>

Task 3 : SHOPKART FOOTER

Create the Footer.jsx page inside the Components folder

Inside Footer.jsx - Create the Shopkart Footer structure

import React from "react";
import "./Footer.css";

function Footer() {
  return (
    <footer className="site-footer">
      <div className="footer-main">
        <div className="footer-brand">
          <div className="footer-logo">Shop<span>Kart</span></div>
          <p>Your one-stop destination for quality<br />products at the best prices.</p>
          <div className="footer-socials">
            <a href="#" aria-label="Facebook">f</a>
            <a href="#" aria-label="Instagram">◎</a>
            <a href="#" aria-label="Twitter">♥</a>
            <a href="#" aria-label="YouTube">▶</a>
          </div>
        </div>

        <div className="footer-column">
          <h3>Shop</h3>
          <a href="/products">All Products</a>
          <a href="/products">Categories</a>
          <a href="/products">New Arrivals</a>
          <a href="/products">Best Sellers</a>
          <a href="/products">Deals of the Day</a>
        </div>

        <div className="footer-column">
          <h3>Customer Service</h3>
          <a href="/contact">Contact Us</a>
          <a href="#">FAQs</a>
          <a href="#">Shipping Policy</a>
          <a href="#">Returns & Refunds</a>

          <a href="#">Track Order</a>
        </div>
        <div className="footer-column">
          <h3>Company</h3>
          <a href="/about">About Us</a>
          <a href="#">Careers</a>
          <a href="#">Privacy Policy</a>
          <a href="#">Terms & Conditions</a>
          <a href="#">Sell on ShopKart</a>
        </div>
        <div className="footer-payments">
          <h3>We Accept</h3>
          <div className="payment-methods">
            <span className="payment"><img src="/images/visa.png" alt="Visa" /></span>
            <span className="payment"><img src="/images/mastercard.png"/></span>
            <span className="payment"><img src="/images/upi.png" alt="UPI" /></span>
            <span className="payment"><img src="/images/paytm.png" alt="Paytm" /></span>
          </div>
          <div className="secure-payment">
            <span className="lock-icon"><img src="/images/footer-secure.png" /></span>
            <span>100% Secure Payments</span>
          </div>
        </div>
      </div>
      <div className="footer-bottom">© 2026 ShopKart. All Rights Reserved.</div>
    </footer>
  );
}
export default Footer;

Style the Footer section

Click here for : Footer.css

Make footer section responsive

Click here for : Footer-Responsive.css

Render Footer Globally

Finally, we ensure the Footer is rendered from App.jsx.

Add Footer below routes

<>
<Navbar userName={userName} cart={cart} />

      <Routes>
        <Route path="/" element={<Home userName={userName} />} />
        <Route path="/products"  element={<Products dispatch={dispatch} />} />
        <Route path="/login" element={<Login setUserName={setUserName} />} />
        <Route  path="/register" element={<Register setUserName={setUserName} />}/>
        <Route path="/cart" element={<Cart cart={cart} dispatch={dispatch} />}/>
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>

<Footer/>
    </>

We are done with this lab. The latest source code has been uploaded to GitHub. You can access the latest commit using the link below:

Github_repository_link

Great job!

In this lab, you extended the ShopKart application by building informative About Us and Contact Us pages and integrating a reusable Footer across the application.

Checkpoint

Git Push

git push origin branchName

Next-Lab Preparation

Module:

1) Handling Side-Effects

2) Understanding of useParams()

React lab 7

By Content ITV

React lab 7

Content ITV PRO

This is Itvedant Content department

ShopKart About Us, Contact Us & Footer

React lab 7

React lab 7

Content ITV PRO

More from Content ITV