Merge version_2 into main #3

Merged
bender merged 6 commits from version_2 into main 2026-02-24 07:16:00 +00:00
6 changed files with 246 additions and 40 deletions

View File

@@ -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" }
],
},
{

View File

@@ -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;
};

View File

@@ -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
View 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>
);
}

View File

@@ -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."

View File

@@ -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."