rankrunners-dev/next-cochise
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: homepage parallax error and broken layout

Browse Source
This commit is contained in:
RizqiSyahrendra 2025-02-19 13:27:02 +07:00
parent be68061c44
commit 3c694a6e2a
3 changed files with 30 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/app/(main)/home-bg-video/page.tsx
View File

@ -1,10 +1,10 @@
"use client"; // "use client";
import Hero6 from "@/components/Hero"; import Hero6 from "@/components/Hero";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
const ParallaxContainer = dynamic(() => import("@/components/ParallaxContainer"), { // const ParallaxContainer = dynamic(() => import("@/components/ParallaxContainer"), {
ssr: false, // ssr: false,
}); // });
export default function Home1BGVideoMultiPage() { export default function Home1BGVideoMultiPage() {
return ( return (
@ -12,7 +12,7 @@ export default function Home1BGVideoMultiPage() {
<div className="theme-main"> <div className="theme-main">
<div className="page" id="top"> <div className="page" id="top">
<main id="main"> <main id="main">
<ParallaxContainer {/* <ParallaxContainer
className="home-section bg-dark-1 bg-dark-alpha-60 light-content parallax-5 scrollSpysection" className="home-section bg-dark-1 bg-dark-alpha-60 light-content parallax-5 scrollSpysection"
style={{ style={{
backgroundImage: "url(/assets/images/full-width-images/section-bg-13.jpeg)", backgroundImage: "url(/assets/images/full-width-images/section-bg-13.jpeg)",
@ -20,7 +20,10 @@ export default function Home1BGVideoMultiPage() {
id="home" id="home"
> >
<Hero6 /> <Hero6 />
</ParallaxContainer> </ParallaxContainer> */}
<div className="home-section bg-dark-1 bg-dark-alpha-60 light-content parallax-5 bg-[url(/assets/images/full-width-images/section-bg-13.jpeg)]">
<Hero6 />
</div>
</main> </main>
</div> </div>
</div> </div>

10
src/components/Homepage.tsx
View File

@ -98,20 +98,14 @@ export default function homepage({ onePage = false, dark = false }) {
<section className="my-5 w-full"> <section className="my-5 w-full">
<Testimonials /> <Testimonials />
</section> </section>
<section <section className="page-section bg-scroll light-content bg-[url(/assets/images/demo-modern/section-bg-3.jpeg)]">
className="page-section bg-scroll light-content"
style={{
backgroundImage: "url(/assets/images/demo-modern/section-bg-3.jpeg)",
}}
>
<div className="bg-overlay bg-gradient-dark-alpha-2 d-none d-md-block" /> <div className="bg-overlay bg-gradient-dark-alpha-2 d-none d-md-block" />
{/* End Desktop Overlay */}
{/* Mobile Overlay */} {/* Mobile Overlay */}
<div className="bg-overlay bg-dark-1 opacity-09 d-md-none" /> <div className="bg-overlay bg-dark-1 opacity-09 d-md-none" />
{/* End Mobile Overlay */} {/* End Mobile Overlay */}
<div className="container position-relative"> <div className="container position-relative">
<div className="row wow fadeInUp"> <div className="row wow fadeInUp">
<div className="col-md-2 offset-md-5 col-lg-6 offset-lg-6 col-xl-7 offset-xl-7"> <div className="col-md-2 offset-md-5 col-lg-6 offset-lg-6 col-xl-6 offset-xl-6">
<h2 className="section-title mb-40 mb-sm-30">A Cancer Treatment Center of Excellence</h2> <h2 className="section-title mb-40 mb-sm-30">A Cancer Treatment Center of Excellence</h2>
<p className="text-sm"> <p className="text-sm">
Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona. We Get compassionate care and excellent medical services from COCHISE ONCOLOGY in Sierra Vista, Arizona. We

38
src/components/Testimonials.tsx
View File

@ -1,34 +1,34 @@
"use client"; "use client";
import { useEffect, useRef } from "react";
import { GoogleReviewsBlock } from "./Blocks/GoogleReviews"; import { GoogleReviewsBlock } from "./Blocks/GoogleReviews";
export default function Testimonials() { export default function Testimonials() {
const isotopContainer = useRef<any | null>(null); // const isotopContainer = useRef<any | null>(null);
const initIsotop = async () => { // const initIsotop = async () => {
const Isotope = (await import("isotope-layout")).default; // const Isotope = (await import("isotope-layout")).default;
const imagesloaded = (await import("imagesloaded")).default; // const imagesloaded = (await import("imagesloaded")).default;
const isotope = new Isotope(isotopContainer.current, { // const isotope = new Isotope(isotopContainer.current, {
itemSelector: ".col-md-6", // itemSelector: ".col-md-6",
layoutMode: "masonry", // layoutMode: "masonry",
}); // });
imagesloaded(isotopContainer.current).on("progress", function () { // imagesloaded(isotopContainer.current).on("progress", function () {
isotope.layout(); // isotope.layout();
}); // });
}; // };
useEffect(() => { // useEffect(() => {
initIsotop(); // initIsotop();
}, []); // }, []);
return ( return (
<div className="text-center"> <div className="text-center wow fadeInUp">
<div className="row"> {/* <div className="row">
<div className="flex align-items-center justify-center wow fadeInUp"> <div className="flex align-items-center justify-center wow fadeInUp">
<GoogleReviewsBlock /> <GoogleReviewsBlock />
</div> </div>
</div> </div> */}
<GoogleReviewsBlock />
</div> </div>
); );
} }