Skip to content

Commit aeaa146

Browse files
sa-fw-ansa-fw-an
committed
Add Banner to MainPage
1 parent 0d4e0a1 commit aeaa146

File tree

5 files changed

+510
-0
lines changed

5 files changed

+510
-0
lines changed

‎src/components/Banner/Icon.tsx‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
import { IconProps } from '@/constants/Banner';
2+
import React from 'react';
3+
4+
export const PromoIcon: React.FC<IconProps> = ({ theme }) => {
5+
switch (theme) {
6+
case 'primary':
7+
return (
8+
<svg
9+
xmlns="http://www.w3.org/2000/svg"
10+
className="h-5 w-5"
11+
viewBox="0 0 24 24"
12+
fill="none"
13+
stroke="currentColor"
14+
strokeWidth="1.5"
15+
strokeLinecap="round"
16+
strokeLinejoin="round"
17+
>
18+
{/* Currency note design */}
19+
<rect x="2" y="6" width="20" height="12" rx="2" />
20+
<circle cx="12" cy="12" r="3.5" />
21+
<line x1="2" y1="10" x2="22" y2="10" />
22+
<line x1="2" y1="14" x2="22" y2="14" />
23+
<path d="M12 8.5v7" />
24+
<path d="M10.5 10.5c.83-.35 2.17-.35 3 0" />
25+
<path d="M10.5 13.5c.83.35 2.17.35 3 0" />
26+
</svg>
27+
);
28+
case 'success':
29+
return (
30+
<svg
31+
xmlns="http://www.w3.org/2000/svg"
32+
className="h-5 w-5"
33+
viewBox="0 0 24 24"
34+
fill="none"
35+
stroke="currentColor"
36+
strokeWidth="1.5"
37+
strokeLinecap="round"
38+
strokeLinejoin="round"
39+
>
40+
{/* Check mark in circle */}
41+
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
42+
<polyline points="22 4 12 14.01 9 11.01" />
43+
</svg>
44+
);
45+
case 'warning':
46+
return (
47+
<svg
48+
xmlns="http://www.w3.org/2000/svg"
49+
className="h-5 w-5"
50+
viewBox="0 0 24 24"
51+
fill="none"
52+
stroke="currentColor"
53+
strokeWidth="1.5"
54+
strokeLinecap="round"
55+
strokeLinejoin="round"
56+
>
57+
{/* Warning triangle */}
58+
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
59+
<line x1="12" y1="9" x2="12" y2="13" />
60+
<line x1="12" y1="17" x2="12.01" y2="17" />
61+
</svg>
62+
);
63+
case 'sale':
64+
return (
65+
<svg
66+
xmlns="http://www.w3.org/2000/svg"
67+
className="h-5 w-5"
68+
viewBox="0 0 24 24"
69+
fill="none"
70+
stroke="currentColor"
71+
strokeWidth="1.5"
72+
strokeLinecap="round"
73+
strokeLinejoin="round"
74+
>
75+
{/* Shopping bag */}
76+
<path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z" />
77+
<line x1="3" y1="6" x2="21" y2="6" />
78+
<path d="M16 10a4 4 0 0 1-8 0" />
79+
<line x1="9" y1="15" x2="15" y2="15" />
80+
</svg>
81+
);
82+
case 'info':
83+
default:
84+
return (
85+
<svg
86+
xmlns="http://www.w3.org/2000/svg"
87+
className="h-5 w-5"
88+
viewBox="0 0 24 24"
89+
fill="none"
90+
stroke="currentColor"
91+
strokeWidth="1.5"
92+
strokeLinecap="round"
93+
strokeLinejoin="round"
94+
>
95+
{/* Info icon */}
96+
<circle cx="12" cy="12" r="10" />
97+
<path d="M12 16v-4" />
98+
<path d="M12 8h.01" />
99+
</svg>
100+
);
101+
}
102+
};

‎src/components/Banner/Theme.ts‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
export const themeConfig = {
2+
primary: {
3+
background: 'from-blue-100 to-indigo-200',
4+
border: 'border-blue-300',
5+
icon: 'text-blue-700',
6+
button:
7+
'from-blue-700 to-indigo-800 hover:from-blue-800 hover:to-indigo-900',
8+
progress: 'from-blue-600 to-indigo-700',
9+
text: 'text-blue-950',
10+
},
11+
success: {
12+
background: 'from-green-100 to-emerald-200',
13+
border: 'border-green-300',
14+
icon: 'text-emerald-700',
15+
button:
16+
'from-green-700 to-emerald-800 hover:from-green-800 hover:to-emerald-900',
17+
progress: 'from-green-600 to-emerald-700',
18+
text: 'text-green-950',
19+
},
20+
warning: {
21+
background: 'from-amber-100 to-orange-200',
22+
border: 'border-amber-300',
23+
icon: 'text-amber-700',
24+
button:
25+
'from-amber-600 to-orange-700 hover:from-amber-700 hover:to-orange-800',
26+
progress: 'from-amber-600 to-orange-700',
27+
text: 'text-amber-950',
28+
},
29+
sale: {
30+
background: 'from-purple-100 to-fuchsia-200',
31+
border: 'border-purple-300',
32+
icon: 'text-purple-700',
33+
button:
34+
'from-purple-700 to-fuchsia-800 hover:from-purple-800 hover:to-fuchsia-900',
35+
progress: 'from-purple-600 to-fuchsia-700',
36+
text: 'text-purple-950',
37+
},
38+
info: {
39+
background: 'from-cyan-100 to-sky-200',
40+
border: 'border-cyan-300',
41+
icon: 'text-cyan-700',
42+
button: 'from-cyan-700 to-sky-800 hover:from-cyan-800 hover:to-sky-900',
43+
progress: 'from-cyan-600 to-sky-700',
44+
text: 'text-cyan-950',
45+
},
46+
};

‎src/constants/Banner.ts‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
export interface BannerConfig {
2+
title: string;
3+
description?: string;
4+
buttonText: string;
5+
buttonLink: string;
6+
theme?: 'primary' | 'success' | 'warning' | 'sale' | 'info';
7+
isExternalLink?: boolean;
8+
}
9+
10+
export interface IconProps {
11+
theme: 'primary' | 'success' | 'warning' | 'sale' | 'info';
12+
}
13+
14+
export const bannerConfigs = {
15+
donation: {
16+
title:
17+
'Help us reach our goal - $15,000 needed for our new community center (Mock Text for display)',
18+
description:
19+
'Your contribution makes a difference in our community. Join 230 others who have already donated.',
20+
buttonText: 'Donate Now',
21+
buttonLink: '/donate',
22+
theme: 'primary' as const,
23+
},
24+
25+
sale: {
26+
title:
27+
'Flash Sale! 48 Hours Only - 40% OFF All Premium Templates (Mock Text for display)',
28+
description: 'Use code FLASH40 at checkout. Ends Sunday at midnight.',
29+
buttonText: 'Shop Now',
30+
buttonLink: '/products',
31+
theme: 'sale' as const,
32+
},
33+
34+
newRelease: {
35+
title:
36+
'New Product Launch! Introducing our AI-powered design tools (Mock Text for display)',
37+
buttonText: 'Learn More',
38+
buttonLink: '/products',
39+
theme: 'info' as const,
40+
},
41+
42+
limitedOffer: {
43+
title:
44+
'Limited Time Offer - Early Bird Tickets Available (Mock Text for display)',
45+
description: 'Register now and save 30% on conference tickets',
46+
buttonText: 'Register',
47+
buttonLink: '/volunteer',
48+
theme: 'warning' as const,
49+
},
50+
51+
announcement: {
52+
title:
53+
'Important Announcement: System maintenance scheduled (Mock Text for display)',
54+
description:
55+
'Our platform will be down for maintenance on March 15th from 2-4 AM UTC',
56+
buttonText: 'Read More',
57+
buttonLink: 'https://www.example.com',
58+
theme: 'info' as const,
59+
isExternalLink: true,
60+
},
61+
62+
successStory: {
63+
title:
64+
'Success Story: How Our Tools Helped a Small Business Thrive (Mock Text for display)',
65+
description: 'Read about how our solutions transformed a local business.',
66+
buttonText: 'Read Story',
67+
buttonLink: '/news/sugar-stories',
68+
theme: 'success' as const,
69+
},
70+
71+
webinar: {
72+
title:
73+
'Upcoming Webinar: Mastering the Art of Digital Marketing (Mock Text for display)',
74+
description: 'Join us live on March 25th. Seats are limited!',
75+
buttonText: 'Register Now',
76+
buttonLink: 'https://www.example.com',
77+
theme: 'info' as const,
78+
isExternalLink: true,
79+
},
80+
81+
feedback: {
82+
title: 'We Value Your Feedback',
83+
description:
84+
'Take our short survey and help us improve your experience. (Mock Text for display)',
85+
buttonText: 'Give Feedback',
86+
buttonLink: '/contact-us',
87+
theme: 'info' as const,
88+
},
89+
90+
seasonalPromo: {
91+
title:
92+
'Spring Sale! Refresh Your Wardrobe with 30% OFF (Mock Text for display)',
93+
description: 'New season, new styles. Use code SPRING30 at checkout.',
94+
buttonText: 'Shop Now',
95+
buttonLink: '/products',
96+
theme: 'sale' as const,
97+
},
98+
99+
securityUpdate: {
100+
title: 'Security Update: Protect Your Account (Mock Text for display)',
101+
description:
102+
'Enable two-factor authentication to enhance your account security.',
103+
buttonText: 'Learn How',
104+
buttonLink: 'https://www.example.com',
105+
theme: 'warning' as const,
106+
isExternalLink: true,
107+
},
108+
};

‎src/pages/MainPage.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,14 @@ import Info from '@/components/Info.tsx';
66
import { Testimonials } from '@/components/Testimonials';
77
import { TryMore } from '@/components/TryMore3D';
88
import Donation from '@/components/Donation.tsx';
9+
import PromoBanner from '@/sections/Banner';
10+
import { bannerConfigs } from '@/constants/Banner';
911

1012
const MainPage = () => {
1113
return (
1214
<>
1315
<Header />
16+
<PromoBanner bannerConfigs={bannerConfigs} />
1417
<Info />
1518
<Stats />
1619
<Testimonials />

0 commit comments

Comments
 (0)