fix: home, header, footer layouting and styling
This commit is contained in:
parent
502560b738
commit
1cad74a3a7
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 484 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 49 KiB |
8
public/images/google-provider.svg
Normal file
8
public/images/google-provider.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
|
||||
<path fill="#4285F4" d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"/>
|
||||
<path fill="#34A853" d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"/>
|
||||
<path fill="#FBBC05" d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"/>
|
||||
<path fill="#EA4335" d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@ -74,10 +74,10 @@ export default function Home() {
|
||||
data-margin="0"
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
<img src="images/featured-properties-01-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-02-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-03-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-04-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" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
</div>
|
||||
<div className="product-classic-price">
|
||||
<span>$5000\mo</span>
|
||||
@ -119,10 +119,10 @@ export default function Home() {
|
||||
data-margin="0"
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
<img src="images/featured-properties-05-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-06-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-07-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-08-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" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
</div>
|
||||
<div className="product-classic-price">
|
||||
<span>$2500\mo</span>
|
||||
@ -164,10 +164,10 @@ export default function Home() {
|
||||
data-margin="0"
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
<img src="images/featured-properties-09-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-10-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-11-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-12-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" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
</div>
|
||||
<div className="product-classic-price">
|
||||
<span>9340\mo</span>
|
||||
@ -209,10 +209,10 @@ export default function Home() {
|
||||
data-margin="0"
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
<img src="images/featured-properties-13-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-14-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-15-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-16-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" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
</div>
|
||||
<div className="product-classic-price">
|
||||
<span>$5550\mo</span>
|
||||
@ -255,9 +255,9 @@ export default function Home() {
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-18-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-19-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-20-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>
|
||||
@ -299,10 +299,10 @@ export default function Home() {
|
||||
data-margin="0"
|
||||
data-mouse-drag="false"
|
||||
>
|
||||
<img src="images/featured-properties-21-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-22-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-23-480x287.jpg" alt="" width="480" height="287" />
|
||||
<img src="images/featured-properties-24-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" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="480" height="287" />
|
||||
</div>
|
||||
<div className="product-classic-price">
|
||||
<span>$5000\mo</span>
|
||||
@ -333,7 +333,7 @@ export default function Home() {
|
||||
</article>
|
||||
</div>
|
||||
<div className="col-12 text-center">
|
||||
<a className="button button-primary" href="properties-grid.html">
|
||||
<a className="button button-primary" href="/">
|
||||
View all properties
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
import StarRating from "./StarRating";
|
||||
|
||||
export default function GoogleReviewBox() {
|
||||
return (
|
||||
<section className="section section-lg bg-gray-12">
|
||||
@ -32,17 +34,8 @@ export default function GoogleReviewBox() {
|
||||
</p>
|
||||
</div>
|
||||
<div className="quote-modern-meta-outer">
|
||||
<img
|
||||
className="quote-modern-avatar"
|
||||
src="images/testimonials-1-57x57.jpg"
|
||||
alt=""
|
||||
width="57"
|
||||
height="57"
|
||||
/>
|
||||
<div className="quote-modern-meta">
|
||||
<h4 className="quote-modern-cite">Karen Sanders</h4>
|
||||
<p className="quote-modern-position">Pharmacist</p>
|
||||
</div>
|
||||
<img className="quote-modern-avatar" src="images/google-provider.svg" alt="" width="40" height="40" />
|
||||
<StarRating value={5} />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
@ -58,17 +51,8 @@ export default function GoogleReviewBox() {
|
||||
</p>
|
||||
</div>
|
||||
<div className="quote-modern-meta-outer">
|
||||
<img
|
||||
className="quote-modern-avatar"
|
||||
src="images/testimonials-2-57x57.jpg"
|
||||
alt=""
|
||||
width="57"
|
||||
height="57"
|
||||
/>
|
||||
<div className="quote-modern-meta">
|
||||
<h4 className="quote-modern-cite">Walter Williams</h4>
|
||||
<p className="quote-modern-position">Lifeguard</p>
|
||||
</div>
|
||||
<img className="quote-modern-avatar" src="images/google-provider.svg" alt="" width="40" height="40" />
|
||||
<StarRating value={5} />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
@ -84,17 +68,8 @@ export default function GoogleReviewBox() {
|
||||
</p>
|
||||
</div>
|
||||
<div className="quote-modern-meta-outer">
|
||||
<img
|
||||
className="quote-modern-avatar"
|
||||
src="images/testimonials-3-57x57.jpg"
|
||||
alt=""
|
||||
width="57"
|
||||
height="57"
|
||||
/>
|
||||
<div className="quote-modern-meta">
|
||||
<h4 className="quote-modern-cite">Kate Anderson</h4>
|
||||
<p className="quote-modern-position">Decorator</p>
|
||||
</div>
|
||||
<img className="quote-modern-avatar" src="images/google-provider.svg" alt="" width="40" height="40" />
|
||||
<StarRating value={4} />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
@ -110,17 +85,8 @@ export default function GoogleReviewBox() {
|
||||
</p>
|
||||
</div>
|
||||
<div className="quote-modern-meta-outer">
|
||||
<img
|
||||
className="quote-modern-avatar"
|
||||
src="images/testimonials-4-57x57.jpg"
|
||||
alt=""
|
||||
width="57"
|
||||
height="57"
|
||||
/>
|
||||
<div className="quote-modern-meta">
|
||||
<h4 className="quote-modern-cite">Peter Smith</h4>
|
||||
<p className="quote-modern-position">Historian</p>
|
||||
</div>
|
||||
<img className="quote-modern-avatar" src="images/google-provider.svg" alt="" width="40" height="40" />
|
||||
<StarRating value={4.5} />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
67
src/components/StarRating.tsx
Normal file
67
src/components/StarRating.tsx
Normal file
@ -0,0 +1,67 @@
|
||||
import React from "react";
|
||||
|
||||
interface StarRatingProps {
|
||||
value: number;
|
||||
baseColor?: string;
|
||||
filledColor?: string;
|
||||
size?: number;
|
||||
}
|
||||
|
||||
const StarRating: React.FC<StarRatingProps> = ({
|
||||
value,
|
||||
baseColor = "#F2EFE7",
|
||||
filledColor = "#FFD95F",
|
||||
size = 24,
|
||||
}) => {
|
||||
const stars = Array.from({ length: 5 }, (_, i) => {
|
||||
if (value >= i + 1) {
|
||||
return (
|
||||
<svg
|
||||
key={i}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill={filledColor}
|
||||
width={size}
|
||||
height={size}
|
||||
>
|
||||
<path
|
||||
d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
} else if (value > i && value < i + 1) {
|
||||
return (
|
||||
<svg key={i} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={size} height={size}>
|
||||
<defs>
|
||||
<linearGradient id={`half-grad-${i}`}>
|
||||
<stop offset="50%" stopColor={filledColor} />
|
||||
<stop offset="50%" stopColor={baseColor} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
fill={`url(#half-grad-${i})`}
|
||||
d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<svg key={i} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill={baseColor} width={size} height={size}>
|
||||
<path
|
||||
d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
return <div className="flex">{stars}</div>;
|
||||
};
|
||||
|
||||
export default StarRating;
|
||||
@ -10,7 +10,7 @@ export default function Footer() {
|
||||
</h3>
|
||||
<a className="post-minimal" href="single-property.html">
|
||||
<div className="post-minimal-image">
|
||||
<img src="images/post-minimal-01-161x136.jpg" alt="" width="161" height="136" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="161" height="136" />
|
||||
</div>
|
||||
<div className="post-minimal-body">
|
||||
<div className="post-minimal-title">
|
||||
@ -25,7 +25,7 @@ export default function Footer() {
|
||||
</a>
|
||||
<a className="post-minimal" href="single-property.html">
|
||||
<div className="post-minimal-image">
|
||||
<img src="images/post-minimal-02-161x136.jpg" alt="" width="161" height="136" />
|
||||
<img src="images/featured-properties-17-480x287.jpg" alt="" width="161" height="136" />
|
||||
</div>
|
||||
<div className="post-minimal-body">
|
||||
<div className="post-minimal-title">
|
||||
|
||||
@ -213,7 +213,7 @@ export default function Header() {
|
||||
</button>
|
||||
|
||||
<div className="rd-navbar-brand lg:flex lg:flex-col lg:items-center">
|
||||
<a className="brand" href="index.html">
|
||||
<a className="brand" href="/">
|
||||
<img
|
||||
className="brand-logo-dark"
|
||||
src="images/logo-default-142x41.png"
|
||||
@ -239,27 +239,27 @@ export default function Header() {
|
||||
<div className="rd-navbar-nav-wrap">
|
||||
<ul className="rd-navbar-nav">
|
||||
<li className="rd-nav-item active">
|
||||
<a className="rd-nav-link" href="index.html">
|
||||
<a className="rd-nav-link" href="/">
|
||||
HOME
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-nav-item">
|
||||
<a className="rd-nav-link" href="index.html">
|
||||
<a className="rd-nav-link" href="/">
|
||||
RENTAL PORTAL
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-nav-item">
|
||||
<a className="rd-nav-link" href="index.html">
|
||||
<a className="rd-nav-link" href="/">
|
||||
LISTINGS FOR SALE
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-nav-item">
|
||||
<a className="rd-nav-link" href="index.html">
|
||||
<a className="rd-nav-link" href="/">
|
||||
LISTINGS FOR RENT
|
||||
</a>
|
||||
</li>
|
||||
<li className="rd-nav-item">
|
||||
<a className="rd-nav-link" href="index.html">
|
||||
<a className="rd-nav-link" href="/">
|
||||
BLOGS
|
||||
</a>
|
||||
</li>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user