GBAM

[tundejayti5-png]

Select Topic Area

General

Body

import React from "react";
import { motion } from "framer-motion";
import { ShoppingBag, ArrowRight, Star, Flame, Rocket, Target, LucideIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";

// --- Brand data (edit these) ---
const DROPS = [
{
id: "drop01",
title: "Drop 01",
name: "Shooting Star Code",
badge: "New",
color: "from-neutral-900 via-neutral-800 to-neutral-700",
accent: "bg-white text-black",
blurb: "Velocity pieces inspired by ascents under pressure.",
},
{
id: "drop02",
title: "Drop 02",
name: "The Well of Grit",
badge: "Core",
color: "from-stone-900 via-stone-800 to-stone-700",
accent: "bg-lime-400 text-black",
blurb: "Workwear silhouettes rebuilt for the long road.",
},
{
id: "drop03",
title: "Drop 03",
name: "The Race of One",
badge: "Soon",
color: "from-zinc-900 via-zinc-800 to-zinc-700",
accent: "bg-emerald-400 text-black",
blurb: "Minimal, aerodynamic layers that cut noise.",
},
];

const CONCEPTS = [
"The Shooting Star Code",
"The Well of Grit",
"The Race of One",
"The Fuel of Unseen",
"The Loudest War Is the Quiet One",
"The Price of Vision",
"Weightless in the Climb",
];

// --- Utility components ---
const Section = ({ id, className = "", children }: { id?: string; className?: string; children: React.ReactNode }) => (

{children}

);

const Badge = ({ children, className = "" }: { children: React.ReactNode; className?: string }) => (
<span className={inline-flex items-center rounded-full border px-3 py-1 text-xs font-medium tracking-wide ${className}}>{children}
);

const DropCard = ({ title, name, badge, color, accent, blurb }: any) => (

<div className={absolute inset-0 bg-gradient-to-br ${color} opacity-70} />

<Badge className={border-white/20 ${accent}}>{badge}

{title}

{name}

{blurb}

Shop this drop



);

// --- Page ---
export default function GBAMSite() {
return (

{/* Fonts (optional: replace with your chosen typefaces) */}

  {/* Top bar */}
  <header className="sticky top-0 z-50 backdrop-blur supports-[backdrop-filter]:bg-black/50 border-b border-white/10">
    <Section className="py-3 flex items-center justify-between">
      <div className="flex items-center gap-3">
        <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-emerald-400 to-lime-300 shadow" />
        <a href="#home" className="font-extrabold tracking-tight text-xl" style={{ fontFamily: 'Bebas Neue, system-ui' }}>GBAM</a>
        <Badge className="border-white/10 text-white/70">Get By All Means</Badge>
      </div>
      <nav className="hidden md:flex items-center gap-6 text-sm text-white/80">
        <a href="#drops" className="hover:text-white">Drops</a>
        <a href="#concepts" className="hover:text-white">Concepts</a>
        <a href="#lookbook" className="hover:text-white">Lookbook</a>
        <a href="#newsletter" className="hover:text-white">Newsletter</a>
      </nav>
      <div className="flex items-center gap-3">
        <Button className="rounded-xl" variant="secondary"><ShoppingBag className="mr-2 h-4 w-4"/> Shop</Button>
      </div>
    </Section>
  </header>

  {/* Hero */}
  <Section id="home" className="pt-10 sm:pt-16 pb-12">
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
      <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}>
        <Badge className="border-emerald-400/40 text-emerald-300">Streetwear / Performance / Intent</Badge>
        <h1 className="mt-4 text-5xl sm:text-6xl font-extrabold tracking-tight leading-[1.05]" style={{ fontFamily: 'Bebas Neue, system-ui' }}>
          GET BY <span className="text-emerald-400">ALL MEANS</span>
        </h1>
        <p className="mt-4 text-base sm:text-lg text-white/80 max-w-xl" style={{ fontFamily: 'Inter, system-ui' }}>
          Built for the climb. GBAM crafts pieces that carry grit, precision, and momentum.
        </p>
        <div className="mt-6 flex flex-wrap gap-3">
          <Button className="rounded-2xl">Shop Latest <ArrowRight className="ml-2 h-4 w-4"/></Button>
          <Button variant="secondary" className="rounded-2xl border-white/20">View Lookbook</Button>
        </div>
        <div className="mt-8 flex items-center gap-6 text-xs text-white/60">
          <span className="inline-flex items-center gap-2"><Rocket className="h-4 w-4"/> Velocity fabrics</span>
          <span className="inline-flex items-center gap-2"><Target className="h-4 w-4"/> Purpose fit</span>
          <span className="inline-flex items-center gap-2"><Flame className="h-4 w-4"/> Heat-bonded details</span>
        </div>
      </motion.div>

      <motion.div initial={{ opacity: 0, scale: 0.98 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.7 }} className="relative">
        <div className="aspect-[4/3] w-full rounded-3xl bg-gradient-to-br from-neutral-900 via-neutral-800 to-neutral-700 border border-white/10 shadow-2xl overflow-hidden">
          <div className="absolute inset-0 grid grid-cols-6 grid-rows-4 opacity-20">
            {[...Array(24)].map((_, i) => (
              <div key={i} className="border border-white/10" />
            ))}
          </div>
          <div className="absolute inset-0 flex items-end p-6 sm:p-8">
            <div className="rounded-2xl bg-black/50 backdrop-blur px-4 py-3 border border-white/10">
              <p className="text-sm text-white/80">Campaign: <span className="text-white">Weightless in the Climb</span></p>
            </div>
          </div>
        </div>
      </motion.div>
    </div>
  </Section>

  {/* Drops */}
  <Section id="drops" className="py-12 sm:py-16">
    <div className="flex items-baseline justify-between">
      <h2 className="text-2xl sm:text-3xl font-bold tracking-tight" style={{ fontFamily: 'Bebas Neue, system-ui' }}>Featured Drops</h2>
      <a href="#" className="text-sm text-white/70 hover:text-white">View all</a>
    </div>
    <div className="mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {DROPS.map((d) => (
        <DropCard key={d.id} {...d} />
      ))}
    </div>
  </Section>

  {/* Concepts marquee */}
  <div className="border-y border-white/10 bg-black/60 py-6">
    <div className="overflow-hidden">
      <motion.div className="flex gap-8 whitespace-nowrap text-sm sm:text-base" animate={{ x: [0, -600] }} transition={{ repeat: Infinity, duration: 20, ease: "linear" }}>
        {CONCEPTS.concat(CONCEPTS).map((c, i) => (
          <span key={i} className="inline-flex items-center gap-2 text-white/80">
            <Star className="h-4 w-4 text-emerald-400"/> {c}
          </span>
        ))}
      </motion.div>
    </div>
  </div>

  {/* Lookbook */}
  <Section id="lookbook" className="py-12 sm:py-16">
    <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
      {["/look1.jpg", "/look2.jpg", "/look3.jpg"].map((src, i) => (
        <div key={i} className="relative aspect-[3/4] overflow-hidden rounded-3xl border border-white/10 bg-neutral-900">
          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-emerald-500/10 via-transparent to-transparent" />
          <div className="absolute bottom-0 left-0 m-4 rounded-xl bg-black/50 px-3 py-2 text-xs border border-white/10">Look {i + 1}</div>
        </div>
      ))}
    </div>
  </Section>

  {/* Newsletter */}
  <Section id="newsletter" className="py-12 sm:py-20">
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-center">
      <div>
        <h3 className="text-2xl sm:text-3xl font-bold tracking-tight" style={{ fontFamily: 'Bebas Neue, system-ui' }}>Stay in the Race</h3>
        <p className="mt-2 text-white/70 max-w-prose">Drops, early access, and stories from the climb. Zero spam.</p>
      </div>
      <form className="flex w-full max-w-md items-center gap-2">
        <input type="email" required placeholder="[email protected]" className="flex-1 rounded-xl bg-black/60 px-4 py-3 border border-white/10 outline-none focus:border-emerald-400"/>
        <Button type="submit" className="rounded-xl">Join</Button>
      </form>
    </div>
  </Section>

  {/* Footer */}
  <footer className="border-t border-white/

[jfullstackdev]

is there any problem with that code ? tell us, so we can help you

as I'm seeing it, the code is trying to implement a React/Next.js front-end for a brand site (“GBAM”) that showcases:

• A hero section with animated badges, title, and call-to-action buttons.
• Featured product drops with cards displaying names, badges, and descriptions.
• A scrolling marquee of brand concepts.
• A lookbook section with images.
• A newsletter signup form.
• Styled with Tailwind CSS, animations via Framer Motion, and icons from Lucide.

in short, it’s a promotional/marketing site UI for a streetwear/performance brand

[shinybrightstar]

Hi @tundejayti5-png 👋

Thanks for reaching out! We’d love to help, but we need a bit more information to better understand the issue you’re experiencing. Could you provide the following details?

• A clear description of the problem you’re facing
• Any error messages you’re seeing (if applicable)
• The steps you took before encountering the issue
• The device, browser, or software version you’re using (if relevant)
• Any troubleshooting steps you’ve already tried

Even if you aren’t able to answer every bullet, providing as much information as you can will help the community provide the support that you need.

In the meantime, I’ll go ahead and close this discussion. Please re-open this discussion with the additional information so we can take another look.

Looking forward to your response!