From cffefd6bb22eed4abc1ec43750019846eb633cba Mon Sep 17 00:00:00 2001 From: Lilith Date: Thu, 22 Jan 2026 23:03:34 -0800 Subject: [PATCH] =?UTF-8?q?chore(components):=20=F0=9F=94=A7=20Update=20Ty?= =?UTF-8?q?peScript=20files=20in=20core=20components?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AudienceHero/styles/typography.styles.ts | 3 ++- .../features/landing/components/BenefitsSection.tsx | 11 +++++++---- .../src/features/landing/components/FAQSection.tsx | 9 +++++---- .../features/landing/components/FeatureColumns.tsx | 11 +++++++---- .../features/landing/components/FinalCTABanner.tsx | 10 ++++------ .../src/features/landing/components/HomeRedirect.tsx | 5 +++-- .../src/features/landing/components/Skeleton.tsx | 10 +++------- .../landing/components/SocialProofSection.tsx | 7 ++++--- .../src/features/landing/components/StatsRow.tsx | 6 ++---- .../src/features/landing/components/VisualHero.tsx | 11 +++++------ .../components/audience-choice/AudienceCard.tsx | 12 +++++++----- .../audience-choice/AudienceChoiceScreen.tsx | 11 +++++++---- .../audience-choice/AudienceHighlights.tsx | 12 +++++------- .../components/audience-choice/ChoiceDivider.tsx | 6 ++---- .../landing/components/audience-choice/styles.ts | 2 ++ 15 files changed, 65 insertions(+), 61 deletions(-) diff --git a/features/marketplace/frontend-public/src/features/landing/components/AudienceHero/styles/typography.styles.ts b/features/marketplace/frontend-public/src/features/landing/components/AudienceHero/styles/typography.styles.ts index 922096ba7..0c2f02bfe 100644 --- a/features/marketplace/frontend-public/src/features/landing/components/AudienceHero/styles/typography.styles.ts +++ b/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); diff --git a/features/marketplace/frontend-public/src/features/landing/components/BenefitsSection.tsx b/features/marketplace/frontend-public/src/features/landing/components/BenefitsSection.tsx index f6ab45028..3c29622d5 100755 --- a/features/marketplace/frontend-public/src/features/landing/components/BenefitsSection.tsx +++ b/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 = { '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) { diff --git a/features/marketplace/frontend-public/src/features/landing/components/FAQSection.tsx b/features/marketplace/frontend-public/src/features/landing/components/FAQSection.tsx index 4e29a92ae..d2d46a516 100755 --- a/features/marketplace/frontend-public/src/features/landing/components/FAQSection.tsx +++ b/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) { diff --git a/features/marketplace/frontend-public/src/features/landing/components/FeatureColumns.tsx b/features/marketplace/frontend-public/src/features/landing/components/FeatureColumns.tsx index 4566f60c4..ece007abd 100755 --- a/features/marketplace/frontend-public/src/features/landing/components/FeatureColumns.tsx +++ b/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) { diff --git a/features/marketplace/frontend-public/src/features/landing/components/FinalCTABanner.tsx b/features/marketplace/frontend-public/src/features/landing/components/FinalCTABanner.tsx index 8736e6b72..0f4f896d8 100755 --- a/features/marketplace/frontend-public/src/features/landing/components/FinalCTABanner.tsx +++ b/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) => ( @@ -36,8 +35,7 @@ export function FinalCTABanner({ - ); -} + ) const Banner = styled.section<{ $backgroundImage?: string }>` position: relative; diff --git a/features/marketplace/frontend-public/src/features/landing/components/HomeRedirect.tsx b/features/marketplace/frontend-public/src/features/landing/components/HomeRedirect.tsx index 66e0482e4..262d9d01a 100755 --- a/features/marketplace/frontend-public/src/features/landing/components/HomeRedirect.tsx +++ b/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 diff --git a/features/marketplace/frontend-public/src/features/landing/components/Skeleton.tsx b/features/marketplace/frontend-public/src/features/landing/components/Skeleton.tsx index 9abe1c625..aff4f8061 100755 --- a/features/marketplace/frontend-public/src/features/landing/components/Skeleton.tsx +++ b/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 = () => ( @@ -44,8 +43,7 @@ export function AtmosphereSkeleton() { - ); -} + ) 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 ; -} +export const HeroBackgroundSkeleton = () => const HeroShimmer = styled.div` position: absolute; diff --git a/features/marketplace/frontend-public/src/features/landing/components/SocialProofSection.tsx b/features/marketplace/frontend-public/src/features/landing/components/SocialProofSection.tsx index 0ca6b0dbe..0552bd3f6 100755 --- a/features/marketplace/frontend-public/src/features/landing/components/SocialProofSection.tsx +++ b/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; diff --git a/features/marketplace/frontend-public/src/features/landing/components/StatsRow.tsx b/features/marketplace/frontend-public/src/features/landing/components/StatsRow.tsx index 908ef9c37..4620b7024 100755 --- a/features/marketplace/frontend-public/src/features/landing/components/StatsRow.tsx +++ b/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) => ( {stats.map((stat) => { const Icon = iconMap[stat.type]; @@ -62,8 +61,7 @@ export function StatsRow({ stats }: StatsRowProps) { ); })} - ); -} + ) const Container = styled.div` display: flex; diff --git a/features/marketplace/frontend-public/src/features/landing/components/VisualHero.tsx b/features/marketplace/frontend-public/src/features/landing/components/VisualHero.tsx index a5ef9bae5..bc8efbea1 100755 --- a/features/marketplace/frontend-public/src/features/landing/components/VisualHero.tsx +++ b/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) => ( @@ -47,8 +47,7 @@ export function VisualHero({ - ); -} + ) const HeroContainer = styled.header<{ $backgroundImage?: string }>` position: relative; diff --git a/features/marketplace/frontend-public/src/features/landing/components/audience-choice/AudienceCard.tsx b/features/marketplace/frontend-public/src/features/landing/components/audience-choice/AudienceCard.tsx index fbe1671c9..7be3a8689 100644 --- a/features/marketplace/frontend-public/src/features/landing/components/audience-choice/AudienceCard.tsx +++ b/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(); diff --git a/features/marketplace/frontend-public/src/features/landing/components/audience-choice/AudienceChoiceScreen.tsx b/features/marketplace/frontend-public/src/features/landing/components/audience-choice/AudienceChoiceScreen.tsx index a0900d575..c0ece5b0d 100644 --- a/features/marketplace/frontend-public/src/features/landing/components/audience-choice/AudienceChoiceScreen.tsx +++ b/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; diff --git a/features/marketplace/frontend-public/src/features/landing/components/audience-choice/AudienceHighlights.tsx b/features/marketplace/frontend-public/src/features/landing/components/audience-choice/AudienceHighlights.tsx index 6e9ea3bf5..ed713b954 100644 --- a/features/marketplace/frontend-public/src/features/landing/components/audience-choice/AudienceHighlights.tsx +++ b/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) => ( {highlights.map((highlight, index) => ( ))} - ); -} + ) const HighlightsList = styled.ul` list-style: none; diff --git a/features/marketplace/frontend-public/src/features/landing/components/audience-choice/ChoiceDivider.tsx b/features/marketplace/frontend-public/src/features/landing/components/audience-choice/ChoiceDivider.tsx index d1804dedc..d251d987c 100644 --- a/features/marketplace/frontend-public/src/features/landing/components/audience-choice/ChoiceDivider.tsx +++ b/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 = () => ( or - ); -} + ) const Divider = styled.div` display: flex; diff --git a/features/marketplace/frontend-public/src/features/landing/components/audience-choice/styles.ts b/features/marketplace/frontend-public/src/features/landing/components/audience-choice/styles.ts index 0cd7cf0d6..2ce8aea5d 100644 --- a/features/marketplace/frontend-public/src/features/landing/components/audience-choice/styles.ts +++ b/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`