56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect } from 'react';
|
|
import Link from 'next/link';
|
|
import ChainLinkHero from '@/components/ChainLinkFence/ChainLinkHero';
|
|
import ChainLinkOverview from '@/components/ChainLinkFence/ChainLinkOverview';
|
|
import ChainLinkMaterials from '@/components/ChainLinkFence/ChainLinkMaterials';
|
|
import ChainLinkFinishes from '@/components/ChainLinkFence/ChainLinkFinishes';
|
|
import ChainLinkCompare from '@/components/ChainLinkFence/ChainLinkCompare';
|
|
import ChainLinkSeoContent from '@/components/ChainLinkFence/ChainLinkSeoContent';
|
|
import ChainLinkTerritory from '@/components/ChainLinkFence/ChainLinkTerritory';
|
|
import ChainLinkQuote from '@/components/ChainLinkFence/ChainLinkQuote';
|
|
|
|
export default function ChainLinkFencePage() {
|
|
useEffect(() => {
|
|
const reveal = () => {
|
|
const reveals = document.querySelectorAll('.reveal');
|
|
for (let i = 0; i < reveals.length; i++) {
|
|
const windowheight = window.innerHeight;
|
|
const revealtop = reveals[i].getBoundingClientRect().top;
|
|
const revealpoint = 150;
|
|
if (revealtop < windowheight - revealpoint) {
|
|
reveals[i].classList.add('visible');
|
|
}
|
|
}
|
|
};
|
|
|
|
window.addEventListener('scroll', reveal);
|
|
reveal(); // Initial call
|
|
return () => window.removeEventListener('scroll', reveal);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="chain-link-page">
|
|
{/* BREADCRUMB */}
|
|
<section className="inner-banner">
|
|
<h1 className="inner-banner-title">Chain Link <span>Fence.</span></h1>
|
|
<div className="inner-banner-breadcrumbs">
|
|
<Link href="/">Home</Link>
|
|
<span>/</span>
|
|
<Link href="/products">Products</Link>
|
|
<span>/</span>
|
|
Chain Link
|
|
</div>
|
|
</section>
|
|
<ChainLinkOverview />
|
|
<ChainLinkMaterials />
|
|
<ChainLinkFinishes />
|
|
<ChainLinkCompare />
|
|
<ChainLinkSeoContent />
|
|
<ChainLinkTerritory />
|
|
<ChainLinkQuote />
|
|
</div>
|
|
);
|
|
}
|