From 7c12c6ecb00ba195a3f4c87c219458f3d1027032 Mon Sep 17 00:00:00 2001 From: Prabhat Rana <153556000+prabhatrana666@users.noreply.github.com> Date: Wed, 1 Jul 2026 01:44:17 +0530 Subject: [PATCH] Redesign landing page UI and improve user experience --- package-lock.json | 72 ++++- package.json | 2 + src/components/LandingPage.jsx | 496 ++++++++++++++++++++++++++++++--- src/styles/index.css | 42 +++ 4 files changed, 568 insertions(+), 44 deletions(-) diff --git a/package-lock.json b/package-lock.json index b89cabc..1d41ade 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,8 @@ "@supabase/supabase-js": "^2.39.0", "@tanstack/react-query": "^5.12.2", "@tanstack/react-query-devtools": "^5.13.3", + "framer-motion": "^12.42.2", + "lucide-react": "^1.22.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.52.0", @@ -93,7 +95,6 @@ "integrity": "sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.24.7", @@ -1108,7 +1109,6 @@ "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.51.15.tgz", "integrity": "sha512-UgFg23SrdIYrmfTSxAUn9g+J64VQy11pb9/EefoY/u2+zWuNMeqEOnvpJhf52XQy0yztQoyM9p6x8PFyTNaxXg==", "license": "MIT", - "peer": true, "dependencies": { "@tanstack/query-core": "5.51.15" }, @@ -1267,7 +1267,6 @@ "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1615,7 +1614,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001640", "electron-to-chromium": "^1.4.820", @@ -1816,8 +1814,7 @@ "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/data-view-buffer": { "version": "1.0.1", @@ -2212,7 +2209,6 @@ "integrity": "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", @@ -2698,6 +2694,33 @@ "url": "https://github.com/sponsors/rawify" } }, + "node_modules/framer-motion": { + "version": "12.42.2", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.42.2.tgz", + "integrity": "sha512-5XY9luDiu0oHfHBjpDthFMh0ES+122w6p/papSJBweMkO8Sn+PW2QaEgRblQBpWFnuvZS5qvarpt/hO2pjGmnw==", + "license": "MIT", + "dependencies": { + "motion-dom": "^12.42.2", + "motion-utils": "^12.39.0", + "tslib": "^2.4.0" + }, + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -3677,6 +3700,15 @@ "yallist": "^3.0.2" } }, + "node_modules/lucide-react": { + "version": "1.22.0", + "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-1.22.0.tgz", + "integrity": "sha512-c9o3l0PiNcgOQDW4F31BEYHudE7kgxVt3o30qMl36ZPwTxXlGB4QnLilhERvVM4uh/pl5MDyY1/gzZSYcHDtBg==", + "license": "ISC", + "peerDependencies": { + "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", @@ -3724,6 +3756,21 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/motion-dom": { + "version": "12.42.2", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.42.2.tgz", + "integrity": "sha512-5gIMWLp/PycBtJRJWRgjxke5n8dlvkSn2DrYW+tr3XcqAZY1xZh6BJyooJXCM8wdfM7wfMjkBJNLge1CKPUIRA==", + "license": "MIT", + "dependencies": { + "motion-utils": "^12.39.0" + } + }, + "node_modules/motion-utils": { + "version": "12.39.0", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.39.0.tgz", + "integrity": "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==", + "license": "MIT" + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -4121,7 +4168,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "nanoid": "^3.3.7", "picocolors": "^1.0.1", @@ -4299,7 +4345,6 @@ "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", "dev": true, "license": "MIT", - "peer": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -4433,7 +4478,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "license": "MIT", - "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -4446,7 +4490,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "license": "MIT", - "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -5279,6 +5322,12 @@ "dev": true, "license": "Apache-2.0" }, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "license": "0BSD" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -5471,7 +5520,6 @@ "integrity": "sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.18.10", "postcss": "^8.4.27", diff --git a/package.json b/package.json index 3fbda53..3993153 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,8 @@ "@supabase/supabase-js": "^2.39.0", "@tanstack/react-query": "^5.12.2", "@tanstack/react-query-devtools": "^5.13.3", + "framer-motion": "^12.42.2", + "lucide-react": "^1.22.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.52.0", diff --git a/src/components/LandingPage.jsx b/src/components/LandingPage.jsx index 7228b3e..1fc5a72 100644 --- a/src/components/LandingPage.jsx +++ b/src/components/LandingPage.jsx @@ -3,7 +3,180 @@ import { FaArrowRight, FaShieldAlt, FaMobile } from "react-icons/fa"; import { IoSparkles } from "react-icons/io5"; import { MdChat, MdSecurity, MdSpeed } from "react-icons/md"; import MainContainer from "./MainContainer"; +import { motion } from "framer-motion"; +import { + Atom, + Database, + Wind, + Search, + Route, + ClipboardList, + Zap, + Radio, + Users, + Shield, + Heart, + Activity, + Lock, + KeyRound, + Eye, + CheckCircle2, +} from "lucide-react"; +import { + FaGithub, + FaComments, + FaMobileAlt, +} from "react-icons/fa"; + +const container = { + hidden: {}, + show: { + transition: { + staggerChildren: 0.2, + }, + }, +}; + +const item = { + hidden: { + opacity: 0, + y: 40, + }, + show: { + opacity: 1, + y: 0, + transition: { + duration: 0.8, + ease: [0.25, 1, 0.5, 1], + }, + }, +}; +const features = [ + { + icon: "💻", + title: "Open Source", + description: "100% open source and transparent." + }, + { + icon: "⚡", + title: "Modern Tech", + description: "Built using the latest technologies." + }, + { + icon: "🛡️", + title: "Privacy First", + description: "Your data is always protected." + }, + { + icon: "📈", + title: "Continuous Updates", + description: "Regular improvements and fixes." + }, + { + icon: "👥", + title: "Community Support", + description: "Supported by developers worldwide." + }, + { + icon: "🎁", + title: "Free & Easy", + description: "Free to deploy and customize." + } +]; +const techStack = [ + { + title: "React", + desc: "UI Library", + icon: Atom, + color: "text-cyan-400", + }, + { + title: "Supabase", + desc: "Backend & Database", + icon: Database, + color: "text-green-400", + }, + { + title: "Tailwind CSS", + desc: "Styling", + icon: Wind, + color: "text-sky-400", + }, + { + title: "React Query", + desc: "Data Fetching", + icon: Search, + color: "text-pink-500", + }, + { + title: "React Router", + desc: "Routing", + icon: Route, + color: "text-red-400", + }, + { + title: "React Hook Form", + desc: "Form Management", + icon: ClipboardList, + color: "text-fuchsia-400", + }, + { + title: "Vite", + desc: "Build Tool", + icon: Zap, + color: "text-yellow-400", + }, + { + title: "Supabase Realtime", + desc: "Real-Time Updates", + icon: Radio, + color: "text-green-500", + }, +]; + +const stats = [ + { + title: "15K+", + subtitle: "Active Users", + icon: Users, + color: "text-blue-400", + }, + { + title: "99.9%", + subtitle: "Uptime", + icon: Activity, + color: "text-green-400", + }, + { + title: "100%", + subtitle: "Open Source", + icon: Shield, + color: "text-purple-400", + }, + { + title: "4.9 / 5", + subtitle: "User Satisfaction", + icon: Heart, + color: "text-pink-400", + }, +]; + + +const messages = [ + { + name: "Rahul", + text: "Hey everyone! 👋" + }, + { + name: "Sarah", + text: "Hi Rahul! How's it going?" + }, + { + name: "John", + text: "Looks awesome! 🚀" + } +]; const LandingPage = () => { const navigate = useNavigate(); @@ -46,11 +219,33 @@ const LandingPage = () => { }, ]; + // const stats = [ + // { number: "100%", label: "Open Source" }, + // { number: "Real-Time", label: "Messaging" }, + // { number: "Secure", label: "Authentication" }, + // { number: "Responsive", label: "Design" }, + // ]; const stats = [ - { number: "100%", label: "Open Source" }, - { number: "Real-Time", label: "Messaging" }, - { number: "Secure", label: "Authentication" }, - { number: "Responsive", label: "Design" }, + { + icon: FaGithub, + number: "100%", + label: "Open Source", + }, + { + icon: FaComments, + number: "Real-Time", + label: "Messaging", + }, + { + icon: FaShieldAlt, + number: "Secure", + label: "Authentication", + }, + { + icon: FaMobileAlt, + number: "Responsive", + label: "Design", + }, ]; return ( @@ -59,22 +254,41 @@ const LandingPage = () => {
{/* Logo */} -
- Convayto Logo -
+
+ + Convayto Logo + - {/* Main Heading */} -

- Connect Instantly, - - {" "} - Chat Seamlessly - -

+ {/* Main Heading */} + + Connect Instantly, + + {" "} + Chat Seamlessly + + +
{/* Subheading */}

@@ -86,17 +300,18 @@ const LandingPage = () => {

@@ -116,10 +331,18 @@ const LandingPage = () => {
{stats.map((stat, index) => ( -
+
+
+ +
+
{stat.number}
+

{stat.label}

@@ -145,12 +368,16 @@ const LandingPage = () => { {features.map((feature, index) => (
-
+
{feature.icon}
-

{feature.title}

+ +

+ {feature.title} +

+

{feature.description}

@@ -199,7 +426,7 @@ const LandingPage = () => {
{/* Technology Stack Section */} -
+

@@ -235,8 +462,74 @@ const LandingPage = () => {

+ + {/* My New Code */} +
+ + {/* Glow */} +
+
+ +
+ + {/* Badge */} + +
+
+ ⚡ Our Tech Stack +
+
+ + {/* Heading */} + +

+ Built With +
+ + + Modern Technologies + +

+ +

+ We use industry-leading tools and frameworks to deliver + high-performance, scalable and beautiful applications. +

+ + {/* Cards */} + +
+ + {techStack.map((item) => { + const Icon = item.icon; + + return ( +
+ + +

+ {item.title} +

+ +

+ {item.desc} +

+ + +
+ ); + })} +
+ +
+
+ + {/* Security Section */} -
+ {/*
@@ -258,6 +551,145 @@ const LandingPage = () => {
+
*/} +
+ + {/* Background Glow */} +
+
+ +
+ +
+ + {/* Left Side */} + +
+ +
+ 🔒 Privacy & Security +
+ +

+ Your Data +
+ + Always Protected + +

+ +

+ Convayto is built on secure infrastructure with authentication, + encrypted communication, and protected access control to keep + your conversations safe. +

+ +
+ + {[ + { + icon: Lock, + title: "Encrypted", + text: "Messages protected with modern encryption." + }, + { + icon: KeyRound, + title: "Secure Login", + text: "Authentication powered by Supabase." + }, + { + icon: Eye, + title: "Privacy First", + text: "Only authorized users can access data." + }, + { + icon: Shield, + title: "Open Source", + text: "Transparent and community reviewed." + }, + ].map((item, index) => { + const Icon = item.icon; + + return ( +
+ + +

+ {item.title} +

+ +

+ {item.text} +

+ +
+ ); + })} + +
+ +
+ + {/* Right Side */} + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +

+ Enterprise Security +

+ +

+ Designed with security best practices and trusted cloud + infrastructure. +

+ +
+ + {[ + "Supabase Authentication", + "Encrypted Passwords", + "Role-Based Access", + "HTTPS Secure Communication", + "Open Source Transparency", + ].map((item) => ( +
+ + + + {item} + + +
+ ))} + +
+ +
+ +
+ +
+ +
+
{/* CTA Section */} @@ -272,10 +704,10 @@ const LandingPage = () => {

@@ -283,7 +715,7 @@ const LandingPage = () => { {/* Footer */}
-
+

About

    diff --git a/src/styles/index.css b/src/styles/index.css index 3e5292f..9e564f3 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -239,3 +239,45 @@ body { left: 0; } } */ +.hero-get-started-btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + padding: 16px 32px; + border: none; + border-radius: 12px; + background: linear-gradient(90deg, #3b82f6, #7c3aed); + color: #fff; + font-size: 16px; + font-weight: 600; + cursor: pointer; + transition: all 0.35s ease; +} +.hero-get-started-btn2 { + transition: all 0.35s ease; +} + +.hero-get-started-btn2:hover { + transform: translateY(-4px) scale(1.08); + box-shadow: 0 18px 35px rgba(255, 255, 255, 0.12); +} + +.hero-get-started-btn2:active { + transform: scale(0.96); +} + +.hero-get-started-btn2 .hero-btn-arrow { + transition: all 0.35s ease; +} + +.hero-get-started-btn2:hover .hero-btn-arrow { + transform: translateX(8px) scale(1.3); +} +.hero-btn-arrow { + transition: all 0.35s ease; +} + +.hero-get-started-btn:hover .hero-btn-arrow { + transform: translateX(8px) scale(1.3); +} \ No newline at end of file