From 20ff32ef2ecbdf70d349f7c071488873591ec56f Mon Sep 17 00:00:00 2001 From: indar suthar Date: Mon, 3 Nov 2025 14:58:18 +0530 Subject: [PATCH] feat: improve home page ui --- frontend/package-lock.json | 13 +++- frontend/src/components/Navbar.jsx | 7 +- frontend/src/pages/Home.jsx | 106 +++++++++++++++++++++++------ package-lock.json | 8 ++- 4 files changed, 108 insertions(+), 26 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 2c39f2c..68373a2 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -80,6 +80,7 @@ "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.3", @@ -1817,6 +1818,7 @@ "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==", "devOptional": true, "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.0.2" } @@ -1871,6 +1873,7 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2121,6 +2124,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.19", "caniuse-lite": "^1.0.30001751", @@ -2762,6 +2766,7 @@ "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -4360,6 +4365,7 @@ "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -4612,6 +4618,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -4621,6 +4628,7 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz", "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==", "license": "MIT", + "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -4666,6 +4674,7 @@ "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz", "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==", "license": "MIT", + "peer": true, "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" @@ -4809,7 +4818,8 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/redux-thunk": { "version": "3.1.0", @@ -5452,6 +5462,7 @@ "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.12.tgz", "integrity": "sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==", "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx index f586b3a..a7d82d6 100644 --- a/frontend/src/components/Navbar.jsx +++ b/frontend/src/components/Navbar.jsx @@ -2,7 +2,7 @@ import React, { useState } from "react"; import { Link, useLocation } from "react-router-dom"; import { Menu, X } from "lucide-react"; import { motion, AnimatePresence } from "framer-motion"; - +import { Mail } from "lucide-react"; export default function Navbar() { const [isOpen, setIsOpen] = useState(false); const location = useLocation(); @@ -23,14 +23,15 @@ export default function Navbar() { initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4 }} - className="w-full sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200" + className="w-full sticky top-0 z-50 bg-gray-300 backdrop-blur-md border-b border-gray-200" >
{/* Logo */} + MailMERN diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx index 75822f1..7e27d99 100644 --- a/frontend/src/pages/Home.jsx +++ b/frontend/src/pages/Home.jsx @@ -1,29 +1,97 @@ import React from "react"; +import { useNavigate } from "react-router-dom"; import ChatbotWidget from "../components/ChatbotWidget"; +import {Mail,Brain, BarChart3, Send, Users, Sparkles, Github } from "lucide-react"; export default function Home() { + const navigate = useNavigate(); + return ( -
-

Welcome to MailMERN 🚀

-

- This is the open-source MERN starter to build a Mass Email & - Smart Reply System. -

- -
-

🤖 Try Our AI Assistant

-

- Click the chat button in the bottom right corner to interact with our AI assistant. - It can help you with questions about features, pricing, support, and more! +

+
+
+ +
+

+ Automate Conversations.
+ Scale Your Email Marketing. +

+

+ Build, send, and automate your email campaigns with AI-powered assistance. + MailMERN helps you send mass emails, reply smartly, and manage campaigns — all open-source and built with MERN.

-
- Ask about features - Get pricing info - Request support - General questions + +
+ + + + View on GitHub + +
+
+ + {/*Features*/} +
+

+ Powerful Features of MailMERN +

+
+ {[ + { + icon: , + title: "Mass Email Sending", + desc: "Send thousands of personalized emails with one click using secure SMTP or API integrations." + }, + { + icon: , + title: "AI Auto-Responder", + desc: "Automatically reply to user queries, schedule meetings, and answer FAQs with AI." + }, + { + icon: , + title: "Analytics Dashboard", + desc: "Track open rates, clicks, and engagement metrics in real-time with visual insights." + }, + { + icon: , + title: "Contact Management", + desc: "Upload, segment, and manage your contact lists with ease using MongoDB integration." + }, + { + icon: , + title: "Smart Scheduling", + desc: "Schedule campaigns and follow-ups automatically using Node Cron." + }, + { + icon: , + title: "Template Builder", + desc: "Design professional HTML email templates with custom layouts and reusable blocks." + }, + ].map((feature, idx) => ( +
+
+ {feature.icon} +

{feature.title}

+
+

{feature.desc}

+
+ ))}
-
- +
); diff --git a/package-lock.json b/package-lock.json index 5315f92..04d04a0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -312,6 +312,7 @@ "integrity": "sha512-QoiaXANRkSXK6p0Duvt56W208du4P9Uye9hWLWgGMDTEoKPhuenzNcC4vGUmrNkiOKTlIrBoyNQYNpSwfEZXSg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -576,6 +577,7 @@ "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "env-paths": "^2.2.1", "import-fresh": "^3.3.0", @@ -619,7 +621,8 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/dargs": { "version": "8.1.0", @@ -1415,8 +1418,7 @@ "version": "0.27.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/semver": { "version": "7.7.3",