RealStatic
Nextjs
Homepage

Customize Your Homepage

Customizing the homepage of Realstatic is a simple and direct procedure that enables you to personalize the content and design elements according to your brand and business needs. The required code has already been included from the components folder. Now, all that remains is to modify our data.

Finding Homepage

To locate the homepage components, navigate to the app/page.js folder. In this file, you will find all the necessary components for the homepage. Here is the code snippet:

Customize Sections

In the components folder, you will find the individual components that make up the sections of the homepage. These components contain the HTML markup and logic for rendering the specific section. Examples of such components are Hero, WorkArea, PropertiesArea, Feature, Counter, Testimonial and BlogArea.

Hero Section

To customize the data in the Hero section, you can modify the following properties in the components/Hero.jsx file:

Title

To change the Hero title, locate the following code and update the text within the <h1> tags:

<h1 className="hero-content-title">Find a perfect property Where you&rsquo;ll love to live</h1>

Description

To change the Hero description, find the following code and update the text within the <p> tags:

<p className="hero-content-description">
  We helps businesses customize, automate and scale up their ad production and delivery.
</p>

Image

To change the Hero image, you can replace the image files located in the specified paths. You can also adjust the width, height attributes as per your requirements.

<Image
  src="/images/hero/hero.png"
  alt="hero-bg"
  width={1242}
  height={802}
/>

Note: When making changes, ensure that the JSX syntax is maintained and that the modifications are within the appropriate tags and attributes.

Hero Filter option

Tab Title

There are three tabs in this section. To edit the tabs button folloe the following steps:

  1. Go to components/Hero.jsx file.
  2. FInd the following codes:
<nav>
  <div
    className="nav nav-tabs"
    id="nav-tab"
    role="tablist"
  >
    <button
      className="nav-link active"
      id="nav-buy-tab"
      data-bs-toggle="tab"
      data-bs-target="#nav-buy"
      type="button"
      role="tab"
      aria-controls="nav-buy"
      aria-selected="true"
    >
      Buy
    </button>
    <button
      className="nav-link"
      id="nav-sell-tab"
      data-bs-toggle="tab"
      data-bs-target="#nav-sell"
      type="button"
      role="tab"
      aria-controls="nav-sell"
      aria-selected="false"
    >
      Sell
    </button>
    <button
      className="nav-link"
      id="nav-rent-tab"
      data-bs-toggle="tab"
      data-bs-target="#nav-rent"
      type="button"
      role="tab"
      aria-controls="nav-rent"
      aria-selected="false"
    >
      Rent
    </button>
  </div>
</nav>
  1. Customize the text inside the `button tag.
Tab Items

Each tab has three option to filter. These are cities, property types and price. To customize these, follow the following steps.

Cities
  1. Go to components/Hero.jsx file.
  2. FInd the following codes:
<ul className="dropdownMenu">
  <li onClick={() => handleCity("New York City")}>New York City</li>
  <li onClick={() => handleCity("Washington DC")}>Washington DC</li>
  <li onClick={() => handleCity("Florida")}>Florida</li>
  <li onClick={() => handleCity("Orlendo")}>Orlendo</li>
  <li onClick={() => handleCity("Alaska")}>Alaska</li>
  <li onClick={() => handleCity("Mexico City")}>Mexico City</li>
</ul>
  1. Customize the value of the handleCity and inside li tags.
  2. Add more li tags to add more items.
Properties
  1. Go to components/Hero.jsx file.
  2. FInd the following codes:
<ul className="dropdownMenu">
  <li onClick={() => handleProperty("Duplex House")}>Duplex House</li>
  <li onClick={() => handleProperty("Single House")}>Single House</li>
  <li onClick={() => handleProperty("Multiplex House")}>Multiplex House</li>
</ul>
  1. Customize the value of the handleProperty and inside li tags.
  2. Add more li tags to add more items.
Prices
  1. Go to components/Hero.jsx file.
  2. FInd the following codes:
<ul className="dropdownMenu">
  <li onClick={() => handlePrice("$15000 - $350000")}>$15000 - $350000</li>
  <li onClick={() => handlePrice("$10000 - $300000")}>$10000 - $30000</li>
  <li onClick={() => handlePrice("$20000 - $400000")}>$20000 - $40000</li>
</ul>
  1. Customize the value of the handlePrice and inside li tags.
  2. Add more li tags to add more items.

Wrok Area

Section Title

  • Open the components/WorkArea.jsx file.
  • Locate the following code:
<h3>Simple &amp; easy way to find your dream apartment</h3>
  • Update the text within the <h3> tags to set the desired title for the section.

Section Description

  • Open the components/WorkArea.jsx file.
  • Locate the following code:
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting
  industry.
</p>
  • Update the text within the <p> tags to set the desired description for the section.

Section Button

  • Open the components/WorkArea.jsx file.
  • Locate the following code:
<Link href="/contact" className="btn btn-small">
  Get Started
</Link>
  • Update the text within the href value to set the desired link address for the section.

Work Area Items

  • Open the components/WorkArea.jsx file.
  • Locate the following code:
<div className="work-area--service--items order-2 order-md-1">
  <SearchLocation />
  <h4>
    Search <br /> your location
  </h4>
</div>
<div className="work-area--service--items order-1 order-md-2">
  <VisitIcon />
  <h4>
    Visit <br /> Apartment
  </h4>
</div>
<div className="work-area--service--items order-4 order-md-3">
  <GetIcon />
  <h4>
    Get your <br /> dream house
  </h4>
</div>
<div className="work-area--service--items order-3 order-md-4">
  <EnjoyIcon />
  <h4>
    Enjoy your <br /> Apartment
  </h4>
</div>
  • Update the text within the <h4> tags to set the desired title for the item.

Counter

To customize the counter options in the components/Counter.jsx file, follow these steps:

  1. Open the data/data.js file.
  2. Locate the counterData array.
  3. Modify the objects within the counterData array to set the desired counter options.
  4. Each object represents a counter option with the following properties:
    • id: Unique identifier for the counter option.
    • count: The number to be displayed by the counter.
    • leftIcon: The icon to be displayed on the left side of the count.
    • rightIcon: The icon to be displayed on the right side of the count.
    • ICon: The Icon to be displayed by the counter.
    • description: The name or description of the counter item.
  5. Update the count and describe properties with your desired values for each counter option.
  6. Example:
export const counterData = [
  {
    id: 1,
    count: 150,
    leftIcon: "$",
    rightIcon: "+",
    Icon: <DollarIcon />,
    description: "Owned from <br> Properties transactions",
  },
  {
    id: 2,
    count: 25,
    leftIcon: "",
    rightIcon: "K+",
    Icon: <LocationIcon />,
    description: "Properties for Buy <br> &amp; sell Successfully",
  },
  {
    id: 3,
    count: 500,
    leftIcon: "",
    rightIcon: "",
    Icon: <FireIcon />,
    description: "Daily completed <br> transactions",
  },
  {
    id: 4,
    count: 600,
    leftIcon: "$",
    rightIcon: "+",
    Icon: <EmojiIcon />,
    description: "Reagular Clients",
  },
];

Properties Area

Properties Filter Button

To customize the Properties Button options in the components/PropertiesArea.jsx file, follow these steps:

  1. Open the data/data.js file.
  2. Locate the propertiesCategory array.
  3. Modify the objects within the propertiesCategory array to set the desired counter options.
  4. Each object represents a counter option with the following properties:
    • id: Unique identifier for the counter option.
    • title: The Category Title .
    • category: The category name.
  5. Update the title and category properties with your desired values for each category option.
  6. Example:
export const propertiesCategory = [
  {id: 1, title: "Resident Property", category: "residential"},
  {id: 2, title: "Commercial Property", category: "commercial"},
  {id: 4, title: "in Property", category: "agriculture"},
  {id: 3, title: "Industrial Property", category: "industrial"},
];

Properties

To customize the Properties options in the components/PropertiesArea.jsx file, follow these steps:

  1. Open the data/data.js file.
  2. Locate the propertiesData array.
  3. Modify the objects within the counterData array to set the desired counter options.
  4. Each object represents a counter option with the following properties:
    • id: Unique identifier for the counter option.
    • title: The Properties Title .
    • location: The location of the property.
    • bath: The Total bath of the property.
    • bed: The Total bed of the property.
    • area: The Total area of the property.
    • type: The type of the property.
    • price: The price of the property.
    • category: The categories of the property.
    • coverImg: The Cover Image of the property.
    • images: The iamges of the property to show on property page.
    • monthlyPayment: The Monthly payment of the property to show on property page.
    • details: The details of the property to show on property page.
    • features: The features of the property to show on property page.
    • agentInfo: The agentInfo of the property to show on property page.
  5. Update the properties with your desired values for each property option.
  6. Example:
export const propertiesData = [
  {
    id: 1,
    title: "Cozy Cottage by the Lake",
    location: "789 Oak St, City, State 54321",
    bed: 2,
    bath: 1,
    area: 800,
    type: "cottage",
    price: 300000,
    category: ["residential", "commercial"],
    coverImg: "/images/properties/properties4.png",
    images: [
      "/images/properties/properties-banner.png",
      "/images/properties/properties-banner2.png",
      "/images/properties/properties-banner3.png",
      "/images/properties/properties-banner22.png",
      "/images/properties/properties-banner33.png",
    ],
    monthlyPayment: 800,
    details: {
      title: "Charming Cottage with Lake Views",
      description: "Escape to this cozy retreat by the lake.",
    },
    features: {
      parking: true,
      outdoor: true,
      ac: false,
      hoa: false,
      persqftprice: 375,
      listed: true,
      buildYear: 2000,
    },
    agentInfo: {
      id: 4,
      img: "/images/agent/agent4.png",
      name: "Sarah Davis",
      rating: 4.7,
      phone: "(555) 123-4567",
      email: "sarah@example.com",
    },
  },
]

Note: To add more Properties, copy and add the following code and custimize it.

{
    id: 2,
    title: "Luxury Penthouse in the Sky",
    location: "987 Pine St, City, State 56789",
    bed: 3,
    bath: 3,
    area: 2000,
    type: "penthouse",
    price: 1500000,
    category: ["residential", "agriculture"],
    coverImg: "/images/properties/properties5.png",
    images: [
      "/images/properties/properties-banner.png",
      "/images/properties/properties-banner2.png",
      "/images/properties/properties-banner3.png",
      "/images/properties/properties-banner22.png",
      "/images/properties/properties-banner33.png",
    ],
    monthlyPayment: 3000,
    details: {
      title: "Exquisite Penthouse with Panoramic Views",
      description: "Experience luxury living at its finest in this penthouse.",
    },
    features: {
      parking: true,
      outdoor: true,
      ac: true,
      hoa: true,
      persqftprice: 750,
      listed: true,
      buildYear: 2018,
    },
    agentInfo: {
      id: 5,
      img: "/images/agent/agent5.png",
      name: "Michael Johnson",
      rating: 4.9,
      phone: "(555) 987-6543",
      email: "michael@example.com",
    },
  },

Features

there two section in Feature. One is with multiple image and another is with single image.

Feature top

Title
  • Open the components/FeatureTop.jsx file.
  • Locate the following code:
<h3>Simple &amp; easy way to find your dream Apartment</h3>
  • Update the text within the <h3> tags to set the desired link address for the section.
Description
  • Open the components/FeatureTop.jsx file.
  • Locate the following code:
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting
  industry. In a free hour, when our power of choice is untrammelled
  and when nothing prevents our being able to do what we like best,
  every pleasure is to be welcomed.
</p>
  • Update the text within the <p> tags to set the desired link address for the section.
Button
  • Open the components/FeatureTop.jsx file.
  • Locate the following code:
<Link href="/contact" className="btn btn-small">
  Get Started
</Link>
  • Update the text within the href value to set the desired link address for the section.
Images
  • Open the components/FeatureTop.jsx file.
  • Locate the following code:
<div className="col-lg-6 order-lg-2 order-1">
  <div className="row">
    <div className="col-6 ">
      <div className="feature-grid-image">
        <Image
          src="/images/feature/feature1.png"
          height={327}
          width={284}
          alt="feature1"
          style={{
            maxWidth: "100%",
            height: "auto",
          }}
        />
        <Image
          height={218}
          width={284}
          src="/images/feature/feature2.png"
          alt="feature2"
          style={{
            maxWidth: "100%",
            height: "auto",
          }}
        />
      </div>
    </div>
    <div className="col-6">
      <div className="feature-grid-image">
        <Image
          height={218}
          width={284}
          src="/images/feature/feature3.png"
          alt="feature3"
          style={{
            maxWidth: "100%",
            height: "auto",
          }}
        />
        <Image
          height={327}
          width={284}
          src="/images/feature/feature4.png"
          alt="feature4"
          style={{
            maxWidth: "100%",
            height: "auto",
          }}
        />
      </div>
    </div>
  </div>
</div>
  • Update the text within the src value to set the desired link address for the section.

Feature Bottom

Title
  • Open the components/FeatureBottom.jsx file.
  • Locate the following code:
<h3>Secure payment system</h3>
  • Update the text within the <h3> tags to set the desired link address for the section.
Description
  • Open the components/FeatureBottom.jsx file.
  • Locate the following code:
<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting
  industry. In a free hour, when our power of choice is untrammelled.
</p>
  • Update the text within the <p> tags to set the desired link address for the section.
Button
  • Open the components/FeatureBottom.jsx file.
  • Locate the following code:
<Link href="/contact" className="btn btn-small">
  Get Started
</Link>
  • Update the text within the href value to set the desired link address for the section.
List
  • Open the components/FeatureBottom.jsx file.
  • Locate the following code:
<li>
  <CheckCircle size={20} weight="bold" />
  <span className="bold">Find excellent deals</span>
</li>
  • Update the text within the <li>> value to set the desired link address for the section.
  • Add more <li> items to add more list items
Images
  • Open the components/FeatureBottom.jsx file.
  • Locate the following code:
<Image
  height={589}
  width={537}
  src="/images/feature/feature5.png"
  alt="feature5"
  style={{
    maxWidth: "100%",
    height: "auto",
  }}
/>
  • Update the text within the src value to set the desired link address for the section.

Testimonial Data

To customize the Testimonial Data in the components/Testimonial.jsx file, follow these steps:

  1. Open the data/data.js file.
  2. Locate the testimonialData array.
  3. Modify the objects within the testimonialData array to set the desired counter options.
  4. Each object represents a counter option with the following properties:
    • id: Unique identifier for the counter option.
    • review: The review given by the user.
    • name: The name of the user.
    • image: The image of the user.
    • position: The designation of the user.
  5. Update values properties with your desired values for each testimonial option.
  6. Example:
export const testimonialData = [
  {
    id: 1,
    review:
      "I can't wait to show it off and receive compliments on my impeccable taste. NextBid is truly a treasure trove for fashion enthusiasts, offering exclusive items at unbelievable prices.",
    user: {
      name: "John Smith",
      img: "/images/testimonial/client1.png",
      position: "Marketing Manager - Static Mania",
    },
  },
  {
    id: 2,
    review:
      "Discover fashion treasures at NextBid. Unleash your style game with exclusive pieces at amazing prices. Find your signature look and make a statement. Join the fashion revolution at NextBid",
    user: {
      name: "Sarah Johnson",
      img: "/images/testimonial/client2.png",
      position: "Sales Executive - Static Mania",
    },
  },
  {
    id: 3,
    review:
      "Flaunt impeccable style. NextBid: haven for fashion enthusiasts, offering exclusive pieces at incredible prices. Explore more. Find fashion treasure. Join the endless possibilities.",
    user: {
      name: "Michael Brown",
      img: "/images/testimonial/client3.png",
      position: "Customer Support - Static Mania",
    },
  },
  {
    id: 5,
    review:
      "Elevate your fashion game with NextBid. Unlock exclusive styles at unbeatable prices. Discover your fashion identity and make heads turn. Experience the thrill of NextBid today!",
    user: {
      name: "Daniel Wilson",
      img: "/images/testimonial/client2.png",
      position: "IT Specialist - Static Mania",
    },
  },
  {
    id: 4,
    review:
      "Step into NextBid, redefine your fashion journey. Uncover hidden gems at incredible prices. Embrace your style, leave a lasting impression. NextBid: your fashion destination.",
    user: {
      name: "Emily Davis",
      img: "/images/testimonial/client1.png",
      position: "Operations Manager - Static Mania",
    },
  },
 
  // Add More reviews
];

Note: Follow the above steps to add more reviews.

Blogs

Section Title

  • Open the components/BlogArea.jsx file.
  • Locate the following code:
<h3>News &amp; Consultant</h3>
  • Change the value of <h3> to customize the section title

Note: All the data for blog area has been collected from .md files. More will be discussed on Bloge page documentation.

Newsletter

Section Title

  • Open the components/Newsletter.jsx file.
  • Locate the following code:
<h4>For Recent Update, News.</h4>
  • Change the value of <h4> to customize the section title

Section Description

  • Open the components/Newsletter.jsx file.
  • Locate the following code:
<p>
  We helps businesses customize, automate and scale up their ad
  production and delivery.
</p>
  • Change the value of p to customize the section title

Animation

The animation effects in this section are achieved using the framer-motion animation library. If you want to modify the animation, follow the instructions below.

The animation code for the hero text involves the use of the variants object, which defines the initial and target states of the animation. The animation is applied to the opacity and y properties to control the opacity and vertical position of the text.

If you want the text to animate from left/right instead of top/bottom, you can change the y property to x. Additionally, you can adjust the duration and delay of the animation by modifying the duration and delay values, respectively.

<motion.div
     ref={ref}
    variants={{
      hidden: { opacity: 0, y: 50 },
      visible: { opacity: 1, y: 0 },
    }}
    initial="hidden"
    animate={animation}
    transition={{ duration: 0.5, delay: 0.2 }}
>
 
// CONTENT
 
</motion.div>
FooterHome Page two