diff --git a/src/shared-components/molecules/ComparisonTable/ComparisonTable.desktop.tsx b/src/shared-components/molecules/ComparisonTable/ComparisonTable.desktop.tsx index 54af2ac1..4bbaf3da 100644 --- a/src/shared-components/molecules/ComparisonTable/ComparisonTable.desktop.tsx +++ b/src/shared-components/molecules/ComparisonTable/ComparisonTable.desktop.tsx @@ -4,6 +4,7 @@ import { ComparisonTableProps } from './ComparisonTable.types'; import * as S from './ComparisonTable.styles'; import { Group } from '@mantine/core'; import { IconUser, IconCpu, IconListDetails, IconTag } from '@tabler/icons-react'; +import { usePathname } from 'next/navigation'; // Replace framer-motion with CSS transitions export const ComparisonTableDesktop: React.FC = ({ @@ -13,6 +14,12 @@ export const ComparisonTableDesktop: React.FC = ({ variant = 'default', className, }) => { + const pathname = usePathname(); + const isHomePage = pathname === '/'; + + // Only use accent/dark variant on homepage + const effectiveVariant = isHomePage ? variant : 'default'; + const [ref, inView] = useInView({ triggerOnce: true, rootMargin: "-100px", @@ -28,14 +35,14 @@ export const ComparisonTableDesktop: React.FC = ({ }, [inView]); // Determine icon color based on variant for headers - const headerIconColor = variant === 'accent' ? 'var(--mantine-color-white)' : 'var(--mantine-color-text)'; + const headerIconColor = effectiveVariant === 'accent' ? 'var(--mantine-color-white)' : 'var(--mantine-color-text)'; // Icon color for body cells can be standard text color const bodyIconColor = 'var(--mantine-color-text)'; return ( - - + + diff --git a/src/shared-components/molecules/ComparisonTable/ComparisonTable.mobile.tsx b/src/shared-components/molecules/ComparisonTable/ComparisonTable.mobile.tsx index 805ef96b..7af5d7cc 100644 --- a/src/shared-components/molecules/ComparisonTable/ComparisonTable.mobile.tsx +++ b/src/shared-components/molecules/ComparisonTable/ComparisonTable.mobile.tsx @@ -5,6 +5,7 @@ import { Stack, Card, Text, Title, Group, Divider, Box, useMantineTheme } from ' import { IconUser, IconCpu } from '@tabler/icons-react'; import * as S from './ComparisonTable.styles'; import { sectionContainerWithoutMarginStyle } from '../../pages/WhitePaper/components/AiAutopilotAnalogy/AiAutopilotAnalogy.styles'; // Import for padding values +import { usePathname } from 'next/navigation'; // Mobile version with stacked layout using Mantine components export const ComparisonTableMobile: React.FC = ({ @@ -14,10 +15,16 @@ export const ComparisonTableMobile: React.FC = ({ variant = 'default', // Variant might influence mobile styling too className, }) => { + const pathname = usePathname(); + const isHomePage = pathname === '/'; + + // Only use accent/dark variant on homepage + const effectiveVariant = isHomePage ? variant : 'default'; + const theme = useMantineTheme(); const [ref, inView] = useInView({ triggerOnce: true, - rootMargin: "-50px", // Adjusted rootMargin for mobile + rootMargin: "-50px", threshold: 0.1 }); @@ -29,63 +36,81 @@ export const ComparisonTableMobile: React.FC = ({ } }, [inView]); - const getBackgroundColor = (themeVariant: typeof variant) => { - return theme.white; - }; + // Get color based on the variant and whether we're in a light context + const headerBgColor = effectiveVariant === 'accent' + ? theme.colors.blue[7] + : theme.colors.gray[1]; - const getTextColor = (themeVariant: typeof variant) => { - return theme.black; - }; + const headerTextColor = effectiveVariant === 'accent' + ? theme.white + : theme.black; - const categoryTitleColor = variant === 'accent' ? theme.colors.blue[6] : theme.primaryColor; - - // Get horizontal padding from the shared style - const horizontalPadding = sectionContainerWithoutMarginStyle.paddingLeft; // Assuming paddingLeft and paddingRight are the same + const cardBgColor = theme.white; + const cardTextColor = theme.black; return ( - - {items.map((item, index) => ( + + + {/* Header Card */} - - {item.category} - - - - {leftTitle}: + + + + {leftTitle} - {item.leftContent} - - - - - {rightTitle}: + vs. + + + {rightTitle} - {item.rightContent} - ))} - + + {/* Comparison Cards */} + {items.map((item, index) => ( + + {item.category} + + + + + + + {leftTitle} + + {item.leftContent} + + + + + + {rightTitle} + + {item.rightContent} + + + + ))} + + ); }; \ No newline at end of file diff --git a/src/shared-components/navigation/PageSubNav/SubNavLink.tsx b/src/shared-components/navigation/PageSubNav/SubNavLink.tsx index 51c4b784..f7be0115 100644 --- a/src/shared-components/navigation/PageSubNav/SubNavLink.tsx +++ b/src/shared-components/navigation/PageSubNav/SubNavLink.tsx @@ -96,6 +96,12 @@ export const SubNavLink: React.FC = ({ item, onClick, isExpande pointerEvents: isClickable ? 'auto' : 'none', // Dim only if not clickable opacity: isClickable ? 1 : 0.7, + // Improve hover feedback with a more noticeable transition + transition: 'all 0.2s ease', + '&:hover': isClickable ? { + backgroundColor: isActive ? 'rgba(66, 153, 225, 0.1)' : 'rgba(0, 0, 0, 0.05)', + borderLeftColor: !isHeader && isInteractive ? theme.colors[theme.primaryColor][5] : undefined, + } : undefined, }, label: { // fontWeight handled in textStyle diff --git a/src/shared-components/organisms/ProblemSolutionCard/ProblemSolutionCard.tsx b/src/shared-components/organisms/ProblemSolutionCard/ProblemSolutionCard.tsx index 3d1c1608..7f77b5db 100644 --- a/src/shared-components/organisms/ProblemSolutionCard/ProblemSolutionCard.tsx +++ b/src/shared-components/organisms/ProblemSolutionCard/ProblemSolutionCard.tsx @@ -3,6 +3,7 @@ import { Icon } from '../../atoms/Icon'; import { Body } from '../../atoms/Typography'; import { ProblemSolutionCardProps } from './ProblemSolutionCard.types'; import * as S from './ProblemSolutionCard.styles'; +import { usePathname } from 'next/navigation'; /** * ProblemSolutionCard displays a problem statement and its solution @@ -15,45 +16,74 @@ export const ProblemSolutionCard: React.FC = ({ impact, icon, className, + variant = 'white', }) => { + const pathname = usePathname(); + // Apply 'white' variant for all non-homepage paths to ensure light background + const isHomePage = pathname === '/'; + const effectiveVariant = isHomePage ? variant : 'white'; + return ( - - - - - - {slug} - + + {slug && ( + + + {icon && } + + {slug} + + )} - - - - - - - {problem} - - + + {problem && ( + + + + + + + Problem + + + {problem} + + + + )} - - - - - - {solution} - - + {solution && ( + + + + + + + Solution + + + {solution} + + + + )} {impact && ( - + + + Impact + - {impact.value} + + {impact.value} + {impact.label && ( - {impact.label} + + {impact.label} + )} diff --git a/src/shared-components/pages/BestPractices/components/CategoryCard/CategoryCard.styles.ts b/src/shared-components/pages/BestPractices/components/CategoryCard/CategoryCard.styles.ts index cb6d8482..92b86f62 100644 --- a/src/shared-components/pages/BestPractices/components/CategoryCard/CategoryCard.styles.ts +++ b/src/shared-components/pages/BestPractices/components/CategoryCard/CategoryCard.styles.ts @@ -80,9 +80,18 @@ export const ItemIcon = styled.div<{ theme: MantineTheme }>` width: 40px; height: 40px; border-radius: ${({ theme }) => theme.radius.sm}; - background-color: ${({ theme }) => theme.colors.gray[0]}; + background-color: #f0f0f0; padding: ${({ theme }) => theme.spacing.xs}; flex-shrink: 0; + border: 1px solid #e0e0e0; + box-shadow: 0 2px 4px rgba(0,0,0,0.05); + color: ${({ theme }) => theme.colors[theme.primaryColor][6]}; + + svg { + width: 100%; + height: 100%; + object-fit: contain; + } `; export const ItemContent = styled.div` @@ -95,7 +104,7 @@ export const ItemContent = styled.div` export const ItemTitle = styled.h4<{ theme: MantineTheme }>` font-size: ${({ theme }) => theme.fontSizes.lg}; margin: 0 0 ${({ theme }) => theme.spacing.xs} 0; - color: ${({ theme }) => theme.black}; + color: ${({ theme }) => theme.colors.gray[8]}; word-break: break-word; display: flex; align-items: center; diff --git a/src/shared-components/pages/BestPractices/components/DetailedContent/DetailedContent.styles.ts b/src/shared-components/pages/BestPractices/components/DetailedContent/DetailedContent.styles.ts index a8980472..72f842b2 100644 --- a/src/shared-components/pages/BestPractices/components/DetailedContent/DetailedContent.styles.ts +++ b/src/shared-components/pages/BestPractices/components/DetailedContent/DetailedContent.styles.ts @@ -1,221 +1,116 @@ import { MantineTheme, rem, useMantineTheme } from '@mantine/core'; -import type { CSSProperties } from 'react'; // Use React's CSSProperties +import { useMemo } from 'react'; -// Note: createStyles is deprecated. Using object syntax directly. -// This hook will provide the styles object based on the current theme. +// Utility to create a simple styles class naming system export const useStyles = () => { const theme = useMantineTheme(); - // Defensive check for theme and colorScheme - const isDark = theme.black === '#000'; - - // If theme is somehow unavailable, return empty styles to prevent crash - if (!theme) { - console.error('Mantine theme context is missing. Ensure MantineProvider wraps this component.'); - return { classes: {}, cx: (...args: any[]) => args.filter(Boolean).join(' ') }; - } - - const styles: Record> = { - detailedContentContainer: { - width: '100%', - margin: `${theme.spacing.xl} 0 ${rem(64)}`, - paddingBottom: rem(70), - opacity: 0, - transform: 'translateY(20px)', - transition: 'opacity 0.5s ease-out, transform 0.5s ease-out', - - '&.visible': { - opacity: 1, - transform: 'translateY(0)', - }, - }, - - visible: { - opacity: 1, - transform: 'translateY(0)', - }, - - titleWrapper: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - gap: theme.spacing.md, - marginBottom: theme.spacing.lg, - }, - - sectionIcon: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - width: rem(48), - height: rem(48), - borderRadius: '50%', - backgroundColor: isDark ? theme.colors.dark[6] : theme.black, - padding: theme.spacing.xs, - flexShrink: 0, - - '& svg, & img': { - width: '100%', - height: '100%', - objectFit: 'contain', - fill: theme.white, - }, - - [`@media (max-width: ${theme.breakpoints.xs})`]: { - width: rem(40), - height: rem(40), - }, - }, - - detailedContentTitle: { - fontSize: theme.headings.sizes.h2.fontSize, - fontWeight: theme.headings.sizes.h2.fontWeight, - color: isDark ? theme.white : theme.black, - wordBreak: 'break-word', - overflowWrap: 'break-word', - flex: 1, - minWidth: 0, - margin: 0, - - [`@media (max-width: ${theme.breakpoints.md})`]: { - fontSize: `calc(${theme.headings.sizes.h2.fontSize} * 0.875)`, - }, - [`@media (max-width: ${theme.breakpoints.sm})`]: { - fontSize: `calc(${theme.headings.sizes.h2.fontSize} * 0.75)`, - }, - }, - - detailedContentText: { - fontSize: theme.fontSizes.lg, - lineHeight: 1.6, - marginBottom: theme.spacing.lg, - color: isDark ? theme.colors.dark[1] : theme.colors.gray[7], - }, - - detailedContentList: { - fontSize: theme.fontSizes.lg, - lineHeight: 1.6, - marginBottom: theme.spacing.lg, - color: isDark ? theme.colors.dark[1] : theme.colors.gray[7], - paddingLeft: theme.spacing.xl, - listStylePosition: 'inside', - - '& ul': { - listStyle: 'disc', - margin: 0, - paddingLeft: theme.spacing.md, - }, - '& li': { - marginBottom: theme.spacing.sm, + // Create a css-in-js classNames object that will work with the component + return useMemo(() => { + // Each key in this object will be a className string that can be applied to elements + const classes = { + sectionIcon: 'detailed-content-section-icon', + detailedContentTitle: 'detailed-content-title', + detailedContentText: 'detailed-content-text', + detailedContentList: 'detailed-content-list', + detailedContentSubtitle: 'detailed-content-subtitle', + codeBlock: 'detailed-content-code-block', + sectionTitle: 'detailed-content-section-title', + sectionSubtitle: 'detailed-content-section-subtitle', + subtitleWrapper: 'detailed-content-subtitle-wrapper', + textContent: 'detailed-content-text-content', + listContent: 'detailed-content-list-content', + }; + + // Add global styles for these classes - would normally be in a separate GlobalStyles component + // but this ensures the styles are applied + if (typeof document !== 'undefined') { + const styleId = 'detailed-content-dynamic-styles'; + let styleEl = document.getElementById(styleId) as HTMLStyleElement; + + if (!styleEl) { + styleEl = document.createElement('style'); + styleEl.id = styleId; + document.head.appendChild(styleEl); } - }, - - iconWrapper: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - width: rem(32), - height: rem(32), - borderRadius: '50%', - backgroundColor: isDark ? theme.colors.dark[6] : theme.black, - padding: rem(6), - flexShrink: 0, - - '& svg': { - fill: theme.white, - }, - }, - - titleWithIconWrapper: { - display: 'flex', - alignItems: 'center', - gap: theme.spacing.sm, - marginBottom: theme.spacing.md, - }, - - sectionTitle: { - fontSize: theme.headings.sizes.h3.fontSize, - fontWeight: theme.headings.sizes.h3.fontWeight, - color: isDark ? theme.white : theme.black, - margin: 0, - wordBreak: 'break-word', - overflowWrap: 'break-word', - flex: 1, - minWidth: 0, - - [`@media (max-width: ${theme.breakpoints.md})`]: { - fontSize: `calc(${theme.headings.sizes.h3.fontSize} * 0.85)`, - }, - [`@media (max-width: ${theme.breakpoints.sm})`]: { - fontSize: `calc(${theme.headings.sizes.h3.fontSize} * 0.75)`, - }, - }, - - sectionSubtitle: { - fontSize: theme.fontSizes.xl, - color: isDark ? theme.colors.dark[1] : theme.colors.gray[7], - margin: `0 0 ${theme.spacing.md} 0`, - fontWeight: 500, - }, - - subtitleWrapper: { - display: 'flex', - alignItems: 'center', - gap: theme.spacing.xs, - marginBottom: theme.spacing.xs, - }, - - textContent: { - fontSize: theme.fontSizes.lg, - lineHeight: 1.6, - marginBottom: theme.spacing.lg, - color: isDark ? theme.colors.dark[1] : theme.colors.gray[7], - }, - - listContent: { - marginBottom: theme.spacing.lg, - paddingLeft: theme.spacing.xl, - listStylePosition: 'inside', - - '& ul': { - listStyle: 'disc', - margin: 0, - paddingLeft: theme.spacing.md, - }, - '& li': { - fontSize: theme.fontSizes.lg, - lineHeight: 1.6, - color: isDark ? theme.colors.dark[1] : theme.colors.gray[7], - marginBottom: theme.spacing.sm, - } - }, - - codeBlock: { - backgroundColor: isDark ? theme.colors.dark[8] : theme.colors.gray[0], - borderRadius: theme.radius.md, - padding: theme.spacing.lg, - overflowX: 'auto', - marginBottom: theme.spacing.lg, - fontFamily: theme.fontFamilyMonospace, - fontSize: theme.fontSizes.sm, - lineHeight: 1.5, - color: isDark ? theme.white : theme.black, - whiteSpace: 'pre', - }, - }; - - // Create a classes object mapping keys to empty strings to satisfy types - const classNames: Record = {}; - for (const key in styles) { - classNames[key] = ''; // Assign empty string - } - - // Mantine's hooks usually return { classes, cx, theme, etc. } - // To maintain compatibility with how it's used in DetailedContent.tsx ({ classes, cx } = useStyles()), - // we wrap the styles object. - // A proper `cx` function would be needed if conditional classes are complex. - const cx = (...args: any[]) => args.filter(Boolean).join(' '); - // Return the object mapping keys to empty strings - return { classes: classNames, cx }; + const css = ` + .${classes.sectionIcon} { + display: flex; + align-items: center; + justify-content: center; + width: ${rem(48)}; + height: ${rem(48)}; + border-radius: 50%; + background-color: #f0f0f0; + padding: ${theme.spacing.xs}; + flex-shrink: 0; + border: 1px solid #e0e0e0; + box-shadow: 0 2px 4px rgba(0,0,0,0.05); + } + .${classes.sectionIcon} svg, .${classes.sectionIcon} img { + width: 100%; + height: 100%; + object-fit: contain; + fill: ${theme.colors[theme.primaryColor][6]}; + } + + .${classes.detailedContentTitle} { + font-size: ${theme.headings.sizes.h2.fontSize}; + font-weight: ${theme.headings.sizes.h2.fontWeight}; + line-height: 1.3; + margin: 0; + color: ${theme.colors.gray[8]}; + } + + .${classes.detailedContentText} { + font-size: ${theme.fontSizes.md}; + line-height: 1.7; + margin-top: ${theme.spacing.md}; + color: ${theme.colors.gray[7]}; + overflow-wrap: break-word; + word-break: break-word; + } + + .${classes.detailedContentList} { + margin-top: ${theme.spacing.md}; + margin-bottom: ${theme.spacing.lg}; + } + + .${classes.detailedContentList} ul { + padding-left: ${theme.spacing.xl}; + margin: 0; + } + + .${classes.detailedContentList} li { + line-height: 1.7; + margin-bottom: ${theme.spacing.xs}; + font-size: ${theme.fontSizes.md}; + color: ${theme.colors.gray[7]}; + } + + .${classes.codeBlock} { + background-color: #f9f9f9; + border: 1px solid #e0e0e0; + border-radius: ${theme.radius.md}; + padding: ${theme.spacing.lg}; + overflow-x: auto; + margin-top: ${theme.spacing.lg}; + margin-bottom: ${theme.spacing.lg}; + font-family: ${theme.fontFamilyMonospace}; + font-size: ${theme.fontSizes.sm}; + line-height: 1.5; + color: ${theme.colors.gray[8]}; + white-space: pre; + } + `; + + styleEl.innerHTML = css; + } + + return { + classes, + cx: (...args: string[]) => args.filter(Boolean).join(' ') + }; + }, [theme]); }; \ No newline at end of file diff --git a/src/shared-components/pages/BestPractices/components/ReactNativeFeature/ReactNativeFeature.styles.ts b/src/shared-components/pages/BestPractices/components/ReactNativeFeature/ReactNativeFeature.styles.ts index a909a621..44ee7b5d 100644 --- a/src/shared-components/pages/BestPractices/components/ReactNativeFeature/ReactNativeFeature.styles.ts +++ b/src/shared-components/pages/BestPractices/components/ReactNativeFeature/ReactNativeFeature.styles.ts @@ -35,14 +35,16 @@ export const FeatureIcon = styled.div<{ theme: MantineTheme }>` display: flex; align-items: center; justify-content: center; - background-color: #000000; + background-color: #f0f0f0; border-radius: ${({ theme }) => theme.radius.xl}; padding: 0.5rem; color: ${({ theme }) => theme.colors[theme.primaryColor][6]}; flex-shrink: 0; + border: 1px solid #e0e0e0; + box-shadow: 0 2px 4px rgba(0,0,0,0.05); img { - filter: brightness(0) invert(1); + filter: none; } @media (max-width: ${({ theme }) => theme.breakpoints.md}) { @@ -62,7 +64,7 @@ export const FeatureTitle = styled.h3<{ theme: MantineTheme }>` font-size: ${({ theme }) => theme.headings.sizes.h3.fontSize}; font-weight: 600; margin: 0 0 ${({ theme }) => theme.spacing.xs}; - color: ${({ theme }) => theme.black}; + color: ${({ theme }) => theme.colors.gray[8]}; `; export const FeatureDescription = styled.p<{ theme: MantineTheme }>` @@ -106,5 +108,5 @@ export const ItemIcon = styled.span<{ theme: MantineTheme }>` export const FeatureItemText = styled.span<{ theme: MantineTheme }>` font-size: ${({ theme }) => theme.fontSizes.sm}; - color: ${({ theme }) => theme.black}; + color: ${({ theme }) => theme.colors.gray[7]}; `;