Save workspace changes

resources/js/Pages/Home/HomeWorldSpotlight.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+export default function HomeWorldSpotlight({ world }) {
+  if (!world) {
+    return null
+  }
+
+  return (
+    <section className="mt-14 px-4 sm:px-6 lg:px-8">
+      <a
+        href={world.public_url}
+        className="group relative block overflow-hidden rounded-[32px] border border-white/10 bg-slate-950/70"
+        style={{
+          '--world-accent': world.theme?.accent_color || '#f97316',
+          '--world-accent-secondary': world.theme?.accent_color_secondary || '#0f172a',
+        }}
+      >
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,_color-mix(in_srgb,var(--world-accent)_30%,transparent),_transparent_36%),linear-gradient(135deg,_color-mix(in_srgb,var(--world-accent-secondary)_92%,black),_rgba(2,6,23,0.98))]" />
+        {world.cover_url ? <img src={world.cover_url} alt={world.title} className="absolute inset-0 h-full w-full object-cover opacity-20 transition duration-500 group-hover:scale-[1.03]" /> : null}
+        <div className="absolute inset-0 bg-gradient-to-r from-slate-950 via-slate-950/82 to-slate-950/35" />
+
+        <div className="relative grid gap-8 px-6 py-7 sm:px-8 lg:grid-cols-[minmax(0,1.2fr)_18rem] lg:items-end lg:px-10">
+          <div>
+            <div className="flex flex-wrap items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.2em] text-white/70">
+              <span className="rounded-full border border-white/15 bg-white/10 px-3 py-1">Homepage spotlight</span>
+              {world.badge_label ? <span className="rounded-full border border-white/15 bg-black/25 px-3 py-1">{world.badge_label}</span> : null}
+            </div>
+            <h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-white sm:text-4xl">{world.title}</h2>
+            {world.tagline ? <p className="mt-2 text-sm uppercase tracking-[0.18em] text-white/55">{world.tagline}</p> : null}
+            {world.summary ? <p className="mt-4 max-w-3xl text-sm leading-7 text-slate-200/88">{world.summary}</p> : null}
+            <div className="mt-6 inline-flex items-center gap-2 rounded-full bg-white px-4 py-2.5 text-sm font-semibold text-slate-950 transition group-hover:bg-sky-100">
+              {world.cta_label || 'Explore world'}
+              <i className="fa-solid fa-arrow-right" />
+            </div>
+          </div>
+
+          <div className="rounded-[28px] border border-white/12 bg-black/25 p-5 text-white backdrop-blur-sm">
+            <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">World Theme</div>
+            <div className="mt-2 flex items-center gap-3 text-lg font-semibold">
+              <i className={world.icon_name || 'fa-solid fa-globe'} />
+              <span>{world.theme?.label || 'Editorial world'}</span>
+            </div>
+            {world.timeframe_label ? <div className="mt-4 text-sm text-slate-300">{world.timeframe_label}</div> : null}
+          </div>
+        </div>
+      </a>
+    </section>
+  )
+}