Skip to content

Commit 9f0a450

Browse files
kasvithkasvith
committed
feat: redesign community section with dual connection cards
- Add WhatsApp Channel link alongside existing Community link - Create dual-card layout with Community (green) and Updates Channel (cyan) - Add QR codes in dedicated right-side panels for both cards - Make layout responsive: stacks on mobile, side-by-side on desktop
1 parent 9ff4e5e commit 9f0a450

File tree

3 files changed

+170
-78
lines changed

3 files changed

+170
-78
lines changed

‎resources/whatsapp-channel-qr.png‎

1.59 KB
Loading

‎src/renderer/src/components/support/CommunitySection.tsx‎

Lines changed: 169 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,205 @@
11
import { Card, CardContent } from '@renderer/components/ui/card'
22
import { Button } from '@renderer/components/ui/button'
3-
import { MessageCircle, Bell, HelpCircle, Users, ExternalLink, Sparkles } from 'lucide-react'
3+
import {
4+
MessageCircle,
5+
Bell,
6+
HelpCircle,
7+
Users,
8+
ExternalLink,
9+
MessageSquare,
10+
Newspaper,
11+
Lightbulb,
12+
Radio
13+
} from 'lucide-react'
414
import { EXTERNAL_LINKS } from '@shared/constants/links'
5-
import whatsappQr from '../../../../../resources/whatsapp-qr.png?asset'
15+
import whatsappCommunityQr from '../../../../../resources/whatsapp-qr.png?asset'
16+
import whatsappChannelQr from '../../../../../resources/whatsapp-channel-qr.png?asset'
617

718
export const CommunitySection = () => {
8-
const benefits = [
9-
{
10-
icon: <Bell className="h-4 w-4" />,
11-
title: 'Latest Updates',
12-
description: 'New releases & features'
13-
},
19+
const communityBenefits = [
1420
{
1521
icon: <HelpCircle className="h-4 w-4" />,
1622
title: 'Quick Support',
17-
description: 'Help from the team'
23+
description: 'Get instant help from the team'
24+
},
25+
{
26+
icon: <MessageSquare className="h-4 w-4" />,
27+
title: 'Share Feedback',
28+
description: 'Help shape the app'
1829
},
1930
{
2031
icon: <Users className="h-4 w-4" />,
2132
title: 'Connect',
22-
description: 'Healthcare professionals'
33+
description: 'With healthcare peers'
34+
}
35+
]
36+
37+
const channelBenefits = [
38+
{
39+
icon: <Newspaper className="h-4 w-4" />,
40+
title: 'Release Notes',
41+
description: 'New version announcements'
42+
},
43+
{
44+
icon: <Bell className="h-4 w-4" />,
45+
title: 'New Features',
46+
description: 'Feature highlights'
47+
},
48+
{
49+
icon: <Lightbulb className="h-4 w-4" />,
50+
title: 'Tips & Guides',
51+
description: 'Get more from Op Notes'
2352
}
2453
]
2554

2655
return (
2756
<div className="space-y-6">
2857
{/* Header */}
29-
<div className="animate-fade-in-up">
30-
<h2 className="text-lg font-semibold mb-1">Join Our Community</h2>
58+
<div className="animate-fade-in-up text-center">
59+
<h2 className="text-lg font-semibold mb-1">Connect With Us</h2>
3160
<p className="text-sm text-muted-foreground">
32-
Connect with other Op Notes users and the WaveZync team.
61+
Join our community for support or follow our channel for updates.
3362
</p>
3463
</div>
3564

36-
{/* Main Community Card */}
37-
<Card
38-
className="bg-gradient-to-br from-green-500/10 via-emerald-500/5 to-teal-500/10 border-green-500/20 overflow-hidden animate-fade-in-up"
39-
style={{ animationDelay: '50ms' }}
40-
>
41-
<CardContent className="p-0">
42-
<div className="flex flex-col md:flex-row">
43-
{/* Left Section - Main Content */}
44-
<div className="flex-1 p-6">
45-
{/* Badge */}
46-
<div className="flex items-center gap-2 mb-3">
47-
<div className="h-8 w-8 rounded-lg bg-green-500/20 flex items-center justify-center">
48-
<MessageCircle className="h-4 w-4 text-green-600" />
65+
{/* Dual Card Layout */}
66+
<div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
67+
{/* Community Card - Green/Emerald */}
68+
<Card
69+
className="relative bg-gradient-to-br from-emerald-500/10 via-green-500/5 to-teal-500/10 border-emerald-500/20 overflow-hidden animate-fade-in-up h-full"
70+
style={{ animationDelay: '50ms' }}
71+
>
72+
{/* Decorative elements */}
73+
<div className="absolute top-0 right-0 w-32 h-32 bg-emerald-500/5 rounded-full -translate-y-1/2 translate-x-1/2" />
74+
<div className="absolute bottom-0 left-0 w-24 h-24 bg-green-500/5 rounded-full translate-y-1/2 -translate-x-1/2" />
75+
76+
<CardContent className="p-0 relative">
77+
<div className="flex flex-col md:flex-row">
78+
{/* Left Section - Content */}
79+
<div className="flex-1 p-6">
80+
{/* Badge */}
81+
<div className="flex items-center gap-2 mb-3">
82+
<div className="h-9 w-9 rounded-xl bg-gradient-to-br from-emerald-500/20 to-green-500/20 flex items-center justify-center shadow-sm">
83+
<MessageCircle className="h-4.5 w-4.5 text-emerald-600" />
84+
</div>
85+
<span className="text-xs font-medium text-emerald-600 bg-emerald-500/10 px-2.5 py-1 rounded-full">
86+
Community
87+
</span>
4988
</div>
50-
<span className="text-xs font-medium text-green-600 bg-green-500/10 px-2 py-0.5 rounded-full">
51-
Active Community
52-
</span>
53-
</div>
5489

55-
<h3 className="text-xl font-bold mb-2">WhatsApp Community</h3>
56-
<p className="text-sm text-muted-foreground mb-5">
57-
Join our active WhatsApp community to get instant support, share feedback, and
58-
connect with healthcare professionals using Op Notes.
59-
</p>
90+
<h3 className="text-lg font-bold mb-1">WhatsApp Community</h3>
91+
<p className="text-sm text-muted-foreground mb-4">
92+
Get instant support & connect with peers
93+
</p>
6094

61-
{/* QR + Button row */}
62-
<div className="flex items-center gap-4">
63-
<div className="flex-shrink-0">
64-
<div className="p-2 bg-white rounded-lg shadow-sm ring-1 ring-green-500/10">
65-
<img src={whatsappQr} alt="WhatsApp QR Code" className="w-20 h-20" />
66-
</div>
67-
<p className="text-[10px] text-muted-foreground text-center mt-1">Scan to join</p>
95+
{/* Benefits */}
96+
<div className="space-y-2.5">
97+
{communityBenefits.map((benefit, index) => (
98+
<div
99+
key={benefit.title}
100+
className="flex items-center gap-3 animate-fade-in-up"
101+
style={{ animationDelay: `${(index + 2) * 50}ms` }}
102+
>
103+
<div className="h-7 w-7 rounded-lg bg-white/80 dark:bg-white/10 flex items-center justify-center flex-shrink-0 shadow-sm">
104+
<span className="text-emerald-600">{benefit.icon}</span>
105+
</div>
106+
<div className="min-w-0">
107+
<span className="text-sm font-medium">{benefit.title}</span>
108+
<span className="text-xs text-muted-foreground ml-2">
109+
{benefit.description}
110+
</span>
111+
</div>
112+
</div>
113+
))}
68114
</div>
69-
<div className="flex flex-col gap-2">
70-
<Button
71-
className="bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white shadow-sm"
72-
onClick={() => window.open(EXTERNAL_LINKS.WHATSAPP_COMMUNITY, '_blank')}
73-
>
74-
<MessageCircle className="h-4 w-4 mr-2" />
75-
Join Community
76-
<ExternalLink className="h-3 w-3 ml-2" />
77-
</Button>
78-
<p className="text-xs text-muted-foreground">Or scan QR code</p>
115+
</div>
116+
117+
{/* Right Section - QR Code & Button */}
118+
<div className="w-full md:w-52 flex-shrink-0 bg-gradient-to-b md:bg-gradient-to-br from-emerald-500/5 to-green-500/10 border-t md:border-t-0 md:border-l border-emerald-500/10 p-5 flex flex-col items-center justify-center gap-4">
119+
<div className="p-2.5 bg-white rounded-xl shadow-lg ring-1 ring-emerald-500/20">
120+
<img src={whatsappCommunityQr} alt="Community QR Code" className="w-32 h-32" />
79121
</div>
122+
<p className="text-xs text-muted-foreground text-center">Scan with your phone</p>
123+
<Button
124+
className="bg-gradient-to-r from-emerald-500 to-green-500 hover:from-emerald-600 hover:to-green-600 text-white shadow-sm w-full"
125+
onClick={() => window.open(EXTERNAL_LINKS.WHATSAPP_COMMUNITY, '_blank')}
126+
>
127+
<MessageCircle className="h-4 w-4 mr-2" />
128+
Join
129+
<ExternalLink className="h-3 w-3 ml-2" />
130+
</Button>
80131
</div>
81132
</div>
133+
</CardContent>
134+
</Card>
82135

83-
{/* Right Section - Benefits */}
84-
<div className="w-full md:w-56 flex-shrink-0 bg-gradient-to-b from-green-500/5 to-emerald-500/10 border-t md:border-t-0 md:border-l border-green-500/10 p-5">
85-
<div className="flex items-center gap-2 mb-4">
86-
<Sparkles className="h-4 w-4 text-green-600" />
87-
<h4 className="text-sm font-semibold text-green-700 dark:text-green-400">
88-
Why Join?
89-
</h4>
90-
</div>
91-
<div className="flex flex-row md:flex-col gap-4">
92-
{benefits.map((benefit, index) => (
93-
<div
94-
key={benefit.title}
95-
className="flex items-start gap-3 flex-1 md:flex-none animate-fade-in-up"
96-
style={{ animationDelay: `${(index + 2) * 50}ms` }}
97-
>
98-
<div className="h-8 w-8 rounded-lg bg-white/80 dark:bg-white/10 flex items-center justify-center flex-shrink-0 shadow-sm">
99-
<span className="text-green-600">{benefit.icon}</span>
100-
</div>
101-
<div className="min-w-0">
102-
<h5 className="text-sm font-medium">{benefit.title}</h5>
103-
<p className="text-xs text-muted-foreground">{benefit.description}</p>
104-
</div>
136+
{/* Channel Card - Cyan/Blue */}
137+
<Card
138+
className="relative bg-gradient-to-br from-cyan-500/10 via-blue-500/5 to-sky-500/10 border-cyan-500/20 overflow-hidden animate-fade-in-up h-full"
139+
style={{ animationDelay: '100ms' }}
140+
>
141+
{/* Decorative elements */}
142+
<div className="absolute top-0 right-0 w-32 h-32 bg-cyan-500/5 rounded-full -translate-y-1/2 translate-x-1/2" />
143+
<div className="absolute bottom-0 left-0 w-24 h-24 bg-blue-500/5 rounded-full translate-y-1/2 -translate-x-1/2" />
144+
145+
<CardContent className="p-0 relative">
146+
<div className="flex flex-col md:flex-row">
147+
{/* Left Section - Content */}
148+
<div className="flex-1 p-6">
149+
{/* Badge */}
150+
<div className="flex items-center gap-2 mb-3">
151+
<div className="h-9 w-9 rounded-xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center shadow-sm">
152+
<Radio className="h-4.5 w-4.5 text-cyan-600" />
105153
</div>
106-
))}
154+
<span className="text-xs font-medium text-cyan-600 bg-cyan-500/10 px-2.5 py-1 rounded-full">
155+
Updates
156+
</span>
157+
</div>
158+
159+
<h3 className="text-lg font-bold mb-1">Updates Channel</h3>
160+
<p className="text-sm text-muted-foreground mb-4">Never miss an important update</p>
161+
162+
{/* Benefits */}
163+
<div className="space-y-2.5">
164+
{channelBenefits.map((benefit, index) => (
165+
<div
166+
key={benefit.title}
167+
className="flex items-center gap-3 animate-fade-in-up"
168+
style={{ animationDelay: `${(index + 3) * 50}ms` }}
169+
>
170+
<div className="h-7 w-7 rounded-lg bg-white/80 dark:bg-white/10 flex items-center justify-center flex-shrink-0 shadow-sm">
171+
<span className="text-cyan-600">{benefit.icon}</span>
172+
</div>
173+
<div className="min-w-0">
174+
<span className="text-sm font-medium">{benefit.title}</span>
175+
<span className="text-xs text-muted-foreground ml-2">
176+
{benefit.description}
177+
</span>
178+
</div>
179+
</div>
180+
))}
181+
</div>
182+
</div>
183+
184+
{/* Right Section - QR Code & Button */}
185+
<div className="w-full md:w-52 flex-shrink-0 bg-gradient-to-b md:bg-gradient-to-br from-cyan-500/5 to-blue-500/10 border-t md:border-t-0 md:border-l border-cyan-500/10 p-5 flex flex-col items-center justify-center gap-4">
186+
<div className="p-2.5 bg-white rounded-xl shadow-lg ring-1 ring-cyan-500/20">
187+
<img src={whatsappChannelQr} alt="Channel QR Code" className="w-32 h-32" />
188+
</div>
189+
<p className="text-xs text-muted-foreground text-center">Scan with your phone</p>
190+
<Button
191+
className="bg-gradient-to-r from-cyan-500 to-blue-500 hover:from-cyan-600 hover:to-blue-600 text-white shadow-sm w-full"
192+
onClick={() => window.open(EXTERNAL_LINKS.WHATSAPP_CHANNEL, '_blank')}
193+
>
194+
<Radio className="h-4 w-4 mr-2" />
195+
Follow
196+
<ExternalLink className="h-3 w-3 ml-2" />
197+
</Button>
107198
</div>
108199
</div>
109-
</div>
110-
</CardContent>
111-
</Card>
200+
</CardContent>
201+
</Card>
202+
</div>
112203

113204
{/* Community Guidelines */}
114205
<div

‎src/shared/constants/links.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export const EXTERNAL_LINKS = {
22
WHATSAPP_COMMUNITY: 'https://chat.whatsapp.com/L4LMwxsbjPk514I1ToRris',
3+
WHATSAPP_CHANNEL: 'https://whatsapp.com/channel/0029Vb7YdWx1NCrOKl0GOE3h',
34
GITHUB_REPO: 'https://github.com/wavezync/opnotes',
45
GITHUB_ISSUES: 'https://github.com/wavezync/opnotes/issues',
56
GITHUB_DISCUSSIONS: 'https://github.com/wavezync/opnotes/discussions'

0 commit comments

Comments
 (0)