Add src/app/products/page.tsx
This commit is contained in:
98
src/app/products/page.tsx
Normal file
98
src/app/products/page.tsx
Normal file
@@ -0,0 +1,98 @@
|
||||
"use client";
|
||||
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
||||
import ProductCardThree from "@/components/sections/product/ProductCardThree";
|
||||
import FooterBase from "@/components/sections/footer/FooterBase";
|
||||
import { ArrowUpRight } from "lucide-react";
|
||||
|
||||
export default function ProductsPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="metallic"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="الحسام للزيوت"
|
||||
navItems={[
|
||||
{ name: "منتجاتنا", id: "products", href: "/products" },
|
||||
{ name: "خدماتنا", id: "services", href: "/#services" },
|
||||
{ name: "من نحن", id: "about", href: "/#about" },
|
||||
{ name: "اتصل بنا", id: "contact", href: "/#contact" }
|
||||
]}
|
||||
button={{ text: "احجز الآن", href: "/#contact" }}
|
||||
/>
|
||||
<div id="product-catalog" data-section="product-catalog">
|
||||
<ProductCardThree
|
||||
title="منتجاتنا من الزيوت"
|
||||
description="استكشف تشكيلتنا الواسعة من الزيوت عالية الجودة، المصممة لتلبية احتياجات مختلف القطاعات والتطبيقات."
|
||||
tag="كتالوج المنتجات"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
products={[
|
||||
{
|
||||
id: "oil_engine_synthetic", name: "زيت محركات اصطناعي 5W-30", price: "SAR 120.00", imageSrc: "https://img.b2bpic.net/free-photo/synthetic-engine-oil-bottle_123456789.jpg", imageAlt: "زيت محركات اصطناعي 5W-30", priceButtonProps: { text: "تفاصيل المنتج", icon: ArrowUpRight, href: "#" }
|
||||
},
|
||||
{
|
||||
id: "oil_engine_conventional", name: "زيت محركات تقليدي 10W-40", price: "SAR 80.00", imageSrc: "https://img.b2bpic.net/free-photo/conventional-engine-oil_987654321.jpg", imageAlt: "زيت محركات تقليدي 10W-40", priceButtonProps: { text: "تفاصيل المنتج", icon: ArrowUpRight, href: "#" }
|
||||
},
|
||||
{
|
||||
id: "oil_hydraulic_industrial", name: "زيت هيدروليكي صناعي AW-68", price: "SAR 150.00", imageSrc: "https://img.b2bpic.net/free-photo/industrial-hydraulic-oil_112233445.jpg", imageAlt: "زيت هيدروليكي صناعي AW-68", priceButtonProps: { text: "تفاصيل المنتج", icon: ArrowUpRight, href: "#" }
|
||||
},
|
||||
{
|
||||
id: "oil_gear_automotive", name: "زيت ناقل حركة (جير) GL-4", price: "SAR 95.00", imageSrc: "https://img.b2bpic.net/free-photo/automotive-gear-oil_556677889.jpg", imageAlt: "زيت ناقل حركة (جير) GL-4", priceButtonProps: { text: "تفاصيل المنتج", icon: ArrowUpRight, href: "#" }
|
||||
},
|
||||
{
|
||||
id: "oil_industrial_compressor", name: "زيت ضواغط صناعية ISO VG 46", price: "SAR 180.00", imageSrc: "https://img.b2bpic.net/free-photo/industrial-compressor-oil_001122334.jpg", imageAlt: "زيت ضواغط صناعية ISO VG 46", priceButtonProps: { text: "تفاصيل المنتج", icon: ArrowUpRight, href: "#" }
|
||||
},
|
||||
{
|
||||
id: "oil_marine_engine", name: "زيت محركات بحرية API CF-4", price: "SAR 220.00", imageSrc: "https://img.b2bpic.net/free-photo/marine-engine-oil_678901234.jpg", imageAlt: "زيت محركات بحرية API CF-4", priceButtonProps: { text: "تفاصيل المنتج", icon: ArrowUpRight, href: "#" }
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<FooterBase
|
||||
logoText="الحسام للزيوت"
|
||||
copyrightText="© 2024 | الحسام للزيوت. جميع الحقوق محفوظة."
|
||||
columns={[
|
||||
{
|
||||
title: "الشركة", items: [
|
||||
{ label: "من نحن", href: "/#about" },
|
||||
{ label: "منتجاتنا", href: "/products" },
|
||||
{ label: "خدماتنا", href: "/#services" },
|
||||
{ label: "اتصل بنا", href: "/#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "المنتجات", items: [
|
||||
{ label: "زيوت محركات", href: "/products" },
|
||||
{ label: "زيوت صناعية", href: "/products" },
|
||||
{ label: "زيوت هيدروليكية", href: "/products" },
|
||||
{ label: "زيوت تشحيم", href: "/products" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "الدعم", items: [
|
||||
{ label: "الأسئلة الشائعة", href: "/#faq" },
|
||||
{ label: "سياسة الخصوصية", href: "#" },
|
||||
{ label: "الشروط والأحكام", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user