Skip to content

Commit f603175

Browse files
gustavo-lolagustavo-lola
committed
refactor: colors in the base for the new logo
1 parent 9a1f306 commit f603175

9 files changed

Lines changed: 390 additions & 137 deletions

File tree

‎frontend/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929
"react-router-dom": "^7.17.0",
3030
"rolldown": "^1.1.0",
3131
"shadcn": "^4.10.0",
32+
"swiper": "^12.2.0",
3233
"tailwind-merge": "^3.6.0",
3334
"tw-animate-css": "^1.4.0"
3435
},

‎frontend/src/components/landing/CTASection.tsx‎

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
import { motion } from "framer-motion";
22
import { Link } from "react-router-dom";
3-
import { ArrowRight, Sparkles } from "lucide-react";
3+
import { ArrowRight } from "lucide-react";
44

55
export function CTASection() {
66
return (
7-
<section id="status" className="relative py-24 md:py-32 åoverflow-hidden">
7+
<section id="status" className="relative py-24 md:py-32 overflow-hidden bg-transparent">
88
<div className="absolute inset-0 pointer-events-none">
9-
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-emerald-500/10 blur-[150px] rounded-full" />
10-
<div className="absolute top-0 left-0 w-[400px] h-[400px] bg-emerald-900/20 blur-[120px] rounded-full" />
11-
<div className="absolute bottom-0 right-0 w-[400px] h-[400px] bg-emerald-900/20 blur-[120px] rounded-full" />
9+
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-purple-500/10 blur-[150px] rounded-full" />
10+
<div className="absolute top-0 left-0 w-[400px] h-[400px] bg-blue-500/10 dark:bg-blue-950/20 blur-[120px] rounded-full" />
11+
<div className="absolute bottom-0 right-0 w-[400px] h-[400px] bg-amber-500/5 dark:bg-amber-950/10 blur-[120px] rounded-full" />
1212
</div>
1313

1414
<div
15-
className="absolute inset-0 opacity-[0.03] pointer-events-none"
15+
className="absolute inset-0 opacity-[0.03] dark:opacity-[0.02] pointer-events-none"
1616
style={{
1717
backgroundImage:
18-
"linear-gradient(to right, #fff 1px, transparent 1px), linear-gradient(to bottom, #fff 1px, transparent 1px)",
18+
"linear-gradient(to right, currentColor 1px, transparent 1px), linear-gradient(to bottom, currentColor 1px, transparent 1px)",
1919
backgroundSize: "40px 40px",
2020
}}
2121
/>
@@ -27,11 +27,10 @@ export function CTASection() {
2727
whileInView={{ opacity: 1, y: 0 }}
2828
viewport={{ once: true }}
2929
transition={{ duration: 0.7, delay: 0.1 }}
30-
className="text-4xl md:text-6xl font-bold dark:text-white mb-6 leading-tight"
31-
style={{ fontFamily: "'Space Grotesk', sans-serif" }}
30+
className="text-4xl md:text-6xl font-extrabold text-gray-900 dark:text-white mb-6 leading-tight tracking-tight"
3231
>
3332
Pronto para transformar sua{" "}
34-
<span className="bg-gradient-to-r from-emerald-400 to-green-300 bg-clip-text text-transparent">
33+
<span className="bg-gradient-to-r from-blue-600 to-purple-500 dark:from-blue-400 dark:to-purple-400 bg-clip-text text-transparent">
3534
busca por vagas
3635
</span>
3736
?
@@ -42,10 +41,15 @@ export function CTASection() {
4241
whileInView={{ opacity: 1, y: 0 }}
4342
viewport={{ once: true }}
4443
transition={{ duration: 0.7, delay: 0.2 }}
45-
className="text-lg md:text-xl text-gray-400 max-w-2xl mx-auto mb-10 leading-relaxed"
44+
className="text-lg md:text-xl text-gray-500 dark:text-gray-400 max-w-2xl mx-auto mb-10 leading-relaxed font-medium"
4645
>
47-
Junte-se a centenas de desenvolvedores que já estão usando o Jobs
48-
Scraper para encontrar as melhores oportunidades de forma automatizada.
46+
Junte-se a centenas de desenvolvedores que já estão usando o{" "}
47+
<span className="text-gray-900 dark:text-white font-bold">
48+
<span className="text-blue-500 font-light">&lt;</span>
49+
Cand<span className="text-amber-500">!</span>Date<span className="text-purple-500">!</span>
50+
<span className="text-blue-500 font-light">&gt;</span>
51+
</span>{" "}
52+
para encontrar as melhores oportunidades de forma automatizada.
4953
</motion.p>
5054

5155
<motion.div
@@ -56,15 +60,16 @@ export function CTASection() {
5660
className="flex flex-col sm:flex-row items-center justify-center gap-4"
5761
>
5862
<Link
59-
to="/app"
60-
className="group inline-flex items-center gap-2 bg-emerald-500 hover:bg-emerald-400 text-gray-950 font-semibold text-base py-4 px-10 rounded-full transition-all duration-300 hover:scale-[1.02]"
63+
to="/login"
64+
className="group inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-purple-600 hover:opacity-95 text-white font-semibold text-base py-4 px-10 rounded-full transition-all duration-300 hover:scale-[1.02] shadow-lg shadow-blue-500/10"
6165
>
6266
Acessar o Dashboard
6367
<ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
6468
</Link>
69+
6570
<a
6671
href="#features"
67-
className="inline-flex items-center gap-2 text-gray-400 hover:text-black dark:hover:text-white font-medium text-base py-4 px-8 rounded-full border border-gray-800 hover:border-gray-600 dark:border-gray-400 transition-all duration-300"
72+
className="inline-flex items-center gap-2 text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-white font-semibold text-base py-4 px-8 rounded-full border border-gray-200 dark:border-neutral-800 hover:bg-gray-50 dark:hover:bg-neutral-900 transition-all duration-300"
6873
>
6974
Explorar funcionalidades
7075
</a>

‎frontend/src/components/landing/FeaturesSection.tsx‎

Lines changed: 96 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,121 @@
11
import { Globe, Filter, Zap, Brain, Download, LayoutDashboard } from "lucide-react";
2-
import { motion } from "framer-motion";
2+
import { motion, Variants } from "framer-motion";
33

44
const features = [
5-
{ title: "Busca Global Automatizada", description: "Varremos LinkedIn, Indeed, Glassdoor e dezenas de outras plataformas em segundos.", icon: Globe },
6-
{ title: "Filtros por Tecnologia", description: "React, Python, Go, AWS... Filtre por stack, senioridade e modelo de trabalho.", icon: Filter },
7-
{ title: "Atualizações em Tempo Real", description: "Nosso scraper roda continuamente. Receba vagas novas assim que são publicadas.", icon: Zap },
8-
{ title: "Análise com IA", description: "Inteligência artificial categoriza e ranqueia as vagas com base no seu perfil.", icon: Brain },
9-
{ title: "Exportação de Dados", description: "Exporte suas vagas favoritas em XLSX, CSV ou PDF para compartilhar offline.", icon: Download },
10-
{ title: "Dashboard Interativo", description: "Visualize tendências de mercado, salários e tecnologias mais demandadas.", icon: LayoutDashboard },
5+
{
6+
title: "Busca Global Automatizada",
7+
description: "Varremos LinkedIn, Indeed, Glassdoor e dezenas de outras plataformas em segundos.",
8+
icon: Globe,
9+
colorClass: "bg-blue-50 dark:bg-blue-950/30 text-blue-500 dark:text-blue-400 group-hover:ring-blue-500/30"
10+
},
11+
{
12+
title: "Filtros por Tecnologia",
13+
description: "React, Python, Go, AWS... Filtre por stack, senioridade e modelo de trabalho.",
14+
icon: Filter,
15+
colorClass: "bg-amber-50 dark:bg-amber-950/30 text-amber-500 dark:text-amber-400 group-hover:ring-amber-500/30"
16+
},
17+
{
18+
title: "Atualizações em Tempo Real",
19+
description: "Nosso scraper roda continuamente. Receba vagas novas assim que são publicadas.",
20+
icon: Zap,
21+
colorClass: "bg-purple-50 dark:bg-purple-950/30 text-purple-500 dark:text-purple-400 group-hover:ring-purple-500/30"
22+
},
23+
{
24+
title: "Análise com IA",
25+
description: "Inteligência artificial categoriza e ranqueia as vagas com base no seu perfil.",
26+
icon: Brain,
27+
colorClass: "bg-blue-50 dark:bg-blue-950/30 text-blue-500 dark:text-blue-400 group-hover:ring-blue-500/30"
28+
},
29+
{
30+
title: "Exportação de Dados",
31+
description: "Exporte suas vagas favoritas in XLSX, CSV ou PDF para compartilhar offline.",
32+
icon: Download,
33+
colorClass: "bg-amber-50 dark:bg-amber-950/30 text-amber-500 dark:text-amber-400 group-hover:ring-amber-500/30"
34+
},
35+
{
36+
title: "Dashboard Interativo",
37+
description: "Visualize tendências de mercado, salários e tecnologias mais demandadas.",
38+
icon: LayoutDashboard,
39+
colorClass: "bg-purple-50 dark:bg-purple-950/30 text-purple-500 dark:text-purple-400 group-hover:ring-purple-500/30"
40+
},
1141
];
1242

43+
const containerVariants: Variants = {
44+
hidden: {},
45+
visible: {
46+
transition: {
47+
staggerChildren: 0.1
48+
}
49+
}
50+
};
51+
52+
const cardVariants: Variants = {
53+
hidden: { opacity: 0, y: 20 },
54+
visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } }
55+
};
56+
1357
export function FeaturesSection() {
1458
return (
1559
<section id="features" className="py-24 relative overflow-hidden bg-transparent">
16-
<div className="max-w-7xl mx-auto px-6">
17-
{/* Section Header */}
18-
<div className="text-center mb-16">
60+
<div className="absolute top-0 right-1/4 w-[500px] h-[500px] bg-purple-500/5 blur-[100px] rounded-full pointer-events-none" />
61+
<div className="absolute bottom-0 left-1/4 w-[500px] h-[500px] bg-blue-500/5 blur-[100px] rounded-full pointer-events-none" />
62+
63+
<div className="max-w-7xl mx-auto px-6 relative z-10">
64+
65+
<div className="text-center mb-20">
1966
<motion.h2
2067
initial={{ opacity: 0, y: 20 }}
2168
whileInView={{ opacity: 1, y: 0 }}
22-
viewport={{ once: true, margin: "-50px" }}
23-
transition={{ duration: 0.5 }}
24-
className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-white mb-4"
69+
viewport={{ once: true, margin: "-10px" }}
70+
transition={{ duration: 0.6 }}
71+
className="text-3xl md:text-4xl lg:text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white mb-4"
2572
>
2673
Tudo que você precisa para encontrar o emprego ideal
2774
</motion.h2>
2875
<motion.p
2976
initial={{ opacity: 0, y: 20 }}
3077
whileInView={{ opacity: 1, y: 0 }}
31-
viewport={{ once: true, margin: "-50px" }}
32-
transition={{ duration: 0.5, delay: 0.1 }}
33-
className="text-gray-500 dark:text-gray-400 text-lg max-w-2xl mx-auto"
78+
viewport={{ once: true, margin: "-10px" }}
79+
transition={{ duration: 0.6, delay: 0.15 }}
80+
className="text-gray-500 dark:text-gray-400 text-lg max-w-2xl mx-auto font-medium"
3481
>
3582
Nossa plataforma foi construída especificamente para simplificar o mercado de tecnologia global.
3683
</motion.p>
3784
</div>
3885

39-
{/* Features Grid */}
40-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
41-
{features.map((feat, index) => (
42-
<div key={index} className="p-6 rounded-2xl border border-gray-200 dark:border-neutral-800 bg-white/50 dark:bg-neutral-900/30 backdrop-blur-sm">
43-
<div className="w-10 h-10 rounded-xl bg-emerald-50 dark:bg-emerald-950/50 flex items-center justify-center mb-4">
44-
<feat.icon className="text-[#0c6b35] dark:text-emerald-400 w-5 h-5" />
45-
</div>
46-
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">{feat.title}</h3>
47-
<p className="text-gray-500 dark:text-gray-400 leading-relaxed text-sm">{feat.description}</p>
48-
</div>
49-
))}
50-
</div>
86+
<motion.div
87+
variants={containerVariants}
88+
initial="hidden"
89+
whileInView="visible"
90+
viewport={{ once: true, margin: "-100px" }}
91+
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
92+
>
93+
{features.map((feat, index) => {
94+
const Icon = feat.icon;
95+
return (
96+
<motion.div
97+
key={index}
98+
variants={cardVariants}
99+
whileHover={{ y: -4, transition: { duration: 0.2 } }}
100+
className="group p-6 rounded-2xl border border-gray-200/80 dark:border-neutral-800/70 bg-white/60 dark:bg-neutral-900/40 backdrop-blur-md hover:shadow-xl hover:shadow-gray-200/10 dark:hover:shadow-none transition-all duration-300 flex flex-col justify-between"
101+
>
102+
<div>
103+
<div className={`w-10 h-10 rounded-xl flex items-center justify-center mb-5 transition-all duration-300 ring-1 ring-transparent ${feat.colorClass}`}>
104+
<Icon className="w-5 h-5 transition-transform duration-300 group-hover:scale-110" />
105+
</div>
106+
107+
<h3 className="text-xl font-bold text-gray-900 dark:text-white mb-2 tracking-tight group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors duration-300">
108+
{feat.title}
109+
</h3>
110+
111+
<p className="text-gray-500 dark:text-gray-400 leading-relaxed text-sm font-medium">
112+
{feat.description}
113+
</p>
114+
</div>
115+
</motion.div>
116+
);
117+
})}
118+
</motion.div>
51119
</div>
52120
</section>
53121
);

‎frontend/src/components/landing/HeroSection.tsx‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ function StarsBackground() {
3232
{STATIC_STARS.map((star) => (
3333
<motion.div
3434
key={star.id}
35-
className="absolute rounded-full bg-emerald-800/40 dark:bg-white"
35+
className="absolute rounded-full bg-blue-900/30 dark:bg-white"
3636
style={{
3737
top: star.top,
3838
left: star.left,
@@ -71,14 +71,14 @@ export function HeroSection() {
7171
<motion.div
7272
style={{ y: backgroundY }}
7373
className="absolute inset-0 pointer-events-none w-full h-[150%]
74-
bg-[linear-gradient(to_right,rgba(0,0,0,0.04)_1px,transparent_1px),linear-gradient(to_bottom,rgba(0,0,0,0.04)_1px,transparent_1px)]
74+
bg-[linear-gradient(to_right,rgba(0,0,0,0.03)_1px,transparent_1px),linear-gradient(to_bottom,rgba(0,0,0,0.03)_1px,transparent_1px)]
7575
dark:bg-[linear-gradient(to_right,rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,0.02)_1px,transparent_1px)]
7676
bg-[size:60px_60px]"
7777
>
7878
<StarsBackground />
7979
</motion.div>
80-
81-
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-emerald-100/30 dark:bg-emerald-950/15 blur-[120px] rounded-full pointer-events-none" />
80+
d
81+
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-gradient-to-br from-blue-500/10 via-purple-500/5 to-transparent blur-[120px] rounded-full pointer-events-none" />
8282

8383
<motion.div style={{ y: textY }} className="relative z-10 max-w-5xl mx-auto px-6 text-center">
8484
<motion.h1
@@ -88,7 +88,7 @@ export function HeroSection() {
8888
className="text-5xl md:text-7xl lg:text-[80px] font-extrabold tracking-tight text-gray-900 dark:text-white mb-8 mt-12 leading-[1.1]"
8989
>
9090
A forma mais rápida de{" "}
91-
<span className="bg-gradient-to-r from-[#0c6b35] to-emerald-500 dark:from-emerald-400 dark:to-teal-400 bg-clip-text text-transparent">
91+
<span className="bg-gradient-to-r from-blue-600 via-purple-500 to-amber-500 bg-clip-text text-transparent dark:from-blue-400 dark:via-purple-400 dark:to-amber-400">
9292
encontrar vagas
9393
</span>{" "}
9494
de TI no mundo
@@ -113,32 +113,33 @@ export function HeroSection() {
113113
>
114114
<Link
115115
to="/login"
116-
className="group inline-flex items-center gap-2 bg-[#0c6b35] dark:bg-emerald-600 hover:bg-[#0a5a2d] dark:hover:bg-emerald-500 text-white font-semibold text-base py-3.5 px-8 rounded-full transition-all duration-300 hover:scale-[1.02]"
116+
className="group inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 via-purple-600 to-teal-600 hover:opacity-95 text-white font-semibold text-base py-3.5 px-8 rounded-full transition-all duration-300 hover:scale-[1.02] shadow-lg shadow-blue-500/10"
117117
>
118118
Comece Agora
119119
<ArrowRight className="w-4 h-4 transition-transform group-hover:translate-x-1" />
120120
</Link>
121+
121122
<a
122123
href="#how-it-works"
123124
className="inline-flex items-center gap-2 bg-white dark:bg-neutral-800 hover:bg-gray-50 dark:hover:bg-neutral-700 text-gray-700 dark:text-gray-200 font-semibold text-base py-3.5 px-8 rounded-full border border-gray-200 dark:border-neutral-700 transition-all duration-300 hover:scale-[1.02]"
124125
>
125-
<Play className="w-4 h-4 text-[#0c6b35] dark:text-emerald-400 fill-current" />
126+
<Play className="w-4 h-4 text-blue-500 fill-current" />
126127
Como funciona
127128
</a>
128129
</motion.div>
129130
</motion.div>
130131

131-
<motion.div style={{ y: hillsY }} className="relative w-full mt-auto z-10 opacity-80 dark:opacity-40">
132+
<motion.div style={{ y: hillsY }} className="relative w-full mt-auto z-10 opacity-70 dark:opacity-20">
132133
<svg viewBox="0 0 1440 200" className="w-full block mb-[-2px]" preserveAspectRatio="none">
133-
<motion.path animate={{ x: [0, -15, 0], scaleX: [1, 1.02, 1] }} transition={{ duration: 8, repeat: Infinity }} className="origin-bottom" d="M0,200 L0,120 Q180,40 360,100 Q540,160 720,80 Q900,0 1080,60 Q1260,120 1440,80 L1440,200 Z" fill="#d1fae5" />
134-
<motion.path animate={{ x: [0, 15, 0], scaleX: [1, 1.02, 1] }} transition={{ duration: 12, repeat: Infinity }} className="origin-bottom" d="M0,200 L0,140 Q240,60 480,120 Q720,180 960,100 Q1200,20 1440,100 L1440,200 Z" fill="#6ee7b7" />
135-
<motion.path animate={{ x: [0, -20, 0], scaleX: [1, 1.03, 1] }} transition={{ duration: 15, repeat: Infinity }} className="origin-bottom" d="M0,200 L0,155 Q300,90 600,140 Q900,190 1200,130 Q1350,100 1440,120 L1440,200 Z" fill="#34d399" />
136-
<motion.path animate={{ x: [0, 20, 0], scaleX: [1, 1.03, 1] }} transition={{ duration: 20, repeat: Infinity }} className="origin-bottom" d="M0,200 L0,170 Q360,120 720,160 Q1080,200 1440,150 L1440,200 Z" fill="#10b981" />
134+
<motion.path animate={{ x: [0, -15, 0], scaleX: [1, 1.02, 1] }} transition={{ duration: 8, repeat: Infinity }} className="origin-bottom" d="M0,200 L0,120 Q180,40 360,100 Q540,160 720,80 Q900,0 1080,60 Q1260,120 1440,80 L1440,200 Z" fill="#eff6ff" /> {/* Slates para azul clarinho */}
135+
<motion.path animate={{ x: [0, 15, 0], scaleX: [1, 1.02, 1] }} transition={{ duration: 12, repeat: Infinity }} className="origin-bottom" d="M0,200 L0,140 Q240,60 480,120 Q720,180 960,100 Q1200,20 1440,100 L1440,200 Z" fill="#e0e7ff" /> {/* Indigo suave */}
136+
<motion.path animate={{ x: [0, -20, 0], scaleX: [1, 1.03, 1] }} transition={{ duration: 15, repeat: Infinity }} className="origin-bottom" d="M0,200 L0,155 Q300,90 600,140 Q900,190 1200,130 Q1350,100 1440,120 L1440,200 Z" fill="#dbeafe" /> {/* Azul sutil */}
137+
<motion.path animate={{ x: [0, 20, 0], scaleX: [1, 1.03, 1] }} transition={{ duration: 20, repeat: Infinity }} className="origin-bottom" d="M0,200 L0,170 Q360,120 720,160 Q1080,200 1440,150 L1440,200 Z" fill="#f3e8ff" /> {/* Roxo clarinho de base */}
137138
</svg>
138139
</motion.div>
139140

140-
<div className="w-full bg-[#10b981] dark:bg-emerald-800 py-8 md:py-10 relative z-20 overflow-hidden flex flex-col items-center border-y border-emerald-400/20 dark:border-emerald-900/30">
141-
<p className="text-center dark:text-white text-sm font-medium uppercase tracking-wider mb-6 w-full px-6">
141+
<div className="w-full bg-slate-50 dark:bg-neutral-900 py-8 md:py-10 relative z-20 overflow-hidden flex flex-col items-center border-y border-gray-200 dark:border-neutral-800">
142+
<p className="text-center text-gray-500 dark:text-neutral-400 text-sm font-medium uppercase tracking-wider mb-6 w-full px-6">
142143
Usado por profissionais que passaram em empresas como :
143144
</p>
144145
<div className="w-full flex overflow-hidden select-none">
@@ -152,7 +153,7 @@ export function HeroSection() {
152153
key={`${company.name}-${index}`}
153154
src={company.logo}
154155
alt={company.name}
155-
className="h-8 md:h-10 w-32 md:w-40 object-contain"
156+
className="h-8 md:h-10 w-32 md:w-40 object-contain dark:brightness-0 dark:invert opacity-70 dark:opacity-60 hover:opacity-100 transition-opacity"
156157
/>
157158
))}
158159
</motion.div>

0 commit comments

Comments
 (0)