dynamic-realty/dynamic-realty-next
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: blog and blog detail UI styling

Browse Source
This commit is contained in:
RizqiSyahrendra 2025-04-19 18:21:25 +07:00
parent df06f4cec8
commit de256487b2
11 changed files with 276 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/css/style.css
View File

@ -3751,8 +3751,7 @@ html .page .divider-secondary::after {
.button-primary:hover, .button-primary:active {
color: #151515;
background-color: #fdde52;
border-color: #fdde52;
opacity: 0.8;
}
.button-primary.button-ujarak::before {
@ -3789,8 +3788,7 @@ html .page .divider-secondary::after {
.button-primary:hover, .button-primary:active {
color: #151515;
background-color: #fdde52;
border-color: #fdde52;
opacity: 0.8;
}
.button-primary.button-ujarak::before {
@ -4159,7 +4157,8 @@ input:-webkit-autofill ~ .form-validation {
-webkit-appearance: none;
transition: .3s ease-in-out;
letter-spacing: 0;
/* border: 1px solid #f3f4f9; */
border: 1px solid #f3f4f9;
border-color: #f3f4f9!;
}
.form-input:focus {

190
src/app/blog/[slug]/page.tsx Normal file
View File

@ -0,0 +1,190 @@
import HeroImage from "@/components/HeroImage";
import { getDefaultMetadata } from "@/utils/metadata";
import { Metadata } from "next";
const metaDesc =
"Explore the latest insights, news, and resources on the Dynamic Realty blog. Read our articles today.";
export async function generateMetadata(): Promise<Metadata> {
const metadata = await getDefaultMetadata();
metadata.title = `Blog - ${metadata.openGraph?.siteName}`;
metadata.description = metaDesc;
return metadata;
}
export default function BlogDetail() {
return (
<>
<HeroImage />
<section className="section section-md bg-colorSection1">
<div className="container">
<div className="row justify-content-lg-center">
<div className="col-lg-8">
<article className="blog-post-solo">
<div className="blog-post-solo-part">
<p>
Showcasing a warm, traditional-style exterior and the highest caliber of contemporary European
finishes throughout, towering glass doors open to grand-scale living spaces.
</p>
</div>
<div className="blog-post-solo-footer">
<div className="blog-post-solo-footer-left">
<ul className="blog-post-solo-footer-list">
<li>
<span className="icon mdi mdi-clock"></span>
<a href="#">February 10, 2021</a>
</li>
</ul>
</div>
<div className="blog-post-solo-footer-right">
<ul className="blog-post-solo-footer-list-1">
<li>
<span>Share this post</span>
</li>
<li>
<a className="icon icon-circle icon-rounded icon-5 fa-facebook" href="#"></a>
</li>
<li>
<a className="icon icon-circle icon-rounded icon-4 fa-google-plus" href="#"></a>
</li>
<li>
<a className="icon icon-circle icon-rounded icon-6 fa-twitter" href="#"></a>
</li>
<li>
<a className="icon icon-circle icon-rounded icon-6 fa-pinterest-p" href="#"></a>
</li>
</ul>
</div>
</div>
<div className="post-simple-group">
<div className="post-simple-group-title">
<h6>Recent Posts</h6>
</div>
<div className="post-simple-group-divider"></div>
<div className="row row-30">
<div className="col-sm-6">
<article className="post-simple">
<div className="post-simple-img">
<img src="/images/blog-post-03-736x540.jpg" alt="" width="736" height="540" />
</div>
<div className="post-simple-body">
<div className="post-simple-title">
<h4>
<a href="#">Turks and Caicos Villa to be Sold for Record $7.6M</a>
</h4>
</div>
<div className="post-simple-time">
<span className="icon mdi mdi-clock"></span>
<a className="time" href="#">
March 15, 2021
</a>
</div>
</div>
</article>
</div>
<div className="col-sm-6">
<article className="post-simple">
<div className="post-simple-img">
<img src="/images/blog-post-04-736x540.jpg" alt="" width="736" height="540" />
</div>
<div className="post-simple-body">
<div className="post-simple-title">
<h4>
<a href="#">How We Build a Better LA for Fifth Year in a Row</a>
</h4>
</div>
<div className="post-simple-time">
<span className="icon mdi mdi-clock"></span>
<a className="time" href="#">
March 15, 2021
</a>
</div>
</div>
</article>
</div>
</div>
</div>
</article>
</div>
{/* Sidebar */}
<div className="col-lg-4">
<div className="pdl-xl-40">
<div className="row row-60">
<div className="col-md-6 col-lg-12">
<form className="form-lg rd-search rd-search-classic">
<div className="form-wrap">
<label className="form-label" htmlFor="rd-search-form-input">
Search the blog...
</label>
<input
className="form-input"
id="rd-search-form-input"
type="text"
name="s"
autoComplete="off"
/>
</div>
<button className="rd-search-submit" type="submit">
{" "}
</button>
</form>
</div>
<div className="col-md-6 col-lg-12">
<div className="block-info-2">
<div className="block-info-2-title">
<h3>Latest Listings</h3>
</div>
<a className="post-minimal-1" href="#">
<div className="post-minimal-1-left">
<img src="/images/post-agent-01-212x208.jpg" alt="" width="212" height="208" />
</div>
<div className="post-minimal-1-body">
<div className="post-minimal-1-title">
<span>401 Biscayne Blvd</span>
</div>
<div className="post-minimal-1-text">
<span>$5000\mo</span>
</div>
</div>
</a>
<a className="post-minimal-1" href="#">
<div className="post-minimal-1-left">
<img src="/images/post-agent-02-212x208.jpg" alt="" width="212" height="208" />
</div>
<div className="post-minimal-1-body">
<div className="post-minimal-1-title">
<span>35 Pond St, New York</span>
</div>
<div className="post-minimal-1-text">
<span>$5550\mo</span>
</div>
</div>
</a>
<a className="post-minimal-1" href="#">
<div className="post-minimal-1-left">
<img src="/images/post-agent-03-212x208.jpg" alt="" width="212" height="208" />
</div>
<div className="post-minimal-1-body">
<div className="post-minimal-1-title">
<span>182 3rd St, Seattle</span>
</div>
<div className="post-minimal-1-text">
<span>$2520\mo</span>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</>
);
}

37
src/app/blog/page.tsx
View File

@ -1,6 +1,19 @@
import CardBlog from "@/components/CardBlog";
import HeroImage from "@/components/HeroImage";
import { CardBlogData } from "@/schema/blog";
import { getDefaultMetadata } from "@/utils/metadata";
import { Metadata } from "next";
const metaDesc =
"Explore the latest insights, news, and resources on the Dynamic Realty blog. Read our articles today.";
export async function generateMetadata(): Promise<Metadata> {
const metadata = await getDefaultMetadata();
metadata.title = `Blog - ${metadata.openGraph?.siteName}`;
metadata.description = metaDesc;
return metadata;
}
export default function Blog() {
const data: CardBlogData[] = [
@ -57,13 +70,33 @@ export default function Blog() {
return (
<>
<HeroImage />
<section className="section section-md bg-gray-12">
<section className="section section-md bg-colorSection2">
<div className="container">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div>
<form action="/blog" method="GET" className="form-lg rd-search rd-search-classic">
<div className="form-wrap">
<input
placeholder="Search blog..."
className="form-input"
id="rd-search-form-input"
type="text"
name="s"
autoComplete="off"
/>
</div>
<button className="rd-search-submit" type="submit"></button>
</form>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-5">
{data.map((blog) => (
<CardBlog key={blog.slug} data={blog} />
))}
</div>
<div className="mt-5">
<button type="submit" className="button button-primary">
LOAD MORE...
</button>
</div>
</div>
</section>
</>

37
src/app/globals.css
View File

@ -12,23 +12,26 @@
--font-mono: var(--font-geist-mono);
--font-montserrat: var(--font-montserrat);
--font-playfairdisplay: var(--font-playfairdisplay);
--color-colorExt1: #0a0a0a;
--color-colorExt2: #ffffff;
--color-colorExt3: #967244;
--color-colorext4: #bc986b;
--color-colorExt5: #1d1d1d;
--color-colorHeader: var(--color-colorExt1);
--color-colorHeaderText: var(--color-colorExt2);
--color-colorHeaderTextHover: var(--color-colorext4);
--color-colorHeroOverlay: var(--color-colorExt5);
--color-colorFooter: var(--color-colorExt1);
--color-colorFooter2: var(--color-colorExt5);
--color-colorFooterText: var(--color-colorExt2);
--color-colorFooterTextHover: var(--color-colorExt3);
--color-colorFormInput: var(--color-colorExt2);
--color-colorContactForm: var(--color-colorExt5);
--color-colorText1: var(--color-colorExt1);
--color-colorText2: var(--color-colorExt2);
--color-colorExt10: #0a0a0a;
--color-colorExt20: #ffffff;
--color-colorExt21: #f3f4f9;
--color-colorExt30: #967244;
--color-colorext40: #bc986b;
--color-colorExt50: #1d1d1d;
--color-colorSection1: var(--color-colorExt20);
--color-colorSection2: var(--color-colorExt21);
--color-colorHeader: var(--color-colorExt10);
--color-colorHeaderText: var(--color-colorExt20);
--color-colorHeaderTextHover: var(--color-colorext40);
--color-colorHeroOverlay: var(--color-colorExt50);
--color-colorFooter: var(--color-colorExt10);
--color-colorFooter2: var(--color-colorExt50);
--color-colorFooterText: var(--color-colorExt20);
--color-colorFooterTextHover: var(--color-colorExt30);
--color-colorFormInput: var(--color-colorExt20);
--color-colorContactForm: var(--color-colorExt50);
--color-colorText1: var(--color-colorExt10);
--color-colorText2: var(--color-colorExt20);
}
@layer components {

10
src/app/layout.tsx
View File

@ -43,15 +43,15 @@ export default function RootLayout({
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
<meta charSet="utf-8" />
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/images/favicon.ico" type="image/x-icon" />
<link
rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900%7CRoboto:300,400,500,700,900"
/>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/fonts.css" />
<link rel="stylesheet" href="/css/bootstrap.css" />
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/fonts.css" />
</head>
<body
className={`${geistSans.variable} ${geistMono.variable} ${montserrat.variable} ${playfairDisplay.variable} antialiased`}
@ -59,7 +59,7 @@ export default function RootLayout({
<div className="ie-panel">
<a href="http://windows.microsoft.com/en-US/internet-explorer/">
<img
src="images/ie8-panel/warning_bar_0000_us.jpg"
src="/images/ie8-panel/warning_bar_0000_us.jpg"
height="42"
width="820"
alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today."

6
src/app/page.tsx
View File

@ -23,7 +23,7 @@ export default function Home() {
<ContactFormSection />
</div>
<section className="section section-lg bg-default">
<section className="section section-lg bg-colorSection1">
<div className="container">
<div className="row row-30">
<div className="col-md-6 col-lg-3">
@ -122,7 +122,7 @@ export default function Home() {
<GoogleReviewBox />
<section className="section section-lg bg-gray-12">
<section className="section section-lg bg-colorSection2">
<div className="container">
<div className="layout-4">
<h2 className="heading-decoration-1">
@ -200,7 +200,7 @@ export default function Home() {
</div>
</section>
<section className="section section-lg bg-default">
<section className="section section-lg bg-colorSection1">
<div className="container">
<h2 className="heading-decoration-1">
<span className="heading-inner">Find Us</span>

2
src/components/GoogleReviewBox.tsx
View File

@ -1,6 +1,6 @@
export default function GoogleReviewBox() {
return (
<section className="section section-lg bg-gray-12">
<section className="section section-lg bg-colorSection2">
<div className="container">
<h2 className="heading-decoration-1">
<span className="heading-inner">Making Moves, Building Trust</span>

4
src/components/layouts/Footer.tsx
View File

@ -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/featured-properties-17-480x287.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/featured-properties-17-480x287.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">

8
src/components/layouts/Header.tsx
View File

@ -75,20 +75,20 @@ export default function Header() {
<img
className="brand-logo-dark"
// src="images/logo-default-142x41.png"
src="images/logo2.png"
src="/images/logo2.png"
alt=""
width="142"
height="41"
srcSet="images/logo2.png 2x"
srcSet="/images/logo2.png 2x"
/>
<img
className="brand-logo-light"
// src="images/logo-inverse-121x61.png"\
src="images/logo2.png"
src="/images/logo2.png"
alt=""
width="121"
height="61"
srcSet="images/logo2.png 2x"
srcSet="/images/logo2.png 2x"
/>
</a>
{/* <h3 className="text-colorHeaderText! font-montserrat! font-semibold! hidden lg:inline">

4
src/components/layouts/InitialScript.tsx
View File

@ -5,8 +5,8 @@ import Script from "next/script";
export default function InitialScript() {
return (
<>
<Script src="js/core.min.js" strategy="beforeInteractive" />
<Script src="js/script.js" strategy="lazyOnload" />
<Script src="/js/core.min.js" strategy="beforeInteractive" />
<Script src="/js/script.js" strategy="lazyOnload" />
</>
);
}

20
src/middleware.ts
View File

@ -20,17 +20,17 @@ export function middleware(request: NextRequest) {
request.headers.set("x-meta-desc", metaDesc);
// redirect for /blog/<slug>/ path
const blogPathRegex = /^\/blog\/([^\/]+)(\/[^\/]*)*\/?$/;
if (blogPathRegex.test(path) && !path.includes("/blog/?")) {
const newBlogPath = path.replace(/^\/blog/, "") || "/";
return NextResponse.redirect(`${mainUrl}${newBlogPath}`, 301);
}
// const blogPathRegex = /^\/blog\/([^\/]+)(\/[^\/]*)*\/?$/;
// if (blogPathRegex.test(path) && !path.includes("/blog/?")) {
// const newBlogPath = path.replace(/^\/blog/, "") || "/";
// return NextResponse.redirect(`${mainUrl}${newBlogPath}`, 301);
// }
// redirect for /about/<slug>/ path
const aboutPathRegex = /^\/about\/([^\/]+)(\/[^\/]*)*\/?$/;
if (aboutPathRegex.test(path)) {
const newAboutPath = path.replace(/^\/about/, "") || "/";
return NextResponse.redirect(`${mainUrl}${newAboutPath}`, 301);
}
// const aboutPathRegex = /^\/about\/([^\/]+)(\/[^\/]*)*\/?$/;
// if (aboutPathRegex.test(path)) {
// const newAboutPath = path.replace(/^\/about/, "") || "/";
// return NextResponse.redirect(`${mainUrl}${newAboutPath}`, 301);
// }
return NextResponse.next({
request: {