Fixed a couple style issues

frontend/src/components/layout/BackstoryLayout.tsx

@@ -92,15 +92,12 @@ const BackstoryPageContainer = (props : BackstoryPageContainerProps) => {
     return (
       <Container
         className="BackstoryPageContainer"
-        maxWidth="xl"
         sx={{
           display: "flex",
           flexGrow: 1,
           p: { xs: 0, sm: 0.5 }, // Zero padding on mobile (xs), 0.5 on larger screens (sm and up)
-          mt: 0,
+          m: "0 auto !important",
-          mb: 0,
+          maxWidth: '1024px', //{ xs: '100%', md: '700px', lg: '1024px' },
-          // width: "100%",
-          maxWidth: { xs: '100%', md: '700px', lg: '1024px' },
           ...sx
         }}>
             <Paper
@@ -112,7 +109,7 @@ const BackstoryPageContainer = (props : BackstoryPageContainerProps) => {
                   backgroundColor: 'background.paper',
                   borderRadius: 0.5,
                   minHeight: '80vh',
-                  maxWidth: { xs: '100%', md: '700px', lg: '1024px' },
+                  maxWidth: '100%',
                   flexDirection: "column",
                 }}>
                 {children}

frontend/src/components/layout/Footer.tsx

@@ -62,7 +62,7 @@ const Footer = () => {
   const currentYear = new Date().getFullYear();
 
   return (
-    <FooterContainer elevation={0}>
+    <FooterContainer elevation={0} >
       <Container maxWidth="lg">
         <Grid container spacing={4} justifyContent="space-between">
           {/* About Company */}
@@ -79,11 +79,11 @@ const Footer = () => {
               >
                 BACKSTORY
               </Typography>
-              <Typography variant="body2" sx={{ mb: 2 }}>
+              <Typography variant="body2" sx={{ mb: 2, color: "white" }}>
                 Helping candidates share their professional journey and connect with the right employers through compelling backstories.
               </Typography>
               <Stack direction="row">
-                <IconButton
+                {/* <IconButton
                   size="small"
                   aria-label="Facebook"
                   sx={{
@@ -112,7 +112,7 @@ const Footer = () => {
                   onClick={() => window.open('https://twitter.com/', '_blank')}
                 >
                   <Twitter />
-                </IconButton>
+                </IconButton> */}
                 <IconButton
                   size="small"
                   aria-label="LinkedIn"
@@ -124,11 +124,11 @@ const Footer = () => {
                       color: theme.palette.action.active,
                     }
                   }}
-                  onClick={() => window.open('https://linkedin.com/', '_blank')}
+                  onClick={() => window.open('https://www.linkedin.com/in/james-ketrenos/', '_blank')}
                 >
                   <LinkedIn />
                 </IconButton>
-                <IconButton
+                {/* <IconButton
                   size="small"
                   aria-label="Instagram"
                   sx={{
@@ -157,7 +157,7 @@ const Footer = () => {
                   onClick={() => window.open('https://youtube.com/', '_blank')}
                 >
                   <YouTube />
-                </IconButton>
+                </IconButton> */}
               </Stack>
             </Box>
           </Grid>
@@ -211,7 +211,7 @@ const Footer = () => {
             </ContactItem> */}
             <ContactItem>
               <LocationOn sx={{ mr: 1, fontSize: 20 }} />
-              <Typography variant="body2">
+              <Typography variant="body2" sx={{ color: "white" }}>
                 Beaverton, OR 97003
               </Typography>
             </ContactItem>
@@ -224,8 +224,8 @@ const Footer = () => {
         <Grid container spacing={2} alignItems="center">
           <Grid size={{ xs: 12, md: 6 }}>
             <Box display="flex" alignItems="center">
-              <Copyright sx={{ fontSize: 16, mr: 1 }} />
+              <Copyright sx={{ fontSize: 16, mr: 1, color: "white" }} />
-              <Typography variant="body2">
+              <Typography variant="body2" sx={{ color: "white" }}>
                 {currentYear} James P. Ketrenos. All rights reserved.
               </Typography>
             </Box>

frontend/src/pages/BetaPage.tsx

@@ -38,7 +38,7 @@ const BetaPage: React.FC<BetaPageProps> = ({
   const location = useLocation();
 
   if (!children) {
-    children = (<Box>Location: {location.pathname}</Box>);
+    children = (<Box sx={{ width: "100%", display: "flex", justifyContent: "center" }}>The page you requested (<b>{location.pathname.replace(/^\//, '')}</b>) is not yet read.</Box>);
   }
   console.log("BetaPage", children);
 

frontend/src/pages/HomePage.tsx

@@ -133,6 +133,8 @@ const FeatureCard = ({
 };
 
 const HomePage = () => {
+  const testimonials = false;
+
   return (<Box sx={{display: "flex", flexDirection: "column"}}>
       {/* Hero Section */}
       <HeroSection>
@@ -152,7 +154,8 @@ const HomePage = () => {
                 sx={{
                   fontWeight: 700,
                   fontSize: { xs: '2rem', md: '3rem' },
-                  mb: 2
+                  mb: 2,
+                  color: "white"
                 }}
               >
                 Your complete professional story, beyond a single page
@@ -452,6 +455,7 @@ const HomePage = () => {
       </Box>
 
       {/* Testimonials Section */}
+    {testimonials && 
       <Container sx={{ py: 8 }}>
         <Typography
           variant="h3"
@@ -472,6 +476,7 @@ const HomePage = () => {
 
         <Testimonials />
       </Container>
+    }
 
       {/* CTA Section */}
       <Box sx={{
@@ -488,7 +493,7 @@ const HomePage = () => {
             maxWidth: 800,
             mx: 'auto'
           }}>
-            <Typography variant="h3" component="h2" gutterBottom>
+          <Typography variant="h3" component="h2" gutterBottom sx={{ color: "white" }}>
               Ready to transform your hiring process?
             </Typography>
             <Typography variant="h6" sx={{ mb: 4 }}>