Skip to content

Commit 96c45c1

Browse files
MD-IRFAN-RAJMD-IRFAN-RAJ
authored
Merge pull request #54 from indrasuthar07/feat/ui-improve
feat: improve home page ui
2 parents cbf41fe + 20ff32e commit 96c45c1

4 files changed

Lines changed: 108 additions & 26 deletions

File tree

‎frontend/package-lock.json‎

Lines changed: 12 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/components/Navbar.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useState } from "react";
22
import { Link, useLocation } from "react-router-dom";
33
import { Menu, X } from "lucide-react";
44
import { motion, AnimatePresence } from "framer-motion";
5-
5+
import { Mail } from "lucide-react";
66
export default function Navbar() {
77
const [isOpen, setIsOpen] = useState(false);
88
const location = useLocation();
@@ -23,14 +23,15 @@ export default function Navbar() {
2323
initial={{ opacity: 0, y: -10 }}
2424
animate={{ opacity: 1, y: 0 }}
2525
transition={{ duration: 0.4 }}
26-
className="w-full sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200"
26+
className="w-full sticky top-0 z-50 bg-gray-300 backdrop-blur-md border-b border-gray-200"
2727
>
2828
<div className="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
2929
{/* Logo */}
3030
<Link
3131
to="/"
32-
className="text-2xl font-semibold text-slate-800 tracking-tight"
32+
className="flex gap-4 text-2xl font-semibold text-slate-800 tracking-tight"
3333
>
34+
<Mail className="w-8 h-8 text-gray-500" />
3435
MailMERN
3536
</Link>
3637

‎frontend/src/pages/Home.jsx‎

Lines changed: 87 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,97 @@
11
import React from "react";
2+
import { useNavigate } from "react-router-dom";
23
import ChatbotWidget from "../components/ChatbotWidget";
4+
import {Mail,Brain, BarChart3, Send, Users, Sparkles, Github } from "lucide-react";
35

46
export default function Home() {
7+
const navigate = useNavigate();
8+
59
return (
6-
<div className="page home">
7-
<h1>Welcome to MailMERN 🚀</h1>
8-
<p>
9-
This is the open-source MERN starter to build a Mass Email &
10-
Smart Reply System.
11-
</p>
12-
13-
<div className="mt-8 p-6 bg-blue-50 border border-blue-200 rounded-lg">
14-
<h2 className="text-xl font-semibold text-blue-900 mb-3">🤖 Try Our AI Assistant</h2>
15-
<p className="text-blue-800 mb-4">
16-
Click the chat button in the bottom right corner to interact with our AI assistant.
17-
It can help you with questions about features, pricing, support, and more!
10+
<div className="relative min-h-screen bg-gradient-to-br from-gray-200 via-white to-gray-200 overflow-hidden text-gray-800">
11+
<div className="absolute top-0 left-0 w-96 h-96 bg-gray-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse"></div>
12+
<div className="absolute bottom-0 right-0 w-96 h-96 bg-gray-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-pulse"></div>
13+
14+
<section className="text-center px-6 md:px-20 mt-20">
15+
<h2 className="text-5xl md:text-6xl font-extrabold text-black leading-tight">
16+
Automate Conversations.<br />
17+
<span className="text-gray-500">Scale Your Email Marketing.</span>
18+
</h2>
19+
<p className="mt-6 text-lg text-gray-600 max-w-2xl mx-auto">
20+
Build, send, and automate your email campaigns with <strong>AI-powered assistance</strong>.
21+
MailMERN helps you send mass emails, reply smartly, and manage campaigns — all open-source and built with MERN.
1822
</p>
19-
<div className="flex flex-wrap gap-2">
20-
<span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Ask about features</span>
21-
<span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Get pricing info</span>
22-
<span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Request support</span>
23-
<span className="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">General questions</span>
23+
24+
<div className="mt-8 flex justify-center gap-4">
25+
<button
26+
onClick={() => navigate("/login")}
27+
className="px-6 py-3 flex gap-2 bg-gray-500 text-white rounded-full font-semibold hover:bg-gray-700 transition-all duration-300"
28+
>
29+
<Send className="w-6 h-6 text-white" />
30+
Start Now
31+
</button>
32+
<a
33+
href="https://github.com/OPCODE-Open-Spring-Fest/MailMERN"
34+
target="_blank"
35+
rel="noopener noreferrer"
36+
className="px-6 py-3 flex gap-2 border border-gray-500 text-gray-700 rounded-full font-semibold hover:bg-gray-50 transition-all duration-300"
37+
>
38+
<Github className="w-6 h-6 text-gray-700" />
39+
View on GitHub
40+
</a>
41+
</div>
42+
</section>
43+
44+
{/*Features*/}
45+
<section className="mt-24 px-6 mb-24 md:px-20">
46+
<h3 className="text-center text-3xl font-bold text-gray-900 mb-10">
47+
Powerful Features of MailMERN
48+
</h3>
49+
<div className="grid md:grid-cols-3 gap-8">
50+
{[
51+
{
52+
icon: <Send className="w-8 h-8 text-gray-500" />,
53+
title: "Mass Email Sending",
54+
desc: "Send thousands of personalized emails with one click using secure SMTP or API integrations."
55+
},
56+
{
57+
icon: <Brain className="w-8 h-8 text-gray-500" />,
58+
title: "AI Auto-Responder",
59+
desc: "Automatically reply to user queries, schedule meetings, and answer FAQs with AI."
60+
},
61+
{
62+
icon: <BarChart3 className="w-8 h-8 text-gray-500" />,
63+
title: "Analytics Dashboard",
64+
desc: "Track open rates, clicks, and engagement metrics in real-time with visual insights."
65+
},
66+
{
67+
icon: <Users className="w-8 h-8 text-gray-500" />,
68+
title: "Contact Management",
69+
desc: "Upload, segment, and manage your contact lists with ease using MongoDB integration."
70+
},
71+
{
72+
icon: <Sparkles className="w-8 h-8 text-gray-500" />,
73+
title: "Smart Scheduling",
74+
desc: "Schedule campaigns and follow-ups automatically using Node Cron."
75+
},
76+
{
77+
icon: <Mail className="w-8 h-8 text-gray-500" />,
78+
title: "Template Builder",
79+
desc: "Design professional HTML email templates with custom layouts and reusable blocks."
80+
},
81+
].map((feature, idx) => (
82+
<div
83+
key={idx}
84+
className="bg-white/70 backdrop-blur-lg border border-gray-100 shadow-md rounded-2xl p-6 hover:shadow-lg hover:-translate-y-1 transition-all duration-300"
85+
>
86+
<div className="flex items-center gap-3 mb-3">
87+
{feature.icon}
88+
<h4 className="text-lg font-semibold text-gray-900">{feature.title}</h4>
89+
</div>
90+
<p className="text-gray-600 text-sm">{feature.desc}</p>
91+
</div>
92+
))}
2493
</div>
25-
</div>
26-
94+
</section>
2795
<ChatbotWidget />
2896
</div>
2997
);

‎package-lock.json‎

Lines changed: 5 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)