fix: hero slider and homepage styling
This commit is contained in:
parent
931c71b400
commit
42793bffab
3
src/app/blog/page.tsx
Normal file
3
src/app/blog/page.tsx
Normal file
@ -0,0 +1,3 @@
|
||||
export default function Blog() {
|
||||
return <></>;
|
||||
}
|
||||
@ -11,6 +11,7 @@
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--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;
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
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 { Metadata } from "next";
|
||||
import { getDefaultMetadata } from "@/utils/metadata";
|
||||
@ -21,6 +21,11 @@ const montserrat = Montserrat({
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const playfairDisplay = Playfair_Display({
|
||||
variable: "--font-playfairdisplay",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const metadata = await getDefaultMetadata();
|
||||
return metadata;
|
||||
@ -48,7 +53,9 @@ export default function RootLayout({
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<link rel="stylesheet" href="css/fonts.css" />
|
||||
</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">
|
||||
<a href="http://windows.microsoft.com/en-US/internet-explorer/">
|
||||
<img
|
||||
|
||||
@ -1,12 +1,25 @@
|
||||
"use client";
|
||||
|
||||
import ContactFormSection from "@/components/ContactFormSection";
|
||||
import GoogleReviewBox from "@/components/GoogleReviewBox";
|
||||
import Hero from "@/components/Hero";
|
||||
import HeroSlider from "@/components/HeroSlider";
|
||||
import Link from "next/link";
|
||||
import { useRef } from "react";
|
||||
|
||||
export default function Home() {
|
||||
const formRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
function scrollToForm() {
|
||||
formRef.current?.scrollIntoView?.({ behavior: "smooth" });
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Hero />
|
||||
<HeroSlider onClickBook={scrollToForm} />
|
||||
|
||||
<div className="lg:hidden" ref={formRef}>
|
||||
<ContactFormSection />
|
||||
</div>
|
||||
|
||||
<section className="section section-lg bg-default">
|
||||
<div className="container">
|
||||
@ -455,10 +468,6 @@ export default function Home() {
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="lg:hidden">
|
||||
<ContactFormSection />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
export default function ContactFormSection() {
|
||||
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">
|
||||
<img className="box-1-bg-image" src="images/bg-shape-1.png" alt="" role="presentation" />
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@ export default function GoogleReviewBox() {
|
||||
<section className="section section-lg bg-gray-12">
|
||||
<div className="container">
|
||||
<h2 className="heading-decoration-1">
|
||||
<span className="heading-inner">What People Say</span>
|
||||
<span className="heading-inner">Making Moves, Building Trust</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div className="container container-wide">
|
||||
|
||||
@ -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
77
src/components/HeroSlider.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user