Skip to content

[FIX]: Landing Page Improved #278

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dev-rahul-arya wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[FIX]: Landing Page Improved #278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 20 additions & 13 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

53 changes: 34 additions & 19 deletions frontend/src/LandingPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";


/* ─────────────────────────────────────────────
Expand Down Expand Up @@ -496,22 +508,22 @@ const LandingPage = () => {
<div className="flex-1 p-10 flex flex-col gap-4">
{[
{
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",
},
Expand All @@ -525,10 +537,10 @@ const LandingPage = () => {
}}
>
<div
className="w-12 h-12 rounded-lg flex items-center justify-center text-2xl flex-shrink-0"
className="w-12 h-12 rounded-lg flex items-center justify-center flex-shrink-0"
style={{ background: "rgba(139,92,246,0.15)" }}
>
{item.icon}
<item.icon className="w-6 h-6 text-violet-300" />
</div>
<div>
<p className="text-white text-base font-semibold leading-tight">
Expand Down Expand Up @@ -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) => (
<div
key={i}
className="absolute w-12 h-12 rounded-xl flex items-center justify-center text-2xl"
className="absolute w-12 h-12 rounded-xl flex items-center justify-center"
style={{
top: orb.top,
left: orb.left,
Expand All @@ -609,7 +621,7 @@ const LandingPage = () => {
boxShadow: "0 0 12px rgba(139,92,246,0.2)",
}}
>
{orb.emoji}
<orb.icon className="w-6 h-6 text-violet-300" />
</div>
))}

Expand Down Expand Up @@ -660,8 +672,9 @@ const LandingPage = () => {
border: "1px solid rgba(255,255,255,0.07)",
}}
>
<p className="text-sm font-semibold text-gray-500 uppercase tracking-widest mb-3">
🎚 Difficulty
<p className="flex items-center gap-2 text-sm font-semibold text-gray-500 uppercase tracking-widest mb-3">
<SlidersHorizontal className="w-4 h-4" />
Difficulty
</p>
<div className="flex flex-wrap gap-2">
{["Easy", "Medium", "Hard", "Expert"].map((tag, i) => {
Expand Down Expand Up @@ -691,8 +704,9 @@ const LandingPage = () => {
border: "1px solid rgba(255,255,255,0.07)",
}}
>
<p className="text-sm font-semibold text-gray-500 uppercase tracking-widest mb-3">
💼 Role Type
<p className="flex items-center gap-2 text-sm font-semibold text-gray-500 uppercase tracking-widest mb-3">
<Briefcase className="w-4 h-4" />
Role Type
</p>
<div className="flex flex-wrap gap-2">
{["Frontend", "Backend", "Full Stack", "DevOps"].map(
Expand All @@ -716,8 +730,9 @@ const LandingPage = () => {
border: "1px solid rgba(255,255,255,0.07)",
}}
>
<p className="text-sm font-semibold text-gray-500 uppercase tracking-widest mb-3">
🔧 Tech Stack
<p className="flex items-center gap-2 text-sm font-semibold text-gray-500 uppercase tracking-widest mb-3">
<Wrench className="w-4 h-4" />
Tech Stack
</p>
<div className="flex flex-wrap gap-2">
{["React", "Node.js", "Python", "TypeScript"].map(
Expand Down
15 changes: 4 additions & 11 deletions frontend/src/components/ServicesMarquee.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { motion } from "framer-motion";
import React, { useEffect, useState } from "react";

export default function ServicesMarquee() {
Expand All @@ -24,15 +23,9 @@ export default function ServicesMarquee() {

return (
<div className="w-full overflow-hidden pb-6 sm:pb-10 relative">
<motion.div
className="flex gap-3 sm:gap-6 whitespace-nowrap"
animate={{ x: ["0%", "-100%"] }}
transition={{
repeat: Infinity,
repeatType: "loop",
duration,
ease: "linear",
}}
<div
className="flex gap-3 sm:gap-6 whitespace-nowrap animate-marquee-left"
style={{ animationDuration: `${duration}s` }}
>
{/* Duplicate services 3 times for seamless scroll on mobile */}
{[...SERVICES, ...SERVICES, ...SERVICES].map((service, idx) => (
Expand All @@ -52,7 +45,7 @@ export default function ServicesMarquee() {
</p>
</div>
))}
</motion.div>
</div>
</div>
);
}
41 changes: 41 additions & 0 deletions frontend/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down