Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| faf2435e10 | |||
| 46ced662f1 | |||
| 4e715ab8ef | |||
| 159bed7886 | |||
| a45d1ace72 |
378
src/app/page.tsx
378
src/app/page.tsx
@@ -3,310 +3,152 @@
|
|||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import ReactLenis from "lenis/react";
|
import ReactLenis from "lenis/react";
|
||||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||||
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
||||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
||||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||||
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||||
|
import { Hammer, Ruler, Wrench, ChevronRight } from "lucide-react";
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="hover-magnetic"
|
defaultButtonVariant="hover-magnetic"
|
||||||
defaultTextAnimation="reveal-blur"
|
defaultTextAnimation="reveal-blur"
|
||||||
borderRadius="rounded"
|
borderRadius="soft"
|
||||||
contentWidth="smallMedium"
|
contentWidth="mediumLarge"
|
||||||
sizing="large"
|
sizing="mediumLarge"
|
||||||
background="none"
|
background="none"
|
||||||
cardStyle="gradient-radial"
|
cardStyle="subtle-shadow"
|
||||||
primaryButtonStyle="flat"
|
primaryButtonStyle="diagonal-gradient"
|
||||||
secondaryButtonStyle="radial-glow"
|
secondaryButtonStyle="glass"
|
||||||
headingFontWeight="medium"
|
headingFontWeight="semibold"
|
||||||
>
|
>
|
||||||
<ReactLenis root>
|
<ReactLenis root>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarLayoutFloatingOverlay
|
<NavbarStyleFullscreen
|
||||||
navItems={[
|
navItems={[
|
||||||
{
|
{ name: "Home", id: "hero" },
|
||||||
name: "Home",
|
{ name: "About", id: "about" },
|
||||||
id: "hero",
|
{ name: "Services", id: "services" },
|
||||||
},
|
{ name: "Projects", id: "portfolio" },
|
||||||
{
|
{ name: "Contact", id: "contact" },
|
||||||
name: "About",
|
]}
|
||||||
id: "about",
|
brandName="UpNorth Carpentry"
|
||||||
},
|
/>
|
||||||
{
|
|
||||||
name: "Services",
|
|
||||||
id: "services",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Contact",
|
|
||||||
id: "contact",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
brandName="UpNorth Carpentry"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroBillboardCarousel
|
<HeroBillboard
|
||||||
background={{
|
background={{ variant: "plain" }}
|
||||||
variant: "gradient-bars",
|
title="Crafting Excellence in the North"
|
||||||
}}
|
description="Dedicated to timeless carpentry, structural integrity, and custom woodworking that stands the test of time."
|
||||||
title="Master Craftsmanship in Every Detail"
|
buttons={[{ text: "Get a Consultation", href: "#contact" }]}
|
||||||
description="UpNorth Carpentry LLC delivers premium woodworking and construction services with a dedication to timeless quality and structural integrity."
|
imageSrc="http://img.b2bpic.net/free-photo/handsome-carpenter-working-with-wood_1157-26127.jpg"
|
||||||
buttons={[
|
imageAlt="UpNorth Carpentry Craftsman at work"
|
||||||
{
|
/>
|
||||||
text: "Start Your Project",
|
|
||||||
href: "#contact",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
mediaItems={[
|
|
||||||
{
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-carpenter-working-with-wood_1157-26127.jpg",
|
|
||||||
imageAlt: "Woodshop craftsmanship",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/carpenter-working-using-ruler-pencil_23-2148679120.jpg",
|
|
||||||
imageAlt: "Bespoke woodwork",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-male-carpenter-holding-wooden-plank-pencil_23-2147944924.jpg",
|
|
||||||
imageAlt: "Structural framing",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/carpenter-taking-measurements-plank-he-is-about-cut-woodworking-workshop_342744-833.jpg",
|
|
||||||
imageAlt: "Deck building",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/people-renovating-house-concept_53876-20671.jpg",
|
|
||||||
imageAlt: "Interior renovation",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/functional-kitchen-pullout-drawers-matte-blue-fronts_169016-68941.jpg",
|
|
||||||
imageAlt: "Custom installations",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="about" data-section="about">
|
<div id="about" data-section="about">
|
||||||
<InlineImageSplitTextAbout
|
<TextSplitAbout
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={true}
|
||||||
heading={[
|
title="A Legacy of Fine Craftsmanship"
|
||||||
{
|
description={[
|
||||||
type: "text",
|
"At UpNorth Carpentry, we believe in the marriage of tradition and modern efficiency.", "Every project is a commitment to precision, sourcing quality materials to ensure your vision becomes a structural reality that brings lasting value to your home."
|
||||||
content: "Built on Tradition, Driven by Quality",
|
]}
|
||||||
},
|
buttons={[{ text: "Explore our work", href: "#portfolio" }]}
|
||||||
{
|
/>
|
||||||
type: "image",
|
|
||||||
src: "http://img.b2bpic.net/free-photo/full-shot-artisan-doing-woodcutting_23-2150104870.jpg",
|
|
||||||
alt: "Craftsman at work",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="services" data-section="services">
|
<div id="services" data-section="services">
|
||||||
<FeatureCardTwelve
|
<FeatureCardTwentySix
|
||||||
animationType="slide-up"
|
title="Expert Carpentry Services"
|
||||||
textboxLayout="split"
|
description="From structural framing to the final touches, we bring professional attention to every detail of your space."
|
||||||
useInvertedBackground={false}
|
textboxLayout="inline-image"
|
||||||
features={[
|
useInvertedBackground={false}
|
||||||
{
|
features={[
|
||||||
id: "f1",
|
{ title: "Structural Framing", description: "Solid, safe, and precise construction from the ground up.", buttonIcon: Hammer },
|
||||||
label: "Structure",
|
{ title: "Custom Millwork", description: "Handcrafted cabinets, trim, and bespoke storage solutions.", buttonIcon: Ruler },
|
||||||
title: "Framing & Carpentry",
|
{ title: "Outdoor Living", description: "High-quality decks and structures designed for the northern landscape.", buttonIcon: Wrench },
|
||||||
items: [
|
{ title: "Renovation", description: "Breathing new life into existing spaces with master craftsmanship.", buttonIcon: ChevronRight },
|
||||||
"Residential home framing",
|
]}
|
||||||
"Roof structure development",
|
/>
|
||||||
"Structural repairs",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "f2",
|
|
||||||
label: "Finishes",
|
|
||||||
title: "Custom Millwork",
|
|
||||||
items: [
|
|
||||||
"Cabinet installation",
|
|
||||||
"Trim and crown molding",
|
|
||||||
"Built-in shelving units",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "f3",
|
|
||||||
label: "Outdoor",
|
|
||||||
title: "Decking & Fencing",
|
|
||||||
items: [
|
|
||||||
"Custom deck builds",
|
|
||||||
"Cedar fencing installation",
|
|
||||||
"Exterior structure finishing",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
title="Our Craftsmanship Services"
|
|
||||||
description="We specialize in a variety of carpentry needs to enhance your home's value and aesthetics."
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="portfolio" data-section="portfolio">
|
<div id="portfolio" data-section="portfolio">
|
||||||
<ProductCardFour
|
<ProductCardTwo
|
||||||
animationType="slide-up"
|
title="Featured Projects"
|
||||||
textboxLayout="default"
|
description="See the fine detail and quality built into every project we undertake."
|
||||||
gridVariant="three-columns-all-equal-width"
|
gridVariant="three-columns-all-equal-width"
|
||||||
useInvertedBackground={false}
|
animationType="slide-up"
|
||||||
products={[
|
textboxLayout="split"
|
||||||
{
|
useInvertedBackground={true}
|
||||||
id: "p1",
|
products={[
|
||||||
name: "Custom Walnut Kitchen",
|
{ id: "1", brand: "Millwork", name: "Walnut Kitchen Cabinetry", price: "Custom Build", rating: 5, reviewCount: "15", imageSrc: "http://img.b2bpic.net/free-photo/open-oven_23-2147958974.jpg" },
|
||||||
price: "Featured",
|
{ id: "2", brand: "Exterior", name: "Cedarwood Patio Deck", price: "Custom Build", rating: 5, reviewCount: "22", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-tools_23-2148138056.jpg" },
|
||||||
variant: "Millwork",
|
{ id: "3", brand: "Structural", name: "Library Shelving Units", price: "Custom Build", rating: 5, reviewCount: "10", imageSrc: "http://img.b2bpic.net/free-photo/man-making-surfboard_107420-94946.jpg" }
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/open-oven_23-2147958974.jpg",
|
]}
|
||||||
},
|
/>
|
||||||
{
|
|
||||||
id: "p2",
|
|
||||||
name: "Modern Backyard Deck",
|
|
||||||
price: "Featured",
|
|
||||||
variant: "Exterior",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-tools_23-2148138056.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p3",
|
|
||||||
name: "Home Frame Renovation",
|
|
||||||
price: "Featured",
|
|
||||||
variant: "Structural",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-smiling-middle-aged-carpenter-holding-wood-plank-woodworking-workshop_342744-811.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p4",
|
|
||||||
name: "Bespoke Library Shelves",
|
|
||||||
price: "Featured",
|
|
||||||
variant: "Millwork",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/man-making-surfboard_107420-94946.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p5",
|
|
||||||
name: "Entryway Trim Refresh",
|
|
||||||
price: "Featured",
|
|
||||||
variant: "Finishing",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/woodworker-works-local-lumber-production_1163-3117.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p6",
|
|
||||||
name: "Garage Conversion Build",
|
|
||||||
price: "Featured",
|
|
||||||
variant: "Structural",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/woodworker-carpentry-shop-using-sandpaper-sanding-wooden-surface_482257-89249.jpg",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
title="Portfolio Highlights"
|
|
||||||
description="Explore our recent successful carpentry projects."
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="metrics" data-section="metrics">
|
<div id="metrics" data-section="metrics">
|
||||||
<MetricCardFourteen
|
<MetricCardOne
|
||||||
useInvertedBackground={false}
|
title="Our Proven Track Record"
|
||||||
title="Why Choose UpNorth?"
|
description="Building trust through quality and reliability for over 15 years."
|
||||||
tag="Our Impact"
|
gridVariant="uniform-all-items-equal"
|
||||||
metrics={[
|
animationType="slide-up"
|
||||||
{
|
textboxLayout="default"
|
||||||
id: "m1",
|
useInvertedBackground={true}
|
||||||
value: "15+",
|
metrics={[
|
||||||
description: "Years of experience",
|
{ id: "1", value: "15+", title: "Years", description: "Industry experience", icon: Hammer },
|
||||||
},
|
{ id: "2", value: "200+", title: "Projects", description: "Completed designs", icon: Ruler },
|
||||||
{
|
{ id: "3", value: "98%", title: "Satisfied", description: "Client retention rate", icon: Wrench }
|
||||||
id: "m2",
|
]}
|
||||||
value: "200+",
|
/>
|
||||||
description: "Successful projects",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "m3",
|
|
||||||
value: "98%",
|
|
||||||
description: "Client satisfaction",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
metricsAnimation="slide-up"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="testimonials" data-section="testimonials">
|
<div id="testimonials" data-section="testimonials">
|
||||||
<TestimonialCardTwelve
|
<TestimonialCardTwo
|
||||||
useInvertedBackground={false}
|
title="Client Voices"
|
||||||
testimonials={[
|
description="See what homeowners in the North think about our work."
|
||||||
{
|
animationType="slide-up"
|
||||||
id: "1",
|
textboxLayout="split"
|
||||||
name: "Mark Stevens",
|
useInvertedBackground={false}
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/elderly-female-keeping-arms-folded-her-chest-looking-camera-with-confident-smile_1153-9402.jpg",
|
testimonials={[
|
||||||
},
|
{ id: "1", name: "Mark S.", role: "Homeowner", testimonial: "The attention to detail was exceptional. Truly top-tier craftsmanship." },
|
||||||
{
|
{ id: "2", name: "Sarah J.", role: "Architect", testimonial: "UpNorth Carpentry is reliable, precise, and works with true passion." }
|
||||||
id: "2",
|
]}
|
||||||
name: "Sarah Jenkins",
|
/>
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/architect-posing-office_23-2148242966.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3",
|
|
||||||
name: "David Thorne",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-her-lover-smiling-stands-table-retro-camper-relax-atmosphere_482257-11546.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "4",
|
|
||||||
name: "Linda Miller",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/couple-painting-walls-their-new-home-together_23-2149086833.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "5",
|
|
||||||
name: "Robert Klein",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/man-waving-hand-outside_23-2149447136.jpg",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
cardTitle="What Our Clients Say"
|
|
||||||
cardTag="Testimonials"
|
|
||||||
cardAnimation="slide-up"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
<ContactSplitForm
|
<ContactSplitForm
|
||||||
useInvertedBackground={false}
|
title="Get a Consultation"
|
||||||
title="Get a Consultation"
|
description="Discuss your carpentry plans with our master builders today."
|
||||||
description="Ready to start your next carpentry project? Tell us what you need and we'll reach out to discuss."
|
inputs={[
|
||||||
inputs={[
|
{ name: "name", type: "text", placeholder: "Full Name" },
|
||||||
{
|
{ name: "email", type: "email", placeholder: "Email Address" },
|
||||||
name: "name",
|
]}
|
||||||
type: "text",
|
textarea={{ name: "message", placeholder: "Describe your project...", rows: 5 }}
|
||||||
placeholder: "Your Name",
|
useInvertedBackground={true}
|
||||||
},
|
imageSrc="http://img.b2bpic.net/free-photo/top-view-wood-tools-desk-with-clipboard_23-2148898123.jpg"
|
||||||
{
|
/>
|
||||||
name: "email",
|
|
||||||
type: "email",
|
|
||||||
placeholder: "Email Address",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "phone",
|
|
||||||
type: "tel",
|
|
||||||
placeholder: "Phone Number",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
textarea={{
|
|
||||||
name: "message",
|
|
||||||
placeholder: "Tell us about your project",
|
|
||||||
rows: 4,
|
|
||||||
}}
|
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-wood-tools-desk-with-clipboard_23-2148898123.jpg"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterCard
|
<FooterBaseReveal
|
||||||
logoText="UpNorth Carpentry LLC"
|
logoText="UpNorth Carpentry LLC"
|
||||||
copyrightText="© 2025 UpNorth Carpentry LLC. All rights reserved."
|
columns={[
|
||||||
/>
|
{ title: "Navigation", items: [{ label: "Home", href: "#hero" }, { label: "About", href: "#about" }, { label: "Services", href: "#services" }] },
|
||||||
|
{ title: "Connect", items: [{ label: "Contact Us", href: "#contact" }] }
|
||||||
|
]}
|
||||||
|
copyrightText="© 2025 UpNorth Carpentry LLC"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -11,14 +11,14 @@
|
|||||||
--background-accent: #ffffff; */
|
--background-accent: #ffffff; */
|
||||||
|
|
||||||
--background: #f5f4ef;
|
--background: #f5f4ef;
|
||||||
--card: #dad6cd;
|
--card: #efe7dd;
|
||||||
--foreground: #2a2928;
|
--foreground: #2b180a;
|
||||||
--primary-cta: #2a2928;
|
--primary-cta: #2b180a;
|
||||||
--primary-cta-text: #f5f4ef;
|
--primary-cta-text: #f5f4ef;
|
||||||
--secondary-cta: #ecebea;
|
--secondary-cta: #efe7dd;
|
||||||
--secondary-cta-text: #2a2928;
|
--secondary-cta-text: #2a2928;
|
||||||
--accent: #ffffff;
|
--accent: #94877c;
|
||||||
--background-accent: #c6b180;
|
--background-accent: #afa094;
|
||||||
|
|
||||||
/* text sizing - set by ThemeProvider */
|
/* text sizing - set by ThemeProvider */
|
||||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||||
|
|||||||
Reference in New Issue
Block a user