From 92e732ab119bd4bbd61bee8a28500705a44da6ab Mon Sep 17 00:00:00 2001 From: dev-rahul-arya Date: Mon, 22 Jun 2026 14:28:07 +0530 Subject: [PATCH] Landing Page Improved --- frontend/package-lock.json | 33 ++++++++----- frontend/src/LandingPage.jsx | 53 +++++++++++++-------- frontend/src/components/ServicesMarquee.jsx | 15 ++---- frontend/src/index.css | 41 ++++++++++++++++ 4 files changed, 99 insertions(+), 43 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 79ce58d..c368a53 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -27,8 +27,8 @@ }, "devDependencies": { "@eslint/js": "^9.33.0", - "@types/react": "^19.1.10", - "@types/react-dom": "^19.1.7", + "@types/react": "^18.3.1", + "@types/react-dom": "^18.3.1", "@vitejs/plugin-react": "^5.0.0", "eslint": "^9.33.0", "eslint-plugin-react-hooks": "^5.2.0", @@ -1752,23 +1752,30 @@ "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==", "license": "MIT" }, + "node_modules/@types/prop-types": { + "version": "15.7.15", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz", + "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==", + "license": "MIT" + }, "node_modules/@types/react": { - "version": "19.1.12", - "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz", - "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==", + "version": "18.3.31", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.31.tgz", + "integrity": "sha512-vfEqpXTvwT91yhmwdfouStN2hSKwTvyRs8qpLfADyrq/kxDw0hZM7Wk9Ug1FELj8hIby+S/+kQCSRFF32nv2Qw==", "license": "MIT", "dependencies": { - "csstype": "^3.0.2" + "@types/prop-types": "*", + "csstype": "^3.2.2" } }, "node_modules/@types/react-dom": { - "version": "19.1.9", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz", - "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==", + "version": "18.3.7", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz", + "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==", "dev": true, "license": "MIT", "peerDependencies": { - "@types/react": "^19.0.0" + "@types/react": "^18.0.0" } }, "node_modules/@types/trusted-types": { @@ -2171,9 +2178,9 @@ } }, "node_modules/csstype": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", + "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", "license": "MIT" }, "node_modules/debug": { diff --git a/frontend/src/LandingPage.jsx b/frontend/src/LandingPage.jsx index 3f90794..45a6559 100644 --- a/frontend/src/LandingPage.jsx +++ b/frontend/src/LandingPage.jsx @@ -17,7 +17,19 @@ import SignUp from "./pages/Auth/SignUp"; import { UserContext } from "./context/userContext"; import { motion, AnimatePresence } from "framer-motion"; import ServicesMarquee from "./components/ServicesMarquee"; -import { Star } from "lucide-react"; // Import Star icon for testimonials +import { + Star, + Target, + Brain, + Zap, + BarChart3, + MessageSquare, + FileText, + Search, + SlidersHorizontal, + Briefcase, + Wrench, +} from "lucide-react"; /* ───────────────────────────────────────────── @@ -496,22 +508,22 @@ const LandingPage = () => {
{[ { - icon: "🎯", + icon: Target, label: "Frontend Engineer Track", sub: "React · TypeScript · Performance", }, { - icon: "🧠", + icon: Brain, label: "System Design Deep Dive", sub: "HLD · LLD · Scalability", }, { - icon: "⚡", + icon: Zap, label: "DSA Mastery Sprint", sub: "Arrays · Graphs · DP", }, { - icon: "📊", + icon: BarChart3, label: "Behavioral Interview Prep", sub: "STAR · Leadership · Culture", }, @@ -525,10 +537,10 @@ const LandingPage = () => { }} >
- {item.icon} +

@@ -581,23 +593,23 @@ const LandingPage = () => { {/* Orbiting tool icons */} {[ { - emoji: "💬", + icon: MessageSquare, top: "8%", left: "50%", transform: "translateX(-50%)", }, { - emoji: "📝", + icon: FileText, top: "50%", right: "6%", transform: "translateY(-50%)", }, - { emoji: "🔍", bottom: "10%", left: "20%", transform: "" }, - { emoji: "📊", top: "20%", left: "8%", transform: "" }, + { icon: Search, bottom: "10%", left: "20%", transform: "" }, + { icon: BarChart3, top: "20%", left: "8%", transform: "" }, ].map((orb, i) => (

{ boxShadow: "0 0 12px rgba(139,92,246,0.2)", }} > - {orb.emoji} +
))} @@ -660,8 +672,9 @@ const LandingPage = () => { border: "1px solid rgba(255,255,255,0.07)", }} > -

- 🎚 Difficulty +

+ + Difficulty

{["Easy", "Medium", "Hard", "Expert"].map((tag, i) => { @@ -691,8 +704,9 @@ const LandingPage = () => { border: "1px solid rgba(255,255,255,0.07)", }} > -

- 💼 Role Type +

+ + Role Type

{["Frontend", "Backend", "Full Stack", "DevOps"].map( @@ -716,8 +730,9 @@ const LandingPage = () => { border: "1px solid rgba(255,255,255,0.07)", }} > -

- 🔧 Tech Stack +

+ + Tech Stack

{["React", "Node.js", "Python", "TypeScript"].map( diff --git a/frontend/src/components/ServicesMarquee.jsx b/frontend/src/components/ServicesMarquee.jsx index f500da0..eebb09b 100644 --- a/frontend/src/components/ServicesMarquee.jsx +++ b/frontend/src/components/ServicesMarquee.jsx @@ -1,4 +1,3 @@ -import { motion } from "framer-motion"; import React, { useEffect, useState } from "react"; export default function ServicesMarquee() { @@ -24,15 +23,9 @@ export default function ServicesMarquee() { return (
- {/* Duplicate services 3 times for seamless scroll on mobile */} {[...SERVICES, ...SERVICES, ...SERVICES].map((service, idx) => ( @@ -52,7 +45,7 @@ export default function ServicesMarquee() {

))} - +
); } diff --git a/frontend/src/index.css b/frontend/src/index.css index 2c35d10..20c1125 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -212,6 +212,47 @@ html.dark { overflow: hidden; } + /* Testimonials auto-scroll (pauses on hover so users can read) */ + @keyframes scroll-left { + from { + transform: translateX(0); + } + to { + transform: translateX(-50%); + } + } + .animate-scroll-left { + width: max-content; + animation: scroll-left 40s linear infinite; + } + .animate-scroll-left:hover { + animation-play-state: paused; + } + + /* Services marquee (pauses on hover so users can read cards) */ + @keyframes marquee-left { + from { + transform: translateX(0); + } + to { + transform: translateX(-33.333%); + } + } + .animate-marquee-left { + width: max-content; + animation: marquee-left linear infinite; + } + .animate-marquee-left:hover { + animation-play-state: paused; + } + + @media (prefers-reduced-motion: reduce) { + .animate-scroll-left, + .animate-marquee-left { + animation: none; + } + } + /* Stats number gradient */ .stat-number { background: linear-gradient(