Skip to content

Commit 3f17f28

Browse files
mmaxencemmaxence
committed
fix: improve banner and form presentation
- Simplify banner content by removing email, schedule, and info strings - Update CTA button text to 'Ask for a Coffee Chat!' - Remove ability to close/dismiss the banner - Fix form fullscreen positioning with proper backdrop and z-index - Add backdrop blur and click-to-close functionality - Ensure form is properly centered and fixed on screen - Improve form layout with flexbox for better structure - Remove unused imports and clean up banner component
1 parent b0e7d95 commit 3f17f28

File tree

2 files changed

+39
-61
lines changed

2 files changed

+39
-61
lines changed

‎src/components/layout/ContactBanner.tsx‎

Lines changed: 10 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,14 @@
22

33
import { useState } from 'react';
44
import { motion } from 'framer-motion';
5-
import { Mail, X, Coffee, Calendar, Users } from 'lucide-react';
5+
import { Coffee } from 'lucide-react';
66
import { useLanguage } from '@/contexts/LanguageContext';
77
import ContactForm from '../ui/ContactForm';
88

99
const ContactBanner = () => {
10-
const [isDismissed, setIsDismissed] = useState(false);
1110
const [isFormOpen, setIsFormOpen] = useState(false);
1211
const { t } = useLanguage();
1312

14-
if (isDismissed) return null;
15-
1613
return (
1714
<motion.div
1815
initial={{ opacity: 0, y: -20 }}
@@ -22,71 +19,26 @@ const ContactBanner = () => {
2219
className="bg-gradient-to-r from-white/10 via-white/5 to-white/10 border-b border-white/20"
2320
>
2421
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
25-
<div className="flex items-center justify-between py-3">
22+
<div className="flex items-center justify-center py-3">
2623
{/* Content */}
27-
<div className="flex items-center space-x-4 flex-1">
28-
<div className="flex items-center space-x-3">
29-
<div className="flex items-center space-x-2">
30-
<Coffee className="w-4 h-4 text-white" />
31-
<span className="text-sm font-medium text-foreground">
32-
{t('banner.title')}
33-
</span>
34-
</div>
35-
<div className="hidden sm:flex items-center space-x-2 text-sm text-muted-foreground">
36-
<Mail className="w-3 h-3" />
37-
<span>design-team@buzzvil.com</span>
38-
</div>
39-
</div>
40-
41-
<div className="hidden md:flex items-center space-x-4 text-xs text-muted-foreground">
42-
<div className="flex items-center space-x-1">
43-
<Calendar className="w-3 h-3" />
44-
<span>{t('banner.requirements.schedule')}</span>
45-
</div>
46-
<div className="flex items-center space-x-1">
47-
<Users className="w-3 h-3" />
48-
<span>{t('banner.requirements.info')}</span>
49-
</div>
50-
</div>
24+
<div className="flex items-center space-x-3">
25+
<Coffee className="w-4 h-4 text-white" />
26+
<span className="text-sm font-medium text-foreground">
27+
{t('banner.title')}
28+
</span>
5129
</div>
5230

5331
{/* CTA Button */}
5432
<motion.button
5533
onClick={() => setIsFormOpen(true)}
5634
whileHover={{ scale: 1.02 }}
5735
whileTap={{ scale: 0.98 }}
58-
className="flex items-center space-x-2 px-4 py-2 bg-white/20 text-white rounded-lg hover:bg-white/30 transition-all duration-200 text-sm font-medium shadow-sm"
59-
>
60-
<Mail className="w-4 h-4" />
61-
<span className="hidden sm:inline">{t('banner.cta')}</span>
62-
<span className="sm:hidden">{t('banner.cta.short')}</span>
63-
</motion.button>
64-
65-
{/* Dismiss Button */}
66-
<motion.button
67-
whileHover={{ scale: 1.1 }}
68-
whileTap={{ scale: 0.9 }}
69-
onClick={() => setIsDismissed(true)}
70-
className="ml-3 p-1 rounded-lg hover:bg-muted/50 transition-colors"
71-
aria-label="Dismiss banner"
36+
className="ml-4 flex items-center space-x-2 px-4 py-2 bg-white/20 text-white rounded-lg hover:bg-white/30 transition-all duration-200 text-sm font-medium shadow-sm"
7237
>
73-
<X className="w-4 h-4 text-muted-foreground" />
38+
<Coffee className="w-4 h-4" />
39+
<span>Ask for a Coffee Chat!</span>
7440
</motion.button>
7541
</div>
76-
77-
{/* Mobile Requirements */}
78-
<div className="md:hidden mt-2 pb-2">
79-
<div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
80-
<div className="flex items-center space-x-1">
81-
<Calendar className="w-3 h-3" />
82-
<span>{t('banner.requirements.schedule')}</span>
83-
</div>
84-
<div className="flex items-center space-x-1">
85-
<Users className="w-3 h-3" />
86-
<span>{t('banner.requirements.info')}</span>
87-
</div>
88-
</div>
89-
</div>
9042
</div>
9143

9244
{/* Contact Form Modal */}

‎src/components/ui/ContactForm.tsx‎

Lines changed: 29 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -137,15 +137,41 @@ ${formData.discussion}
137137

138138
return (
139139
<AnimatePresence>
140+
{/* Backdrop */}
140141
<motion.div
141142
initial={{ opacity: 0 }}
142143
animate={{ opacity: 1 }}
143144
exit={{ opacity: 0 }}
144-
className="fixed inset-0 z-50 bg-background"
145-
style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0 }}
145+
className="fixed inset-0 bg-black/50 backdrop-blur-sm"
146+
style={{
147+
position: 'fixed',
148+
top: 0,
149+
left: 0,
150+
right: 0,
151+
bottom: 0,
152+
zIndex: 9998
153+
}}
154+
onClick={onClose}
155+
/>
156+
157+
{/* Form Container */}
158+
<motion.div
159+
initial={{ opacity: 0, scale: 0.95 }}
160+
animate={{ opacity: 1, scale: 1 }}
161+
exit={{ opacity: 0, scale: 0.95 }}
162+
className="fixed inset-0 z-50 bg-background flex flex-col"
163+
style={{
164+
position: 'fixed',
165+
top: 0,
166+
left: 0,
167+
right: 0,
168+
bottom: 0,
169+
zIndex: 9999
170+
}}
171+
onClick={(e) => e.stopPropagation()}
146172
>
147173
{/* Header */}
148-
<div className="flex items-center justify-between p-4 border-b border-border">
174+
<div className="flex items-center justify-between p-4 border-b border-border flex-shrink-0">
149175
<h1 className="text-xl font-bold text-foreground">Coffee Chat Request</h1>
150176
<button
151177
onClick={onClose}

0 commit comments

Comments
 (0)