fix: optimize image render in homepage
This commit is contained in:
parent
bf45a1f029
commit
ce78370fbb
297
src/app/page.tsx
297
src/app/page.tsx
@ -1,8 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import CardProduct from "@/components/CardProduct";
|
||||
import ContactFormSection from "@/components/ContactFormSection";
|
||||
import GoogleReviewBox from "@/components/GoogleReviewBox";
|
||||
import HeroSlider from "@/components/HeroSlider";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import { useRef } from "react";
|
||||
|
||||
@ -80,7 +82,17 @@ export default function Home() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section bg-[url(/images/bg-header.webp)]">
|
||||
<section className="section relative!">
|
||||
<Image
|
||||
alt="Experience the Difference in Every Key Turn"
|
||||
src={"/images/bg-header.webp"}
|
||||
quality={100}
|
||||
fill
|
||||
sizes="100vw"
|
||||
style={{
|
||||
objectFit: "cover",
|
||||
}}
|
||||
/>
|
||||
<div className="box-1-cell height-fill context-dark bg-colorHeader/80!">
|
||||
<div className="cell-inner box-1-outer">
|
||||
<div className="box-1">
|
||||
@ -127,278 +139,17 @@ export default function Home() {
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row row-50">
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<article className="product-classic">
|
||||
<div className="product-classic-media">
|
||||
<div
|
||||
className="owl-carousel"
|
||||
data-items="1"
|
||||
data-nav="true"
|
||||
data-stage-padding="0"
|
||||
data-loop="false"
|
||||
data-margin="0"
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
</div>
|
||||
<div className="product-classic-price">
|
||||
<span>$5000\mo</span>
|
||||
</div>
|
||||
</div>
|
||||
<h4 className="product-classic-title">
|
||||
<a href="single-property.html">401 Biscayne Boulevard, Miami</a>
|
||||
</h4>
|
||||
<div className="product-classic-divider"></div>
|
||||
<ul className="product-classic-list">
|
||||
<li>
|
||||
<span className="icon mdi mdi-vector-square"></span>
|
||||
<span>480 Sq Ft</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-10"></span>
|
||||
<span>2 Bathrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-05"></span>
|
||||
<span>2 Bedrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-26"></span>
|
||||
<span>1 Garage</span>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
<div className="my-10!">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
<CardProduct />
|
||||
<CardProduct />
|
||||
<CardProduct />
|
||||
<CardProduct />
|
||||
<CardProduct />
|
||||
<CardProduct />
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<article className="product-classic">
|
||||
<div className="product-classic-media">
|
||||
<div
|
||||
className="owl-carousel"
|
||||
data-items="1"
|
||||
data-nav="true"
|
||||
data-stage-padding="0"
|
||||
data-loop="false"
|
||||
data-margin="0"
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
</div>
|
||||
<div className="product-classic-price">
|
||||
<span>$2500\mo</span>
|
||||
</div>
|
||||
</div>
|
||||
<h4 className="product-classic-title">
|
||||
<a href="single-property.html">923 Folsom St, San Francisco</a>
|
||||
</h4>
|
||||
<div className="product-classic-divider"></div>
|
||||
<ul className="product-classic-list">
|
||||
<li>
|
||||
<span className="icon mdi mdi-vector-square"></span>
|
||||
<span>535 Sq Ft</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-10"></span>
|
||||
<span>2 Bathrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-05"></span>
|
||||
<span>3 Bedrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-26"></span>
|
||||
<span>1 Garage</span>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<article className="product-classic">
|
||||
<div className="product-classic-media">
|
||||
<div
|
||||
className="owl-carousel"
|
||||
data-items="1"
|
||||
data-nav="true"
|
||||
data-stage-padding="0"
|
||||
data-loop="false"
|
||||
data-margin="0"
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
</div>
|
||||
<div className="product-classic-price">
|
||||
<span>9340\mo</span>
|
||||
</div>
|
||||
</div>
|
||||
<h4 className="product-classic-title">
|
||||
<a href="single-property.html">225 Maywood Dr, San Francisco</a>
|
||||
</h4>
|
||||
<div className="product-classic-divider"></div>
|
||||
<ul className="product-classic-list">
|
||||
<li>
|
||||
<span className="icon mdi mdi-vector-square"></span>
|
||||
<span>435 Sq Ft</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-10"></span>
|
||||
<span>1 Bathroom</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-05"></span>
|
||||
<span>1 Bedroom</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-26"></span>
|
||||
<span>1 Garage</span>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<article className="product-classic">
|
||||
<div className="product-classic-media">
|
||||
<div
|
||||
className="owl-carousel"
|
||||
data-items="1"
|
||||
data-nav="true"
|
||||
data-stage-padding="0"
|
||||
data-loop="false"
|
||||
data-margin="0"
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
</div>
|
||||
<div className="product-classic-price">
|
||||
<span>$5550\mo</span>
|
||||
</div>
|
||||
</div>
|
||||
<h4 className="product-classic-title">
|
||||
<a href="single-property.html">35 Pond St, New York</a>
|
||||
</h4>
|
||||
<div className="product-classic-divider"></div>
|
||||
<ul className="product-classic-list">
|
||||
<li>
|
||||
<span className="icon mdi mdi-vector-square"></span>
|
||||
<span>430 Sq Ft</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-10"></span>
|
||||
<span>2 Bathrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-05"></span>
|
||||
<span>3 Bedrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-26"></span>
|
||||
<span>1 Garage</span>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<article className="product-classic">
|
||||
<div className="product-classic-media">
|
||||
<div
|
||||
className="owl-carousel"
|
||||
data-items="1"
|
||||
data-nav="true"
|
||||
data-stage-padding="0"
|
||||
data-loop="false"
|
||||
data-margin="0"
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
</div>
|
||||
<div className="product-classic-price">
|
||||
<span>$2520\mo</span>
|
||||
</div>
|
||||
</div>
|
||||
<h4 className="product-classic-title">
|
||||
<a href="single-property.html">182 3rd St, Seattle</a>
|
||||
</h4>
|
||||
<div className="product-classic-divider"></div>
|
||||
<ul className="product-classic-list">
|
||||
<li>
|
||||
<span className="icon mdi mdi-vector-square"></span>
|
||||
<span>630 Sq Ft</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-10"></span>
|
||||
<span>3 Bathrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-05"></span>
|
||||
<span>3 Bedrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-26"></span>
|
||||
<span>2 Garages</span>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
<div className="col-md-6 col-lg-4">
|
||||
<article className="product-classic">
|
||||
<div className="product-classic-media">
|
||||
<div
|
||||
className="owl-carousel"
|
||||
data-items="1"
|
||||
data-nav="true"
|
||||
data-stage-padding="0"
|
||||
data-loop="false"
|
||||
data-margin="0"
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
</div>
|
||||
<div className="product-classic-price">
|
||||
<span>$5000\mo</span>
|
||||
</div>
|
||||
</div>
|
||||
<h4 className="product-classic-title">
|
||||
<a href="single-property.html">623 Willow Rd, Dallas</a>
|
||||
</h4>
|
||||
<div className="product-classic-divider"></div>
|
||||
<ul className="product-classic-list">
|
||||
<li>
|
||||
<span className="icon mdi mdi-vector-square"></span>
|
||||
<span>530 Sq Ft</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-10"></span>
|
||||
<span>2 Bathrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-05"></span>
|
||||
<span>2 Bedrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-26"></span>
|
||||
<span>2 Garages</span>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
<div className="col-12 text-center">
|
||||
|
||||
<div className="text-center mt-10!">
|
||||
<a className="button button-primary" href="/">
|
||||
View all properties
|
||||
</a>
|
||||
@ -407,7 +158,7 @@ export default function Home() {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section parallax-container" data-parallax-img="images/bg-02-1920x916.jpg">
|
||||
<section className="section parallax-container" data-parallax-img="/images/bg-02-1920x916.jpg">
|
||||
<div className="parallax-content section-lg context-dark text-center">
|
||||
<div className="container">
|
||||
<div className="row row-30">
|
||||
|
||||
51
src/components/CardProduct.tsx
Normal file
51
src/components/CardProduct.tsx
Normal file
@ -0,0 +1,51 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export default function CardProduct() {
|
||||
return (
|
||||
<div>
|
||||
<article className="product-classic">
|
||||
<div className="product-classic-media">
|
||||
<div
|
||||
className="owl-carousel"
|
||||
data-items="1"
|
||||
data-nav="true"
|
||||
data-stage-padding="0"
|
||||
data-loop="false"
|
||||
data-margin="0"
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
<Image src="/images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<Image src="/images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<Image src="/images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<Image src="/images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
</div>
|
||||
<div className="product-classic-price">
|
||||
<span>$5000\mo</span>
|
||||
</div>
|
||||
</div>
|
||||
<h4 className="product-classic-title">
|
||||
<a href="single-property.html">401 Biscayne Boulevard, Miami</a>
|
||||
</h4>
|
||||
<div className="product-classic-divider"></div>
|
||||
<ul className="product-classic-list">
|
||||
<li>
|
||||
<span className="icon mdi mdi-vector-square"></span>
|
||||
<span>480 Sq Ft</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-10"></span>
|
||||
<span>2 Bathrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-05"></span>
|
||||
<span>2 Bedrooms</span>
|
||||
</li>
|
||||
<li>
|
||||
<span className="icon hotel-icon-26"></span>
|
||||
<span>1 Garage</span>
|
||||
</li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user