diff --git a/index.html b/index.html index e4b78ea..452e412 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,85 @@ - + - Vite + React + TS + + + Personal Network Manager - Build and manage your professional network + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/public/favicon.svg b/public/favicon.svg new file mode 100644 index 0000000..6bf5f16 --- /dev/null +++ b/public/favicon.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..f66eb2d --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,48 @@ +{ + "name": "Personal Network Manager", + "short_name": "Network Manager", + "description": "Build and manage your professional network with ease", + "start_url": "/", + "display": "standalone", + "background_color": "#ffffff", + "theme_color": "#1976d2", + "orientation": "portrait-primary", + "categories": ["social", "productivity", "business"], + "lang": "en", + "dir": "ltr", + "scope": "/", + "icons": [ + { + "src": "/favicon.svg", + "sizes": "any", + "type": "image/svg+xml", + "purpose": "any maskable" + }, + { + "src": "/icon-192.png", + "sizes": "192x192", + "type": "image/png", + "purpose": "any maskable" + }, + { + "src": "/icon-512.png", + "sizes": "512x512", + "type": "image/png", + "purpose": "any maskable" + } + ], + "screenshots": [ + { + "src": "/og-image.svg", + "sizes": "1200x630", + "type": "image/svg+xml", + "form_factor": "wide" + } + ], + "features": [ + "LinkedIn integration", + "Contact management", + "QR code invitations", + "Professional networking" + ] +} \ No newline at end of file diff --git a/public/og-image.html b/public/og-image.html new file mode 100644 index 0000000..b6661ea --- /dev/null +++ b/public/og-image.html @@ -0,0 +1,92 @@ + + + + + + +
+ +

Personal Network Manager

+

Build and manage your professional network with ease

+
+
+
📊
+ LinkedIn Integration +
+
+
👥
+ Contact Management +
+
+
📱
+ QR Invitations +
+
+
+ + \ No newline at end of file diff --git a/public/og-image.svg b/public/og-image.svg new file mode 100644 index 0000000..34f717b --- /dev/null +++ b/public/og-image.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + 🌐 + + + Personal Network Manager + + + Build and manage your professional network with ease + + + + 📊 LinkedIn Integration + 👥 Contact Management + 📱 QR Invitations + + + + nao-pnm-ui.pages.dev + \ No newline at end of file diff --git a/scripts/generate-og-image.js b/scripts/generate-og-image.js new file mode 100644 index 0000000..7476f23 --- /dev/null +++ b/scripts/generate-og-image.js @@ -0,0 +1,46 @@ +// Simple script to generate OG image +// This creates a placeholder - in production you'd use a proper image generation service + +const fs = require('fs'); +const path = require('path'); + +// Create a simple SVG that can be used as OG image +const svgContent = ` + + + + + + + + + + + + + + 🌐 + + + Personal Network Manager + + + Build and manage your professional network with ease + + + + 📊 LinkedIn Integration + 👥 Contact Management + 📱 QR Invitations + + + + nao-pnm-ui.pages.dev + +`; + +// Write the SVG file +fs.writeFileSync(path.join(__dirname, '../public/og-image.svg'), svgContent); + +console.log('OG image generated successfully!'); +console.log('Note: For production, convert this SVG to PNG for better social media compatibility'); \ No newline at end of file diff --git a/src/components/layout/DashboardLayout.tsx b/src/components/layout/DashboardLayout.tsx index 7bb5a11..897d82a 100644 --- a/src/components/layout/DashboardLayout.tsx +++ b/src/components/layout/DashboardLayout.tsx @@ -48,7 +48,7 @@ interface DashboardLayoutProps { const DashboardLayout = ({ children }: DashboardLayoutProps) => { const theme = useTheme(); - const isMobile = useMediaQuery(theme.breakpoints.down('lg')); + const isMobile = useMediaQuery(theme.breakpoints.down('md')); const [mobileOpen, setMobileOpen] = useState(false); const [profileMenuAnchor, setProfileMenuAnchor] = useState(null); const location = useLocation(); @@ -173,12 +173,13 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => { @@ -188,10 +189,22 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => { aria-label="open drawer" edge="start" onClick={handleDrawerToggle} - sx={{ mr: 2, display: { lg: 'none' } }} + sx={{ mr: 2, display: { md: 'none' } }} > + + Network Manager + @@ -225,7 +238,7 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => { { width: drawerWidth, borderRight: 1, borderColor: 'divider', + zIndex: isMobile ? theme.zIndex.drawer : theme.zIndex.drawer - 1, }, }} > @@ -251,13 +265,17 @@ const DashboardLayout = ({ children }: DashboardLayoutProps) => { component="main" sx={{ flexGrow: 1, - width: { lg: `calc(100% - ${drawerWidth}px)` }, + width: { md: `calc(100% - ${drawerWidth}px)` }, minHeight: '100vh', backgroundColor: 'background.default', }} > - + {children} diff --git a/src/pages/ContactViewPage.tsx b/src/pages/ContactViewPage.tsx index cbaa477..614587f 100644 --- a/src/pages/ContactViewPage.tsx +++ b/src/pages/ContactViewPage.tsx @@ -1,7 +1,6 @@ import { useState, useEffect } from 'react'; import { useParams, useNavigate } from 'react-router-dom'; import { - Container, Typography, Box, Paper, @@ -105,28 +104,34 @@ const ContactViewPage = () => { if (isLoading) { return ( - + - - - - + + + + - + ); } if (error || !contact) { return ( - + - - + + {contact.name.charAt(0)} @@ -184,13 +201,18 @@ const ContactViewPage = () => { /> - + {contact.tags?.map((tag) => ( ))} - + @@ -209,7 +231,7 @@ const ContactViewPage = () => { - + Contact Information @@ -286,7 +308,7 @@ const ContactViewPage = () => { - + Additional Information @@ -330,7 +352,7 @@ const ContactViewPage = () => { - + ); }; diff --git a/src/pages/OnboardingPage.tsx b/src/pages/OnboardingPage.tsx index 59b1d03..3d365b0 100644 --- a/src/pages/OnboardingPage.tsx +++ b/src/pages/OnboardingPage.tsx @@ -1,7 +1,6 @@ import { useEffect } from 'react'; import { useNavigate, useSearchParams } from 'react-router-dom'; import { - Container, Typography, Box, Paper, @@ -66,7 +65,7 @@ const OnboardingPage = () => { const progress = ((state.currentStep + 1) / state.totalSteps) * 100; return ( - + Welcome to Your Network @@ -81,7 +80,7 @@ const OnboardingPage = () => { )} - + @@ -101,11 +100,18 @@ const OnboardingPage = () => { {steps[state.currentStep]?.component} - + @@ -115,12 +121,13 @@ const OnboardingPage = () => { endIcon={} variant="contained" disabled={isNextDisabled()} + sx={{ width: { xs: '100%', sm: 'auto' } }} > {state.currentStep === state.totalSteps - 1 ? 'Complete' : 'Next'} - + ); };