Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions src/components/Hero.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,10 @@ export default function Hero() {
className="space-y-4 md:space-y-6"
>
<h1 className="text-4xl sm:text-5xl md:text-7xl lg:text-8xl font-bold font-display leading-tight tracking-tighter">
<span className="block">LIFE IS</span>
<span className="block">DRESS FOR</span>
<span className="block bg-gradient-to-r from-hotpink via-matrix to-cyan bg-clip-text text-transparent py-2">
DISAPPOINTMENT
PARTICIPATION
</span>
<span className="block">DRESS FOR IT</span>
</h1>
</motion.div>

Expand All @@ -36,10 +35,10 @@ export default function Hero() {
className="space-y-3 md:space-y-4"
>
<p className="text-base sm:text-lg md:text-xl text-gray-300 font-light tracking-wide max-w-2xl mx-auto">
Cynical streetwear for the disillusioned generation.
Bring the heat. Find your crew. Make the room yours.
</p>
<p className="text-base sm:text-lg md:text-xl text-gray-300 font-light max-w-2xl mx-auto">
<span className="text-hotpink font-semibold">Reality sucks.</span> Might as well look good.
<span className="text-hotpink font-semibold">Wear your intentions.</span> This is a wearable invitation.
</p>
</motion.div>

Expand Down Expand Up @@ -69,7 +68,7 @@ export default function Hero() {
whileTap={{ scale: 0.95 }}
className="w-full sm:w-auto px-8 sm:px-10 py-3 sm:py-4 bg-hotpink text-white font-bold text-sm sm:text-base md:text-lg uppercase tracking-wider rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300"
>
Follow @cokeoncock
Crew Energy Only
</motion.a>
</motion.div>

Expand All @@ -81,7 +80,7 @@ export default function Hero() {
className="pt-8 md:pt-12"
>
<p className="text-xs sm:text-sm text-gray-500 font-light tracking-widest uppercase">
Premium fabrics. Zero compromises.
Designed for crowded rooms and close distances.
</p>
</motion.div>
</div>
Expand Down
40 changes: 20 additions & 20 deletions src/data/products.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ export const products = [
name: "Reality Sucks Tee",
category: "tshirt",
price: 35,
description: "Premium cotton. Unfiltered truth. The shirt they should be scared of you wearing.",
description: "Wear this to start a conversation. Designed for crowded rooms and eye contact.",
image: "/images/tshirt-reality.jpg",
sizes: ["S", "M", "L", "XL", "XXL"]
},
Expand All @@ -13,7 +13,7 @@ export const products = [
name: "Existential Dread Hoodie",
category: "hoodie",
price: 65,
description: "Heavy blend for those who carry the weight. Wear it like armor against mediocrity.",
description: "Presence piece. Wears like confidence. Changes what happens when you enter a room.",
image: "/images/hoodie-dread.jpg",
sizes: ["S", "M", "L", "XL", "XXL"]
},
Expand All @@ -22,7 +22,7 @@ export const products = [
name: "Overthinking Everything Tank",
category: "tank",
price: 28,
description: "Lightweight. Bold. For minds that won't shut up at 3am.",
description: "For the preshow and the after. Says you came to participate, not watch.",
image: "/images/tank-overthink.jpg",
sizes: ["S", "M", "L", "XL"]
},
Expand All @@ -31,7 +31,7 @@ export const products = [
name: "No Hope Tote Bag",
category: "tote",
price: 22,
description: "Carry your contradictions in style. Premium canvas. Uncompromising attitude.",
description: "Crew currency. Carry it like it's a signal. The right people will see it.",
image: "/images/tote-nohope.jpg",
sizes: ["One Size"]
},
Expand All @@ -40,7 +40,7 @@ export const products = [
name: "Therapy is Expensive Oversized Tee",
category: "tshirt",
price: 40,
description: "Oversized comfort. Maximum attitude. For when conformity isn't your thing.",
description: "The kind of shirt that makes you interesting at parties. Comfortable, charged, portable.",
image: "/images/tshirt-therapy.jpg",
sizes: ["S", "M", "L", "XL", "XXL"]
},
Expand All @@ -49,7 +49,7 @@ export const products = [
name: "Numb Zip-Up Hoodie",
category: "hoodie",
price: 70,
description: "Premium construction. Perfect for disappearing into your own world. No judgment.",
description: "For after midnight. Premium layers for getting closer. Built for intimacy in crowded spaces.",
image: "/images/hoodie-numb.jpg",
sizes: ["S", "M", "L", "XL", "XXL"]
},
Expand All @@ -58,7 +58,7 @@ export const products = [
name: "Monday Mood Long Sleeve",
category: "longsleeve",
price: 42,
description: "Soft outside. Sharp edge inside. For living on your own terms.",
description: "Signals that you're not here to behave. Soft enough for Sunday, sharp enough for Friday.",
image: "/images/longsleeve-monday.jpg",
sizes: ["S", "M", "L", "XL", "XXL"]
},
Expand All @@ -67,7 +67,7 @@ export const products = [
name: "Dead Inside Crewneck",
category: "crewneck",
price: 55,
description: "Vintage wash. Vintage attitude. Born nonconformist. Stays that way.",
description: "Uniform for people who like the heat. Vintage washed, crew-tested, night-proven.",
image: "/images/crewneck-dead.jpg",
sizes: ["S", "M", "L", "XL", "XXL"]
},
Expand All @@ -76,7 +76,7 @@ export const products = [
name: "Whatever Dad Hat",
category: "hat",
price: 25,
description: "Embroidered indifference. One size. Infinite attitude.",
description: "The finishing move. Wear it and mean it. Signals that you're not taking yourself seriously.",
image: "/images/hat-whatever.jpg",
sizes: ["One Size"]
},
Expand All @@ -85,7 +85,7 @@ export const products = [
name: "Sad Boy Snapback",
category: "hat",
price: 28,
description: "Structured crown for an unstructured life. Make them wonder what you're thinking.",
description: "You'll see the crew in these. A readable badge for public flirtation.",
image: "/images/snapback-sadboy.jpg",
sizes: ["One Size"]
},
Expand All @@ -94,7 +94,7 @@ export const products = [
name: "Not Today Beanie",
category: "beanie",
price: 20,
description: "Cozy defiance. Keep warm. Stay dangerous. Acrylic blend confidence.",
description: "Winter moves require winter gear. This one says you came prepared to stay late.",
image: "/images/beanie-nottoday.jpg",
sizes: ["One Size"]
},
Expand All @@ -103,7 +103,7 @@ export const products = [
name: "Barely Functional Tank",
category: "tank",
price: 30,
description: "Muscle fit for muscle memory. Wear what you believe. Nothing watered down.",
description: "Layering essential for summer nights. Visible, charged, minimal interference.",
image: "/images/tank-barely.jpg",
sizes: ["S", "M", "L", "XL"]
},
Expand All @@ -112,7 +112,7 @@ export const products = [
name: "Void Tote Bag",
category: "tote",
price: 24,
description: "Heavy duty for heavy thoughts. 15oz canvas. Carry what matters to you.",
description: "Carry your crew essentials. Heavy duty for pre-games and after-parties.",
image: "/images/tote-void.jpg",
sizes: ["One Size"]
},
Expand All @@ -121,7 +121,7 @@ export const products = [
name: "Pessimist Club Tee",
category: "tshirt",
price: 38,
description: "Membership required. Hope optional. Premium cut for the honest ones.",
description: "Membership piece. Wear it and the right people will know you get it.",
image: "/images/tshirt-pessimist.jpg",
sizes: ["S", "M", "L", "XL", "XXL"]
},
Expand All @@ -130,7 +130,7 @@ export const products = [
name: "Social Battery Low Hoodie",
category: "hoodie",
price: 68,
description: "Pullover protection. Perfect for walls you build. Premium blend comfort.",
description: "For moments of recharge. Still charged enough to keep the temperature up.",
image: "/images/hoodie-social.jpg",
sizes: ["S", "M", "L", "XL", "XXL"]
},
Expand All @@ -139,7 +139,7 @@ export const products = [
name: "Sarcasm Loading Long Sleeve",
category: "longsleeve",
price: 45,
description: "Still buffering... Still thinking... Always sharp. Soft cotton edge.",
description: "Wears like wit. Everyone gets it. Perfect for building the crew.",
image: "/images/longsleeve-sarcasm.jpg",
sizes: ["S", "M", "L", "XL", "XXL"]
},
Expand All @@ -148,7 +148,7 @@ export const products = [
name: "Nihilist Logo Sticker Pack",
category: "sticker",
price: 8,
description: "Nothing matters but these stickers. Pack of 5. Spread the message.",
description: "Spread the signal. Mark your territory. Build the community.",
image: "/images/stickers-pack.jpg",
sizes: ["One Size"]
},
Expand All @@ -157,7 +157,7 @@ export const products = [
name: "Existential Crisis Patch",
category: "patch",
price: 12,
description: "Embroidered philosophy. Iron-on rebellion. Stick it where it counts.",
description: "Iron this on and you're claiming crew status. Visual proof you're in.",
image: "/images/patch-crisis.jpg",
sizes: ["One Size"]
},
Expand All @@ -166,7 +166,7 @@ export const products = [
name: "Meh Embroidered Patch",
category: "patch",
price: 10,
description: "Say nothing. Express everything. Perfect for those beyond caring.",
description: "The understated move. Anyone who gets it will recognize you.",
image: "/images/patch-meh.jpg",
sizes: ["One Size"]
},
Expand All @@ -175,7 +175,7 @@ export const products = [
name: "Burned Out Cropped Tee",
category: "tshirt",
price: 36,
description: "Cropped cut. Uncompromised edge. Vintage wash wisdom. Own your chaos.",
description: "The accelerant. Wear it and watch the room acknowledge the shift. Designed for skin and intent.",
image: "/images/tshirt-burnout.jpg",
sizes: ["XS", "S", "M", "L", "XL"]
}
Expand Down
56 changes: 35 additions & 21 deletions src/pages/Home.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,10 @@ export default function Home() {
className="max-w-3xl mx-auto text-center"
>
<h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold font-display mb-4 md:mb-6">
FEATURED <span className="bg-gradient-to-r from-matrix to-hotpink bg-clip-text text-transparent">ESSENTIALS</span>
<span className="bg-gradient-to-r from-matrix to-hotpink bg-clip-text text-transparent">CREW STARTER</span> PIECES
</h2>
<p className="text-base sm:text-lg text-gray-400 font-light max-w-xl mx-auto">
Curated pieces for those who refuse to compromise on authenticity.
Wearable invitations. Each piece signals intent and finds your people faster.
</p>
</motion.div>
</div>
Expand Down Expand Up @@ -78,9 +78,9 @@ export default function Home() {
viewport={{ once: true }}
className="text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-bold font-display mb-6 md:mb-8"
>
EXPLORE THE
FIND YOUR
<br />
<span className="bg-gradient-to-r from-hotpink to-cyan bg-clip-text text-transparent">FULL COLLECTION</span>
<span className="bg-gradient-to-r from-hotpink to-cyan bg-clip-text text-transparent">UNIFORM</span>
</motion.h2>

<motion.p
Expand All @@ -90,7 +90,7 @@ export default function Home() {
transition={{ delay: 0.1 }}
className="text-base sm:text-lg md:text-xl text-gray-300 mb-8 md:mb-12 font-light max-w-2xl mx-auto leading-relaxed"
>
20+ items of uncompromising design. T-shirts, hoodies, accessories—everything you need to express what you won't say.
20+ pieces that signal intent. Designed for crowded rooms, eye contact, and starting something. No observers, only participants.
</motion.p>

<motion.div
Expand Down Expand Up @@ -123,53 +123,67 @@ export default function Home() {
className="max-w-4xl mx-auto"
>
<h2 className="text-3xl sm:text-4xl md:text-6xl lg:text-7xl font-bold font-display mb-8 md:mb-12 text-center">
WHY <span className="bg-gradient-to-r from-cyan to-hotpink bg-clip-text text-transparent">COKE ON COCK</span>?
HOW IT WORKS
</h2>

<div className="space-y-6 md:space-y-8 text-base sm:text-lg md:text-xl text-gray-300 font-light">
<motion.p
<motion.div
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.1 }}
className="border-l-4 border-matrix pl-6 md:pl-8 py-2"
>
We don't sell you dreams. We sell you the truth: life is absurd, disappointing, and utterly meaningless.
</motion.p>
<p className="font-semibold text-white mb-2">The Invitation</p>
<p>You wear it to start things. A readable signal that says you're here for it.</p>
</motion.div>

<motion.p
<motion.div
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.2 }}
className="border-l-4 border-hotpink pl-6 md:pl-8 py-2"
>
But hey, at least you can look good while contemplating the void. Premium fabrics, bold statements, zero false hope.
</motion.p>
<p className="font-semibold text-white mb-2">The Crew</p>
<p>You wear it to find your people faster. Strangers become allies when the signal is right.</p>
</motion.div>

<motion.p
<motion.div
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.3 }}
className="border-l-4 border-cyan pl-6 md:pl-8 py-2"
>
Each piece is designed for the disillusioned generation. The ones who see through the BS and embrace the chaos with style.
</motion.p>
<p className="font-semibold text-white mb-2">The Room</p>
<p>You wear it to change the temperature. When enough of you are present, the space shifts. Collective heat.</p>
</motion.div>

<motion.div
initial={{ opacity: 0, x: -20 }}
whileInView={{ opacity: 1, x: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.4 }}
className="border-l-4 border-matrix pl-6 md:pl-8 py-2"
>
<p className="font-semibold text-white mb-2">The Joke</p>
<p>You wear it because it's true, funny, and rude. We celebrate play and desire without apology.</p>
</motion.div>
</div>

<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ delay: 0.4 }}
transition={{ delay: 0.5 }}
className="mt-12 md:mt-16 text-center"
>
<p className="text-xl sm:text-2xl md:text-3xl font-bold bg-gradient-to-r from-matrix via-hotpink to-cyan bg-clip-text text-transparent font-display mb-3 md:mb-4">
NO REFUNDS. NO REGRETS. JUST VIBES.
NO SHAME. NO APOLOGIES. NO OBSERVERS.
</p>
<p className="text-xs sm:text-sm text-gray-500 font-light tracking-wider uppercase">
(Authenticity guaranteed. Everything else is negotiable.)
Just participants, co-conspirators, and better nights.
</p>
</motion.div>
</motion.div>
Expand All @@ -188,10 +202,10 @@ export default function Home() {

<div className="relative z-10 p-8 md:p-12">
<h3 className="text-2xl sm:text-3xl md:text-4xl font-bold font-display mb-4 md:mb-6">
JOIN THE <span className="bg-gradient-to-r from-matrix to-hotpink bg-clip-text text-transparent">REBELLION</span>
CREW <span className="bg-gradient-to-r from-matrix to-hotpink bg-clip-text text-transparent">ENERGY ONLY</span>
</h3>
<p className="text-base sm:text-lg text-gray-300 mb-8 md:mb-10 font-light max-w-xl mx-auto">
Follow us on Instagram for new drops, behind-the-scenes chaos, and a community that gets it.
<p className="text-base sm:text-lg text-gray-300 mb-8 md:mb-10 font-light max-x xl mx-auto">
Follow for drops, dispatches from the scene, and to find your people. Bring someone with you.
</p>
<motion.a
href="https://instagram.com/cokeoncock"
Expand Down
Loading