Skip to content

Commit 9568afc

Browse files
mmaxencemmaxence
committed
feat: add professional contact banner above header
- Create ContactBanner component with polished design - Add coffee meeting invitation with clear CTA - Include email pre-filled with meeting request template - Add dismiss functionality with smooth animations - Support both English and Korean translations - Responsive design with mobile-optimized layout - Update scroll margins to account for banner height - Professional gradient styling with accent colors - Clear requirements display (schedule time, include info) - One-click email composition with structured template
1 parent 1a61651 commit 9568afc

File tree

6 files changed

+124
-13
lines changed

6 files changed

+124
-13
lines changed

‎src/app/brand/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,23 +55,23 @@ export default function BrandPage() {
5555
</div>
5656
</section>
5757

58-
<div id="principles" className="min-h-screen flex items-center justify-center scroll-mt-24">
58+
<div id="principles" className="min-h-screen flex items-center justify-center scroll-mt-32">
5959
<SectionPlaceholder
6060
title={t('brand.principles.title')}
6161
description={t('brand.principles.description')}
6262
icon={Award}
6363
/>
6464
</div>
6565

66-
<div id="guidelines" className="min-h-screen flex items-center justify-center scroll-mt-24">
66+
<div id="guidelines" className="min-h-screen flex items-center justify-center scroll-mt-32">
6767
<SectionPlaceholder
6868
title={t('brand.guidelines.title')}
6969
description={t('brand.guidelines.description')}
7070
icon={FileText}
7171
/>
7272
</div>
7373

74-
<div id="resources" className="min-h-screen flex items-center justify-center scroll-mt-24">
74+
<div id="resources" className="min-h-screen flex items-center justify-center scroll-mt-32">
7575
<SectionPlaceholder
7676
title={t('brand.resources.title')}
7777
description={t('brand.resources.description')}

‎src/app/page.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,13 @@ export default function Home() {
3636
</ParallaxSection>
3737

3838
<ParallaxSection speed={0.3} offset={50}>
39-
<div id="mission-vision" className="scroll-mt-24">
39+
<div id="mission-vision" className="scroll-mt-32">
4040
<MissionVision />
4141
</div>
4242
</ParallaxSection>
4343

4444
<ParallaxSection speed={0.4} offset={100}>
45-
<section id="philosophy" className="py-20 scroll-mt-24">
45+
<section id="philosophy" className="py-20 scroll-mt-32">
4646
<div className="max-w-7xl mx-auto px-8">
4747
<div className="text-center mb-16">
4848
<h2 className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent">
@@ -63,19 +63,19 @@ export default function Home() {
6363
</ParallaxSection>
6464

6565
<ParallaxSection speed={0.5} offset={150}>
66-
<div id="values" className="scroll-mt-24">
66+
<div id="values" className="scroll-mt-32">
6767
<Values />
6868
</div>
6969
</ParallaxSection>
7070

7171
<ParallaxSection speed={0.6} offset={200}>
72-
<div id="team" className="scroll-mt-24">
72+
<div id="team" className="scroll-mt-32">
7373
<Team />
7474
</div>
7575
</ParallaxSection>
7676

7777
<ParallaxSection speed={0.7} offset={250}>
78-
<div id="tools" className="scroll-mt-24">
78+
<div id="tools" className="scroll-mt-32">
7979
<Tools />
8080
</div>
8181
</ParallaxSection>

‎src/app/product/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -56,19 +56,19 @@ export default function ProductPage() {
5656
</div>
5757
</section>
5858

59-
<div id="principles" className="min-h-screen flex items-center justify-center scroll-mt-24">
59+
<div id="principles" className="min-h-screen flex items-center justify-center scroll-mt-32">
6060
<ProductPrinciples />
6161
</div>
6262

63-
<div id="guidelines" className="min-h-screen flex items-center justify-center scroll-mt-24">
63+
<div id="guidelines" className="min-h-screen flex items-center justify-center scroll-mt-32">
6464
<SectionPlaceholder
6565
title={t('product.guidelines.title')}
6666
description={t('product.guidelines.description')}
6767
icon={FileText}
6868
/>
6969
</div>
7070

71-
<div id="resources" className="min-h-screen flex items-center justify-center scroll-mt-24">
71+
<div id="resources" className="min-h-screen flex items-center justify-center scroll-mt-32">
7272
<SectionPlaceholder
7373
title={t('product.resources.title')}
7474
description={t('product.resources.description')}

‎src/components/ContactBanner.tsx‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
'use client';
2+
3+
import { useState } from 'react';
4+
import { motion } from 'framer-motion';
5+
import { Mail, X, Coffee, Calendar, Users } from 'lucide-react';
6+
import { useLanguage } from '@/contexts/LanguageContext';
7+
8+
const ContactBanner = () => {
9+
const [isDismissed, setIsDismissed] = useState(false);
10+
const { t } = useLanguage();
11+
12+
if (isDismissed) return null;
13+
14+
return (
15+
<motion.div
16+
initial={{ opacity: 0, y: -20 }}
17+
animate={{ opacity: 1, y: 0 }}
18+
exit={{ opacity: 0, y: -20 }}
19+
transition={{ duration: 0.5 }}
20+
className="fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-accent/10 via-accent/5 to-accent/10 border-b border-accent/20"
21+
>
22+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
23+
<div className="flex items-center justify-between py-3">
24+
{/* Content */}
25+
<div className="flex items-center space-x-4 flex-1">
26+
<div className="flex items-center space-x-3">
27+
<div className="flex items-center space-x-2">
28+
<Coffee className="w-4 h-4 text-accent" />
29+
<span className="text-sm font-medium text-foreground">
30+
{t('banner.title')}
31+
</span>
32+
</div>
33+
<div className="hidden sm:flex items-center space-x-2 text-sm text-muted-foreground">
34+
<Mail className="w-3 h-3" />
35+
<span>design-team@buzzvil.com</span>
36+
</div>
37+
</div>
38+
39+
<div className="hidden md:flex items-center space-x-4 text-xs text-muted-foreground">
40+
<div className="flex items-center space-x-1">
41+
<Calendar className="w-3 h-3" />
42+
<span>{t('banner.requirements.schedule')}</span>
43+
</div>
44+
<div className="flex items-center space-x-1">
45+
<Users className="w-3 h-3" />
46+
<span>{t('banner.requirements.info')}</span>
47+
</div>
48+
</div>
49+
</div>
50+
51+
{/* CTA Button */}
52+
<motion.a
53+
href="mailto:design-team@buzzvil.com?subject=Design Team Meeting Request&body=Hi there!%0A%0AI'd like to schedule a meeting to discuss:%0A%0A[Please describe what you'd like to discuss]%0A%0AAbout me:%0A- Name:%0A- Company/Role:%0A- Brief background:%0A%0AWhen would be a good time for you?%0A%0AThanks!"
54+
whileHover={{ scale: 1.02 }}
55+
whileTap={{ scale: 0.98 }}
56+
className="flex items-center space-x-2 px-4 py-2 bg-accent text-white rounded-lg hover:bg-accent/90 transition-all duration-200 text-sm font-medium shadow-sm"
57+
>
58+
<Mail className="w-4 h-4" />
59+
<span className="hidden sm:inline">{t('banner.cta')}</span>
60+
<span className="sm:hidden">{t('banner.cta.short')}</span>
61+
</motion.a>
62+
63+
{/* Dismiss Button */}
64+
<motion.button
65+
whileHover={{ scale: 1.1 }}
66+
whileTap={{ scale: 0.9 }}
67+
onClick={() => setIsDismissed(true)}
68+
className="ml-3 p-1 rounded-lg hover:bg-muted/50 transition-colors"
69+
aria-label="Dismiss banner"
70+
>
71+
<X className="w-4 h-4 text-muted-foreground" />
72+
</motion.button>
73+
</div>
74+
75+
{/* Mobile Requirements */}
76+
<div className="md:hidden mt-2 pb-2">
77+
<div className="flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
78+
<div className="flex items-center space-x-1">
79+
<Calendar className="w-3 h-3" />
80+
<span>{t('banner.requirements.schedule')}</span>
81+
</div>
82+
<div className="flex items-center space-x-1">
83+
<Users className="w-3 h-3" />
84+
<span>{t('banner.requirements.info')}</span>
85+
</div>
86+
</div>
87+
</div>
88+
</div>
89+
</motion.div>
90+
);
91+
};
92+
93+
export default ContactBanner;

‎src/components/Header.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { useLanguage } from '@/contexts/LanguageContext';
77
import { useRouter } from 'next/navigation';
88
import LanguageSwitcher from './LanguageSwitcher';
99
import Logo from './Logo';
10+
import ContactBanner from './ContactBanner';
1011

1112
const Header = () => {
1213
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -20,7 +21,9 @@ const Header = () => {
2021
];
2122

2223
return (
23-
<header className="fixed top-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border">
24+
<>
25+
<ContactBanner />
26+
<header className="fixed top-12 left-0 right-0 z-40 bg-background/95 backdrop-blur-sm border-b border-border">
2427
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
2528
<div className="flex items-center justify-between h-16">
2629
{/* Logo */}
@@ -118,7 +121,8 @@ const Header = () => {
118121
</motion.div>
119122
)}
120123
</AnimatePresence>
121-
</header>
124+
</header>
125+
</>
122126
);
123127
};
124128

‎src/contexts/LanguageContext.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@ const translations = {
2323
'nav.team': 'Team',
2424
'nav.tools': 'Tools',
2525

26+
// Contact Banner
27+
'banner.title': 'Want to meet us over coffee?',
28+
'banner.cta': 'Schedule a meeting',
29+
'banner.cta.short': 'Contact',
30+
'banner.requirements.schedule': 'Schedule a time',
31+
'banner.requirements.info': 'Include your info',
32+
2633
// Hero
2734
'hero.title': 'Buzzvil Design',
2835
'hero.subtitle': 'Engaging. Playful. Scalable.',
@@ -190,6 +197,13 @@ const translations = {
190197
'nav.team': '팀',
191198
'nav.tools': '도구',
192199

200+
// Contact Banner
201+
'banner.title': '커피 한 잔 하며 만나볼까요?',
202+
'banner.cta': '미팅 예약하기',
203+
'banner.cta.short': '연락',
204+
'banner.requirements.schedule': '시간 예약',
205+
'banner.requirements.info': '정보 포함',
206+
193207
// Hero
194208
'hero.title': 'Buzzvil Design',
195209
'hero.subtitle': '매력적인. 재미있는. 확장 가능한.',

0 commit comments

Comments
 (0)