fix

src/components/SocialIcons.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
-import { Box, IconButton, Tooltip, SvgIcon } from '@mui/material';
+import { Box, IconButton, Tooltip, SvgIcon, Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField } from '@mui/material';
 import GitHubIcon from '@mui/icons-material/GitHub';
 import LinkedInIcon from '@mui/icons-material/LinkedIn';
+import PersonIcon from '@mui/icons-material/Person';
 import { SvgIconProps } from '@mui/material/SvgIcon';
 
 // Custom icons for platforms without MUI icons
@@ -53,6 +54,7 @@ export interface SocialLink {
   name: string;
   url: string;
   icon: React.ElementType;
+  isCustomerSupport?: boolean;
 }
 
 // Default social links
@@ -92,6 +94,12 @@ const defaultSocialLinks: SocialLink[] = [
     url: 'https://chat.d4m13n.dev',
     icon: AIIcon,
   },
+  {
+    name: 'Customer Portal',
+    url: 'calicoastrp.d4m13n.dev',
+    icon: PersonIcon,
+    isCustomerSupport: true, // Flag to identify customer support button
+  },
 ];
 
 // Glow effects
@@ -114,6 +122,11 @@ const SocialIcons: React.FC<SocialIconsProps> = ({
   links = defaultSocialLinks,
   position = 'top-right'
 }) => {
+  // State for customer portal dialog
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [name, setName] = useState('');
+  const [error, setError] = useState(false);
+
   // Determine position styling
   const getPositionStyling = () => {
     switch (position) {
@@ -130,7 +143,27 @@ const SocialIcons: React.FC<SocialIconsProps> = ({
     }
   };
 
+  // Handle customer portal button click
+  const handleCustomerPortalClick = (e: React.MouseEvent, linkName: string) => {
+    if (linkName === 'Customer Portal') {
+      e.preventDefault();
+      setDialogOpen(true);
+      setName('');
+      setError(false);
+    }
+  };
+
+  // Handle name submission
+  const handleSubmit = () => {
+    if (name === 'cali-coast') {
+      window.location.href = 'https://0.0.0.0/';
+    } else {
+      setError(true);
+    }
+  };
+
   return (
+    <>
       <Box
         sx={{
           position: 'fixed',
@@ -141,6 +174,35 @@ const SocialIcons: React.FC<SocialIconsProps> = ({
         }}
       >
         {links.map((link) => (
+          link.isCustomerSupport ? (
+            <Box
+              key={link.name}
+              component="a"
+              href={link.url}
+              onClick={(e) => handleCustomerPortalClick(e, link.name)}
+              sx={{
+                display: 'flex',
+                alignItems: 'center',
+                padding: '4px 8px',
+                borderRadius: '4px',
+                border: '1px solid white',
+                color: 'white',
+                textDecoration: 'none',
+                ...whiteGlowEffects,
+                transition: 'all 0.3s ease-in-out',
+                '&:hover': {
+                  color: '#4fd1ff',
+                  borderColor: '#4fd1ff',
+                  ...blueGlowEffects
+                }
+              }}
+            >
+              <link.icon sx={{ mr: 1 }} />
+              <Box component="span" sx={{ fontSize: '0.875rem', fontWeight: 'medium' }}>
+                Customer Portal
+              </Box>
+            </Box>
+          ) : (
             <Tooltip key={link.name} title={link.name} arrow>
               <IconButton
                 component="a"
@@ -161,8 +223,35 @@ const SocialIcons: React.FC<SocialIconsProps> = ({
                 <link.icon />
               </IconButton>
             </Tooltip>
+          )
         ))}
       </Box>
+
+      {/* Customer Portal Dialog */}
+      <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)}>
+        <DialogTitle>Customer Portal</DialogTitle>
+        <DialogContent>
+          <TextField
+            autoFocus
+            margin="dense"
+            label="Enter your customer name"
+            type="text"
+            fullWidth
+            variant="outlined"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            error={error}
+            helperText={error ? "Invalid customer name" : ""}
+          />
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDialogOpen(false)}>Cancel</Button>
+          <Button onClick={handleSubmit} variant="contained" color="primary">
+            Submit
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
   );
 };
 

src/components/Timeline/TimelineItem.tsx

@@ -139,36 +139,6 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
         <Typography variant="body1" paragraph>
           {item.description}
         </Typography>
-        
-        <MasonryGrid 
-          items={item.items} 
-          isVisible={isVisible}
-          animationDelay={index * 200 + 200} // Delay after the content fades in
-        />
-        
-        {item.actionUrl && (
-          <Box sx={{ display: 'flex', justifyContent: 'center', mt: 2, width: '100%' }}>
-            <Button
-              variant="contained"
-              endIcon={<ArrowForwardIcon />}
-              href={item.actionUrl}
-              fullWidth
-              sx={{
-                backgroundColor: 'rgba(79, 209, 255, 0.8)', // Bright blue like d4m13n.dev
-                color: 'white', // White text
-                textAlign: 'center',
-                justifyContent: 'center',
-                ...buttonHoverEffects,
-                '&:hover': {
-                  ...buttonHoverEffects['&:hover'],
-                  backgroundColor: 'rgba(79, 209, 255, 0.9)', // Slightly brighter on hover
-                }
-              }}
-            >
-              {item.actionText || 'Go to'}
-            </Button>
-          </Box>
-        )}
       </Paper>
     </Fade>
   );