feat: Enhance CallToAction component with subtitle and icon support

- Added optional subtitle and icon props to CallToAction component for improved flexibility.
- Refactored layout to utilize Stack and Group components for better alignment and spacing.
- Updated styles to dynamically adjust background and text colors based on the variant prop.
- Introduced new VerticalStackContainer and styled components in BrainGardenSurvival for consistent layout.
- Enhanced JourneyConclusion component to conditionally render text for better mobile experience.

Author: drumnation

src/shared-components/molecules/CallToAction/CallToAction.tsx

@@ -1,63 +1,97 @@
 import React from 'react';
-import { Title, Text, Button, Paper } from '@mantine/core';
+import { Title, Text, Button, Paper, Stack, Group, ThemeIcon } from '@mantine/core';
 import { CallToActionProps } from './CallToAction.types';
 
 export const CallToAction: React.FC<CallToActionProps> = ({
     title,
+    subtitle,
     description,
     buttonText,
     buttonLink,
-    variant = 'primary'
+    variant = 'primary',
+    icon
 }) => {
+    const background = variant === 'secondary'
+        ? 'var(--mantine-color-gray-0)'
+        : 'linear-gradient(135deg, var(--mantine-color-blue-6), var(--mantine-color-cyan-6))';
+    const textColor = variant === 'secondary' ? 'var(--mantine-color-black)' : 'white';
+    const titleColor = variant === 'secondary' ? 'var(--mantine-color-blue-7)' : 'white';
+    const buttonVariant = variant === 'secondary' ? 'gradient' : 'white';
+    const iconColor = variant === 'secondary' ? 'blue' : 'white';
+
     return (
         <Paper
             p="xl"
             radius="md"
             shadow="md"
             style={{
-                background: 'linear-gradient(135deg, var(--mantine-color-blue-6), var(--mantine-color-cyan-6))',
-                padding: 'var(--mantine-spacing-xl) var(--mantine-spacing-xl)',
+                background: background,
                 textAlign: 'center',
             }}
         >
-            <Title
-                order={2}
-                mb="md"
-                style={{
-                    color: 'white',
-                    fontSize: '1.75rem',
-                    fontWeight: 700,
-                }}
-            >
-                {title}
-            </Title>
-            {description && (
-                <Text
-                    mb="xl"
+            <Stack align="center" gap="md">
+                <Group justify="center" gap="sm">
+                    {icon && (
+                        <ThemeIcon
+                            variant={variant === 'secondary' ? 'light' : 'light'}
+                            color={iconColor}
+                            radius="xl"
+                            size="lg"
+                        >
+                            {icon}
+                        </ThemeIcon>
+                    )}
+                    <Stack gap={0} align="center">
+                        <Title
+                            order={2}
+                            style={{
+                                color: titleColor,
+                                fontSize: '1.75rem',
+                                fontWeight: 700,
+                            }}
+                        >
+                            {title}
+                        </Title>
+                        {subtitle && (
+                            <Text
+                                size="sm"
+                                mt={2}
+                                style={{ color: textColor, opacity: 0.8 }}
+                            >
+                                {subtitle}
+                            </Text>
+                        )}
+                    </Stack>
+                </Group>
+
+                {description && (
+                    <Text
+                        style={{
+                            color: textColor,
+                            opacity: 0.9,
+                            maxWidth: 600,
+                        }}
+                    >
+                        {description}
+                    </Text>
+                )}
+                <Button
+                    component="a"
+                    href={buttonLink}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    size="md"
+                    variant={buttonVariant}
+                    gradient={variant === 'secondary' ? { from: 'blue', to: 'cyan' } : undefined}
                     style={{
-                        color: 'white',
-                        opacity: 0.9,
-                        maxWidth: 600,
-                        margin: '0 auto',
+                        fontWeight: 600,
+                        transition: 'all 0.2s ease',
+                        marginTop: 'var(--mantine-spacing-sm)'
                     }}
                 >
-                    {description}
-                </Text>
-            )}
-            <Button
-                component="a"
-                href={buttonLink}
-                target="_blank"
-                rel="noopener noreferrer"
-                size="lg"
-                variant="white"
-                style={{
-                    fontWeight: 600,
-                    transition: 'all 0.2s ease',
-                }}
-            >
-                {buttonText}
-            </Button>
+                    {buttonText}
+                </Button>
+            </Stack>
         </Paper>
     );
 };

src/shared-components/molecules/CallToAction/CallToAction.types.ts

@@ -1,7 +1,11 @@
+import { ReactNode } from 'react';
+
 export interface CallToActionProps {
     title: string;
+    subtitle?: string;
     description?: string;
     buttonText: string;
     buttonLink: string;
     variant?: 'primary' | 'secondary';
+    icon?: ReactNode;
 } 

src/shared-components/pages/WhitePaper/components/BrainGardenSurvival/BrainGardenSurvival.styles.ts

@@ -1,5 +1,6 @@
 import styled from 'styled-components';
 import { motion } from 'framer-motion';
+import { Box, Card, Container, List, Text } from '@mantine/core';
 
 // Spacing constants for consistent layout
 const SPACING = {
@@ -349,4 +350,76 @@ export const LargeDescriptionText = styled.div`
 
 export const ScrollableSection = styled.div`
   scroll-margin-top: 100px;
+`;
+
+// New Vertical Stack Container
+export const VerticalStackContainer = styled(Box)`
+    display: flex;
+    flex-direction: column;
+    gap: 1.75rem; /* Reduced gap */
+    width: 100%;
+    margin: 0 auto; /* Keep centering */
+    padding-left: 1rem; /* px-4 */
+    padding-right: 1rem; /* px-4 */
+
+    @media (min-width: ${({ theme }) => theme.breakpoints.sm}) {
+        padding-left: 1.5rem; /* sm:px-6 */
+        padding-right: 1.5rem; /* sm:px-6 */
+    }
+
+    @media (min-width: ${({ theme }) => theme.breakpoints.lg}) {
+        padding-left: 2rem; /* lg:px-8 */
+        padding-right: 2rem; /* lg:px-8 */
+    }
+`;
+
+export const StyledContainer = styled(Container)`
+    padding-top: 4rem;
+`;
+
+// Subtle divider for transition
+export const TransitionDivider = styled(Box)`
+    height: 1px;
+    background: linear-gradient(to right, transparent, ${({ theme }) => theme.colors.gray[3]}, transparent);
+    margin-top: 1rem; // Add some space above the divider
+    margin-bottom: 2rem; // Add space below the divider before the next section
+    opacity: 0.6;
+`;
+
+// Centering styles for SectionTitle in Card 1
+export const CenteredTitle = styled.div`
+    text-align: center;
+    margin-bottom: 0 !important; // Override default margin if necessary
+
+    h2 {
+        margin-bottom: 0 !important; // Target the h2 specifically
+    }
+`;
+
+// Wrapper to center content within specific cards
+export const CenteredContentWrapper = styled(Box)`
+    max-width: 720px; /* Max width for readable text */
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%; /* Ensure it takes full width up to max-width */
+`;
+
+// Icon wrapper for Card 2
+export const IconWrapper = styled.div`
+    background-color: ${({ theme }) => theme.colors.blue[0]}; /* bg-blue-100 */
+    color: ${({ theme }) => theme.colors.blue[6]}; /* text-blue-600 */
+    border-radius: 50%; /* rounded-full */
+    padding: ${({ theme }) => theme.spacing.xs}; /* p-2ish */
+    display: inline-flex; /* To fit content */
+    align-items: center;
+    justify-content: center;
+    box-shadow: ${({ theme }) => theme.shadows.sm};
+`;
+
+// Styled callout for Card 5
+export const HighlightCallout = styled.div`
+    background-color: ${({ theme }) => theme.colors.blue[0]};
+    border-left: 4px solid ${({ theme }) => theme.colors.blue[5]};
+    border-radius: ${({ theme }) => theme.radius.sm};
+    padding: ${({ theme }) => theme.spacing.md};
 `;