Skip to content

Commit bc57dbd

Browse files
bleriotnoguiableriotnoguia
committed
🎨 Redesign Footer with Enhanced Branding and Social Links
1 parent 56e42fe commit bc57dbd

2 files changed

Lines changed: 157 additions & 51 deletions

File tree

‎inertia/components/footer.tsx‎

Lines changed: 156 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -2,70 +2,175 @@ import { Link } from '@inertiajs/react'
22

33
export default function Footer() {
44
return (
5-
<footer className="bg-white">
5+
<footer className="bg-gray-900 text-white">
66
<div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
77
<div className="xl:grid xl:grid-cols-3 xl:gap-8">
88
<div className="space-y-8 xl:col-span-1">
9-
<Link href="/" className="text-lg font-bold text-gray-900">
10-
JavaScript.cm
9+
<Link href="/" className="flex items-center">
10+
<img
11+
src="/resources/images/undraw_read-notes_7itt.svg"
12+
alt="JavaScript.cm"
13+
className="h-8 w-auto"
14+
/>
15+
<span className="ml-2 text-lg font-bold">JavaScript.cm</span>
1116
</Link>
12-
<p className="text-gray-500 text-base">
17+
<p className="text-gray-400 text-base">
1318
La plus grande communauté de développeurs JavaScript au Cameroun.
1419
</p>
20+
<div className="flex space-x-6">
21+
<a
22+
href="https://twitter.com/javascriptcm"
23+
className="text-gray-400 hover:text-gray-300"
24+
>
25+
<span className="sr-only">Twitter</span>
26+
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
27+
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
28+
</svg>
29+
</a>
30+
<a
31+
href="https://facebook.com/javascriptcm"
32+
className="text-gray-400 hover:text-gray-300"
33+
>
34+
<span className="sr-only">Facebook</span>
35+
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
36+
<path
37+
fillRule="evenodd"
38+
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
39+
clipRule="evenodd"
40+
/>
41+
</svg>
42+
</a>
43+
<a
44+
href="https://linkedin.com/company/javascriptcm"
45+
className="text-gray-400 hover:text-gray-300"
46+
>
47+
<span className="sr-only">LinkedIn</span>
48+
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
49+
<path
50+
fillRule="evenodd"
51+
d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"
52+
clipRule="evenodd"
53+
/>
54+
</svg>
55+
</a>
56+
<a
57+
href="https://github.com/javascriptcm"
58+
className="text-gray-400 hover:text-gray-300"
59+
>
60+
<span className="sr-only">GitHub</span>
61+
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
62+
<path
63+
fillRule="evenodd"
64+
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
65+
clipRule="evenodd"
66+
/>
67+
</svg>
68+
</a>
69+
<a
70+
href="https://youtube.com/@javascriptcm"
71+
className="text-gray-400 hover:text-gray-300"
72+
>
73+
<span className="sr-only">YouTube</span>
74+
<svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
75+
<path
76+
fillRule="evenodd"
77+
d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z"
78+
clipRule="evenodd"
79+
/>
80+
</svg>
81+
</a>
82+
</div>
1583
</div>
16-
<div className="mt-12 grid grid-cols-2 gap-8 xl:mt-0 xl:col-span-2">
17-
<div className="md:grid md:grid-cols-2 md:gap-8">
18-
<div>
19-
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
20-
Ressources
21-
</h3>
22-
<ul role="list" className="mt-4 space-y-4">
23-
<li>
24-
<Link href="/about" className="text-base text-gray-500 hover:text-gray-900">
25-
A propos
26-
</Link>
27-
</li>
28-
<li>
29-
<Link href="/sponsors" className="text-base text-gray-500 hover:text-gray-900">
30-
Soutien
31-
</Link>
32-
</li>
33-
<li>
34-
<Link href="/snippets" className="text-base text-gray-500 hover:text-gray-900">
35-
Snippets
36-
</Link>
37-
</li>
38-
</ul>
39-
</div>
40-
<div className="mt-12 md:mt-0">
41-
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
42-
Légal
43-
</h3>
44-
<ul role="list" className="mt-4 space-y-4">
45-
<li>
46-
<Link href="/terms" className="text-base text-gray-500 hover:text-gray-900">
47-
Conditions d'utilisation
48-
</Link>
49-
</li>
50-
<li>
51-
<Link href="/privacy" className="text-base text-gray-500 hover:text-gray-900">
52-
Confidentialité
53-
</Link>
54-
</li>
55-
<li>
56-
<Link href="/conduct" className="text-base text-gray-500 hover:text-gray-900">
57-
Code de conduite
58-
</Link>
59-
</li>
60-
</ul>
84+
<div className="mt-12 grid xl:grid-cols-3 gap-8 xl:mt-0 xl:col-span-2">
85+
<div>
86+
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
87+
Ressources
88+
</h3>
89+
<ul role="list" className="mt-4 space-y-4">
90+
<li>
91+
<Link href="/about" className="text-base text-gray-300 hover:text-white">
92+
A propos
93+
</Link>
94+
</li>
95+
<li>
96+
<Link href="/sponsors" className="text-base text-gray-300 hover:text-white">
97+
Soutien
98+
</Link>
99+
</li>
100+
<li>
101+
<Link href="/snippets" className="text-base text-gray-300 hover:text-white">
102+
Snippets
103+
</Link>
104+
</li>
105+
<li>
106+
<Link href="/branding" className="text-base text-gray-300 hover:text-white">
107+
Branding
108+
</Link>
109+
</li>
110+
</ul>
111+
</div>
112+
<div>
113+
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
114+
Légal
115+
</h3>
116+
<ul role="list" className="mt-4 space-y-4">
117+
<li>
118+
<Link href="/terms" className="text-base text-gray-300 hover:text-white">
119+
Conditions d'utilisation
120+
</Link>
121+
</li>
122+
<li>
123+
<Link href="/privacy" className="text-base text-gray-300 hover:text-white">
124+
Confidentialité
125+
</Link>
126+
</li>
127+
<li>
128+
<Link href="/conduct" className="text-base text-gray-300 hover:text-white">
129+
Code de conduite
130+
</Link>
131+
</li>
132+
</ul>
133+
</div>
134+
<div>
135+
<h3 className="text-sm font-semibold text-gray-400 tracking-wider uppercase">
136+
Rejoignez nous
137+
</h3>
138+
<p className="mt-4 text-base text-gray-300">
139+
Intégrez nos différentes plateformes de communication, recevez des tutoriels,
140+
articles et podcasts sur le design et la programmation web.
141+
</p>
142+
<div className="mt-4 flex space-x-4">
143+
<a
144+
href="https://discord.gg/javascriptcm"
145+
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
146+
>
147+
<svg className="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
148+
<path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
149+
</svg>
150+
Discord
151+
</a>
152+
<a
153+
href="https://t.me/javascriptcm"
154+
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-500 hover:bg-blue-600"
155+
>
156+
<svg className="h-5 w-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
157+
<path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.96 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z" />
158+
</svg>
159+
Telegram
160+
</a>
61161
</div>
62162
</div>
63163
</div>
64164
</div>
65-
<div className="mt-12 border-t border-gray-200 pt-8">
66-
<p className="text-base text-gray-400 xl:text-center">
165+
<div className="mt-12 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center">
166+
<p className="text-base text-gray-400">
67167
&copy; {new Date().getFullYear()} JavaScript Cameroun. Tous droits réservés.
68168
</p>
169+
<div className="mt-4 md:mt-0">
170+
<button className="inline-flex items-center px-3 py-1 border border-gray-700 rounded-md text-sm text-gray-300 hover:text-white">
171+
<span className="mr-2">🇫🇷</span> Français
172+
</button>
173+
</div>
69174
</div>
70175
</div>
71176
</footer>

‎resources/images/undraw_read-notes_7itt.svg‎

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)