Skip to content

Commit 6edb312

Browse files
tolalengtolaleng
committed
Add notification system section
- This section is feature a description of the notification system
1 parent c31b6ee commit 6edb312

File tree

9 files changed

+149
-0
lines changed

9 files changed

+149
-0
lines changed

‎public/uploads/notification/discord.png‎

35.2 KB
Loading

‎public/uploads/notification/email.png‎

19.7 KB
Loading

‎public/uploads/notification/google.png‎

34.5 KB
Loading

‎public/uploads/notification/signal.png‎

41.5 KB
Loading

‎public/uploads/notification/slack.png‎

24.6 KB
Loading

‎public/uploads/notification/telegram.png‎

23.7 KB
Loading

‎public/uploads/notification/webhook.png‎

24 KB
Loading

‎src/components/NotificationSystem.tsx‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
2+
import React from 'react';
3+
4+
const NotificationSystem = () => {
5+
const notificationChannels = [
6+
{
7+
name: "Email",
8+
logo: "/uploads/notification/email.png",
9+
alt: "Email notifications"
10+
},
11+
{
12+
name: "Google Chat",
13+
logo: "/uploads/notification/google.png",
14+
alt: "SMS notifications"
15+
},
16+
{
17+
name: "Slack",
18+
logo: "/uploads/notification/slack.png",
19+
alt: "Slack notifications"
20+
},
21+
{
22+
name: "Discord",
23+
logo: "/uploads/notification/discord.png",
24+
alt: "Discord notifications"
25+
},
26+
{
27+
name: "Telegram",
28+
logo: "/uploads/notification/telegram.png",
29+
alt: "Telegram notifications"
30+
},
31+
{
32+
name: "Signal",
33+
logo: "/uploads/notification/signal.png",
34+
alt: "Signal notifications"
35+
},
36+
{
37+
name: "Webhook",
38+
logo: "/uploads/notification/webhook.png",
39+
alt: "Webhook notifications"
40+
},
41+
];
42+
43+
return (
44+
<section className="py-20 relative bg-black overflow-hidden">
45+
<div className="shooting-stars absolute inset-0 z-0"></div>
46+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
47+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
48+
{/* Left side - Static grid of logos */}
49+
<div className="relative flex justify-center items-center">
50+
<div className="grid grid-cols-4 gap-6 w-full max-w-2xl">
51+
{notificationChannels.map((channel) => (
52+
<div
53+
key={channel.name}
54+
className="group relative bg-gradient-to-br from-gray-800/80 to-gray-900/80 backdrop-blur-sm border border-gray-700/30 rounded-xl p-4 flex flex-col items-center justify-center hover:from-emerald-900/20 hover:to-gray-800/80 transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-emerald-500/10"
55+
>
56+
<div className="w-12 h-12 mb-2 flex items-center justify-center">
57+
<img
58+
src={channel.logo}
59+
alt={channel.alt}
60+
className="w-10 h-10 object-contain group-hover:scale-110 transition-transform duration-300"
61+
/>
62+
</div>
63+
<span className="text-xs font-medium text-gray-400 group-hover:text-emerald-400 transition-colors duration-300 text-center">
64+
{channel.name}
65+
</span>
66+
</div>
67+
))}
68+
</div>
69+
</div>
70+
71+
{/* Right side - Content */}
72+
<div className="space-y-8">
73+
<div>
74+
<h2 className="text-4xl md:text-5xl font-bold text-white mb-6">
75+
Powerful Notification System
76+
</h2>
77+
<p className="text-lg md:text-xl text-gray-400 mb-8">
78+
Stay informed instantly with our comprehensive multi-channel notification system.
79+
Get alerts through your preferred communication channels the moment issues are detected.
80+
</p>
81+
</div>
82+
83+
<div className="space-y-6">
84+
<div className="flex items-start space-x-4">
85+
<div className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-500 flex items-center justify-center mt-1">
86+
<svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
87+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
88+
</svg>
89+
</div>
90+
<div>
91+
<h3 className="text-xl font-semibold text-white mb-2">Multi-Channel Delivery</h3>
92+
<p className="text-gray-400">
93+
Send notifications via Email, SMS, Slack, Discord, Telegram, WhatsApp, Teams, and custom webhooks.
94+
</p>
95+
</div>
96+
</div>
97+
98+
<div className="flex items-start space-x-4">
99+
<div className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-500 flex items-center justify-center mt-1">
100+
<svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
101+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
102+
</svg>
103+
</div>
104+
<div>
105+
<h3 className="text-xl font-semibold text-white mb-2">Smart Escalation</h3>
106+
<p className="text-gray-400">
107+
Automatic escalation policies ensure critical alerts reach the right people at the right time.
108+
</p>
109+
</div>
110+
</div>
111+
112+
<div className="flex items-start space-x-4">
113+
<div className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-500 flex items-center justify-center mt-1">
114+
<svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
115+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
116+
</svg>
117+
</div>
118+
<div>
119+
<h3 className="text-xl font-semibold text-white mb-2">Custom Templates</h3>
120+
<p className="text-gray-400">
121+
Personalize notification content with custom templates and dynamic variables for each channel.
122+
</p>
123+
</div>
124+
</div>
125+
126+
<div className="flex items-start space-x-4">
127+
<div className="flex-shrink-0 w-6 h-6 rounded-full bg-emerald-500 flex items-center justify-center mt-1">
128+
<svg className="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
129+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
130+
</svg>
131+
</div>
132+
<div>
133+
<h3 className="text-xl font-semibold text-white mb-2">Delivery Tracking</h3>
134+
<p className="text-gray-400">
135+
Monitor notification delivery status and get insights into your team's response times.
136+
</p>
137+
</div>
138+
</div>
139+
</div>
140+
</div>
141+
</div>
142+
</div>
143+
</section>
144+
);
145+
};
146+
147+
export default NotificationSystem;

‎src/pages/Index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import Challenges from '../components/Challenges';
66
import Features from '../components/Features';
77
import Screenshots from '../components/Screenshots';
88
import TechStack from '../components/TechStack';
9+
import NotificationSystem from '../components/NotificationSystem';
910
import Installation from '../components/Installation';
1011
import FAQ from '../components/FAQ';
1112
import Footer from '../components/Footer';
@@ -18,6 +19,7 @@ const Index = () => {
1819
<Challenges />
1920
<Features />
2021
<Screenshots />
22+
<NotificationSystem />
2123
<TechStack />
2224
<Installation />
2325
<FAQ />

0 commit comments

Comments
 (0)