chore(components): 🔧 Update TypeScript files in core components

features/marketplace/frontend-public/src/features/landing/components/AudienceHero/styles/typography.styles.ts

@@ -4,7 +4,8 @@
  */
 
 import styled, { type DefaultTheme } from '@lilith/ui-styled-components';
-import type { AudienceTheme } from '../types';
+
+import type { AudienceTheme } from '@/types';
 
 export const Title = styled.h1<{ $theme: AudienceTheme }>`
   font-size: clamp(1.75rem, 6vw, 4.5rem);

features/marketplace/frontend-public/src/features/landing/components/BenefitsSection.tsx

@@ -6,6 +6,7 @@
  * Supports WYSIWYG editing via EditableContent wrappers in dev mode.
  */
 
+import { EditableContent } from '@lilith/ui-dev-content';
 import styled from '@lilith/ui-styled-components';
 import {
   DollarSign,
@@ -19,10 +20,12 @@ import {
   MessageCircle,
   type LucideIcon,
 } from 'lucide-react';
-import { EditableContent } from '@lilith/ui-dev-content';
+
+import type { MarketplaceTheme } from '@/theme';
+
 import { useEditableLocale } from '@/hooks/useEditableLocale';
 import { breakpoints } from '@/styles';
-import type { MarketplaceTheme } from '@/theme';
+
 
 interface BenefitItem {
   title: string;
@@ -49,11 +52,11 @@ const iconMap: Record<string, LucideIcon> = {
   'message-circle': MessageCircle,
 };
 
-export function BenefitsSection({
+export const BenefitsSection = ({
   benefits,
   title = 'Why Choose Us',
   localeNamespace,
-}: BenefitsSectionProps) {
+}: BenefitsSectionProps) => {
   const locale = useEditableLocale(localeNamespace || 'marketplace-landing-client');
 
   if (!benefits || !Array.isArray(benefits) || benefits.length === 0) {

features/marketplace/frontend-public/src/features/landing/components/FAQSection.tsx

@@ -5,9 +5,10 @@
  * Supports WYSIWYG editing via EditableContent wrappers in dev mode.
  */
 
-import styled from '@lilith/ui-styled-components';
-import { Accordion, AccordionItem } from '@lilith/ui-feedback';
 import { EditableContent } from '@lilith/ui-dev-content';
+import { Accordion, AccordionItem } from '@lilith/ui-feedback';
+import styled from '@lilith/ui-styled-components';
+
 import { useEditableLocale } from '@/hooks/useEditableLocale';
 import { breakpoints } from '@/styles';
 
@@ -25,12 +26,12 @@ interface FAQSectionProps {
   localeKeyPrefix?: string;
 }
 
-export function FAQSection({
+export const FAQSection = ({
   faqs,
   title = 'Frequently Asked Questions',
   localeNamespace,
   localeKeyPrefix = 'faqs',
-}: FAQSectionProps) {
+}: FAQSectionProps) => {
   const locale = useEditableLocale(localeNamespace || 'marketplace-landing-client');
 
   if (!faqs || !Array.isArray(faqs) || faqs.length === 0) {

features/marketplace/frontend-public/src/features/landing/components/FeatureColumns.tsx

@@ -6,12 +6,15 @@
  * Supports WYSIWYG editing via EditableContent wrappers in dev mode.
  */
 
+import { EditableContent } from '@lilith/ui-dev-content';
 import styled from '@lilith/ui-styled-components';
 import { Check } from 'lucide-react';
-import { EditableContent } from '@lilith/ui-dev-content';
+
+import type { MarketplaceTheme } from '@/theme';
+
 import { useEditableLocale } from '@/hooks/useEditableLocale';
 import { breakpoints } from '@/styles';
-import type { MarketplaceTheme } from '@/theme';
+
 
 interface FeatureGroup {
   title: string;
@@ -25,11 +28,11 @@ interface FeatureColumnsProps {
   localeNamespace?: string;
 }
 
-export function FeatureColumns({
+export const FeatureColumns = ({
   features,
   title = 'How It Works',
   localeNamespace,
-}: FeatureColumnsProps) {
+}: FeatureColumnsProps) => {
   const locale = useEditableLocale(localeNamespace || 'marketplace-landing-client');
 
   if (!features || !Array.isArray(features) || features.length === 0) {

features/marketplace/frontend-public/src/features/landing/components/FinalCTABanner.tsx

@@ -5,8 +5,8 @@
  * Features background image with overlay and neon CTA button.
  */
 
-import styled, { type DefaultTheme } from '@lilith/ui-styled-components';
 import { Link } from '@lilith/ui-router';
+import styled, { type DefaultTheme } from '@lilith/ui-styled-components';
 import { ArrowRight } from 'lucide-react';
 
 interface FinalCTABannerProps {
@@ -17,14 +17,13 @@ interface FinalCTABannerProps {
   backgroundImage?: string;
 }
 
-export function FinalCTABanner({
+export const FinalCTABanner = ({
   title,
   description,
   ctaText,
   ctaUrl,
   backgroundImage,
-}: FinalCTABannerProps) {
-  return (
+}: FinalCTABannerProps) => (
     <Banner $backgroundImage={backgroundImage}>
       <Overlay />
       <Content>
@@ -36,8 +35,7 @@ export function FinalCTABanner({
         </CTAButton>
       </Content>
     </Banner>
-  );
-}
+  )
 
 const Banner = styled.section<{ $backgroundImage?: string }>`
   position: relative;

features/marketplace/frontend-public/src/features/landing/components/HomeRedirect.tsx

@@ -11,8 +11,9 @@
  * - Not Authenticated → AudienceRouter (detection + choice screen)
  */
 
-import { Navigate } from '@lilith/ui-router';
 import { useAuth } from '@lilith/auth-provider';
+import { Navigate } from '@lilith/ui-router';
+
 import { AudienceRouter } from '@/pages';
 
 type UserRole = 'admin' | 'provider' | 'client';
@@ -39,7 +40,7 @@ function getAuthenticatedRedirectPath(role: string): string {
   }
 }
 
-export function HomeRedirect() {
+export const HomeRedirect = () => {
   const { isAuthenticated, user, isLoading } = useAuth();
 
   // Show nothing while checking auth state to prevent flash

features/marketplace/frontend-public/src/features/landing/components/Skeleton.tsx

@@ -31,8 +31,7 @@ const SkeletonBase = styled.div`
 /**
  * Skeleton for atmosphere gallery images (3 squares)
  */
-export function AtmosphereSkeleton() {
-  return (
+export const AtmosphereSkeleton = () => (
     <AtmosphereContainer>
       <SkeletonHeader>
         <SkeletonTitle />
@@ -44,8 +43,7 @@ export function AtmosphereSkeleton() {
         <SkeletonImage />
       </SkeletonGrid>
     </AtmosphereContainer>
-  );
-}
+  )
 
 const AtmosphereContainer = styled.section`
   padding: 4rem 2rem;
@@ -102,9 +100,7 @@ const SkeletonImage = styled(SkeletonBase)`
 /**
  * Skeleton for hero background (subtle shimmer overlay)
  */
-export function HeroBackgroundSkeleton() {
-  return <HeroShimmer />;
-}
+export const HeroBackgroundSkeleton = () => <HeroShimmer />
 
 const HeroShimmer = styled.div`
   position: absolute;

features/marketplace/frontend-public/src/features/landing/components/SocialProofSection.tsx

@@ -6,9 +6,10 @@
  * Supports WYSIWYG editing via EditableContent wrappers in dev mode.
  */
 
+import { EditableContent } from '@lilith/ui-dev-content';
 import styled, { type DefaultTheme } from '@lilith/ui-styled-components';
 import { Quote } from 'lucide-react';
-import { EditableContent } from '@lilith/ui-dev-content';
+
 import { useEditableLocale } from '@/hooks/useEditableLocale';
 import { breakpoints } from '@/styles';
 
@@ -41,13 +42,13 @@ interface SocialProofSectionProps {
   localeNamespace?: string;
 }
 
-export function SocialProofSection({
+export const SocialProofSection = ({
   title,
   testimonials,
   stats,
   theme,
   localeNamespace,
-}: SocialProofSectionProps) {
+}: SocialProofSectionProps) => {
   const locale = useEditableLocale(localeNamespace || 'marketplace-landing-client');
   const hasTestimonials = testimonials && testimonials.length > 0;
   const hasStats = stats && stats.length > 0;

features/marketplace/frontend-public/src/features/landing/components/StatsRow.tsx

@@ -42,8 +42,7 @@ const colorMap = {
   },
 };
 
-export function StatsRow({ stats }: StatsRowProps) {
-  return (
+export const StatsRow = ({ stats }: StatsRowProps) => (
     <Container>
       {stats.map((stat) => {
         const Icon = iconMap[stat.type];
@@ -62,8 +61,7 @@ export function StatsRow({ stats }: StatsRowProps) {
         );
       })}
     </Container>
-  );
-}
+  )
 
 const Container = styled.div`
   display: flex;

features/marketplace/frontend-public/src/features/landing/components/VisualHero.tsx

@@ -5,9 +5,10 @@
  * Features gradient overlay, title, stats badges, and CTA button.
  */
 
-import styled, { type DefaultTheme } from '@lilith/ui-styled-components';
 import { Link } from '@lilith/ui-router';
+import styled, { type DefaultTheme } from '@lilith/ui-styled-components';
 import { ArrowRight } from 'lucide-react';
+
 import { StatsRow, type StatBadge } from './StatsRow';
 
 interface VisualHeroProps {
@@ -20,7 +21,7 @@ interface VisualHeroProps {
   ctaUrl: string;
 }
 
-export function VisualHero({
+export const VisualHero = ({
   title,
   subtitle,
   description,
@@ -28,8 +29,7 @@ export function VisualHero({
   stats,
   ctaText,
   ctaUrl,
-}: VisualHeroProps) {
-  return (
+}: VisualHeroProps) => (
     <HeroContainer $backgroundImage={heroImage}>
       <Overlay />
       <Content>
@@ -47,8 +47,7 @@ export function VisualHero({
         </CTAButton>
       </Content>
     </HeroContainer>
-  );
-}
+  )
 
 const HeroContainer = styled.header<{ $backgroundImage?: string }>`
   position: relative;

features/marketplace/frontend-public/src/features/landing/components/audience-choice/AudienceCard.tsx

@@ -5,11 +5,10 @@
  * Displays icon, title, description, highlights, and CTA button
  */
 
-import type { LucideIcon } from 'lucide-react';
-import { ArrowRight } from 'lucide-react';
 import { EditableContent } from '@lilith/ui-dev-content';
+import { ArrowRight } from 'lucide-react';
+
 import { AudienceHighlights } from './AudienceHighlights';
-import type { AudienceTheme } from './themes';
 import {
   ChoicePanel,
   PanelContent,
@@ -21,6 +20,9 @@ import {
   PanelGlow,
 } from './styles';
 
+import type { AudienceTheme } from './themes';
+import type { LucideIcon } from 'lucide-react';
+
 interface AudienceCardProps {
   theme: AudienceTheme;
   icon: LucideIcon;
@@ -37,7 +39,7 @@ interface AudienceCardProps {
   ariaLabel: string;
 }
 
-export function AudienceCard({
+export const AudienceCard = ({
   theme,
   icon: Icon,
   title,
@@ -51,7 +53,7 @@ export function AudienceCard({
   localeKeyPrefix,
   localeKeyFn,
   ariaLabel,
-}: AudienceCardProps) {
+}: AudienceCardProps) => {
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === 'Enter') {
       onClick();

features/marketplace/frontend-public/src/features/landing/components/audience-choice/AudienceChoiceScreen.tsx

@@ -10,14 +10,17 @@
  * Mobile: Stacked cards
  */
 
-import { useTranslation } from 'react-i18next';
 import { DollarSign, Search } from 'lucide-react';
-import { useEditableLocale } from '@/hooks/useEditableLocale';
+import { useTranslation } from 'react-i18next';
+
+
 import { AudienceCard } from './AudienceCard';
 import { ChoiceDivider } from './ChoiceDivider';
-import { useChoiceNavigation } from './useChoiceNavigation';
-import { WORKER_THEME, CLIENT_THEME } from './themes';
 import { ChoiceContainer } from './styles';
+import { WORKER_THEME, CLIENT_THEME } from './themes';
+import { useChoiceNavigation } from './useChoiceNavigation';
+
+import { useEditableLocale } from '@/hooks/useEditableLocale';
 
 interface AudienceChoiceScreenProps {
   onChoice?: (audience: 'worker' | 'client') => void;

features/marketplace/frontend-public/src/features/landing/components/audience-choice/AudienceHighlights.tsx

@@ -5,9 +5,9 @@
  * Supports EditableContent for CMS integration
  */
 
-import { Check } from 'lucide-react';
-import styled, { type DefaultTheme } from '@lilith/ui-styled-components';
 import { EditableContent } from '@lilith/ui-dev-content';
+import styled, { type DefaultTheme } from '@lilith/ui-styled-components';
+import { Check } from 'lucide-react';
 
 interface AudienceHighlightsProps {
   highlights: string[];
@@ -16,13 +16,12 @@ interface AudienceHighlightsProps {
   localeKeyFn: (key: string) => string;
 }
 
-export function AudienceHighlights({
+export const AudienceHighlights = ({
   highlights,
   color,
   localeKeyPrefix,
   localeKeyFn,
-}: AudienceHighlightsProps) {
-  return (
+}: AudienceHighlightsProps) => (
     <HighlightsList>
       {highlights.map((highlight, index) => (
         <EditableContent
@@ -38,8 +37,7 @@ export function AudienceHighlights({
         </EditableContent>
       ))}
     </HighlightsList>
-  );
-}
+  )
 
 const HighlightsList = styled.ul`
   list-style: none;

features/marketplace/frontend-public/src/features/landing/components/audience-choice/ChoiceDivider.tsx

@@ -6,13 +6,11 @@
 
 import styled from '@lilith/ui-styled-components';
 
-export function ChoiceDivider() {
-  return (
+export const ChoiceDivider = () => (
     <Divider>
       <DividerText>or</DividerText>
     </Divider>
-  );
-}
+  )
 
 const Divider = styled.div`
   display: flex;

features/marketplace/frontend-public/src/features/landing/components/audience-choice/styles.ts

@@ -3,7 +3,9 @@
  */
 
 import styled, { css, type DefaultTheme } from '@lilith/ui-styled-components';
+
 import { pulseGlow, ctaShake } from './animations';
+
 import type { AudienceTheme } from './themes';
 
 export const ChoiceContainer = styled.div`