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";
|
"use client";
|
||||||
|
|
||||||
|
import CardProduct from "@/components/CardProduct";
|
||||||
import ContactFormSection from "@/components/ContactFormSection";
|
import ContactFormSection from "@/components/ContactFormSection";
|
||||||
import GoogleReviewBox from "@/components/GoogleReviewBox";
|
import GoogleReviewBox from "@/components/GoogleReviewBox";
|
||||||
import HeroSlider from "@/components/HeroSlider";
|
import HeroSlider from "@/components/HeroSlider";
|
||||||
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useRef } from "react";
|
import { useRef } from "react";
|
||||||
|
|
||||||
@ -80,7 +82,17 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</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="box-1-cell height-fill context-dark bg-colorHeader/80!">
|
||||||
<div className="cell-inner box-1-outer">
|
<div className="cell-inner box-1-outer">
|
||||||
<div className="box-1">
|
<div className="box-1">
|
||||||
@ -127,278 +139,17 @@ export default function Home() {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="row row-50">
|
<div className="my-10!">
|
||||||
<div className="col-md-6 col-lg-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||||
<article className="product-classic">
|
<CardProduct />
|
||||||
<div className="product-classic-media">
|
<CardProduct />
|
||||||
<div
|
<CardProduct />
|
||||||
className="owl-carousel"
|
<CardProduct />
|
||||||
data-items="1"
|
<CardProduct />
|
||||||
data-nav="true"
|
<CardProduct />
|
||||||
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>
|
</div>
|
||||||
<div className="col-md-6 col-lg-4">
|
|
||||||
<article className="product-classic">
|
<div className="text-center mt-10!">
|
||||||
<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">
|
|
||||||
<a className="button button-primary" href="/">
|
<a className="button button-primary" href="/">
|
||||||
View all properties
|
View all properties
|
||||||
</a>
|
</a>
|
||||||
@ -407,7 +158,7 @@ export default function Home() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</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="parallax-content section-lg context-dark text-center">
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row row-30">
|
<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