bender/c77bd442-1daa-4669-b890-1e6b9009d1cb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main #1

Merged
bender merged 4 commits from version_2 into main 2026-03-04 13:10:11 +00:00
Conversation 0 Commits 4 Files Changed 4 +77 -59
4 changed files with 77 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/layout.tsx
View File

@@ -1,24 +1,19 @@
import type { Metadata } from "next";
import { Raleway } from "next/font/google";
import { Halant } from "next/font/google";
import { Inter } from "next/font/google";
import { Bebas_Neue, Raleway } from "next/font/google";
import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
const bebasNeue = Bebas_Neue({
variable: "--font-bebas-neue", subsets: ["latin"],
weight: ["400"],
});
const raleway = Raleway({
variable: "--font-raleway", subsets: ["latin"],
});
const halant = Halant({
variable: "--font-halant", subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
});
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Refyned Grooming | Premium Male Grooming & Hygiene", description: "Luxury black and chrome grooming collection for discerning men. Premium beard care, skincare, haircare, and fragrances crafted with precision.", keywords: "male grooming, luxury grooming, beard care, men's skincare, premium fragrances, grooming collection", openGraph: {
title: "Refyned Grooming | Premium Male Grooming & Hygiene", description: "Luxury black and chrome grooming collection for discerning men. Premium beard care, skincare, haircare, and fragrances crafted with precision.", type: "website", siteName: "Refyned Grooming"},
@@ -35,7 +30,7 @@ export default function RootLayout({
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body
className={`${raleway.variable} ${halant.variable} ${inter.variable} antialiased`}
className={`${bebasNeue.variable} ${raleway.variable} antialiased`}
>
<Tag />
{children}

83
src/app/page.tsx
View File

@@ -10,20 +10,20 @@ import FooterMedia from '@/components/sections/footer/FooterMedia';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="small"
sizing="mediumLarge"
background="blurBottom"
cardStyle="inset"
primaryButtonStyle="diagonal-gradient"
borderRadius="rounded"
contentWidth="medium"
sizing="large"
background="none"
cardStyle="solid"
primaryButtonStyle="flat"
secondaryButtonStyle="solid"
headingFontWeight="medium"
headingFontWeight="bold"
>
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="Refyned Grooming"
brandName="R"
navItems={[
{ name: "Shop", id: "products" },
{ name: "Features", id: "features" },
@@ -35,28 +35,48 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroBillboardGallery
title="Elevate Your Grooming"
description="Premium black and chrome collection crafted for the discerning gentleman. Experience luxury in every detail."
title="Precision Crafted. Luxury Defined."
description="Premium black and chrome collection for the discerning gentleman. Experience luxury in every detail."
tag="Refyned Grooming"
background={{ variant: "radial-gradient" }}
background={{ variant: "plain" }}
mediaItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-18422.jpg", imageAlt: "Premium grooming collection" },
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-priest-his-lunch-time_23-2149284677.jpg", imageAlt: "Luxury beard care products" },
{ imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-man-applying-makeup-beauty-products_171337-5524.jpg", imageAlt: "Professional skincare essentials" }
]}
buttons={[
{ text: "Shop Now", href: "#products" },
{ text: "Explore Collection", href: "#products" }
{ text: "Shop Collection", href: "#products" },
{ text: "Explore", href: "#products" }
]}
mediaAnimation="slide-up"
buttonAnimation="slide-up"
/>
</div>
<div id="categories" data-section="categories" style={{ background: "var(--background)", padding: "var(--vw-3) var(--vw-1_5)" }}>
<div style={{ maxWidth: "var(--width-content-width)", margin: "0 auto", display: "flex", justifyContent: "space-between", alignItems: "center", gap: "var(--vw-2)" }}>
<div style={{ textAlign: "center", flex: 1 }}>
<p style={{ fontFamily: "var(--font-raleway)", fontSize: "var(--text-lg)", color: "var(--foreground)", fontWeight: "300", letterSpacing: "0.05em" }}>Skin</p>
</div>
<div style={{ textAlign: "center", flex: 1 }}>
<p style={{ fontFamily: "var(--font-raleway)", fontSize: "var(--text-lg)", color: "var(--foreground)", fontWeight: "300", letterSpacing: "0.05em" }}>Body</p>
</div>
<div style={{ textAlign: "center", flex: 1 }}>
<p style={{ fontFamily: "var(--font-raleway)", fontSize: "var(--text-lg)", color: "var(--foreground)", fontWeight: "300", letterSpacing: "0.05em" }}>Oral</p>
</div>
<div style={{ textAlign: "center", flex: 1 }}>
<p style={{ fontFamily: "var(--font-raleway)", fontSize: "var(--text-lg)", color: "var(--foreground)", fontWeight: "300", letterSpacing: "0.05em" }}>Nails</p>
</div>
<div style={{ textAlign: "center", flex: 1 }}>
<p style={{ fontFamily: "var(--font-raleway)", fontSize: "var(--text-lg)", color: "var(--foreground)", fontWeight: "300", letterSpacing: "0.05em" }}>Hair</p>
</div>
</div>
</div>
<div id="products" data-section="products">
<ProductCardTwo
title="Curated Categories"
description="Discover our premium selection of grooming essentials. Each product represents the pinnacle of luxury and performance."
title="Best Sellers"
description="Discover our most coveted grooming essentials. Luxury redefined."
tag="Premium Collection"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
@@ -74,14 +94,6 @@ export default function LandingPage() {
{
id: "3", brand: "Refyned", name: "Hair Styling Collection", price: "$69.99", rating: 5,
reviewCount: "1.5k", imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-washing-head-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6369.jpg", imageAlt: "Professional hair styling products"
},
{
id: "4", brand: "Refyned", name: "Signature Fragrances", price: "$129.99", rating: 5,
reviewCount: "3.1k", imageSrc: "http://img.b2bpic.net/free-photo/man-s-accessories-wooden-surface_8353-10515.jpg", imageAlt: "Luxury fragrance collection"
},
{
id: "5", brand: "Refyned", name: "Grooming Tools Set", price: "$159.99", rating: 5,
reviewCount: "2.7k", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313038.jpg", imageAlt: "Professional grooming tools"
}
]}
/>
@@ -89,8 +101,8 @@ export default function LandingPage() {
<div id="features" data-section="features">
<FeatureCardSeven
title="Why Choose Refyned"
description="Premium quality meets minimalist design. Experience grooming redefined with our luxury collection."
title="Why Refyned"
description="Premium quality meets minimalist design. Experience grooming redefined."
tag="Excellence"
textboxLayout="default"
animationType="blur-reveal"
@@ -98,25 +110,36 @@ export default function LandingPage() {
features={[
{
id: 1,
title: "Uncompromising Quality", description: "Every product undergoes rigorous testing. We source the finest ingredients and materials from around the world to ensure premium quality that exceeds expectations.", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-cup-store-concept-choosing-dishes_169016-23448.jpg", imageAlt: "Premium quality craftsmanship"
title: "Uncompromising Quality", description: "Every product undergoes rigorous testing. We source the finest ingredients and materials from around the world.", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-cup-store-concept-choosing-dishes_169016-23448.jpg", imageAlt: "Premium quality craftsmanship"
},
{
id: 2,
title: "Advanced Formulations", description: "Our research team develops cutting-edge formulas combining science with luxury. Each product is engineered for maximum performance and visible results.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-ingredients-arrangement_23-2148897593.jpg", imageAlt: "Advanced ingredient science"
title: "Advanced Formulations", description: "Our research team develops cutting-edge formulas combining science with luxury. Each product engineered for maximum performance.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-ingredients-arrangement_23-2148897593.jpg", imageAlt: "Advanced ingredient science"
},
{
id: 3,
title: "Visible Results", description: "Transform your grooming routine. Our customers report noticeably improved skin texture, beard quality, and overall confidence within weeks of use.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-men-with-beards-posing_23-2149615795.jpg", imageAlt: "Grooming transformation results"
title: "Visible Results", description: "Transform your routine. Our customers report improved skin texture, beard quality, and confidence within weeks of use.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-men-with-beards-posing_23-2149615795.jpg", imageAlt: "Grooming transformation results"
}
]}
/>
</div>
<div id="statement" data-section="statement" style={{ background: "var(--background)", padding: "var(--vw-3) var(--vw-1_5)", textAlign: "center" }}>
<div style={{ maxWidth: "var(--width-content-width)", margin: "0 auto" }}>
<h2 style={{ fontFamily: "var(--font-bebas-neue)", fontSize: "clamp(2rem, 5vw, 5rem)", color: "var(--foreground)", letterSpacing: "0.1em", lineHeight: "1.2", marginBottom: "var(--vw-2)" }}>
Luxury is not about excess. It is about precision.
</h2>
<p style={{ fontFamily: "var(--font-raleway)", fontSize: "var(--text-base)", color: "var(--accent)", fontWeight: "300", letterSpacing: "0.05em" }}>
Refyned Grooming represents the intersection of masculine refinement and contemporary elegance.
</p>
</div>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/dark-textured-stone-background_53876-88915.jpg"
imageAlt="Premium luxury background"
logoText="Refyned Grooming"
logoText="Refyned"
copyrightText="© 2025 Refyned Grooming. All rights reserved."
columns={[
{

2
src/app/styles/base.css
View File

@@ -24,5 +24,5 @@ h3,
h4,
h5,
h6 {
font-family: var(--font-raleway), sans-serif;
font-family: var(--font-bebas-neue), sans-serif;
}

32
src/app/styles/variables.css
View File

@@ -2,23 +2,23 @@
/* Base units */
/* --vw is set by ThemeProvider */
/* --background: #0f0f0f;;
--card: #1a1a1a;;
--foreground: #e8e8e8;;
--primary-cta: #c0c0c0;;
--secondary-cta: #1a1a1a;;
--accent: #808080;;
--background-accent: #2a2a2a;; */
/* --background: #0a0a0a;;
--card: #111111;;
--foreground: #888888;;
--primary-cta: #777777;;
--secondary-cta: #111111;;
--accent: #444444;;
--background-accent: #1f1f1f;; */
--background: #0f0f0f;;
--card: #1a1a1a;;
--foreground: #e8e8e8;;
--primary-cta: #c0c0c0;;
--primary-cta-text: #0f0f0f;;
--secondary-cta: #1a1a1a;;
--secondary-cta-text: #e8e8e8;;
--accent: #808080;;
--background-accent: #2a2a2a;;
--background: #0a0a0a;;
--card: #111111;;
--foreground: #888888;;
--primary-cta: #777777;;
--primary-cta-text: #0a0a0a;;
--secondary-cta: #111111;;
--secondary-cta-text: #888888;;
--accent: #444444;;
--background-accent: #1f1f1f;;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);