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
@@ -110,10 +118,15 @@ interface SocialIconsProps {
   position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 }
 
-const SocialIcons: React.FC<SocialIconsProps> = ({ 
+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,39 +143,115 @@ 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={{
+      <Box
-        position: 'fixed',
+        sx={{
-        zIndex: 1000,
+          position: 'fixed',
-        display: { xs: 'none', sm: 'flex' }, // Hide on mobile (xs), show on sm and up
+          zIndex: 1000,
-        gap: 1,
+          display: { xs: 'none', sm: 'flex' }, // Hide on mobile (xs), show on sm and up
-        ...getPositionStyling()
+          gap: 1,
-      }}
+          ...getPositionStyling()
-    >
+        }}
-      {links.map((link) => (
+      >
-        <Tooltip key={link.name} title={link.name} arrow>
+        {links.map((link) => (
-          <IconButton
+          link.isCustomerSupport ? (
-            component="a"
+            <Box
-            href={link.url}
+              key={link.name}
-            target="_blank"
+              component="a"
-            rel="noopener noreferrer"
+              href={link.url}
-            size="small"
+              onClick={(e) => handleCustomerPortalClick(e, link.name)}
-            sx={{
+              sx={{
-              color: 'white',
+                display: 'flex',
-              ...whiteGlowEffects,
+                alignItems: 'center',
-              transition: 'all 0.3s ease-in-out',
+                padding: '4px 8px',
-              '&:hover': {
+                borderRadius: '4px',
-                color: '#4fd1ff',
+                border: '1px solid white',
-                ...blueGlowEffects
+                color: 'white',
-              }
+                textDecoration: 'none',
-            }}
+                ...whiteGlowEffects,
-          >
+                transition: 'all 0.3s ease-in-out',
-            <link.icon />
+                '&:hover': {
-          </IconButton>
+                  color: '#4fd1ff',
-        </Tooltip>
+                  borderColor: '#4fd1ff',
-      ))}
+                  ...blueGlowEffects
-    </Box>
+                }
+              }}
+            >
+              <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"
+                href={link.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                size="small"
+                sx={{
+                  color: 'white',
+                  ...whiteGlowEffects,
+                  transition: 'all 0.3s ease-in-out',
+                  '&:hover': {
+                    color: '#4fd1ff',
+                    ...blueGlowEffects
+                  }
+                }}
+              >
+                <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>
   );