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

fix: hero slider and homepage styling

Browse Source
This commit is contained in:
RizqiSyahrendra 2025-04-19 08:51:47 +07:00
parent 931c71b400
commit 42793bffab
8 changed files with 107 additions and 57 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

21
src/app/page.tsx
View File

@ -1,12 +1,25 @@
"use client";
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 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">
@ -455,10 +468,6 @@ export default function Home() {
</div> </div>
</div> </div>
</section> </section>
<div className="lg:hidden">
<ContactFormSection />
</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>
);
}

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

@ -0,0 +1,77 @@
"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-4 md:space-y-8 lg:space-y-12">
<div className="text-4xl lg:text-8xl! font-playfairdisplay">{slide.title}</div>
<div className="text-lg lg:text-5xl! font-montserrat">{slide.description}</div>
<div className="context-dark lg:hidden">
<button onClick={onClickBook} className="button button-xs button-primary-outline">
BOOK APPOINTMENT
</button>
</div>
</div>
</div>
</div>
</section>
</SwiperSlide>
))}
</Swiper>
<ContactFormBox />
</section>
);
}