vibecarbon 0.8.0 → 0.10.0

package/carbon/src/client/components/ContentPanel.tsx

@@ -59,7 +59,7 @@ export function ContentPanel({
   const resolvedWidth = maxWidth ?? variantToWidth[variant];
 
   return (
-    <div className="flex-1 pl-1 pr-6 py-6">
+    <div className="flex-1 pr-8 py-6">
       <div className={cn(maxWidthClasses[resolvedWidth], 'space-y-6', className)}>{children}</div>
     </div>
   );

package/carbon/src/client/components/DeploymentScenariosSection.tsx

@@ -106,9 +106,7 @@ export function DeploymentScenariosSection() {
           </motion.div>
           <h2 className="mb-4 text-3xl font-black tracking-tight md:text-5xl">
             {t('landing.deploy.headline')}{' '}
-            <span className="bg-gradient-to-r from-primary via-cyan-400 to-secondary-accent bg-clip-text text-transparent">
-              {t('landing.deploy.headlineHighlight')}
-            </span>
+            <span className="text-primary">{t('landing.deploy.headlineHighlight')}</span>
           </h2>
           <p className="mx-auto max-w-2xl text-lg text-muted-foreground">
             {t('landing.deploy.subheading')}

package/carbon/src/client/components/FAQSection.tsx

@@ -60,7 +60,7 @@ export function FAQSection() {
             >
               <AccordionItem
                 value={faq.question}
-                className="border border-white/8 dark:border-white/8 bg-white/[0.02] dark:bg-white/[0.02] rounded-xl mb-3 overflow-hidden backdrop-blur-sm"
+                className="border border-border bg-card/40 dark:border-white/8 dark:bg-white/[0.02] rounded-xl mb-3 overflow-hidden backdrop-blur-sm"
               >
                 <AccordionTrigger>{faq.question}</AccordionTrigger>
                 <AccordionContent>

package/carbon/src/client/components/Hero.tsx

@@ -532,7 +532,19 @@ export default function Hero() {
             transition={{ duration: 0.8, delay: 0.2 }}
             className="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-6"
           >
-            <span className="text-foreground/80">{t('landing.hero.subheading')}</span>
+            <span className="text-foreground/80">
+              {(() => {
+                const subheading = t('landing.hero.subheading');
+                const [first, second] = subheading.split(/\.\s+/);
+                if (second === undefined) return subheading;
+                return (
+                  <>
+                    {first}.<br />
+                    {second}
+                  </>
+                );
+              })()}
+            </span>
           </motion.p>
         </div>
 

package/carbon/src/client/components/Logo.tsx

@@ -1,4 +1,8 @@
+import { useTheme } from 'next-themes';
 import { cn } from '@/lib/utils';
+import vibecarbonIconUrl from '../assets/vibecarbon-icon.svg';
+import vibecarbonWordmarkTextDarkUrl from '../assets/vibecarbon-wordmark-text-dark.svg';
+import vibecarbonWordmarkTextLightUrl from '../assets/vibecarbon-wordmark-text-light.svg';
 
 // Split across two lines so the formatted output is stable regardless of the
 // rendered project-name length (biome wraps >100-char lines, which caused CI
@@ -6,51 +10,71 @@ import { cn } from '@/lib/utils';
 const DEFAULT_PROJECT_NAME = '{{PROJECT_NAME}}';
 export const PROJECT_NAME = import.meta.env.VITE_PROJECT_NAME ?? DEFAULT_PROJECT_NAME;
 
+// Set only in vibecarbon.com's own local .env/.env.local (never scaffolded
+// into user projects) to swap in the hand-vectorized "vibecarbon" lockup in
+// place of the generic icon+PROJECT_NAME composition below.
+const BRAND_LOCKUP_ENABLED = import.meta.env.VITE_BRAND_LOCKUP === 'true';
+
 interface LogoProps {
   size?: 'sm' | 'default' | 'lg';
   className?: string;
 }
 
+// `w-auto` derives width from the icon's own intrinsic aspect ratio instead
+// of a hand-computed guess — replace the icon below with your own brand mark.
 const sizeClasses = {
-  sm: 'size-6',
-  default: 'size-8',
-  lg: 'size-10',
+  sm: 'h-6 w-auto',
+  default: 'h-8 w-auto',
+  lg: 'h-10 w-auto',
 };
 
-/**
- * Default logo mark — replace the SVG below with your own brand icon.
- * Liquid glass hex with circular cutout — gradient fill + specular highlight.
- */
+/** Default logo mark — replace the SVG asset below with your own brand icon. */
 export function Logo({ size = 'default', className }: LogoProps) {
   return (
-    <svg
-      viewBox="0 0 64 64"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={cn('shrink-0', sizeClasses[size], className)}
+    <img
+      src={vibecarbonIconUrl}
+      alt=""
       aria-hidden="true"
-    >
-      <defs>
-        <linearGradient id="logo-fill" x1="0" y1="0" x2="0" y2="1">
-          <stop offset="0%" stopColor="#5eead4" />
-          <stop offset="100%" stopColor="#0d9488" />
-        </linearGradient>
-        <linearGradient id="logo-shine" x1="0.2" y1="0" x2="0.8" y2="0.6">
-          <stop offset="0%" stopColor="white" stopOpacity="0.5" />
-          <stop offset="100%" stopColor="white" stopOpacity="0" />
-        </linearGradient>
-      </defs>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M32 2L58 17V47L32 62L6 47V17Z M48 32A16 16 0 1 1 16 32A16 16 0 1 1 48 32Z"
-        fill="url(#logo-fill)"
-      />
-      <path d="M32 2L58 17V30L32 38L6 30V17Z" fill="url(#logo-shine)" />
-    </svg>
+      className={cn('shrink-0', sizeClasses[size], className)}
+    />
   );
 }
 
+const wordmarkTextConfig = {
+  sm: { text: 'text-sm font-medium' },
+  default: { text: 'text-[1.24rem] font-semibold tracking-tight' },
+  lg: { text: 'text-[1.375rem] font-semibold tracking-tight' },
+};
+
+interface WordmarkTextProps {
+  size?: 'sm' | 'default' | 'lg';
+  className?: string;
+  /** Overrides theme-based asset selection; branded path only. */
+  forceTheme?: 'light' | 'dark';
+}
+
+/**
+ * Text-only half of the wordmark, exported at the same height as <Logo> for
+ * each size tier so the two compose edge-to-edge with a plain gap — no
+ * fused-image or margin tuning needed. Pair with a standalone <Logo> for a
+ * collapsible sidebar header: the icon stays a single, never-swapped element
+ * (the standard collapse pattern — see shadcn/ui's TeamSwitcher), and only
+ * this text piece toggles visibility via `group-data-[collapsible=icon]`.
+ */
+export function WordmarkText({ size = 'default', className, forceTheme }: WordmarkTextProps) {
+  const { resolvedTheme } = useTheme();
+
+  if (BRAND_LOCKUP_ENABLED) {
+    const theme = forceTheme ?? resolvedTheme;
+    const src = theme === 'light' ? vibecarbonWordmarkTextLightUrl : vibecarbonWordmarkTextDarkUrl;
+    return (
+      <img src={src} alt={PROJECT_NAME} className={cn('shrink-0', sizeClasses[size], className)} />
+    );
+  }
+
+  return <span className={cn(wordmarkTextConfig[size].text, className)}>{PROJECT_NAME}</span>;
+}
+
 /**
  * Logo mark + project name text.
  * Sizes: sm (footers), default (nav/sidebar), lg (auth hero pages).
@@ -60,28 +84,21 @@ interface WordmarkProps {
   size?: 'sm' | 'default' | 'lg';
   className?: string;
   textClassName?: string;
+  forceTheme?: 'light' | 'dark';
 }
 
-const wordmarkConfig = {
-  sm: { logoSize: 'sm' as const, text: 'text-sm font-medium', gap: 'gap-1.5' },
-  default: {
-    logoSize: 'lg' as const,
-    text: 'text-[1.24rem] font-semibold tracking-tight',
-    gap: 'gap-1',
-  },
-  lg: {
-    logoSize: 'lg' as const,
-    text: 'text-[1.375rem] font-semibold tracking-tight',
-    gap: 'gap-1',
-  },
-};
+const wordmarkGap = { sm: 'gap-1.5', default: 'gap-2', lg: 'gap-2' };
 
-export function Wordmark({ size = 'default', className, textClassName }: WordmarkProps) {
-  const { logoSize, text, gap } = wordmarkConfig[size];
+export function Wordmark({
+  size = 'default',
+  className,
+  textClassName,
+  forceTheme,
+}: WordmarkProps) {
   return (
-    <span className={cn('inline-flex items-center', gap, className)}>
-      <Logo size={logoSize} />
-      <span className={cn(text, textClassName)}>{PROJECT_NAME}</span>
+    <span className={cn('inline-flex items-center', wordmarkGap[size], className)}>
+      <Logo size={size} />
+      <WordmarkText size={size} className={textClassName} forceTheme={forceTheme} />
     </span>
   );
 }

package/carbon/src/client/components/Nav.tsx

@@ -89,7 +89,7 @@ export function Nav() {
       <div className="relative mx-auto max-w-7xl h-full px-6 flex items-center justify-between">
         {/* Logo & Brand */}
         <Link to="/" className="group">
-          <Wordmark size="lg" />
+          <Wordmark size="sm" />
         </Link>
 
         {/* Desktop nav */}

package/carbon/src/client/components/NewsletterSignup.tsx

@@ -131,8 +131,8 @@ export function NewsletterSignup({
           onClick={handleSubmit}
           disabled={subscribeMutation.isPending}
           size="default"
-          sparkle
           className="w-full sm:w-auto"
+          sparkle
         >
           {subscribeMutation.isPending && <Loader2 className="size-3 mr-1 animate-spin" />}
           {resolvedButtonText}

package/carbon/src/client/components/NotificationDrawer.tsx

@@ -22,11 +22,11 @@ function getNotificationStyles(type: NotificationType) {
     case 'error':
       return 'bg-destructive border-destructive text-white';
     case 'warning':
-      return 'bg-warning border-warning text-white';
+      return 'bg-warning border-warning text-black/90';
     case 'success':
-      return 'bg-success border-success text-white';
+      return 'bg-success border-success text-white dark:text-black/90';
     default:
-      return 'bg-primary border-primary text-white';
+      return 'bg-primary border-primary text-primary-foreground';
   }
 }
 

package/carbon/src/client/components/PageHeader.tsx

@@ -7,7 +7,7 @@ interface PageHeaderProps {
 
 export function PageHeader({ title, description }: PageHeaderProps) {
   return (
-    <header className="flex h-10 items-center justify-between pl-1 pr-6 mt-6">
+    <header className="flex h-10 items-center justify-between pr-8 mt-6">
       <div className="flex items-center gap-3">
         <div className="relative">
           <h1 className="text-lg font-semibold leading-tight">{title}</h1>

package/carbon/src/client/components/PricingSection.tsx

@@ -201,13 +201,9 @@ export function PricingSection() {
           </motion.div>
           <h2 className="mb-4 text-3xl font-black tracking-tight md:text-5xl">
             {t('landing.pricing.headline1')}{' '}
-            <span className="bg-gradient-to-r from-muted-foreground to-foreground bg-clip-text text-transparent">
-              {t('landing.pricing.headlineSketch')}
-            </span>{' '}
+            <span className="text-foreground">{t('landing.pricing.headlineSketch')}</span>{' '}
             {t('landing.pricing.headline2')}{' '}
-            <span className="bg-gradient-to-r from-primary to-secondary-accent bg-clip-text text-transparent">
-              {t('landing.pricing.headlineScale')}
-            </span>
+            <span className="text-primary">{t('landing.pricing.headlineScale')}</span>
           </h2>
           <p className="text-lg text-muted-foreground">{t('landing.pricing.subheading')}</p>
         </motion.div>

package/carbon/src/client/components/TechStackSection.tsx

@@ -60,9 +60,7 @@ export function TechStackSection() {
           </motion.div>
           <h2 className="text-3xl md:text-5xl font-black tracking-tight mb-4">
             {t('landing.techStack.headline')}{' '}
-            <span className="bg-gradient-to-r from-primary via-cyan-400 to-secondary-accent bg-clip-text text-transparent">
-              {t('landing.techStack.headlineHighlight')}
-            </span>
+            <span className="text-primary">{t('landing.techStack.headlineHighlight')}</span>
           </h2>
           <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
             {t('landing.techStack.subheading')}

package/carbon/src/client/components/effects/FilmGrainOverlay.tsx

@@ -1,3 +1,4 @@
+import { useTheme } from 'next-themes';
 import { useReducedMotion } from '../../hooks/useReducedMotion';
 
 interface FilmGrainOverlayProps {
@@ -8,11 +9,15 @@ interface FilmGrainOverlayProps {
 /**
  * Film grain overlay for anodized metal/industrial feel
  * Uses SVG noise filter for subtle texture
+ * Dark mode only — grain reads as dirt on light surfaces
  */
 export function FilmGrainOverlay({ opacity = 0.03, animated = false }: FilmGrainOverlayProps) {
   const prefersReducedMotion = useReducedMotion();
+  const { resolvedTheme } = useTheme();
   const shouldAnimate = animated && !prefersReducedMotion;
 
+  if (resolvedTheme !== 'dark') return null;
+
   return (
     <div
       className="fixed inset-0 pointer-events-none z-[9999]"

package/carbon/src/client/components/ui/button.tsx

@@ -18,7 +18,7 @@ const buttonVariants = cva(
         secondary:
           'border-transparent bg-secondary text-secondary-foreground hover:brightness-125 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
         ghost:
-          'border-transparent hover:bg-white/10 hover:text-foreground hover:brightness-125 aria-expanded:bg-muted aria-expanded:text-foreground',
+          'border-transparent hover:bg-foreground/8 hover:text-foreground dark:hover:brightness-125 aria-expanded:bg-muted aria-expanded:text-foreground',
         destructive:
           'border-transparent bg-destructive/10 hover:bg-destructive/25 hover:brightness-115 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40',
         link: 'border-transparent text-primary underline-offset-4 hover:underline hover:brightness-115',

package/carbon/src/client/components/ui/card.tsx

@@ -12,7 +12,7 @@ function Card({
       data-slot="card"
       data-size={size}
       className={cn(
-        'bg-card text-card-foreground gap-6 overflow-hidden rounded-[var(--radius-card)] py-6 text-sm ring-1 ring-border has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-[var(--radius-card)] *:[img:last-child]:rounded-b-[var(--radius-card)] group/card flex flex-col backdrop-blur-sm',
+        'bg-card text-card-foreground gap-6 overflow-hidden rounded-[var(--radius-card)] py-6 text-sm ring-1 ring-border shadow-card has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-[var(--radius-card)] *:[img:last-child]:rounded-b-[var(--radius-card)] group/card flex flex-col',
         className
       )}
       {...props}

package/carbon/src/client/components/ui/dialog.tsx

@@ -47,7 +47,7 @@ function DialogContent({
       <DialogPrimitive.Popup
         data-slot="dialog-content"
         className={cn(
-          'bg-card text-card-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-border grid max-w-[calc(100%-2rem)] gap-6 rounded-[var(--radius-card)] p-6 text-sm ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none',
+          'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-border grid max-w-[calc(100%-2rem)] gap-6 rounded-[var(--radius-card)] p-6 text-sm ring-1 shadow-pop duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none',
           className
         )}
         {...props}

package/carbon/src/client/components/ui/dropdown-menu.tsx

@@ -38,7 +38,7 @@ function DropdownMenuContent({
         <MenuPrimitive.Popup
           data-slot="dropdown-menu-content"
           className={cn(
-            'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border border-border bg-popover text-popover-foreground min-w-48 rounded-md p-1 shadow-lg duration-100 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden',
+            'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border border-border bg-popover text-popover-foreground min-w-48 rounded-md p-1 shadow-pop duration-100 z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden',
             className
           )}
           {...props}
@@ -132,7 +132,7 @@ function DropdownMenuSubContent({
     <DropdownMenuContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border border-border bg-popover text-popover-foreground min-w-36 rounded-md p-1 shadow-lg duration-100 w-auto',
+        'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 border border-border bg-popover text-popover-foreground min-w-36 rounded-md p-1 shadow-pop duration-100 w-auto',
         className
       )}
       align={align}

package/carbon/src/client/components/ui/popover.tsx

@@ -32,7 +32,7 @@ function PopoverContent({
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(
-            'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 flex flex-col gap-4 rounded-2xl p-4 text-sm shadow-2xl ring-1 duration-100 z-50 w-72 origin-(--transform-origin) outline-hidden',
+            'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 flex flex-col gap-4 rounded-2xl p-4 text-sm shadow-pop ring-1 duration-100 z-50 w-72 origin-(--transform-origin) outline-hidden',
             className
           )}
           {...props}

package/carbon/src/client/components/ui/select.tsx

@@ -78,7 +78,7 @@ function SelectContent({
         <SelectPrimitive.Popup
           data-slot="select-content"
           className={cn(
-            'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-36 rounded-2xl shadow-2xl ring-1 duration-100 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto',
+            'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-36 rounded-2xl shadow-pop ring-1 duration-100 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto',
             className
           )}
           {...props}

package/carbon/src/client/components/ui/sidebar.tsx

@@ -245,7 +245,7 @@ function Sidebar({
         <div
           data-sidebar="sidebar"
           data-slot="sidebar-inner"
-          className="bg-sidebar group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col gap-6 p-6"
+          className="bg-sidebar backdrop-blur-md dark:backdrop-blur-none group-data-[variant=floating]:ring-sidebar-border group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 flex size-full flex-col gap-6 p-6"
         >
           {children}
         </div>