Merge version_2 into main #3
@@ -31,10 +31,13 @@ export default function BlogPage() {
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Events", id: "events" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Events", id: "#events" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "Blog", id: "/blog" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
brandName="Balero Chess Club"
|
||||
button={{ text: "Join Now", href: "#contact" }}
|
||||
@@ -66,10 +69,13 @@ export default function BlogPage() {
|
||||
columns={[
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "#" },
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Events", href: "#events" },
|
||||
{ label: "Shop", href: "/shop" },
|
||||
{ label: "Products", href: "/products" },
|
||||
{ label: "Blog", href: "/blog" }
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
@@ -186,7 +186,7 @@ export default function RootLayout({
|
||||
|
||||
const buttonClasses = ['btn', 'button', 'cta', 'action-button'];
|
||||
const hasButtonClass = buttonClasses.some(cls =>
|
||||
element.classList.contains(cls) || element.classList.contains(\`btn-\${cls}\`)
|
||||
element.classList.contains(cls) || element.classList.contains(`btn-${cls}`)
|
||||
);
|
||||
|
||||
if (hasButtonClass && element.textContent && element.textContent.trim().length > 0) {
|
||||
@@ -678,17 +678,17 @@ export default function RootLayout({
|
||||
const rect = element.getBoundingClientRect();
|
||||
const overlay = document.createElement('div');
|
||||
overlay.className = 'webild-hover-overlay';
|
||||
overlay.style.cssText = \`
|
||||
overlay.style.cssText = `
|
||||
position: fixed !important;
|
||||
top: \${rect.top - 2}px !important;
|
||||
left: \${rect.left - 2}px !important;
|
||||
width: \${rect.width + 4}px !important;
|
||||
height: \${rect.height + 4}px !important;
|
||||
top: ${rect.top - 2}px !important;
|
||||
left: ${rect.left - 2}px !important;
|
||||
width: ${rect.width + 4}px !important;
|
||||
height: ${rect.height + 4}px !important;
|
||||
background-color: rgba(90, 113, 230, 0.15) !important;
|
||||
pointer-events: none !important;
|
||||
z-index: 999998 !important;
|
||||
transition: all 0.15s ease !important;
|
||||
\`;
|
||||
`;
|
||||
document.body.appendChild(overlay);
|
||||
return overlay;
|
||||
};
|
||||
@@ -751,11 +751,11 @@ export default function RootLayout({
|
||||
elementTypeLabel.classList.add('label-bottom');
|
||||
}
|
||||
|
||||
elementTypeLabel.style.cssText = \`
|
||||
left: \${labelLeft}px !important;
|
||||
top: \${labelTop}px !important;
|
||||
elementTypeLabel.style.cssText = `
|
||||
left: ${labelLeft}px !important;
|
||||
top: ${labelTop}px !important;
|
||||
transform: none !important;
|
||||
\`;
|
||||
`;
|
||||
};
|
||||
|
||||
const removeElementTypeLabel = () => {
|
||||
@@ -1009,7 +1009,7 @@ export default function RootLayout({
|
||||
const getStorageKey = () => {
|
||||
const url = new URL(window.location.href);
|
||||
const pathParts = url.pathname.split('/').filter(Boolean);
|
||||
return \`webild-changes-\${pathParts.join('-')}\`;
|
||||
return `webild-changes-${pathParts.join('-')}`;
|
||||
};
|
||||
|
||||
const saveChangeToStorage = (change) => {
|
||||
@@ -1173,7 +1173,7 @@ export default function RootLayout({
|
||||
|
||||
window.parent.postMessage({
|
||||
type: 'webild-text-update-success',
|
||||
data: {
|
||||
data: {
|
||||
selector: finalSelector,
|
||||
newValue: newValue
|
||||
}
|
||||
@@ -1245,7 +1245,7 @@ export default function RootLayout({
|
||||
|
||||
if (isBackground) {
|
||||
oldValue = window.getComputedStyle(element).backgroundImage;
|
||||
element.style.backgroundImage = \`url('\${newSrc}')\`;
|
||||
element.style.backgroundImage = `url('${newSrc}')`;
|
||||
replaced = true;
|
||||
} else if (element.tagName.toLowerCase() === 'img') {
|
||||
oldValue = element.src;
|
||||
@@ -1280,7 +1280,7 @@ export default function RootLayout({
|
||||
const hasBackgroundImage = window.getComputedStyle(element).backgroundImage !== 'none';
|
||||
if (hasBackgroundImage) {
|
||||
oldValue = window.getComputedStyle(element).backgroundImage;
|
||||
element.style.backgroundImage = \`url('\${newSrc}')\`;
|
||||
element.style.backgroundImage = `url('${newSrc}')`;
|
||||
replaced = true;
|
||||
}
|
||||
}
|
||||
@@ -1396,9 +1396,6 @@ export default function RootLayout({
|
||||
el.classList.remove(selectedClass);
|
||||
});
|
||||
|
||||
const styleEl = document.getElementById('webild-inspector-styles');
|
||||
if (styleEl) styleEl.remove();
|
||||
|
||||
hoveredElement = null;
|
||||
selectedElement = null;
|
||||
};
|
||||
|
||||
@@ -29,10 +29,14 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Events", id: "events" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Events", id: "#events" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "Blog", id: "/blog" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
brandName="Balero Chess Club"
|
||||
button={{ text: "Join Now", href: "#contact" }}
|
||||
@@ -210,10 +214,13 @@ export default function LandingPage() {
|
||||
columns={[
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "#" },
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Events", href: "#events" },
|
||||
{ label: "Shop", href: "/shop" },
|
||||
{ label: "Products", href: "/products" },
|
||||
{ label: "Blog", href: "/blog" }
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
108
src/app/products/page.tsx
Normal file
108
src/app/products/page.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
"use client";
|
||||
|
||||
import React from 'react';
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
|
||||
// Component Imports
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
|
||||
export default function ProductsPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Events", id: "#events" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "Blog", id: "/blog" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
brandName="Balero Chess Club"
|
||||
button={{ text: "Join Now", href: "#contact" }}
|
||||
buttonClassName="bg-[var(--primary-cta)] text-[var(--primary-cta-text)] hover:bg-[var(--primary-cta)]"
|
||||
navItemClassName="text-[var(--foreground)] hover:text-[var(--primary-cta)]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product-showcase" data-section="product-showcase">
|
||||
<ProductCardThree
|
||||
title="Our Products"
|
||||
description="Explore our range of high-quality chess products and accessories."
|
||||
tag="Shop Now"
|
||||
textboxLayout="default"
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "Premium Chess Set (Wood)", price: "$149.99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/uploaded-1770650117849-5g9y9h7u.jpg", imageAlt: "Premium wooden chess set"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Electronic Chess Clock", price: "$49.99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/uploaded-1770650170139-p2l3m8n7.jpg", imageAlt: "Electronic chess clock"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Beginner's Chess Book", price: "$19.99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_34my1kGeblbsCcwUUCcjBY9WFkg/uploaded-1770650220267-q0w1e2r3.jpg", imageAlt: "Beginner's chess book"
|
||||
}
|
||||
]}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Events", href: "#events" },
|
||||
{ label: "Shop", href: "/shop" },
|
||||
{ label: "Products", href: "/products" },
|
||||
{ label: "Blog", href: "/blog" }
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "Facebook", href: "https://www.facebook.com/balerochessclub" },
|
||||
{ label: "Instagram", href: "https://www.instagram.com/balerochessclub" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Balero Chess Club. All rights reserved."
|
||||
bottomRightText="Built with passion for chess."
|
||||
className="bg-[var(--background)] text-[var(--foreground)]"
|
||||
columnTitleClassName="font-semibold text-[var(--foreground)]"
|
||||
columnItemClassName="text-[var(--foreground)] opacity-80 hover:text-[var(--primary-cta)]"
|
||||
bottomLeftTextClassName="text-[var(--foreground)] opacity-70"
|
||||
bottomRightTextClassName="text-[var(--foreground)] opacity-70"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -91,7 +91,16 @@ function ProductPageContent({ params }: ProductPageProps) {
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Events", id: "#events" },
|
||||
{ name: "Blog", id: "/blog" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
brandName="Balero Chess Club"
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||
buttonClassName="bg-[var(--primary-cta)] text-[var(--primary-cta-text)] hover:bg-[var(--primary-cta)]"
|
||||
@@ -123,7 +132,16 @@ function ProductPageContent({ params }: ProductPageProps) {
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Events", id: "#events" },
|
||||
{ name: "Blog", id: "/blog" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
brandName="Balero Chess Club"
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||
buttonClassName="bg-[var(--primary-cta)] text-[var(--primary-cta-text)] hover:bg-[var(--primary-cta)]"
|
||||
@@ -162,7 +180,16 @@ function ProductPageContent({ params }: ProductPageProps) {
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Events", id: "#events" },
|
||||
{ name: "Blog", id: "/blog" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
brandName="Balero Chess Club"
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||
buttonClassName="bg-[var(--primary-cta)] text-[var(--primary-cta-text)] hover:bg-[var(--primary-cta)]"
|
||||
@@ -208,9 +235,29 @@ function ProductPageContent({ params }: ProductPageProps) {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Quick Links", items: [{ label: "Home", href: "/" }, { label: "About", href: "#about" }, { label: "Features", href: "#features" }, { label: "Events", href: "#events" }] },
|
||||
{ title: "Resources", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
|
||||
{ title: "Connect", items: [{ label: "Facebook", href: "https://www.facebook.com/balerochessclub" }, { label: "Instagram", href: "https://www.instagram.com/balerochessclub" }] }
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Events", href: "#events" },
|
||||
{ label: "Shop", href: "/shop" },
|
||||
{ label: "Products", href: "/products" },
|
||||
{ label: "Blog", href: "/blog" }
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "Facebook", href: "https://www.facebook.com/balerochessclub" },
|
||||
{ label: "Instagram", href: "https://www.instagram.com/balerochessclub" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Balero Chess Club. All rights reserved."
|
||||
bottomRightText="Built with passion for chess."
|
||||
|
||||
@@ -31,7 +31,10 @@ function ShopPageContent() {
|
||||
getCheckoutItems,
|
||||
} = useCart();
|
||||
|
||||
const { checkout, isLoading: isCheckoutLoading } = useCheckout();
|
||||
const {
|
||||
checkout,
|
||||
isLoading: isCheckoutLoading
|
||||
} = useCheckout();
|
||||
|
||||
const handleCheckout = useCallback(async () => {
|
||||
if (cartItems.length === 0) return;
|
||||
@@ -59,7 +62,16 @@ function ShopPageContent() {
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Events", id: "#events" },
|
||||
{ name: "Blog", id: "/blog" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
brandName="Balero Chess Club"
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||
buttonClassName="bg-[var(--primary-cta)] text-[var(--primary-cta-text)] hover:bg-[var(--primary-cta)]"
|
||||
@@ -90,7 +102,16 @@ function ShopPageContent() {
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Products", id: "/products" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Features", id: "#features" },
|
||||
{ name: "Events", id: "#events" },
|
||||
{ name: "Blog", id: "/blog" },
|
||||
{ name: "Contact", id: "#contact" }
|
||||
]}
|
||||
brandName="Balero Chess Club"
|
||||
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
|
||||
buttonClassName="bg-[var(--primary-cta)] text-[var(--primary-cta-text)] hover:bg-[var(--primary-cta)]"
|
||||
@@ -126,9 +147,29 @@ function ShopPageContent() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{ title: "Quick Links", items: [{ label: "Home", href: "/" }, { label: "About", href: "#about" }, { label: "Features", href: "#features" }, { label: "Events", href: "#events" }] },
|
||||
{ title: "Resources", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
|
||||
{ title: "Connect", items: [{ label: "Facebook", href: "https://www.facebook.com/balerochessclub" }, { label: "Instagram", href: "https://www.instagram.com/balerochessclub" }] }
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "/" },
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Features", href: "#features" },
|
||||
{ label: "Events", href: "#events" },
|
||||
{ label: "Shop", href: "/shop" },
|
||||
{ label: "Products", href: "/products" },
|
||||
{ label: "Blog", href: "/blog" }
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Contact", href: "#contact" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect", items: [
|
||||
{ label: "Facebook", href: "https://www.facebook.com/balerochessclub" },
|
||||
{ label: "Instagram", href: "https://www.instagram.com/balerochessclub" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
bottomLeftText="© 2024 Balero Chess Club. All rights reserved."
|
||||
bottomRightText="Built with passion for chess."
|
||||
|
||||
Reference in New Issue
Block a user