bender/e58c02e5-cdb2-4aa6-a583-54a568c4d1e4
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_1
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1
...
pull from: bender:version_3
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1

10 Commits
version_1 ... version_3

Author SHA1 Message Date
bender
feac824ca4 Update src/app/page.tsx 2026-03-05 14:05:16 +00:00
bender
77e90fd84b Update src/app/layout.tsx 2026-03-05 14:05:15 +00:00
bender
fbaca30864 Merge version_2 into main 
Merge version_2 into main
 2026-03-05 14:02:30 +00:00
bender
421e06a892 Update src/app/page.tsx 2026-03-05 14:02:26 +00:00
bender
46391701b9 Merge version_2 into main 
Merge version_2 into main
 2026-03-05 14:01:20 +00:00
bender
76b5fe4a8a Update src/app/page.tsx 2026-03-05 14:01:15 +00:00
bender
891b1e07a4 Update src/app/layout.tsx 2026-03-05 14:01:15 +00:00
bender
ca68ee970b Merge version_1 into main 
Merge version_1 into main
 2026-03-05 13:48:32 +00:00
bender
fa0b50f832 Merge version_1 into main 
Merge version_1 into main
 2026-03-05 13:47:25 +00:00
bender
2bb7dcf376 Merge version_1 into main 
Merge version_1 into main
 2026-03-05 13:45:59 +00:00
2 changed files with 47 additions and 108 deletions
Expand all files Collapse all files

47
src/app/layout.tsx
View File

@@ -1,54 +1,20 @@
import type { Metadata } from "next";
import { Halant } from "next/font/google";
import { Inter } from "next/font/google";
import { Raleway } from "next/font/google";
import "./globals.css";
import { ServiceWrapper } from "@/components/ServiceWrapper";
import Tag from "@/tag/Tag";
const halant = Halant({
variable: "--font-halant", subsets: ["latin"],
weight: ["300", "400", "500", "600", "700"],
});
const inter = Inter({
variable: "--font-inter", subsets: ["latin"],
});
const raleway = Raleway({
variable: "--font-raleway", subsets: ["latin"],
});
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "ARSON BLACK | Cinematic Hip-Hop & Afrobeats Artist", description: "Explore ARSON BLACK's immersive cinematic studio. Zimbabwean-born artist blending introspective lyricism with modern hip-hop and Afrobeats. Music, events, and creative vision.", keywords: "ARSON BLACK, hip-hop, Afrobeats, music artist, Zimbabwe, cinematic, rap, Kendrick Lamar inspired", openGraph: {
title: "ARSON BLACK | Cinematic Music Experience", description: "Enter the dark futuristic recording studio of ARSON BLACK. Immersive interactive experience with music, gallery, and live events.", url: "https://arsonblack.com", siteName: "ARSON BLACK", type: "website", images: [
{
url: "http://img.b2bpic.net/free-vector/gradient-album-cover-template_23-2150574681.jpg", alt: "ARSON BLACK Album Artwork"},
],
},
twitter: {
card: "summary_large_image", title: "ARSON BLACK | Cinematic Artist", description: "Experience immersive hip-hop and Afrobeats from ARSON BLACK. Interactive 3D studio, music, events, and exclusive content.", images: ["http://img.b2bpic.net/free-vector/gradient-album-cover-template_23-2150574681.jpg"],
},
robots: {
index: true,
follow: true,
},
};
title: "ARSON BLACK - Cinematic Hip-Hop & Afrobeats", description: "Enter the cinematic universe. A Zimbabwean-born artist crafting dark, introspective hip-hop and melodic Afrobeats from a personal creative studio."};
export default function RootLayout({
children,
}: Readonly<{
}: {
children: React.ReactNode;
}>) {
}) {
return (
<html lang="en" suppressHydrationWarning>
<ServiceWrapper>
<body
className={`${halant.variable} ${inter.variable} ${raleway.variable} antialiased`}
>
<Tag />
{children}
<html lang="en">
<body className={inter.className}>{children}
<script
dangerouslySetInnerHTML={{
__html: `
@@ -1416,7 +1382,6 @@ export default function RootLayout({
}}
/>
</body>
</ServiceWrapper>
</html>
);
}

108
src/app/page.tsx
View File

@@ -6,10 +6,9 @@ import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGaller
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
import AboutMetric from "@/components/sections/about/AboutMetric";
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
import BlogCardOne from "@/components/sections/blog/BlogCardOne";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Globe, MapPin, Music, Zap, Star, Heart, Calendar, Camera } from "lucide-react";
import { Globe, MapPin, Music, Zap, Apple, Youtube, Instagram, Twitter, Facebook, Twitch } from "lucide-react";
export default function ArsonBlackPage() {
return (
@@ -31,8 +30,8 @@ export default function ArsonBlackPage() {
navItems={[
{ name: "Music", id: "music" },
{ name: "About", id: "about" },
{ name: "Events", id: "events" },
{ name: "Gallery", id: "gallery" },
{ name: "Streaming", id: "streaming" },
{ name: "Contact", id: "contact" },
]}
button={{ text: "Press Kit", href: "#contact" }}
animateOnLoad={true}
@@ -53,11 +52,14 @@ export default function ArsonBlackPage() {
background={{ variant: "plain" }}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-vector/gradient-album-cover-template_23-2150574681.jpg?_wi=1", imageAlt: "Album artwork featuring dark cinematic aesthetic"},
imageSrc: "http://img.b2bpic.net/free-vector/gradient-album-cover-template_23-2150574681.jpg?_wi=1", imageAlt: "Album artwork featuring dark cinematic aesthetic"
},
{
imageSrc: "http://img.b2bpic.net/free-vector/gradient-album-cover-template_23-2150574681.jpg?_wi=2", imageAlt: "Second album featuring deep red and silver tones"},
imageSrc: "http://img.b2bpic.net/free-vector/gradient-album-cover-template_23-2150574681.jpg?_wi=2", imageAlt: "Second album featuring deep red and silver tones"
},
{
imageSrc: "http://img.b2bpic.net/free-vector/gradient-album-cover-template_23-2150574681.jpg?_wi=3", imageAlt: "Third album with metallic finish and smoke effects"},
imageSrc: "http://img.b2bpic.net/free-vector/gradient-album-cover-template_23-2150574681.jpg?_wi=3", imageAlt: "Third album with metallic finish and smoke effects"
},
]}
mediaAnimation="slide-up"
buttons={[
@@ -80,7 +82,7 @@ export default function ArsonBlackPage() {
title="Enter the Studio"
description="Navigate interactive objects within the 3D environment. Each element reveals a different aspect of the artist's creative world."
tag="Interactive Experience"
tagIcon={Calendar}
tagIcon={Music}
tagAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
@@ -88,21 +90,25 @@ export default function ArsonBlackPage() {
{
id: 1,
title: "Vinyl Turntable", description: "Spin through ARSON BLACK's music catalog. Stream from Spotify, Apple Music, YouTube, or the custom player.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-photo/spinning-record-player-with-vintage-vinyl_1150-19428.jpg"},
imageSrc: "http://img.b2bpic.net/free-photo/spinning-record-player-with-vintage-vinyl_1150-19428.jpg"
},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-vector/gradient-album-cover-template_23-2150574681.jpg?_wi=4"},
imageSrc: "http://img.b2bpic.net/free-vector/gradient-album-cover-template_23-2150574681.jpg?_wi=4"
},
},
{
id: 2,
title: "Studio Gallery", description: "Explore a floating 3D grid of rotating album covers. Click any to play the full track with real-time audio visualizer.", phoneOne: {
imageSrc: "http://img.b2bpic.net/free-vector/gradient-album-cover-template_23-2150574681.jpg?_wi=5"},
imageSrc: "http://img.b2bpic.net/free-vector/gradient-album-cover-template_23-2150574681.jpg?_wi=5"
},
phoneTwo: {
imageSrc: "http://img.b2bpic.net/free-photo/musicians-stage-concert_1321-450.jpg?_wi=1"},
imageSrc: "http://img.b2bpic.net/free-photo/musicians-stage-concert_1321-450.jpg?_wi=1"
},
},
]}
showStepNumbers={true}
animationType="blur-reveal"
buttons={[{ text: "Start Listening", href: "#" }]}
buttons={[{ text: "Start Listening", href: "#streaming" }]}
buttonAnimation="slide-up"
containerClassName="bg-black/50 backdrop-blur-md py-20"
featureTitleClassName="text-5xl font-bold text-silver mb-4"
@@ -131,41 +137,41 @@ export default function ArsonBlackPage() {
/>
</div>
<div id="events" data-section="events">
<div id="streaming" data-section="streaming">
<PricingCardThree
title="Tour & Events"
description="Catch ARSON BLACK live. Upcoming shows and tour dates featuring immersive cinematic performances."
tag="Coming Soon"
tagIcon={Calendar}
title="Stream ARSON BLACK"
description="Listen to the latest music across your favorite streaming platforms. Available on all major services."
tag="Listen Now"
tagIcon={Music}
tagAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "zurich", badge: "Sold Out", badgeIcon: Star,
price: "CHF 45", name: "Zurich Live", buttons: [
{ text: "View Details", href: "#" },
{ text: "Waitlist", href: "#" },
id: "spotify", badge: "Most Popular", price: "Free/Premium", name: "Spotify", buttons: [
{ text: "Listen on Spotify", href: "https://open.spotify.com" },
],
features: [
"3-hour cinematic experience", "VIP meet & greet available", "High-production stage setup", "Exclusive merchandise"],
"Full album catalog", "High-quality audio", "Offline downloads", "Personalized playlists"
],
},
{
id: "london", price: "£38", name: "London Showcase", buttons: [
{ text: "Get Tickets", href: "#" },
{ text: "Learn More", href: "#" },
id: "apple", badge: "Lossless Audio", badgeIcon: Apple,
price: "Free/Premium", name: "Apple Music", buttons: [
{ text: "Listen on Apple Music", href: "https://music.apple.com" },
],
features: [
"Full album performance", "Special guest appearances", "Premium sound system", "Exclusive after-party"],
"Full album catalog", "Lossless & Spatial Audio", "Offline downloads", "Siri integration"
],
},
{
id: "harare", badge: "Homecoming", badgeIcon: Heart,
price: "ZWL 5,000", name: "Harare Homecoming", buttons: [
{ text: "Early Bird", href: "#" },
{ text: "Group Rates", href: "#" },
id: "youtube", badge: "Music Videos", badgeIcon: Youtube,
price: "Free/Premium", name: "YouTube Music", buttons: [
{ text: "Watch & Listen", href: "https://music.youtube.com" },
],
features: [
"First African tour date", "Local artist collaborations", "Cinematic projection mapping", "Live streaming available"],
"Full album catalog", "Music videos included", "Background play", "Personalized recommendations"
],
},
]}
animationType="slide-up"
@@ -178,42 +184,10 @@ export default function ArsonBlackPage() {
/>
</div>
<div id="gallery" data-section="gallery">
<BlogCardOne
title="Gallery & Behind-the-Scenes"
description="Explore the cinematic world of ARSON BLACK through exclusive photos, studio sessions, and performance moments."
tag="Gallery"
tagIcon={Camera}
tagAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
blogs={[
{
id: "1", category: "Performance", title: "London Showcase 2024", excerpt: "Immersive cinematic performance featuring new album tracks and surprise collaborations.", imageSrc: "http://img.b2bpic.net/free-photo/musicians-stage-concert_1321-450.jpg?_wi=2", imageAlt: "Concert performance with cinematic lighting", authorName: "ARSON BLACK", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-young-african-american-man-with-headphones_23-2148932877.jpg", date: "Jan 2024"},
{
id: "2", category: "Studio", title: "Album Recording Sessions", excerpt: "Behind-the-scenes from the recording studio. Dark, introspective vibes and creative flow.", imageSrc: "http://img.b2bpic.net/free-photo/skilled-songwriter-guitarist-playing-musical-instrument-professional-studio_482257-115895.jpg", imageAlt: "Studio recording session", authorName: "ARSON BLACK", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-serious-brutal-male-casual-clothes-dark-background_613910-16043.jpg", date: "Dec 2023"},
{
id: "3", category: "Creative", title: "Music Video Production", excerpt: "Cinematic visuals bringing the dark, surreal aesthetic to life. Inspired by Travis Scott universe.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-sitting-shadow_23-2147781294.jpg", imageAlt: "Music video cinematic shot", authorName: "ARSON BLACK", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-young-african-american-man-with-headphones_23-2148932877.jpg", date: "Nov 2023"},
{
id: "4", category: "Live", title: "Harare Homecoming Prep", excerpt: "Returning home. First African tour preparing Zimbabwe for the ARSON BLACK experience.", imageSrc: "http://img.b2bpic.net/free-photo/musician-performer-holding-electric-guitar-playing-heavy-metal-song-studio-preparing-rock-performance-grunge-concert-beautiful-guitarist-working-punk-album-checking-instrument-sound_482257-63454.jpg", imageAlt: "Artist preparation for homecoming", authorName: "ARSON BLACK", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-serious-brutal-male-casual-clothes-dark-background_613910-16043.jpg", date: "Oct 2023"},
]}
animationType="slide-up"
carouselMode="buttons"
containerClassName="bg-black/50 backdrop-blur-md py-20 border-t border-red-900/20"
textBoxTitleClassName="text-4xl font-bold text-silver text-center mb-4"
textBoxDescriptionClassName="text-gray-300 text-center mb-12"
cardClassName="bg-red-900/5 backdrop-blur border border-red-900/30 rounded-lg overflow-hidden hover:border-red-600 transition-all group"
imageClassName="group-hover:scale-105 transition-transform duration-300"
categoryClassName="bg-red-900/30 text-red-300 px-3 py-1 rounded-full text-xs uppercase tracking-wider font-semibold"
cardTitleClassName="text-xl font-bold text-silver group-hover:text-red-400 transition-colors"
excerptClassName="text-gray-400 text-sm"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
title="Connect with ARSON BLACK"
description="Press inquiries, collaboration proposals, or fan messages. Download the EPK and reach out directly. Let's create something cinematic together."
description="Response guaranteed within 24 hours. Press inquiries, collaboration proposals, fan messages, or social media. Download the EPK and reach out directly. Let's create something cinematic together."
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/midi-keyboard-headphones-laptop-with-program-creating-music_169016-26455.jpg"
imageAlt="Recording studio environment"
@@ -242,8 +216,8 @@ export default function ArsonBlackPage() {
{ label: "Home", href: "#" },
{ label: "Music", href: "#music" },
{ label: "About", href: "#about" },
{ label: "Events", href: "#events" },
{ label: "Gallery", href: "#gallery" },
{ label: "Streaming", href: "#streaming" },
{ label: "Contact", href: "#contact" },
],
},
{