Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 421e06a892 | |||
| 76b5fe4a8a | |||
| 891b1e07a4 | |||
| ca68ee970b | |||
| fa0b50f832 | |||
| 2bb7dcf376 |
@@ -1,54 +1,16 @@
|
|||||||
import type { Metadata } from "next";
|
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"],
|
|
||||||
});
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
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 Hip-Hop Artist", description: "ARSON BLACK: Zimbabwean-born artist crafting dark, introspective hip-hop and melodic Afrobeats from a personal creative studio."};
|
||||||
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,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="en">
|
||||||
<ServiceWrapper>
|
<body>{children}
|
||||||
<body
|
|
||||||
className={`${halant.variable} ${inter.variable} ${raleway.variable} antialiased`}
|
|
||||||
>
|
|
||||||
<Tag />
|
|
||||||
{children}
|
|
||||||
|
|
||||||
<script
|
<script
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
__html: `
|
__html: `
|
||||||
@@ -1416,7 +1378,6 @@ export default function RootLayout({
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</body>
|
</body>
|
||||||
</ServiceWrapper>
|
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
108
src/app/page.tsx
108
src/app/page.tsx
@@ -6,10 +6,9 @@ import HeroBillboardGallery from "@/components/sections/hero/HeroBillboardGaller
|
|||||||
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
|
import FeatureCardNine from "@/components/sections/feature/FeatureCardNine";
|
||||||
import AboutMetric from "@/components/sections/about/AboutMetric";
|
import AboutMetric from "@/components/sections/about/AboutMetric";
|
||||||
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
|
import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
|
||||||
import BlogCardOne from "@/components/sections/blog/BlogCardOne";
|
|
||||||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
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() {
|
export default function ArsonBlackPage() {
|
||||||
return (
|
return (
|
||||||
@@ -31,8 +30,8 @@ export default function ArsonBlackPage() {
|
|||||||
navItems={[
|
navItems={[
|
||||||
{ name: "Music", id: "music" },
|
{ name: "Music", id: "music" },
|
||||||
{ name: "About", id: "about" },
|
{ name: "About", id: "about" },
|
||||||
{ name: "Events", id: "events" },
|
{ name: "Streaming", id: "streaming" },
|
||||||
{ name: "Gallery", id: "gallery" },
|
{ name: "Contact", id: "contact" },
|
||||||
]}
|
]}
|
||||||
button={{ text: "Press Kit", href: "#contact" }}
|
button={{ text: "Press Kit", href: "#contact" }}
|
||||||
animateOnLoad={true}
|
animateOnLoad={true}
|
||||||
@@ -53,11 +52,14 @@ export default function ArsonBlackPage() {
|
|||||||
background={{ variant: "plain" }}
|
background={{ variant: "plain" }}
|
||||||
mediaItems={[
|
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"
|
mediaAnimation="slide-up"
|
||||||
buttons={[
|
buttons={[
|
||||||
@@ -80,7 +82,7 @@ export default function ArsonBlackPage() {
|
|||||||
title="Enter the Studio"
|
title="Enter the Studio"
|
||||||
description="Navigate interactive objects within the 3D environment. Each element reveals a different aspect of the artist's creative world."
|
description="Navigate interactive objects within the 3D environment. Each element reveals a different aspect of the artist's creative world."
|
||||||
tag="Interactive Experience"
|
tag="Interactive Experience"
|
||||||
tagIcon={Calendar}
|
tagIcon={Music}
|
||||||
tagAnimation="blur-reveal"
|
tagAnimation="blur-reveal"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
@@ -88,21 +90,25 @@ export default function ArsonBlackPage() {
|
|||||||
{
|
{
|
||||||
id: 1,
|
id: 1,
|
||||||
title: "Vinyl Turntable", description: "Spin through ARSON BLACK's music catalog. Stream from Spotify, Apple Music, YouTube, or the custom player.", phoneOne: {
|
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: {
|
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,
|
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: {
|
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: {
|
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}
|
showStepNumbers={true}
|
||||||
animationType="blur-reveal"
|
animationType="blur-reveal"
|
||||||
buttons={[{ text: "Start Listening", href: "#" }]}
|
buttons={[{ text: "Start Listening", href: "#streaming" }]}
|
||||||
buttonAnimation="slide-up"
|
buttonAnimation="slide-up"
|
||||||
containerClassName="bg-black/50 backdrop-blur-md py-20"
|
containerClassName="bg-black/50 backdrop-blur-md py-20"
|
||||||
featureTitleClassName="text-5xl font-bold text-silver mb-4"
|
featureTitleClassName="text-5xl font-bold text-silver mb-4"
|
||||||
@@ -131,41 +137,41 @@ export default function ArsonBlackPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="events" data-section="events">
|
<div id="streaming" data-section="streaming">
|
||||||
<PricingCardThree
|
<PricingCardThree
|
||||||
title="Tour & Events"
|
title="Stream ARSON BLACK"
|
||||||
description="Catch ARSON BLACK live. Upcoming shows and tour dates featuring immersive cinematic performances."
|
description="Listen to the latest music across your favorite streaming platforms. Available on all major services."
|
||||||
tag="Coming Soon"
|
tag="Listen Now"
|
||||||
tagIcon={Calendar}
|
tagIcon={Music}
|
||||||
tagAnimation="slide-up"
|
tagAnimation="slide-up"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
plans={[
|
plans={[
|
||||||
{
|
{
|
||||||
id: "zurich", badge: "Sold Out", badgeIcon: Star,
|
id: "spotify", badge: "Most Popular", price: "Free/Premium", name: "Spotify", buttons: [
|
||||||
price: "CHF 45", name: "Zurich Live", buttons: [
|
{ text: "Listen on Spotify", href: "https://open.spotify.com" },
|
||||||
{ text: "View Details", href: "#" },
|
|
||||||
{ text: "Waitlist", href: "#" },
|
|
||||||
],
|
],
|
||||||
features: [
|
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: [
|
id: "apple", badge: "Lossless Audio", badgeIcon: Apple,
|
||||||
{ text: "Get Tickets", href: "#" },
|
price: "Free/Premium", name: "Apple Music", buttons: [
|
||||||
{ text: "Learn More", href: "#" },
|
{ text: "Listen on Apple Music", href: "https://music.apple.com" },
|
||||||
],
|
],
|
||||||
features: [
|
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,
|
id: "youtube", badge: "Music Videos", badgeIcon: Youtube,
|
||||||
price: "ZWL 5,000", name: "Harare Homecoming", buttons: [
|
price: "Free/Premium", name: "YouTube Music", buttons: [
|
||||||
{ text: "Early Bird", href: "#" },
|
{ text: "Watch & Listen", href: "https://music.youtube.com" },
|
||||||
{ text: "Group Rates", href: "#" },
|
|
||||||
],
|
],
|
||||||
features: [
|
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"
|
animationType="slide-up"
|
||||||
@@ -178,42 +184,10 @@ export default function ArsonBlackPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</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">
|
<div id="contact" data-section="contact">
|
||||||
<ContactSplitForm
|
<ContactSplitForm
|
||||||
title="Connect with ARSON BLACK"
|
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="Press inquiries, collaboration proposals, fan messages, or social media. Download the EPK and reach out directly. Let's create something cinematic together."
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/midi-keyboard-headphones-laptop-with-program-creating-music_169016-26455.jpg"
|
imageSrc="http://img.b2bpic.net/free-photo/midi-keyboard-headphones-laptop-with-program-creating-music_169016-26455.jpg"
|
||||||
imageAlt="Recording studio environment"
|
imageAlt="Recording studio environment"
|
||||||
@@ -242,8 +216,8 @@ export default function ArsonBlackPage() {
|
|||||||
{ label: "Home", href: "#" },
|
{ label: "Home", href: "#" },
|
||||||
{ label: "Music", href: "#music" },
|
{ label: "Music", href: "#music" },
|
||||||
{ label: "About", href: "#about" },
|
{ label: "About", href: "#about" },
|
||||||
{ label: "Events", href: "#events" },
|
{ label: "Streaming", href: "#streaming" },
|
||||||
{ label: "Gallery", href: "#gallery" },
|
{ label: "Contact", href: "#contact" },
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
Reference in New Issue
Block a user