Skip to content

Commit d8aca75

Browse files
hemanandrclaude
hemanandr
and
claude
committed
feat: transform Settings page into customer-ready "Coming Soon" experience
- Replaced technical development language with professional customer-facing copy - Added elegant hero section with Settings icon and compelling description - Created feature preview cards with Smart Notifications, Dashboard Customization, and System Management - Implemented priority badges and color-coded theming for each upcoming feature - Added interactive hover effects and modern card design - Included professional call-to-action linking to About page - Removed all mentions of "development" or technical implementation details - Designed responsive layout with full dark mode support Perfect for customer demonstrations while maintaining transparency about future features. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
1 parent 93505ab commit d8aca75

File tree

1 file changed

+183
-72
lines changed

1 file changed

+183
-72
lines changed

‎thingconnect.pulse.client/src/pages/Settings.tsx‎

Lines changed: 183 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,205 @@
1-
import { Box, Text, VStack } from '@chakra-ui/react';
2-
import { Alert } from '@/components/ui/alert';
3-
import { Bell, Palette, Database } from 'lucide-react';
1+
import {
2+
Box,
3+
Text,
4+
VStack,
5+
HStack,
6+
Heading,
7+
Container,
8+
Icon,
9+
Badge,
10+
Grid,
11+
GridItem,
12+
Button
13+
} from '@chakra-ui/react';
14+
import {
15+
Bell,
16+
Palette,
17+
Database,
18+
Settings as SettingsIcon,
19+
Clock,
20+
Sparkles,
21+
ArrowRight
22+
} from 'lucide-react';
423
import { Page } from '@/components/layout/Page';
524
import { PageContent } from '@/components/layout/PageContent';
625

726
export default function Settings() {
27+
const upcomingFeatures = [
28+
{
29+
icon: Bell,
30+
title: 'Smart Notifications',
31+
description: 'Intelligent alerts with customizable thresholds and notification channels',
32+
priority: 'High Priority',
33+
color: 'blue'
34+
},
35+
{
36+
icon: Palette,
37+
title: 'Dashboard Customization',
38+
description: 'Personalize your monitoring experience with custom themes and layouts',
39+
priority: 'Medium Priority',
40+
color: 'purple'
41+
},
42+
{
43+
icon: Database,
44+
title: 'System Management',
45+
description: 'Advanced system diagnostics and performance optimization tools',
46+
priority: 'Medium Priority',
47+
color: 'green'
48+
}
49+
];
50+
851
return (
952
<Page
1053
title='Settings'
1154
testId='settings-page'
12-
description='Configure application preferences and system settings'
55+
description='Advanced configuration and customization options'
1356
>
14-
{/* <PageHeader
15-
title="Application Settings"
16-
description="Configure application preferences and system settings"
17-
/> */}
18-
1957
<PageContent>
20-
<Alert status='info' py={2}>
21-
<Box>
22-
<Text fontWeight='medium' fontSize='sm'>
23-
Future Implementation
24-
</Text>
25-
<Text fontSize='sm' color='gray.600' _dark={{ color: 'gray.400' }} mt={1}>
26-
Settings will be implemented as needed during development.
27-
</Text>
28-
</Box>
29-
</Alert>
30-
31-
<VStack gap={2}>
32-
<Box
33-
p={4}
34-
borderRadius='md'
35-
border='2px dashed'
36-
borderColor='gray.300'
37-
_dark={{ borderColor: 'gray.600' }}
38-
w='100%'
39-
>
40-
<VStack gap={2} color='gray.500' _dark={{ color: 'gray.400' }}>
41-
<Bell size={24} />
42-
<Text textAlign='center' fontSize='sm'>
43-
<Text as='span' fontWeight='medium'>
44-
Notification Settings
45-
</Text>
46-
<br />
47-
Configure alerts, email notifications, and sound preferences
58+
<Container maxW='4xl' py={8}>
59+
{/* Hero Section */}
60+
<VStack gap={6} textAlign='center' mb={12}>
61+
<Box
62+
p={4}
63+
borderRadius='full'
64+
bg='blue.50'
65+
_dark={{ bg: 'blue.900' }}
66+
>
67+
<Icon as={SettingsIcon} boxSize={12} color='blue.500' />
68+
</Box>
69+
70+
<VStack gap={3}>
71+
<Heading size='2xl' color='gray.800' _dark={{ color: 'white' }}>
72+
Advanced Settings
73+
</Heading>
74+
<Text
75+
fontSize='lg'
76+
color='gray.600'
77+
_dark={{ color: 'gray.300' }}
78+
maxW='2xl'
79+
lineHeight='1.6'
80+
>
81+
We're crafting powerful configuration tools to give you complete control
82+
over your monitoring experience
4883
</Text>
4984
</VStack>
50-
</Box>
5185

52-
<Box
53-
p={4}
54-
borderRadius='md'
55-
border='2px dashed'
56-
borderColor='gray.300'
57-
_dark={{ borderColor: 'gray.600' }}
58-
w='100%'
59-
>
60-
<VStack gap={2} color='gray.500' _dark={{ color: 'gray.400' }}>
61-
<Palette size={24} />
62-
<Text textAlign='center' fontSize='sm'>
63-
<Text as='span' fontWeight='medium'>
64-
Display Preferences
65-
</Text>
66-
<br />
67-
Theme selection, refresh intervals, and dashboard layout options
86+
<HStack gap={2}>
87+
<Icon as={Sparkles} boxSize={5} color='blue.500' />
88+
<Badge
89+
colorPalette='blue'
90+
variant='subtle'
91+
size='lg'
92+
px={3}
93+
py={1}
94+
>
95+
Coming Soon
96+
</Badge>
97+
</HStack>
98+
</VStack>
99+
100+
{/* Features Preview */}
101+
<VStack gap={8}>
102+
<VStack gap={2} textAlign='center'>
103+
<Heading size='lg' color='gray.800' _dark={{ color: 'white' }}>
104+
What's Coming
105+
</Heading>
106+
<Text color='gray.600' _dark={{ color: 'gray.400' }}>
107+
Enhanced features to customize your monitoring experience
68108
</Text>
69109
</VStack>
70-
</Box>
71110

72-
<Box
73-
p={4}
74-
borderRadius='md'
75-
border='2px dashed'
76-
borderColor='gray.300'
77-
_dark={{ borderColor: 'gray.600' }}
78-
w='100%'
79-
>
80-
<VStack gap={2} color='gray.500' _dark={{ color: 'gray.400' }}>
81-
<Database size={24} />
82-
<Text textAlign='center' fontSize='sm'>
83-
<Text as='span' fontWeight='medium'>
84-
System Information
111+
<Grid templateColumns={{ base: '1fr', md: 'repeat(1, 1fr)' }} gap={6} w='100%'>
112+
{upcomingFeatures.map((feature, index) => (
113+
<GridItem key={index}>
114+
<Box
115+
p={6}
116+
borderRadius='xl'
117+
border='1px solid'
118+
borderColor='gray.200'
119+
_dark={{
120+
borderColor: 'gray.700',
121+
bg: 'gray.800'
122+
}}
123+
bg='white'
124+
shadow='sm'
125+
transition='all 0.2s'
126+
_hover={{
127+
shadow: 'md',
128+
transform: 'translateY(-2px)',
129+
borderColor: 'blue.300',
130+
_dark: { borderColor: 'blue.600' }
131+
}}
132+
>
133+
<HStack gap={4} align='start'>
134+
<Box
135+
p={3}
136+
borderRadius='lg'
137+
bg={`${feature.color}.50`}
138+
_dark={{ bg: `${feature.color}.900` }}
139+
>
140+
<Icon
141+
as={feature.icon}
142+
boxSize={6}
143+
color={`${feature.color}.500`}
144+
/>
145+
</Box>
146+
147+
<VStack align='start' flex='1' gap={2}>
148+
<HStack justify='space-between' w='100%'>
149+
<Heading size='md' color='gray.800' _dark={{ color: 'white' }}>
150+
{feature.title}
151+
</Heading>
152+
<Badge
153+
colorPalette={feature.color}
154+
variant='subtle'
155+
size='sm'
156+
>
157+
{feature.priority}
158+
</Badge>
159+
</HStack>
160+
161+
<Text
162+
color='gray.600'
163+
_dark={{ color: 'gray.300' }}
164+
lineHeight='1.5'
165+
>
166+
{feature.description}
167+
</Text>
168+
</VStack>
169+
</HStack>
170+
</Box>
171+
</GridItem>
172+
))}
173+
</Grid>
174+
</VStack>
175+
176+
{/* Call to Action */}
177+
<VStack gap={4} textAlign='center' mt={12} pt={8} borderTop='1px solid' borderColor='gray.200' _dark={{ borderColor: 'gray.700' }}>
178+
<VStack gap={2}>
179+
<HStack gap={2} color='gray.500' _dark={{ color: 'gray.400' }}>
180+
<Icon as={Clock} boxSize={4} />
181+
<Text fontSize='sm' fontWeight='medium'>
182+
Updates coming in future releases
85183
</Text>
86-
<br />
87-
Database status, service information, and application version details
184+
</HStack>
185+
186+
<Text fontSize='sm' color='gray.500' _dark={{ color: 'gray.400' }}>
187+
Continue monitoring with the current powerful features while we build these enhancements
88188
</Text>
89189
</VStack>
90-
</Box>
91-
</VStack>
190+
191+
<Button
192+
variant='outline'
193+
colorPalette='blue'
194+
size='sm'
195+
as='a'
196+
href='/about'
197+
rightIcon={<ArrowRight size={16} />}
198+
>
199+
Learn More About ThingConnect Pulse
200+
</Button>
201+
</VStack>
202+
</Container>
92203
</PageContent>
93204
</Page>
94205
);

0 commit comments

Comments
 (0)