Compare commits
70 Commits
version_2_
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| 60ed0a043a | |||
| 2af0109232 | |||
| de48ddff81 | |||
|
|
fb55c93fdc | ||
|
|
204b484f0b | ||
|
|
f8af90f221 | ||
| 2e335f0e97 | |||
|
|
8807109d53 | ||
| 83e97029de | |||
| 751599c092 | |||
| 79b86b58e2 | |||
| 7c397f9e36 | |||
| da08a53295 | |||
|
|
e5515579b9 | ||
| 9331ff714d | |||
|
|
50b75656d7 | ||
| e3772bd1f6 | |||
|
|
461f919a09 | ||
| 2f1a0ebb1e | |||
| 7217625144 | |||
| b8120b2f94 | |||
|
|
dd8207e618 | ||
| df597bf823 | |||
|
|
cc77bb21f0 | ||
| 7367813b18 | |||
| 6af3f6cee6 | |||
| 71aed245ee | |||
|
|
0a332c0ace | ||
| 6579f37982 | |||
|
|
bbdb8f7aeb | ||
| 7c666a679e | |||
| 0e38ca2c24 | |||
| ff5f4dc66a | |||
| 87932d46cc | |||
| f7ebce8095 | |||
| 5efc0937fb | |||
| 5895eb3e47 | |||
| 22a6a207ee | |||
| 9df7d667b1 | |||
| c5a144a898 | |||
| ebb9a7c654 | |||
| 983f23ae68 | |||
| 8ffb1e2f74 | |||
| 8dc346b14d | |||
| 49d235676d | |||
| c597133d41 | |||
| c9a04cfd55 | |||
| a39e92218a | |||
| 30ac62a94c | |||
| 0f244e8173 | |||
| c24076a43e | |||
| ae1b7d2b8a | |||
| 2ba41d536a | |||
| dae26023a6 | |||
| 9e2a1fc137 | |||
| 8327e5a528 | |||
| 8e3e629089 | |||
| ff2b44d641 | |||
| c05e02e556 | |||
| 9f5883c0bc | |||
| ead77ab206 | |||
| 0bfedc4cf7 | |||
| 3c6a7a0dc6 | |||
| 83a02ce07e | |||
| 0b748d6d5b | |||
| c7d3e39f44 | |||
| 4c12bcbd54 | |||
| c29d21db11 | |||
| b43961f607 | |||
|
|
6facac785f |
@@ -13,6 +13,8 @@
|
||||
<meta name="description" content="YungHondo is the pulse of the African diaspora. Music, culture, and entrepreneurship rooted in our journey." />
|
||||
<meta property="og:description" content="YungHondo is the pulse of the African diaspora. Music, culture, and entrepreneurship rooted in our journey." />
|
||||
<meta name="twitter:description" content="YungHondo is the pulse of the African diaspora. Music, culture, and entrepreneurship rooted in our journey." />
|
||||
<meta property="og:image" content="https://storage.googleapis.com/webild/users/user_3EPHwihhKJDTe9RMELwW31lY9YY/uploaded-1782071171201-ieej2njx.jpg" />
|
||||
<meta name="twitter:image" content="https://storage.googleapis.com/webild/users/user_3EPHwihhKJDTe9RMELwW31lY9YY/uploaded-1782071171201-ieej2njx.jpg" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
|
||||
import Layout from './components/Layout';
|
||||
import HomePage from './pages/HomePage';
|
||||
|
||||
import ProductsPage from "@/pages/ProductsPage";
|
||||
export default function App() {
|
||||
return (
|
||||
<Routes>
|
||||
<Route element={<Layout />}>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/products" element={<ProductsPage />} />
|
||||
</Route>
|
||||
</Routes>
|
||||
);
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import FooterBrand from '@/components/sections/footer/FooterBrand';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import NavbarInline from '@/components/ui/NavbarInline';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
|
||||
@@ -34,7 +34,9 @@ export default function Layout() {
|
||||
{
|
||||
"name": "Faq",
|
||||
"href": "#faq"
|
||||
}
|
||||
},
|
||||
{ name: "Products", href: "/products" },
|
||||
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -53,42 +55,34 @@ export default function Layout() {
|
||||
<Outlet />
|
||||
</main>
|
||||
<SectionErrorBoundary name="footer">
|
||||
<FooterBrand
|
||||
brand="YungHondo"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
<FooterSimple
|
||||
brand="YungHondo"
|
||||
columns={[
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "https://instagram.com/YungHondoMusic",
|
||||
title: "Socials",
|
||||
items: [
|
||||
{ label: "Instagram @YungHondoMusic", href: "https://instagram.com/YungHondoMusic" },
|
||||
{ label: "TikTok @YungHondoMusic", href: "https://tiktok.com/@YungHondoMusic" },
|
||||
{ label: "YouTube YungHondoMusic", href: "https://youtube.com/@YungHondoMusic" },
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "TikTok",
|
||||
href: "https://tiktok.com/@YungHondoMusic",
|
||||
title: "Music",
|
||||
items: [
|
||||
{ label: "Spotify YungHondoMusic", href: "https://spotify.com" },
|
||||
{ label: "Apple Music YungHondoMusic", href: "https://music.apple.com" },
|
||||
]
|
||||
},
|
||||
{
|
||||
label: "YouTube",
|
||||
href: "https://youtube.com/YungHondoMusic",
|
||||
},
|
||||
{
|
||||
label: "Spotify",
|
||||
href: "https://spotify.com/YungHondoMusic",
|
||||
},
|
||||
{
|
||||
label: "Apple Music",
|
||||
href: "https://music.apple.com/YungHondoMusic",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
}
|
||||
]}
|
||||
/>
|
||||
<div className="w-content-width mx-auto px-6 pb-12 text-center text-muted-foreground">
|
||||
Representing those who left home to build a future.
|
||||
</div>
|
||||
title: "Contact",
|
||||
items: [
|
||||
{ label: "Email Us", href: "mailto:contact@yunghondo.com" },
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyright="Representing those who left home to build a future."
|
||||
links={[]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</StyleProvider>
|
||||
);
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
|
||||
@import "tailwindcss";
|
||||
@import "./styles/masks.css";
|
||||
@import "./styles/animations.css";
|
||||
|
||||
:root {
|
||||
/* @colorThemes/lightTheme/grayNavyBlue */
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #e63946;
|
||||
--background: #060000;
|
||||
--card: #1d0d0d;
|
||||
--foreground: #ffe6e6;
|
||||
--primary-cta: #ff3d4a;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #ffffff;
|
||||
--secondary-cta-text: #000000;
|
||||
--accent: #e63946;
|
||||
--background-accent: #5c0e14;
|
||||
--secondary-cta: #1f0a0a;
|
||||
--secondary-cta-text: #ffe6e6;
|
||||
--accent: #7b2d2d;
|
||||
--background-accent: #b8111f;
|
||||
|
||||
/* @layout/border-radius/rounded */
|
||||
--radius: 1rem;
|
||||
@@ -88,7 +88,7 @@
|
||||
--color-background-accent: var(--background-accent);
|
||||
|
||||
/* Fonts */
|
||||
--font-sans: 'Archivo', sans-serif;
|
||||
--font-sans: 'Open Sans', sans-serif;
|
||||
--font-tight: "Inter Tight", sans-serif;
|
||||
--font-mono: monospace;
|
||||
|
||||
@@ -137,7 +137,7 @@ body {
|
||||
margin: 0;
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: 'Archivo', sans-serif;
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
overscroll-behavior: none;
|
||||
@@ -150,7 +150,7 @@ h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: 'Archivo', sans-serif;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
/* Default card/button styles. Template theme.css imports come after this file
|
||||
|
||||
@@ -6,27 +6,19 @@
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import AboutSection from './HomePage/sections/About';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
|
||||
import ListenSection from './HomePage/sections/Listen';
|
||||
import EventsSection from './HomePage/sections/Events';
|
||||
import StoriesSection from './HomePage/sections/Stories';
|
||||
import MerchSection from './HomePage/sections/Merch';export default function HomePage(): React.JSX.Element {
|
||||
import QuoteSection from './HomePage/sections/Quote';export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<AboutSection />
|
||||
<ListenSection />
|
||||
<EventsSection />
|
||||
<StoriesSection />
|
||||
<MerchSection />
|
||||
<QuoteSection />
|
||||
|
||||
|
||||
|
||||
<TestimonialsSection />
|
||||
|
||||
|
||||
<ContactSection />
|
||||
|
||||
@@ -1,22 +1,114 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "about" section.
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import Button from "@/components/ui/Button";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import { resolveIcon } from "@/utils/resolve-icon";
|
||||
|
||||
import React from 'react';
|
||||
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
const items = [
|
||||
{
|
||||
icon: "Globe",
|
||||
title: "Diaspora Focus",
|
||||
description: "Global reach connecting our roots to modern soundscapes."
|
||||
},
|
||||
{
|
||||
icon: "TrendingUp",
|
||||
title: "Entrepreneurial Spirit",
|
||||
description: "Building sustainable ecosystems for artists and creators."
|
||||
},
|
||||
{
|
||||
icon: "Users",
|
||||
title: "Community First",
|
||||
description: "Creating spaces for growth, collaboration, and shared success."
|
||||
}
|
||||
];
|
||||
|
||||
export default function AboutSection(): React.JSX.Element {
|
||||
type AboutFeaturesSplitProps = {
|
||||
tag: string;
|
||||
title: string;
|
||||
description: string;
|
||||
primaryButton?: { text: string; href: string };
|
||||
secondaryButton?: { text: string; href: string };
|
||||
items: { icon: string | LucideIcon; title: string; description: string }[];
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
const AboutInline = () => {
|
||||
return (
|
||||
<div id="about" data-section="about">
|
||||
<SectionErrorBoundary name="about">
|
||||
<AboutFeaturesSplit
|
||||
tag="About YungHondo"
|
||||
title="Feel Free To Always Come Back"
|
||||
description="YungHondo is a Zimbabwean-born artist, entrepreneur, and storyteller documenting the journey of building a life away from home. Through music, live performance, and culture, YungHondo represents a generation of dreamers carrying their roots into the future. Every song is a chapter. Every performance is a statement. Every victory is for the diaspora. Album 'Diaspora N' out now on all platforms."
|
||||
items={[{"description":"Documenting the journey of building a life away from home.","icon":"Music","title":"Music"},{"icon":"Mic","title":"Live Performance","description":"Representing a generation of dreamers carrying their roots into the future."},{"icon":"Globe","title":"Culture","description":"Every victory is for the diaspora. Feel Free To Always Come Back."}]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/glowing-digital-sphere-futuristic-environment_23-2152020906.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
<section aria-label="About section" className="relative py-20 overflow-hidden">
|
||||
<div className="absolute inset-0 z-0 pointer-events-none">
|
||||
<ImageOrVideo
|
||||
imageSrc="https://storage.googleapis.com/webild/users/user_3EPHwihhKJDTe9RMELwW31lY9YY/uploaded-1781848928553-vtsks4rx.jpg"
|
||||
className="w-full h-full object-cover opacity-30"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-background via-transparent to-background" />
|
||||
</div>
|
||||
<div className="relative z-10 flex flex-col gap-8 md:gap-10 mx-auto w-content-width">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
||||
<p>{"Our Philosophy"}</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text={"More Than Just Music"}
|
||||
variant="fade"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
|
||||
/>
|
||||
|
||||
<TextAnimation
|
||||
text={"YungHondo represents the collective resilience of the diaspora. We bridge borders, defy industry standards, and empower the next generation of creative entrepreneurs."}
|
||||
variant="fade"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
|
||||
/>
|
||||
|
||||
{(undefined || undefined) && (
|
||||
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
|
||||
{undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
|
||||
{undefined && <Button text={undefined.text} href={undefined.href} variant="secondary"animationDelay={0.1} />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row md:items-stretch gap-5">
|
||||
<div className="flex flex-col justify-center gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 w-full md:w-4/10 2xl:w-35/100 card rounded">
|
||||
{items.map((item, index) => {
|
||||
const ItemIcon = resolveIcon(item.icon);
|
||||
return (
|
||||
<div key={item.title}>
|
||||
<div className="flex flex-col gap-2">
|
||||
<div className="flex items-center justify-center shrink-0 mb-1 size-10 primary-button rounded">
|
||||
<ItemIcon className="h-2/5 w-2/5 text-primary-cta-text" strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 className="text-2xl font-semibold">{item.title}</h3>
|
||||
<p className="text-base leading-snug">{item.description}</p>
|
||||
</div>
|
||||
{index < items.length - 1 && (
|
||||
<div className="mt-4 xl:mt-5 2xl:mt-6 border-b border-accent/40" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className="p-px w-full md:w-6/10 2xl:w-7/10 h-80 md:h-auto card rounded overflow-hidden">
|
||||
<div className="relative size-full">
|
||||
<ImageOrVideo imageSrc={"https://storage.googleapis.com/webild/users/user_3EPHwihhKJDTe9RMELwW31lY9YY/uploaded-1781848199023-1n57m2t3.jpg"} className="absolute inset-0 object-cover rounded" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function AboutSection() {
|
||||
return (
|
||||
<div data-webild-section="about" id="about">
|
||||
<AboutInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,23 +1,61 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "contact" section.
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import Button from "@/components/ui/Button";
|
||||
|
||||
import React from 'react';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
const primaryButton = {
|
||||
text: "Contact Us",
|
||||
href: ""
|
||||
};
|
||||
const secondaryButton = {
|
||||
text: "Listen to our Sound",
|
||||
href: "/"
|
||||
};
|
||||
|
||||
export default function ContactSection(): React.JSX.Element {
|
||||
const ContactInline = () => {
|
||||
return (
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Connect"
|
||||
text="Ready to work? Let's build something different."
|
||||
primaryButton={{
|
||||
text: "Contact Us", href: "mailto:hello@yunghondo.com"}}
|
||||
secondaryButton={{
|
||||
text: "Listen to our Sound", href: "#"}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
<section aria-label="Contact section" className="py-20 relative overflow-hidden">
|
||||
<div
|
||||
className="absolute inset-0 z-0 opacity-25 mix-blend-luminosity pointer-events-none"
|
||||
style={{
|
||||
backgroundImage: `url('https://storage.googleapis.com/webild/users/user_3EPHwihhKJDTe9RMELwW31lY9YY/uploaded-1782069261624-8rif7upk.jpg')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
}}
|
||||
/>
|
||||
<div className="w-content-width mx-auto relative z-10">
|
||||
<ScrollReveal variant="fade-blur">
|
||||
<div className="flex flex-col items-center gap-8 md:gap-10 py-20 px-8 rounded card">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
|
||||
<p>{"Connect"}</p>
|
||||
</div>
|
||||
|
||||
<TextAnimation
|
||||
text={"Ready to work? Let's build something different."}
|
||||
variant="fade"
|
||||
gradientText={true}
|
||||
tag="h2"
|
||||
className="md:max-w-8/10 text-5xl 2xl:text-6xl leading-[1.15] font-semibold text-center text-balance"
|
||||
/>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
|
||||
<Button text={primaryButton.text} href={primaryButton.href} variant="primary" />
|
||||
<Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default function ContactSection() {
|
||||
return (
|
||||
<div data-webild-section="contact" id="contact">
|
||||
<ContactInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,71 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
export default function EventsSection() {
|
||||
return (
|
||||
<div data-webild-section="events" id="events">
|
||||
<section className="py-24 bg-card text-foreground">
|
||||
<div className="w-content-width mx-auto px-6">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
<div>
|
||||
<h2 className="text-5xl md:text-7xl font-bold mb-6 text-foreground">Shows & Booking</h2>
|
||||
<p className="text-xl text-muted-foreground mb-8">
|
||||
Bring the energy of the diaspora to your city. Available for live performances, speaking engagements, and cultural events.
|
||||
</p>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-full bg-background flex items-center justify-center">
|
||||
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" className="text-primary-cta"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold">Booking Inquiries</p>
|
||||
<p className="text-muted-foreground">booking@yunghondo.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-full bg-background flex items-center justify-center">
|
||||
<svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" className="text-primary-cta"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-bold">Based In</p>
|
||||
<p className="text-muted-foreground">Global (Available Worldwide)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-background p-8 rounded-2xl border border-border/50">
|
||||
<form className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Name</label>
|
||||
<input type="text" className="w-full bg-card border border-border rounded-lg px-4 py-3 focus:outline-none focus:border-primary-cta" placeholder="Your Name" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Email</label>
|
||||
<input type="email" className="w-full bg-card border border-border rounded-lg px-4 py-3 focus:outline-none focus:border-primary-cta" placeholder="your@email.com" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Event Type</label>
|
||||
<select className="w-full bg-card border border-border rounded-lg px-4 py-3 focus:outline-none focus:border-primary-cta appearance-none">
|
||||
<option>Live Performance</option>
|
||||
<option>Speaking Engagement</option>
|
||||
<option>Festival</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Message</label>
|
||||
<textarea rows={4} className="w-full bg-card border border-border rounded-lg px-4 py-3 focus:outline-none focus:border-primary-cta" placeholder="Tell us about your event..."></textarea>
|
||||
</div>
|
||||
<button type="button" className="primary-button w-full py-4 rounded-lg font-bold text-lg">
|
||||
Send Inquiry
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -5,6 +5,9 @@ import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import AvatarGroup from "@/components/ui/AvatarGroup";
|
||||
import { useState, useEffect } from "react";
|
||||
import { motion } from "motion/react";
|
||||
import { Mic } from "lucide-react";
|
||||
|
||||
const avatarsSrc = [
|
||||
"http://img.b2bpic.net/free-photo/studio-portrait-elegant-black-american-male-dressed-suit-grey-vignette-background_613910-1540.jpg",
|
||||
@@ -13,12 +16,12 @@ const avatarsSrc = [
|
||||
"http://img.b2bpic.net/free-photo/strong-powerful-african-american-man-black-suit-taking-selfie-holding-camera-with-hands_627829-1124.jpg"
|
||||
];
|
||||
const primaryButton = {
|
||||
href: "#listen",
|
||||
text: "Listen Now"
|
||||
text: "Join the Movement",
|
||||
href: "#contact"
|
||||
};
|
||||
const secondaryButton = {
|
||||
href: "#watch",
|
||||
text: "Watch Now"
|
||||
text: "Learn Our Story",
|
||||
href: "#about"
|
||||
};
|
||||
const names = [
|
||||
"Lagos",
|
||||
@@ -41,60 +44,104 @@ type HeroCenteredLogosProps = {
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
const HeroInline = () => {
|
||||
const [stage, setStage] = useState<'dropping' | 'hit' | 'revealed'>('dropping');
|
||||
|
||||
useEffect(() => {
|
||||
const hitTimer = setTimeout(() => setStage('hit'), 800);
|
||||
const revealTimer = setTimeout(() => setStage('revealed'), 1100);
|
||||
return () => {
|
||||
clearTimeout(hitTimer);
|
||||
clearTimeout(revealTimer);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section aria-label="Hero section" className="relative h-svh flex flex-col mb-20">
|
||||
<motion.section
|
||||
aria-label="Hero section"
|
||||
className="relative h-svh w-full flex flex-col items-center justify-center overflow-hidden bg-[#060000] mb-20"
|
||||
animate={
|
||||
stage === 'hit'
|
||||
? { x: [-15, 15, -10, 10, -5, 5, 0], y: [-15, 15, -10, 10, -5, 5, 0] }
|
||||
: { x: 0, y: 0 }
|
||||
}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<HeroBackgroundSlot />
|
||||
{!undefined && (
|
||||
<div className="absolute inset-0 z-0">
|
||||
<ImageOrVideo imageSrc={"http://img.b2bpic.net/free-photo/medium-shot-man-holding-bottle_23-2149213419.jpg"} className="size-full object-cover" />
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-background/80 via-background/90 to-background" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="relative z-10 flex-1 flex items-center justify-center">
|
||||
<div className="flex flex-col items-center gap-3 pt-8 w-content-width mx-auto text-center">
|
||||
<AvatarGroup avatarsSrc={avatarsSrc} label={""} size="lg" className="hidden" />
|
||||
|
||||
<TextAnimation
|
||||
text={"YungHondo"}
|
||||
variant="slide-up"
|
||||
gradientText={false}
|
||||
tag="h1"
|
||||
className="md:max-w-8/10 text-7xl 2xl:text-9xl leading-[1.15] font-bold text-center text-balance text-foreground"
|
||||
/>
|
||||
|
||||
<TextAnimation
|
||||
text={"Built Different"}
|
||||
variant="slide-up"
|
||||
gradientText={false}
|
||||
tag="h2"
|
||||
className="text-3xl md:text-4xl font-bold text-primary-cta mt-2 mb-4"
|
||||
/>
|
||||
<TextAnimation
|
||||
text={"Representing those who left home to build a future."}
|
||||
variant="slide-up"
|
||||
gradientText={false}
|
||||
tag="p"
|
||||
className="md:max-w-7/10 text-xl md:text-2xl leading-snug text-balance text-muted-foreground"
|
||||
/>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
|
||||
<Button text={primaryButton.text} href={primaryButton.href} variant="primary" />
|
||||
<Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />
|
||||
</div>
|
||||
</div>
|
||||
{/* Background Image */}
|
||||
<div
|
||||
className="absolute inset-0 z-0 opacity-40 bg-cover bg-center bg-no-repeat pointer-events-none"
|
||||
style={{ backgroundImage: 'url("https://storage.googleapis.com/webild/users/user_3EPHwihhKJDTe9RMELwW31lY9YY/uploaded-1781848554128-smggxzvg.jpg")' }}
|
||||
/>
|
||||
{/* Background Effects */}
|
||||
<div className="absolute inset-0 z-0 pointer-events-none">
|
||||
<div className="absolute top-[-10%] left-1/2 -translate-x-1/2 w-[1000px] h-[1000px] bg-[radial-gradient(circle_at_center,_rgba(255,61,74,0.15),_transparent_60%)]" />
|
||||
<div className="absolute bottom-[-10%] left-1/2 -translate-x-1/2 w-[800px] h-[800px] bg-[radial-gradient(circle_at_center,_rgba(123,45,45,0.2),_transparent_60%)]" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_transparent_30%,_#060000_100%)]" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 w-content-width mx-auto pb-8 overflow-hidden mask-fade-x">
|
||||
<div className="flex w-max animate-marquee-horizontal" style={{ animationDuration: "30s" }}>
|
||||
{[...names, ...names, ...names, ...names].map((name, index) => (
|
||||
<div key={index} className="shrink-0 mx-3 px-4 py-2 card rounded">
|
||||
<span className="text-xl font-semibold whitespace-nowrap text-foreground/75">{name}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* Mic Drop Container */}
|
||||
<div className="absolute top-[35%] left-1/2 -translate-x-1/2 -translate-y-1/2 z-20">
|
||||
<motion.div
|
||||
initial={{ y: '-100vh', rotate: -45 }}
|
||||
animate={
|
||||
stage === 'dropping'
|
||||
? { y: '-100vh', rotate: -45 }
|
||||
: { y: 0, rotate: 0 }
|
||||
}
|
||||
transition={{ type: 'spring', bounce: 0.6, duration: 0.8 }}
|
||||
>
|
||||
<Mic className="w-20 h-20 md:w-24 md:h-24 text-white drop-shadow-[0_0_30px_rgba(255,255,255,0.5)]" />
|
||||
</motion.div>
|
||||
|
||||
{/* Sound Waves */}
|
||||
{stage !== 'dropping' && (
|
||||
<>
|
||||
<motion.div
|
||||
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-[6px] border-[#ff3d4a]"
|
||||
initial={{ width: 80, height: 80, opacity: 0.8 }}
|
||||
animate={{ width: 2500, height: 2500, opacity: 0 }}
|
||||
transition={{ duration: 1.2, ease: 'easeOut' }}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-[4px] border-[#7b2d2d]"
|
||||
initial={{ width: 80, height: 80, opacity: 0.6 }}
|
||||
animate={{ width: 2000, height: 2000, opacity: 0 }}
|
||||
transition={{ duration: 1.2, delay: 0.15, ease: 'easeOut' }}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-[2px] border-white"
|
||||
initial={{ width: 80, height: 80, opacity: 0.4 }}
|
||||
animate={{ width: 1500, height: 1500, opacity: 0 }}
|
||||
transition={{ duration: 1.2, delay: 0.3, ease: 'easeOut' }}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Content Reveal */}
|
||||
<motion.div
|
||||
className="relative z-30 flex flex-col items-center mt-40 text-center w-content-width mx-auto"
|
||||
initial={{ opacity: 0, scale: 0.8, y: 40 }}
|
||||
animate={
|
||||
stage === 'revealed'
|
||||
? { opacity: 1, scale: 1, y: 0 }
|
||||
: { opacity: 0, scale: 0.8, y: 40 }
|
||||
}
|
||||
transition={{ duration: 0.7, ease: 'easeOut' }}
|
||||
>
|
||||
<h1 className="text-6xl sm:text-8xl md:text-[10rem] leading-none font-black text-white uppercase tracking-tighter drop-shadow-[0_0_50px_rgba(255,61,74,0.5)]">
|
||||
YungHondo
|
||||
</h1>
|
||||
<p className="mt-6 text-lg sm:text-2xl md:text-3xl text-white/90 font-bold uppercase tracking-[0.3em] drop-shadow-lg">
|
||||
Built Different.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap justify-center gap-4 mt-12">
|
||||
<Button text="Listen Now" href="#listen" variant="primary" />
|
||||
<Button text="Watch Videos" href="#watch" variant="secondary" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.section>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,42 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
export default function ListenSection() {
|
||||
return (
|
||||
<div data-webild-section="listen" id="listen">
|
||||
<section className="py-24 bg-background text-foreground border-t border-border/20">
|
||||
<div className="w-content-width mx-auto px-6">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-5xl md:text-7xl font-bold mb-4 text-foreground">Listen</h2>
|
||||
<p className="text-xl text-muted-foreground">Album 'Diaspora N' out now on all platforms.</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<a href="https://spotify.com" target="_blank" rel="noreferrer" className="card p-8 rounded-xl border border-border/50 hover:border-primary-cta transition-colors flex flex-col items-center justify-center gap-4 group">
|
||||
<div className="w-16 h-16 rounded-full bg-card flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" className="text-primary-cta"><circle cx="12" cy="12" r="10"></circle><path d="M8 11.973c2.5-1.473 5.5-.973 7.5.527"></path><path d="M9 15c1.5-1 4-1 5 .5"></path><path d="M7 9c2-1 6-2 10 .5"></path></svg>
|
||||
</div>
|
||||
<span className="text-xl font-bold">Spotify</span>
|
||||
<span className="text-sm text-muted-foreground">YungHondoMusic</span>
|
||||
</a>
|
||||
|
||||
<a href="https://music.apple.com" target="_blank" rel="noreferrer" className="card p-8 rounded-xl border border-border/50 hover:border-primary-cta transition-colors flex flex-col items-center justify-center gap-4 group">
|
||||
<div className="w-16 h-16 rounded-full bg-card flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" className="text-primary-cta"><path d="M12 20.94c1.5 0 2.75 1.06 4 1.06 3 0 6-8 6-12.22A4.91 4.91 0 0 0 17 5c-2.22 0-4 1.44-5 2-1-.56-2.78-2-5-2a4.9 4.9 0 0 0-5 4.78C2 14 5 22 8 22c1.25 0 2.5-1.06 4-1.06Z"></path><path d="M10 2c1 .5 2 2 2 5"></path></svg>
|
||||
</div>
|
||||
<span className="text-xl font-bold">Apple Music</span>
|
||||
<span className="text-sm text-muted-foreground">YungHondoMusic</span>
|
||||
</a>
|
||||
|
||||
<a href="https://youtube.com" target="_blank" rel="noreferrer" className="card p-8 rounded-xl border border-border/50 hover:border-primary-cta transition-colors flex flex-col items-center justify-center gap-4 group">
|
||||
<div className="w-16 h-16 rounded-full bg-card flex items-center justify-center group-hover:scale-110 transition-transform">
|
||||
<svg viewBox="0 0 24 24" width="32" height="32" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" className="text-primary-cta"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33 2.78 2.78 0 0 0 1.94 2C5.12 19.5 12 19.5 12 19.5s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.33 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>
|
||||
</div>
|
||||
<span className="text-xl font-bold">YouTube</span>
|
||||
<span className="text-sm text-muted-foreground">YungHondoMusic</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
export default function MerchSection() {
|
||||
return (
|
||||
<div data-webild-section="merch" id="merch">
|
||||
<section className="py-32 bg-card text-foreground text-center border-t border-border/20">
|
||||
<div className="w-content-width mx-auto px-6">
|
||||
<h2 className="text-6xl md:text-8xl font-bold mb-6 text-foreground opacity-20 uppercase tracking-widest">Merch</h2>
|
||||
<p className="text-3xl md:text-5xl font-bold text-primary-cta">Coming Soon</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
21
src/pages/HomePage/sections/Quote.tsx
Normal file
21
src/pages/HomePage/sections/Quote.tsx
Normal file
@@ -0,0 +1,21 @@
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
|
||||
export default function QuoteSection() {
|
||||
return (
|
||||
<div data-webild-section="quote" id="quote">
|
||||
<section className="relative w-full py-32 bg-background overflow-hidden">
|
||||
<div className="absolute top-0 left-1/4 w-96 h-96 bg-accent/20 rounded-full blur-[100px] pointer-events-none" />
|
||||
<div className="absolute bottom-0 right-1/4 w-96 h-96 bg-purple-900/20 rounded-full blur-[100px] pointer-events-none" />
|
||||
|
||||
<div className="relative z-10 max-w-5xl mx-auto px-6 text-center">
|
||||
<ScrollReveal variant="slide-up">
|
||||
<h2 className="text-4xl md:text-6xl lg:text-7xl font-bold text-foreground leading-tight">
|
||||
Every song is a chapter. Every performance is a statement. Every victory is for the diaspora.
|
||||
</h2>
|
||||
</ScrollReveal>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
import React from "react";
|
||||
|
||||
export default function StoriesSection() {
|
||||
return (
|
||||
<div data-webild-section="stories" id="stories">
|
||||
<section className="py-24 bg-background text-foreground border-t border-border/20">
|
||||
<div className="w-content-width mx-auto px-6">
|
||||
<div className="flex flex-col md:flex-row justify-between items-end mb-16 gap-6">
|
||||
<div>
|
||||
<h2 className="text-5xl md:text-7xl font-bold mb-4 text-foreground">From the Diaspora</h2>
|
||||
<p className="text-xl text-muted-foreground max-w-2xl">Culture, community, and stories from the journey.</p>
|
||||
</div>
|
||||
<a href="#all-stories" className="text-primary-cta font-bold hover:underline flex items-center gap-2">
|
||||
View All Stories
|
||||
<svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{[
|
||||
{ title: "Finding Home in the Sound", category: "Music", date: "Oct 12, 2023", img: "http://img.b2bpic.net/free-photo/medium-shot-man-holding-bottle_23-2149213419.jpg" },
|
||||
{ title: "The New African Renaissance", category: "Culture", date: "Sep 28, 2023", img: "http://img.b2bpic.net/free-photo/studio-portrait-elegant-black-american-male-dressed-suit-grey-vignette-background_613910-1540.jpg" },
|
||||
{ title: "Building Independent Platforms", category: "Business", date: "Sep 15, 2023", img: "http://img.b2bpic.net/free-photo/strong-powerful-african-american-man-black-suit-taking-selfie-holding-camera-with-hands_627829-1124.jpg" }
|
||||
].map((post, i) => (
|
||||
<a key={i} href={`#post-${i}`} className="group block">
|
||||
<div className="relative h-64 mb-6 overflow-hidden rounded-xl">
|
||||
<img src={post.img} alt={post.title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" />
|
||||
<div className="absolute top-4 left-4 bg-primary-cta text-primary-cta-text text-xs font-bold px-3 py-1 rounded-full">
|
||||
{post.category}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground mb-2">{post.date}</div>
|
||||
<h3 className="text-2xl font-bold group-hover:text-primary-cta transition-colors">{post.title}</h3>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
/* eslint-disable */
|
||||
// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
|
||||
import Button from "@/components/ui/Button";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import GridOrCarousel from "@/components/ui/GridOrCarousel";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
|
||||
const testimonials = [];
|
||||
|
||||
type Testimonial = {
|
||||
name: string;
|
||||
role: string;
|
||||
quote: string;
|
||||
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
|
||||
|
||||
const TestimonialsInline = () => (
|
||||
<section aria-label="Testimonials section" className="py-32 bg-background text-foreground relative overflow-hidden border-t border-border/20">
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-background-accent/20 via-background to-background z-0"></div>
|
||||
<div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary-cta/20 via-transparent to-transparent z-0"></div>
|
||||
|
||||
<div className="flex flex-col gap-8 md:gap-10 relative z-10">
|
||||
<div className="flex flex-col items-center gap-2 w-content-width mx-auto text-center">
|
||||
<blockquote className="text-4xl md:text-6xl lg:text-7xl font-bold leading-tight tracking-tight text-foreground">
|
||||
<span className="text-primary-cta">"</span>
|
||||
Every song is a chapter. Every performance is a statement. Every victory is for the diaspora.
|
||||
<span className="text-primary-cta">"</span>
|
||||
</blockquote>
|
||||
<div className="mt-12 text-xl md:text-2xl font-bold text-muted-foreground uppercase tracking-widest">
|
||||
— YungHondo
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
export default function TestimonialsSection() {
|
||||
return (
|
||||
<div data-webild-section="testimonials" id="testimonials">
|
||||
<TestimonialsInline />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
src/pages/ProductsPage.tsx
Normal file
10
src/pages/ProductsPage.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import Button from "@/components/ui/Button";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
|
||||
export default function ProductsPage() {
|
||||
return (
|
||||
<>
|
||||
<div data-webild-section="AboutText"><section aria-label="About section" className=""><div className="w-content-width mx-auto flex flex-col gap-2 items-center"><TextAnimation text="Coming Soon" variant="fade" gradientText={false} tag="h2" className="text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><div className="flex flex-wrap gap-3 justify-center mt-2 md:mt-3"><Button text="Get Alerts" href="#alerts" variant="primary" /><Button text="Learn More" variant="secondary" animationDelay={0.1} /></div></div></section></div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -6,4 +6,5 @@ export interface Route {
|
||||
|
||||
export const routes: Route[] = [
|
||||
{ path: '/', label: 'Home', pageFile: 'HomePage' },
|
||||
{ path: '/products', label: 'Products', pageFile: 'ProductsPage' },
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user