Skip to content

Commit d4dd1d4

Browse files
ComputingVictorComputingVictor
committed
Añadir sección de promociones y botón para ver promociones en HeroSection
1 parent c9ad434 commit d4dd1d4

3 files changed

Lines changed: 257 additions & 4 deletions

File tree

‎src/components/HeroSection.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { motion } from "framer-motion";
2-
import { MapPin, TrendingDown, Zap, TrendingUp } from "lucide-react";
2+
import { MapPin, TrendingDown, Zap, TrendingUp, Gift } from "lucide-react";
33
import { Button } from "@/components/ui/button";
44
import heroBackground from "@/assets/hero-bg.jpg";
55

66
interface HeroSectionProps {
77
onGetStarted: () => void;
88
onViewHistory: () => void;
9+
onViewPromotions: () => void;
910
}
1011

11-
export const HeroSection = ({ onGetStarted, onViewHistory }: HeroSectionProps) => {
12+
export const HeroSection = ({ onGetStarted, onViewHistory, onViewPromotions }: HeroSectionProps) => {
1213
return (
1314
<section className="relative min-h-screen flex items-center justify-center overflow-hidden">
1415
{/* Background with overlay */}
@@ -65,14 +66,23 @@ export const HeroSection = ({ onGetStarted, onViewHistory }: HeroSectionProps) =
6566
<MapPin className="w-5 h-5 mr-2" />
6667
Buscar cerca de mí
6768
</Button>
69+
<Button
70+
size="lg"
71+
variant="outline"
72+
className="text-lg px-8 py-6 rounded-full glass border-white/20 hover:bg-white/10"
73+
onClick={onViewPromotions}
74+
>
75+
<Gift className="w-5 h-5 mr-2" />
76+
Ver promociones
77+
</Button>
6878
<Button
6979
size="lg"
7080
variant="outline"
7181
className="text-lg px-8 py-6 rounded-full glass border-white/20 hover:bg-white/10"
7282
onClick={onViewHistory}
7383
>
7484
<TrendingUp className="w-5 h-5 mr-2" />
75-
Ver histórico de precios
85+
Histórico
7686
</Button>
7787
</div>
7888
</motion.div>

‎src/components/PromotionsSection.tsx‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
2+
import { Badge } from "@/components/ui/badge";
3+
import { Percent, CreditCard, Gift, TrendingDown, Star, Zap } from "lucide-react";
4+
import { motion } from "framer-motion";
5+
6+
interface Promotion {
7+
brand: string;
8+
brandLogo?: string;
9+
color: string;
10+
mainDiscount: string;
11+
description: string;
12+
highlights: string[];
13+
cardType: string;
14+
icon: React.ReactNode;
15+
category: "premium" | "supermarket" | "standard";
16+
}
17+
18+
const promotions: Promotion[] = [
19+
{
20+
brand: "Repsol Waylet",
21+
color: "from-red-500 to-orange-500",
22+
mainDiscount: "Hasta 40 cént./L",
23+
description: "La app más completa con múltiples formas de ahorro",
24+
highlights: [
25+
"10-40 cént./L según energías contratadas",
26+
"Duplica tu saldo hasta noviembre 2025",
27+
"10% de cashback en cada repostaje",
28+
"100% bonificación en recarga eléctrica",
29+
"Descuentos en Burger King, El Corte Inglés"
30+
],
31+
cardType: "App gratuita + Tarjeta energía",
32+
icon: <Zap className="w-5 h-5" />,
33+
category: "premium"
34+
},
35+
{
36+
brand: "Moeve (Cepsa)",
37+
color: "from-blue-500 to-cyan-500",
38+
mainDiscount: "Hasta 18.5 cént./L",
39+
description: "Programa de fidelización renovado con múltiples opciones",
40+
highlights: [
41+
"Moeve Pro Direct: hasta 17.50 cént./L",
42+
"7 cént./L desde el primer litro",
43+
"5 cént./L adicionales a fin de mes",
44+
"10€ de bienvenida nuevos usuarios",
45+
"Más de €300 anuales en ahorro potencial"
46+
],
47+
cardType: "Tarjeta gratuita + App GOW",
48+
icon: <Star className="w-5 h-5" />,
49+
category: "premium"
50+
},
51+
{
52+
brand: "Carrefour",
53+
color: "from-blue-600 to-blue-800",
54+
mainDiscount: "8-10% cashback",
55+
description: "Alto porcentaje de devolución en gasolineras propias",
56+
highlights: [
57+
"8% de cashback trimestral",
58+
"10% último fin de semana del mes",
59+
"4% en gasolineras Cepsa",
60+
"Sin cambiar de banco",
61+
"145 estaciones de servicio"
62+
],
63+
cardType: "Tarjeta Pass Carrefour",
64+
icon: <Percent className="w-5 h-5" />,
65+
category: "supermarket"
66+
},
67+
{
68+
brand: "BP",
69+
color: "from-green-500 to-emerald-600",
70+
mainDiscount: "3 cént./L + bonus",
71+
description: "Descuento directo con bonificación extra por volumen",
72+
highlights: [
73+
"3 cént./L en cada repostaje",
74+
"2€ extra con +40L en BP Ultimate",
75+
"Hasta 24€ al mes de ahorro",
76+
"Sistema de puntos canjeables",
77+
"Uso en tiendas BP"
78+
],
79+
cardType: "Tarjeta BP",
80+
icon: <Gift className="w-5 h-5" />,
81+
category: "standard"
82+
},
83+
{
84+
brand: "Alcampo",
85+
color: "from-red-600 to-pink-600",
86+
mainDiscount: "Hasta 8 cént./L",
87+
description: "Descuentos inmediatos en red de 53 gasolineras",
88+
highlights: [
89+
"Hasta 8 cént./L con Alcampo Dúa",
90+
"Tarjeta Oney gratuita",
91+
"53 gasolineras en España",
92+
"Acumulación en compras supermercado",
93+
"Precios competitivos Low Cost"
94+
],
95+
cardType: "Tarjeta Alcampo Dúa",
96+
icon: <TrendingDown className="w-5 h-5" />,
97+
category: "supermarket"
98+
},
99+
{
100+
brand: "Galp + ING/ABANCA",
101+
color: "from-orange-500 to-yellow-500",
102+
mainDiscount: "3-5% descuento",
103+
description: "Descuentos mediante tarjetas bancarias asociadas",
104+
highlights: [
105+
"ABANCA Visa: 4-5% descuento",
106+
"ING: 3% en Galp y Shell",
107+
"Lidl Plus: hasta 5% (máx 4€)",
108+
"Programa Mundo Galp puntos",
109+
"Descuento RACE para socios"
110+
],
111+
cardType: "Tarjeta bancaria asociada",
112+
icon: <CreditCard className="w-5 h-5" />,
113+
category: "standard"
114+
},
115+
{
116+
brand: "Eroski + Repsol",
117+
color: "from-green-600 to-teal-600",
118+
mainDiscount: "4% cashback",
119+
description: "Alianza estratégica con devolución mensual",
120+
highlights: [
121+
"4% en Repsol, Campsa, Petronor",
122+
"Tarjeta Eroski Club (4,99€/mes)",
123+
"Devolución a principios de mes",
124+
"Límite: 150L/día, 1.500L/mes",
125+
"Canjeable en supermercados"
126+
],
127+
cardType: "Eroski Club + Repsol Más",
128+
icon: <Percent className="w-5 h-5" />,
129+
category: "supermarket"
130+
},
131+
];
132+
133+
const categoryTitles = {
134+
premium: "Programas Premium",
135+
supermarket: "Supermercados",
136+
standard: "Gasolineras Tradicionales"
137+
};
138+
139+
export const PromotionsSection = () => {
140+
const groupedPromotions = {
141+
premium: promotions.filter(p => p.category === "premium"),
142+
supermarket: promotions.filter(p => p.category === "supermarket"),
143+
standard: promotions.filter(p => p.category === "standard")
144+
};
145+
146+
return (
147+
<section className="w-full py-20 bg-gradient-to-b from-background via-secondary/20 to-background">
148+
<div className="container mx-auto px-4">
149+
<motion.div
150+
initial={{ opacity: 0, y: 20 }}
151+
whileInView={{ opacity: 1, y: 0 }}
152+
transition={{ duration: 0.6 }}
153+
viewport={{ once: true }}
154+
className="text-center mb-12"
155+
>
156+
<Badge className="mb-4" variant="outline">
157+
<Gift className="w-4 h-4 mr-2" />
158+
Promociones y Descuentos
159+
</Badge>
160+
<h2 className="text-4xl md:text-5xl font-bold mb-4">
161+
Ahorra más con{" "}
162+
<span className="bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
163+
tarjetas y apps
164+
</span>
165+
</h2>
166+
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
167+
Descubre todas las promociones activas de las principales gasolineras.
168+
Combina descuentos y encuentra el mejor precio posible.
169+
</p>
170+
</motion.div>
171+
172+
{Object.entries(groupedPromotions).map(([category, promos], categoryIndex) => (
173+
<div key={category} className="mb-12">
174+
<h3 className="text-2xl font-bold mb-6 text-center">
175+
{categoryTitles[category as keyof typeof categoryTitles]}
176+
</h3>
177+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
178+
{promos.map((promo, index) => (
179+
<motion.div
180+
key={promo.brand}
181+
initial={{ opacity: 0, y: 20 }}
182+
whileInView={{ opacity: 1, y: 0 }}
183+
transition={{ duration: 0.5, delay: index * 0.1 }}
184+
viewport={{ once: true }}
185+
>
186+
<Card className="h-full hover:shadow-xl transition-all duration-300 border-primary/20 hover:border-primary/40 bg-card/80 backdrop-blur">
187+
<CardHeader>
188+
<div className="flex items-start justify-between mb-2">
189+
<div className={`bg-gradient-to-r ${promo.color} p-3 rounded-lg`}>
190+
{promo.icon}
191+
</div>
192+
<Badge variant="secondary" className="text-lg font-bold">
193+
{promo.mainDiscount}
194+
</Badge>
195+
</div>
196+
<CardTitle className="text-xl">{promo.brand}</CardTitle>
197+
<CardDescription className="text-sm">
198+
{promo.description}
199+
</CardDescription>
200+
</CardHeader>
201+
<CardContent className="space-y-4">
202+
<div className="space-y-2">
203+
{promo.highlights.map((highlight, idx) => (
204+
<div key={idx} className="flex items-start gap-2 text-sm">
205+
<div className={`mt-1 w-1.5 h-1.5 rounded-full bg-gradient-to-r ${promo.color} flex-shrink-0`} />
206+
<span className="text-muted-foreground">{highlight}</span>
207+
</div>
208+
))}
209+
</div>
210+
<div className="pt-4 border-t border-border">
211+
<div className="flex items-center gap-2 text-xs text-muted-foreground">
212+
<CreditCard className="w-4 h-4" />
213+
<span className="font-medium">{promo.cardType}</span>
214+
</div>
215+
</div>
216+
</CardContent>
217+
</Card>
218+
</motion.div>
219+
))}
220+
</div>
221+
</div>
222+
))}
223+
224+
<div className="mt-8 text-center text-sm text-muted-foreground">
225+
<p>Información actualizada a noviembre 2025. Consulta condiciones específicas en cada programa.</p>
226+
</div>
227+
</div>
228+
</section>
229+
);
230+
};

‎src/pages/Landing.tsx‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import { useRef } from "react";
33
import { HeroSection } from "@/components/HeroSection";
44
import { FeaturesSection } from "@/components/FeaturesSection";
55
import { FuelPriceHistoryChart } from "@/components/FuelPriceHistoryChart";
6+
import { PromotionsSection } from "@/components/PromotionsSection";
67

78
const Landing = () => {
89
const navigate = useNavigate();
910
const chartRef = useRef<HTMLDivElement>(null);
11+
const promotionsRef = useRef<HTMLDivElement>(null);
1012

1113
const handleGetStarted = () => {
1214
navigate('/app');
@@ -16,10 +18,21 @@ const Landing = () => {
1618
chartRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
1719
};
1820

21+
const handleViewPromotions = () => {
22+
promotionsRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
23+
};
24+
1925
return (
2026
<div className="min-h-screen">
21-
<HeroSection onGetStarted={handleGetStarted} onViewHistory={handleViewHistory} />
27+
<HeroSection
28+
onGetStarted={handleGetStarted}
29+
onViewHistory={handleViewHistory}
30+
onViewPromotions={handleViewPromotions}
31+
/>
2232
<FeaturesSection />
33+
<div ref={promotionsRef}>
34+
<PromotionsSection />
35+
</div>
2336
<div ref={chartRef}>
2437
<FuelPriceHistoryChart />
2538
</div>

0 commit comments

Comments
 (0)