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

Merge pull request 'dev' (#4) from dev into main

Browse Source 
Reviewed-on: #4
This commit is contained in:
RizqiSyahrendra 2025-04-19 02:37:48 +00:00
commit 46532dfb53
10 changed files with 206 additions and 330 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/blog/page.tsx Normal file
View File

@ -0,0 +1,3 @@
export default function Blog() {
return <></>;
}

1
src/app/globals.css
View File

@ -11,6 +11,7 @@
--font-sans: var(--font-geist-sans); --font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono); --font-mono: var(--font-geist-mono);
--font-montserrat: var(--font-montserrat); --font-montserrat: var(--font-montserrat);
--font-playfairdisplay: var(--font-playfairdisplay);
--color-colorExt1: #0a0a0a; --color-colorExt1: #0a0a0a;
--color-colorExt2: #ffffff; --color-colorExt2: #ffffff;
--color-colorExt3: #967244; --color-colorExt3: #967244;

11
src/app/layout.tsx
View File

@ -1,5 +1,5 @@
import InitialScript from "@/components/layouts/InitialScript"; import InitialScript from "@/components/layouts/InitialScript";
import { Geist, Geist_Mono, Montserrat } from "next/font/google"; import { Geist, Geist_Mono, Montserrat, Playfair_Display } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { Metadata } from "next"; import { Metadata } from "next";
import { getDefaultMetadata } from "@/utils/metadata"; import { getDefaultMetadata } from "@/utils/metadata";
@ -21,6 +21,11 @@ const montserrat = Montserrat({
subsets: ["latin"], subsets: ["latin"],
}); });
const playfairDisplay = Playfair_Display({
variable: "--font-playfairdisplay",
subsets: ["latin"],
});
export async function generateMetadata(): Promise<Metadata> { export async function generateMetadata(): Promise<Metadata> {
const metadata = await getDefaultMetadata(); const metadata = await getDefaultMetadata();
return metadata; return metadata;
@ -48,7 +53,9 @@ export default function RootLayout({
<link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/fonts.css" /> <link rel="stylesheet" href="css/fonts.css" />
</head> </head>
<body className={`${geistSans.variable} ${geistMono.variable} ${montserrat.variable} antialiased`}> <body
className={`${geistSans.variable} ${geistMono.variable} ${montserrat.variable} ${playfairDisplay.variable} antialiased`}
>
<div className="ie-panel"> <div className="ie-panel">
<a href="http://windows.microsoft.com/en-US/internet-explorer/"> <a href="http://windows.microsoft.com/en-US/internet-explorer/">
<img <img

15
src/app/not-found.tsx Normal file
View File

@ -0,0 +1,15 @@
export default function NotFound() {
return (
<>
<section className="section section-md bg-default text-center">
<div className="container">
<h2 className="text-spacing-20">Page Not Found</h2>
<p className="heading-5">You may have mistyped the address or the page may have moved</p>
<a className="button button-primary" href="/">
Go to Homepage
</a>
</div>
</section>
</>
);
}

318
src/app/page.tsx
View File

@ -1,12 +1,27 @@
"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 Hero from "@/components/Hero"; import HeroSlider from "@/components/HeroSlider";
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useRef } from "react";
export default function Home() { export default function Home() {
const formRef = useRef<HTMLDivElement | null>(null);
function scrollToForm() {
formRef.current?.scrollIntoView?.({ behavior: "smooth" });
}
return ( return (
<> <>
<Hero /> <HeroSlider onClickBook={scrollToForm} />
<div className="lg:hidden" ref={formRef}>
<ContactFormSection />
</div>
<section className="section section-lg bg-default"> <section className="section section-lg bg-default">
<div className="container"> <div className="container">
@ -67,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">
@ -114,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>
@ -394,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">
@ -455,10 +219,6 @@ export default function Home() {
</div> </div>
</div> </div>
</section> </section>
<div className="lg:hidden">
<ContactFormSection />
</div>
</> </>
); );
} }

51
src/components/CardProduct.tsx Normal file
View 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>
);
}

2
src/components/ContactFormSection.tsx
View File

@ -1,6 +1,6 @@
export default function ContactFormSection() { export default function ContactFormSection() {
return ( return (
<div className="box-1-cell height-fill context-dark bg-colorContactForm z-20!"> <div className="box-1-cell height-fill context-dark bg-colorContactForm! z-20!">
<div className="box-1-bg-shape"> <div className="box-1-bg-shape">
<img className="box-1-bg-image" src="images/bg-shape-1.png" alt="" role="presentation" /> <img className="box-1-bg-image" src="images/bg-shape-1.png" alt="" role="presentation" />
</div> </div>

2
src/components/GoogleReviewBox.tsx
View File

@ -3,7 +3,7 @@ export default function GoogleReviewBox() {
<section className="section section-lg bg-gray-12"> <section className="section section-lg bg-gray-12">
<div className="container"> <div className="container">
<h2 className="heading-decoration-1"> <h2 className="heading-decoration-1">
<span className="heading-inner">What People Say</span> <span className="heading-inner">Making Moves, Building Trust</span>
</h2> </h2>
</div> </div>
<div className="container container-wide"> <div className="container container-wide">

47
src/components/Hero.tsx
View File

@ -1,47 +0,0 @@
"use client";
import { Swiper, SwiperSlide } from "swiper/react";
import ContactFormBox from "./ContactFormBox";
import { Autoplay } from "swiper/modules";
export default function Hero() {
return (
<section className="section flex! flex-row! justify-end! relative! min-h-80! lg:min-h-auto!">
<Swiper
className="absolute w-full h-full"
modules={[Autoplay]}
spaceBetween={50}
slidesPerView={1}
autoplay={{ delay: 4000 }}
loop
>
<SwiperSlide className="bg-[url(/images/bg-header2.jpg)]">
<section className="section section-lg text-colorText2! bg-colorExt5/50 w-full h-full">
<div className="container">
<div className="row">
<div className="col-12 col-lg-8 text-wrap">
<div className="text-4xl lg:text-8xl!">Real Estate, Refined</div>
<div className="text-2xl lg:text-5xl! mt-12">Where Southern Charm Meets Boutique Real Estate</div>
</div>
</div>
</div>
</section>
</SwiperSlide>
<SwiperSlide className="bg-[url(/images/bg-header3.jpg)]">
<section className="section section-lg text-colorText2! bg-colorExt5/50 w-full h-full">
<div className="container">
<div className="row">
<div className="col-12 col-lg-8 text-wrap">
<div className="text-4xl lg:text-8xl!">Your Vision, Our Expertise</div>
<div className="text-2xl lg:text-5xl! mt-12">Discover a Smarter Way to Buy & Sell</div>
</div>
</div>
</div>
</section>
</SwiperSlide>
</Swiper>
<ContactFormBox />
</section>
);
}

86
src/components/HeroSlider.tsx Normal file
View File

@ -0,0 +1,86 @@
"use client";
import { Swiper, SwiperSlide } from "swiper/react";
import ContactFormBox from "./ContactFormBox";
import { Autoplay } from "swiper/modules";
import { useState } from "react";
import Image from "next/image";
type HeroSliderProps = {
onClickBook?: () => void;
};
type HeroSlideItem = {
title: string;
description: string;
img: string;
};
export default function HeroSlider({ onClickBook }: HeroSliderProps) {
const [slideItems] = useState<HeroSlideItem[]>([
{
title: "Real Estate, Redefined",
description: "Where Southern Charm Meets Boutique Real Estate",
img: "/images/bg-header2.jpg",
},
{
title: "Your Vision, Our Expertise",
description: "Discover a Smarter Way to Buy & Sell",
img: "/images/bg-header3.jpg",
},
]);
return (
<section className="section flex! flex-row! justify-end! relative! min-h-96! lg:min-h-auto!">
<Swiper
className="absolute w-full h-full"
modules={[Autoplay]}
spaceBetween={50}
slidesPerView={1}
autoplay={{ delay: 4000 }}
loop
>
{slideItems.map((slide, idx) => (
<SwiperSlide key={idx}>
<Image
alt={slide.title}
src={slide.img}
quality={100}
fill
sizes="100vw"
style={{
objectFit: "cover",
}}
/>
<section className="section section-lg text-colorText2! bg-colorExt5/50 w-full h-full z-20">
<div className="container">
<div className="row">
<div className="col-12 col-lg-8 text-wrap space-y-5 md:space-y-8 lg:space-y-12">
<div className="text-4xl lg:text-8xl! font-playfairdisplay text-center! lg:text-left!">
{slide.title}
</div>
<div className="text-lg lg:text-5xl! font-montserrat text-center! lg:text-left!">
{slide.description}
</div>
<div className="context-dark flex flex-row justify-center lg:hidden">
<button onClick={onClickBook} className="button button-xs button-primary-outline">
BOOK APPOINTMENT
</button>
</div>
<div className="context-dark flex flex-row justify-center lg:hidden">
<a href="tel:(478) 225 9061" className="button button-xs button-primary-outline">
Call Us
</a>
</div>
</div>
</div>
</div>
</section>
</SwiperSlide>
))}
</Swiper>
<ContactFormBox />
</section>
);
}