Merge version_3 into main #3
59
src/app/order-confirmation/page.tsx
Normal file
59
src/app/order-confirmation/page.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import HeroOverlay from "@/components/sections/hero/HeroOverlay";
|
||||
import { CheckCircle } from "lucide-react";
|
||||
|
||||
export default function OrderConfirmationPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="AirPro HVAC"
|
||||
navItems={[
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Place Order", href: "/order" }
|
||||
]}
|
||||
button={{ text: "Get a Quote", href: "#contact" }}
|
||||
animateOnLoad={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="order-confirmation" data-section="order-confirmation">
|
||||
<HeroOverlay
|
||||
title="Order Received!"
|
||||
description="Thank you for placing your service order with AirPro HVAC. We've received your request and will contact you shortly to confirm the details and schedule your service."
|
||||
tag="Confirmation"
|
||||
tagIcon={CheckCircle}
|
||||
buttons={[
|
||||
{ text: "Back to Home", href: "/" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
showDimOverlay={true}
|
||||
showBlur={true}
|
||||
textPosition="center"
|
||||
ariaLabel="Order confirmation section"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
67
src/app/order/page.tsx
Normal file
67
src/app/order/page.tsx
Normal file
@@ -0,0 +1,67 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import { Sparkles, CheckCircle, Phone } from "lucide-react";
|
||||
import ContactForm from "@/components/form/ContactForm";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export default function OrderPage() {
|
||||
const router = useRouter();
|
||||
|
||||
const handleSubmitOrder = async (orderData: any) => {
|
||||
// In a real application, this would send orderData to your backend
|
||||
console.log("Submitting order:", orderData);
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
router.push('/order-confirmation'); // Redirect to confirmation page
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="AirPro HVAC"
|
||||
navItems={[
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Place Order", href: "/order" }
|
||||
]}
|
||||
button={{ text: "Get a Quote", href: "#contact" }}
|
||||
animateOnLoad={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="order-form" data-section="order-form">
|
||||
<ContactForm
|
||||
title="Place Your Service Order"
|
||||
description="Tell us what HVAC service you need. Our team will get back to you shortly."
|
||||
tag="New Order"
|
||||
tagIcon={Sparkles}
|
||||
inputPlaceholder="Enter your request details (e.g., 'AC Repair', 'Furnace Installation')"
|
||||
buttonText="Submit Order"
|
||||
termsText="By submitting, you agree to allow AirPro HVAC to contact you regarding your service request."
|
||||
onSubmit={handleSubmitOrder}
|
||||
centered={true}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -37,6 +37,7 @@ export default function HvacPage() {
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Place Order", href: "/order" }
|
||||
]}
|
||||
button={{ text: "Get a Quote", href: "#contact" }}
|
||||
animateOnLoad={false}
|
||||
|
||||
191
src/app/products/[id]/page.tsx
Normal file
191
src/app/products/[id]/page.tsx
Normal file
@@ -0,0 +1,191 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { useParams } from "next/navigation";
|
||||
import Image from "next/image";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||
import ButtonTextShift from "@/components/button/ButtonTextShift/ButtonTextShift";
|
||||
|
||||
const dummyProducts = [
|
||||
{
|
||||
id: "1", name: "High-Efficiency AC Unit", description: "This 2-ton, 18 SEER AC unit provides superior cooling efficiency and quiet operation for medium-sized homes, significantly reducing energy consumption.", price: "$2,500", variant: "2-Ton, 18 SEER", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/hvac/img-4.jpg?w=800&h=600"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Smart Thermostat", description: "Control your home's climate from anywhere with this Wi-Fi enabled smart thermostat. Features include energy usage reports, learning capabilities, and voice control compatibility.", price: "$199", variant: "Wi-Fi Enabled", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/hvac/img-9.jpg?w=800&h=600"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Air Purifier", description: "Improve indoor air quality with this advanced air purifier. Equipped with a true HEPA filter, it captures 99.97% of airborne particles, including dust, pollen, pet dander, and smoke.", price: "$350", variant: "HEPA Filter", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/hvac/img-8.jpg?w=800&h=600"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Furnace System", description: "A robust furnace system designed for reliable heating performance in colder climates. This 90,000 BTU unit ensures even heat distribution and energy efficiency throughout your home.", price: "$1,800", variant: "90,000 BTU", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/hvac/img-5.jpg?w=800&h=600"
|
||||
}
|
||||
];
|
||||
|
||||
export default function ProductDetailPage() {
|
||||
const params = useParams();
|
||||
const { id } = params;
|
||||
const product = dummyProducts.find((p) => p.id === id);
|
||||
|
||||
if (!product) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="AirPro HVAC"
|
||||
navItems={[
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "Cart", id: "/cart" },
|
||||
{ name: "Checkout", id: "/checkout" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Testimonials", id: "#testimonials" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
button={{ text: "Get a Quote", href: "#contact" }}
|
||||
animateOnLoad={false}
|
||||
/>
|
||||
<div className="container mx-auto py-16 text-center">
|
||||
<h1 className="text-3xl font-bold mb-4">Product Not Found</h1>
|
||||
<p>The product you are looking for does not exist.</p>
|
||||
</div>
|
||||
<FooterMedia
|
||||
logoText="AirPro HVAC"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/hvac/img-10.jpg"
|
||||
imageAlt="HVAC technician inspecting equipment"
|
||||
columns={[
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "AC Installation", href: "#services" },
|
||||
{ label: "Heating Systems", href: "#services" },
|
||||
{ label: "Maintenance Plans", href: "#services" },
|
||||
{ label: "Emergency Repairs", href: "#services" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#about" },
|
||||
{ label: "Testimonials", href: "#testimonials" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Contact", href: "#contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Contact", items: [
|
||||
{ label: "(512) 555-1234", href: "tel:5125551234" },
|
||||
{ label: "info@airprohvac.com", href: "mailto:info@airprohvac.com" },
|
||||
{ label: "123 Comfort St, Austin, TX 78701" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2026 | AirPro HVAC"
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="AirPro HVAC"
|
||||
navItems={[
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "Cart", id: "/cart" },
|
||||
{ name: "Checkout", id: "/checkout" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Testimonials", id: "#testimonials" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
button={{ text: "Get a Quote", href: "#contact" }}
|
||||
animateOnLoad={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto py-16 px-4">
|
||||
<div className="grid md:grid-cols-2 gap-8 items-center">
|
||||
<div className="relative h-96 w-full rounded-lg overflow-hidden">
|
||||
<Image
|
||||
src={product.imageSrc}
|
||||
alt={product.name}
|
||||
layout="fill"
|
||||
objectFit="cover"
|
||||
className="rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4">
|
||||
<h1 className="text-4xl font-bold">{product.name}</h1>
|
||||
<p className="text-2xl font-semibold text-primary-cta">{product.price}</p>
|
||||
<p className="text-lg text-foreground/80">{product.description}</p>
|
||||
{product.variant && (
|
||||
<p className="text-base text-foreground/60">Variant: {product.variant}</p>
|
||||
)}
|
||||
<ButtonTextShift text="Add to Cart" onClick={() => alert(`${product.name} added to cart!`)} className="w-fit mt-4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
logoText="AirPro HVAC"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/hvac/img-10.jpg"
|
||||
imageAlt="HVAC technician inspecting equipment"
|
||||
columns={[
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "AC Installation", href: "#services" },
|
||||
{ label: "Heating Systems", href: "#services" },
|
||||
{ label: "Maintenance Plans", href: "#services" },
|
||||
{ label: "Emergency Repairs", href: "#services" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#about" },
|
||||
{ label: "Testimonials", href: "#testimonials" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Contact", href: "#contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Contact", items: [
|
||||
{ label: "(512) 555-1234", href: "tel:5125551234" },
|
||||
{ label: "info@airprohvac.com", href: "mailto:info@airprohvac.com" },
|
||||
{ label: "123 Comfort St, Austin, TX 78701" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2026 | AirPro HVAC"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
101
src/app/products/page.tsx
Normal file
101
src/app/products/page.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
"use client";
|
||||
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import ProductCardFour from "@/components/sections/product/ProductCardFour";
|
||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||
|
||||
export default function ProductsPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="aurora"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
brandName="AirPro HVAC"
|
||||
navItems={[
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "Cart", id: "/cart" },
|
||||
{ name: "Checkout", id: "/checkout" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Testimonials", id: "#testimonials" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
button={{ text: "Get a Quote", href: "#contact" }}
|
||||
animateOnLoad={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen py-16">
|
||||
<ProductCardFour
|
||||
title="Our Products"
|
||||
description="Discover our range of high-quality HVAC products."
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "High-Efficiency AC Unit", price: "$2,500", variant: "2-Ton, 18 SEER", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/hvac/img-4.jpg?_wi=1", onProductClick: () => window.location.href = "/products/1"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Smart Thermostat", price: "$199", variant: "Wi-Fi Enabled", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/hvac/img-9.jpg?_wi=1", onProductClick: () => window.location.href = "/products/2"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Air Purifier", price: "$350", variant: "HEPA Filter", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/hvac/img-8.jpg?_wi=1", onProductClick: () => window.location.href = "/products/3"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Furnace System", price: "$1,800", variant: "90,000 BTU", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/hvac/img-5.jpg?_wi=1", onProductClick: () => window.location.href = "/products/4"
|
||||
}
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
logoText="AirPro HVAC"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/hvac/img-10.jpg"
|
||||
imageAlt="HVAC technician inspecting equipment"
|
||||
columns={[
|
||||
{
|
||||
title: "Services", items: [
|
||||
{ label: "AC Installation", href: "#services" },
|
||||
{ label: "Heating Systems", href: "#services" },
|
||||
{ label: "Maintenance Plans", href: "#services" },
|
||||
{ label: "Emergency Repairs", href: "#services" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "#about" },
|
||||
{ label: "Testimonials", href: "#testimonials" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Contact", href: "#contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Contact", items: [
|
||||
{ label: "(512) 555-1234", href: "tel:5125551234" },
|
||||
{ label: "info@airprohvac.com", href: "mailto:info@airprohvac.com" },
|
||||
{ label: "123 Comfort St, Austin, TX 78701" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2026 | AirPro HVAC"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user