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 dynamic from "next/dynamic";
const ParallaxContainer = dynamic(() => import("@/components/ParallaxContainer"), {
ssr: false,
});
// const ParallaxContainer = dynamic(() => import("@/components/ParallaxContainer"), {
// ssr: false,
// });
export default function Home1BGVideoMultiPage() {
return (
@ -12,7 +12,7 @@ export default function Home1BGVideoMultiPage() {
<div className="theme-main">
<div className="page" id="top">
<main id="main">
<ParallaxContainer
{/* <ParallaxContainer
className="home-section bg-dark-1 bg-dark-alpha-60 light-content parallax-5 scrollSpysection"
style={{
backgroundImage: "url(/assets/images/full-width-images/section-bg-13.jpeg)",
@ -20,7 +20,10 @@ export default function Home1BGVideoMultiPage() {
id="home"
>
<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>
</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">
<Testimonials />
</section>
<section
className="page-section bg-scroll light-content"
style={{
backgroundImage: "url(/assets/images/demo-modern/section-bg-3.jpeg)",
}}
>
<section className="page-section bg-scroll light-content bg-[url(/assets/images/demo-modern/section-bg-3.jpeg)]">
<div className="bg-overlay bg-gradient-dark-alpha-2 d-none d-md-block" />
{/* End Desktop Overlay */}
{/* Mobile Overlay */}
<div className="bg-overlay bg-dark-1 opacity-09 d-md-none" />
{/* End Mobile Overlay */}
<div className="container position-relative">
<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>
<p className="text-sm">
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";
import { useEffect, useRef } from "react";
import { GoogleReviewsBlock } from "./Blocks/GoogleReviews";
export default function Testimonials() {
const isotopContainer = useRef<any | null>(null);
const initIsotop = async () => {
const Isotope = (await import("isotope-layout")).default;
const imagesloaded = (await import("imagesloaded")).default;
// const isotopContainer = useRef<any | null>(null);
// const initIsotop = async () => {
// const Isotope = (await import("isotope-layout")).default;
// const imagesloaded = (await import("imagesloaded")).default;
const isotope = new Isotope(isotopContainer.current, {
itemSelector: ".col-md-6",
layoutMode: "masonry",
});
imagesloaded(isotopContainer.current).on("progress", function () {
isotope.layout();
});
};
// const isotope = new Isotope(isotopContainer.current, {
// itemSelector: ".col-md-6",
// layoutMode: "masonry",
// });
// imagesloaded(isotopContainer.current).on("progress", function () {
// isotope.layout();
// });
// };
useEffect(() => {
initIsotop();
}, []);
// useEffect(() => {
// initIsotop();
// }, []);
return (
<div className="text-center">
<div className="row">
<div className="text-center wow fadeInUp">
{/* <div className="row">
<div className="flex align-items-center justify-center wow fadeInUp">
<GoogleReviewsBlock />
</div>
</div>
</div> */}
<GoogleReviewsBlock />
</div>
);
}