143 lines
8.6 KiB
TypeScript
143 lines
8.6 KiB
TypeScript
import Link from 'next/link';
|
|
import Image from 'next/image';
|
|
|
|
export default function AboutPage() {
|
|
return (
|
|
<div style={{ minHeight: '100vh', background: 'var(--white)' }}>
|
|
{/* Inner Banner */}
|
|
<section className="hero" style={{ minHeight: '350px', display: 'flex', alignItems: 'center', paddingTop: '130px' }}>
|
|
<div className="hero-pattern"></div>
|
|
<div className="hero-left" style={{ padding: '0', width: '100%' }}>
|
|
<div className="hero-eyebrow">About VG Fence</div>
|
|
<h1 className="hero-h1" style={{ marginBottom: '16px' }}>Your Trusted <em>Fencing</em> Partner.</h1>
|
|
<p className="hero-sub" style={{ maxWidth: '600px', marginBottom: '0' }}>
|
|
Ontario's dedicated supplier for professional-grade fencing and railing materials.
|
|
Reliability built with every post and panel.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Our Story Section */}
|
|
<section className="section">
|
|
<div className="container" style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 20px' }}>
|
|
<div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: '80px', alignItems: 'center' }} className="about-layout">
|
|
<div>
|
|
<div className="section-eyebrow">Our Story</div>
|
|
<h2 className="section-h2" style={{ marginBottom: '32px' }}>A Reputation Built on <span>Reliability.</span></h2>
|
|
<div style={{ fontSize: '17px', color: 'var(--gray-600)', lineHeight: 1.8, display: 'flex', flexDirection: 'column', gap: '20px' }}>
|
|
<p>
|
|
At VG Fence, we are dedicated to providing high-quality fencing and railing materials to contractors,
|
|
property managers, event organizers, and homeowners. With years of experience in the industry,
|
|
we have built a reputation as a reliable supplier for both commercial and residential projects.
|
|
</p>
|
|
<p>
|
|
We stock and supply a comprehensive range of fence products, including chain link fences,
|
|
temporary fencing, ornamental fences, wood fence hardware, gates, railings, deck products,
|
|
and privacy screens.
|
|
</p>
|
|
<p>
|
|
All our materials are available in galvanized and black finishes, ensuring durability
|
|
and long-lasting performance in Canada's diverse climate.
|
|
</p>
|
|
<p style={{ fontStyle: 'italic', color: 'var(--gray-500)', fontSize: '15px' }}>
|
|
While our focus is primarily on material supply, we also provide installation support for
|
|
select projects, based on size and scope.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ position: 'relative' }}>
|
|
<div style={{ position: 'relative', width: '100%', height: '500px', borderRadius: '20px', overflow: 'hidden', boxShadow: '0 30px 60px rgba(0,0,0,.1)' }}>
|
|
<Image
|
|
src="/placeholder.jpg"
|
|
alt="Quality Fencing"
|
|
fill
|
|
style={{ objectFit: 'cover' }}
|
|
/>
|
|
</div>
|
|
<div style={{ position: 'absolute', bottom: '-30px', left: '-30px', background: 'var(--navy)', padding: '32px', borderRadius: '12px', color: 'var(--white)', maxWidth: '280px', zIndex: 2 }}>
|
|
<div style={{ fontSize: '40px', fontWeight: 800, color: 'var(--orange)', marginBottom: '8px', fontFamily: 'var(--font-display)' }}>100%</div>
|
|
<div style={{ fontSize: '13px', fontWeight: 600, textTransform: 'uppercase', letterSpacing: '.1em', lineHeight: 1.4 }}>Professional Grade Materials In Stock</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Mission Section */}
|
|
<section className="section" style={{ background: 'var(--cream)' }}>
|
|
<div className="container" style={{ maxWidth: '800px', margin: '0 auto', padding: '0 20px', textAlign: 'center' }}>
|
|
<div className="section-eyebrow" style={{ margin: '0 auto 16px', justifyContent: 'center' }}>Our Mission</div>
|
|
<h2 className="section-h2" style={{ marginBottom: '32px' }}>Empowering <span>Success.</span></h2>
|
|
<div style={{ background: 'var(--white)', padding: '64px 15px', borderRadius: '20px', boxShadow: '0 10px 30px rgba(0,0,0,.03)' }}>
|
|
<p style={{ fontSize: '24px', color: 'var(--navy)', lineHeight: 1.6, fontWeight: 500, fontFamily: 'var(--font-body)' }}>
|
|
"To supply premium fencing and railing materials that combine quality, durability, and convenience,
|
|
helping every project — large or small — succeed."
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Testimonial Section */}
|
|
<section className="section testimonials-section">
|
|
<div className="container" style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 20px', textAlign: 'center' }}>
|
|
<div className="section-eyebrow" style={{ margin: '0 auto 16px', justifyContent: 'center' }}>Testimonials</div>
|
|
<h2 className="section-h2" style={{ color: 'var(--white)' }}>What Our Partners <span>Say.</span></h2>
|
|
|
|
<div className="testimonials-grid">
|
|
<div className="testimonial-card">
|
|
<div className="testimonial-quote">"VG Fence consistently delivers high-quality materials on time. Their contractor pricing allows me to stay competitive, and their inventory is unmatched."</div>
|
|
<div className="testimonial-author">Mark S.</div>
|
|
<div className="testimonial-role">Local Fence Contractor</div>
|
|
</div>
|
|
<div className="testimonial-card">
|
|
<div className="testimonial-quote">"Their galvanized and black finish railings are top-notch. It's rare to find a supplier that combines durability with such an aesthetic appeal."</div>
|
|
<div className="testimonial-author">Sarah L.</div>
|
|
<div className="testimonial-role">Property Manager</div>
|
|
</div>
|
|
<div className="testimonial-card">
|
|
<div className="testimonial-quote">"The team at VG Fence is incredibly knowledgeable. They helped us select the right ornamental fencing for our latest residential development."</div>
|
|
<div className="testimonial-author">David K.</div>
|
|
<div className="testimonial-role">Construction Manager</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FAQ Section */}
|
|
<section className="section faq-section">
|
|
<div className="container" style={{ maxWidth: '1200px', margin: '0 auto', padding: '0 20px', textAlign: 'center' }}>
|
|
<div className="section-eyebrow" style={{ margin: '0 auto 16px', justifyContent: 'center' }}>FAQ</div>
|
|
<h2 className="section-h2">Frequently Asked <span>Questions.</span></h2>
|
|
|
|
<div className="faq-list" style={{ textAlign: 'left' }}>
|
|
<div className="faq-item">
|
|
<div className="faq-question">Do you offer contractor pricing?</div>
|
|
<div className="faq-answer">Yes! We provide dedicated contractor accounts with specialized pricing. You need to create an account and verify your business details to unlock these rates.</div>
|
|
</div>
|
|
<div className="faq-item">
|
|
<div className="faq-question">Do you offer installation services?</div>
|
|
<div className="faq-answer">While our primary focus is supplying high-quality materials, we do provide installation support for select projects based on their size and scope.</div>
|
|
</div>
|
|
<div className="faq-item">
|
|
<div className="faq-question">Where are your materials sourced from?</div>
|
|
<div className="faq-answer">We source professional-grade materials focused on durability, specifically suited for Canada's diverse climate, including robust galvanized and black finish options.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* CTA Section */}
|
|
<section className="cta-section section-padding" style={{ textAlign: 'center', background: 'var(--navy)', color: 'var(--white)' }}>
|
|
<h2 className="cta-h2">Ready to <span>Build?</span></h2>
|
|
<p className="cta-sub" style={{ opacity: .7 }}>Explore Ontario's most reliable inventory of fencing products.</p>
|
|
<div className="cta-btns">
|
|
<Link href="/products" className="btn-primary">View Full Catalog</Link>
|
|
<Link href="/contact" className="btn-white-outline">Contact Us</Link>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
);
|
|
}
|