Homepage Components
Homepage Components: Hero, InfoxBox, InfoBoxes, Footer
1. Create the Hero Component
a. Set Up the File
In your
components/folder, create a file named Hero.jsx.Mark it as a React component (since it will display static content for now).
b. Extract and Convert the Markup
Open your index.html and locate the hero section (the section with a background, a heading, a paragraph, and a search form).
Copy the HTML markup for the hero section.
In Hero.jsx, paste the markup inside a functional component and update the attributes:
Replace all instances of
classwithclassName.Adjust any other HTML-specific syntax (e.g., self-closing tags).
Example Structure:
// index.html
<!-- Hero -->
<section class="bg-blue-700 py-20 mb-4">
<div
class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col items-center"
>
<div class="text-center">
<h1
class="text-4xl font-extrabold text-white sm:text-5xl md:text-6xl"
>
Find The Perfect Rental
</h1>
<p class="my-4 text-xl text-white">
Discover the perfect property that suits your needs.
</p>
</div>
<form
class="mt-3 mx-auto max-w-2xl w-full flex flex-col md:flex-row items-center"
>
<div class="w-full md:w-3/5 md:pr-2 mb-4 md:mb-0">
<label for="location" class="sr-only">Location</label>
<input
type="text"
id="location"
placeholder="Enter Location (City, State, Zip, etc"
class="w-full px-4 py-3 rounded-lg bg-white text-gray-800 focus:outline-none focus:ring focus:ring-blue-500"
/>
</div>
<div class="w-full md:w-2/5 md:pl-2">
<label for="property-type" class="sr-only">Property Type</label>
<select
id="property-type"
class="w-full px-4 py-3 rounded-lg bg-white text-gray-800 focus:outline-none focus:ring focus:ring-blue-500"
>
<option value="All">All</option>
<option value="Apartment">Apartment</option>
<option value="Studio">Studio</option>
<option value="Condo">Condo</option>
<option value="House">House</option>
<option value="Cabin Or Cottage">Cabin or Cottage</option>
<option value="Loft">Loft</option>
<option value="Room">Room</option>
<option value="Other">Other</option>
</select>
</div>
<button
type="submit"
class="md:ml-4 mt-4 md:mt-0 w-full md:w-auto px-6 py-3 rounded-lg bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring focus:ring-blue-500"
>
Search
</button>
</form>
</div>
</section>2. Create Reusable InfoBox Component
a. Set Up the File
In the
components/folder, create InfoBox.jsx.This component will accept props (like heading text, background color, text color, and button configuration) so it can be reused.
b. Build the Component Structure
Define a functional component that uses props to dynamically set its content and styling.
Example Structure:
//components/InfoBox.jsx
export default function InfoBox({
heading,
bgColor = 'bg-gray-100',
textColor = 'text-gray-800',
buttonInfo,
children,
}) {
return (
<div className={`${bgColor} p-6 rounded-lg shadow-md`}>
<h2 className={`text-2xl font-bold ${textColor}`}>{heading}</h2>
<p className={`${textColor} mt-2 my-4`}>{children}</p>
{buttonInfo && (
<a
href={buttonInfo.link}
className={`inline-block ${buttonInfo.bgColor} ${buttonInfo.textColor} rounded-lg px-4 py-2 hover:opacity-80`}>
{buttonInfo.text}
</a>
)}
</div>
)
}Note: Customize default props as needed so that you can easily change backgrounds and text colors when using the component.
3. Create the InfoBoxes Container Component
a. Set Up the File
In the
components/folder, create InfoBoxes.jsx.This component will serve as a grid/container that holds multiple InfoBox components.
b. Build the Component Structure
Import the InfoBox component and use it to display different information blocks side-by-side.
Example Structure:
//components/InfoBoxes.jsx
import InfoBox from './InfoBox'
export default function InfoBoxes() {
return (
<section className="">
<div className="container-xl lg:container m-auto">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 rounded-lg">
<InfoBox
heading="For Renters"
bgColor="bg-gray-200"
textColor="text-gray-800"
buttonInfo={{
text: 'Browse Properties',
link: '/properties',
bgColor: 'bg-black',
textColor: 'text-white',
}}>
Find your dream rental property. Bookmark properties and contact
owners.
</InfoBox>
<InfoBox
heading="For Property Owners"
backgroundColor="bg-blue-200"
textColor="text-blue-800"
buttonInfo={{
text: 'Add Property',
link: '/property/add',
bgColor: 'bg-blue-500',
textColor: 'text-white',
}}>
List your properties and reach potential tenants. Rent as an Airbnb
or long term.
</InfoBox>
</div>
</div>
</section>
)
}4. Create the Footer component
a. Set Up the File
In the
components/folder, create Footer.jsx.This component will serve as a Footer components.
b. Build the Component Structure
Copy the HTML markup for the footer section.
In Footer.jsx, paste the markup inside a functional component and update the attributes:
Replace all instances of
classwithclassName.Adjust any other HTML-specific syntax (e.g., self-closing tags).
Example Structure:
// Components/Footer.jsx
// <!-- Footer -->
import Image from 'next/image'
import Link from 'next/link'
import logo from '@/assets/images/logo.png'
const Footer = () => {
return (
<footer className="bg-gray-200 py-4 mt-auto">
<div className="container mx-auto flex flex-col md:flex-row items-center justify-between px-4">
<div className="mb-4 md:mb-0">
<Image src={logo} alt="Logo" className="h-8 w-auto" />
</div>
<div className="flex flex-wrap justify-center md:justify-start mb-4 md:mb-0">
<ul className="flex space-x-4">
<li>
<a href="/properties.html">Properties</a>
</li>
<li>
<a href="/terms.html">Terms of Service</a>
</li>
</ul>
</div>
<div>
<p className="text-sm text-gray-500 mt-2 md:mt-0">
© 2025 PropertyThere. All rights reserved.
</p>
</div>
</div>
</footer>
)
}
export default Footer
5. Integrate Components into the Home Page
a. Update the Home Page File
In the
app/folder, open page.jsx (your homepage component).
b. Import the Components
Import the Hero and InfoBoxes components:
import Hero from '@/components/Hero'; import InfoBoxes from '@/components/InfoBoxes';
c. Insert the Components in the Home Page Layout
Arrange your homepage by including the components. For example:
//app/page.jsx import Hero from '@/components/Hero' import InfoBoxes from '@/components/InfoBoxes' export default function HomePage() { return ( <> <Hero /> <InfoBoxes /> {/* Other components like property listings, footer, etc. */} </> ); }
5. Test and Refine
a. Run the Development Server
Start your application with:
bashCopynpm run devNavigate to http://localhost:3000 to see the home page with the Hero and InfoBoxes components.
b. Verify Responsiveness and Styling
Check that:
The Hero section appears as designed with the search form.
The InfoBoxes grid displays two boxes side-by-side on larger screens and stacks on mobile.
The InfoBox component correctly applies the dynamic styles (background and text colors) and displays button links as configured.
c. Adjust as Needed
Refine Tailwind CSS classes for spacing, responsiveness, and overall aesthetics.
Update props or component logic as your design or functionality evolves.
Recap
Hero.jsx:
Created by extracting and converting the hero section from the theme in index.html.
InfoBox.jsx:
A reusable component that accepts props for dynamic headings, colors, and button configuration.
InfoBoxes.jsx:
A container grid that holds multiple InfoBox components.
Footer.jsx
Homepage Integration:
Imported and arranged the Hero and InfoBoxes components on the home page (app/page.jsx) to drive user engagement.
Testing:
Ran the development server, verified the layout and responsiveness, and refined styling as needed.
Last updated