Skip to content

Commit 49511ef

Browse files
tejasbenibagdetejasbenibagde
committed
fix: correct className usage and enhance navbar visibility
1 parent 88cce6a commit 49511ef

File tree

3 files changed

+217
-334
lines changed

3 files changed

+217
-334
lines changed

‎src/components/Contact.jsx

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -43,57 +43,57 @@ const Contact = () => {
4343
}
4444
return (
4545
<div>
46-
<section class="text-gray-400 bg-gray-1000 body-font ">
47-
<div class="container px-5 py-24 mx-auto">
48-
<div class="flex flex-col text-center w-full mb-12">
49-
<h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
46+
<section className="text-gray-400 bg-gray-1000 body-font ">
47+
<div className="container px-5 py-24 mx-auto">
48+
<div className="flex flex-col text-center w-full mb-12">
49+
<h1 className="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">
5050
Contact Us
5151
</h1>
52-
<p class="lg:w-2/3 mx-auto leading-relaxed text-base"></p>
52+
<p className="lg:w-2/3 mx-auto leading-relaxed text-base"></p>
5353
</div>
5454
<div className="lg:w-1/2 md:w-2/3 mx-auto mb-8">
5555
<div className="flex justify-center md:space-x-12 lg:space-x-14 xl:space-x-20 space-x-6">
5656
<div className="w-12 h-10 flex flex-col items-center">
57-
<a href="https://discord.com/invite/4xruwjjU9B" target="discord" > <FaDiscord className= " hover:fill-current hover:text-[#0DFF1C] hover:w-12 " size={40} /> </a>
57+
<a href="https://discord.com/invite/4xruwjjU9B" target="discord" > <FaDiscord className=" hover:fill-current hover:text-[#0DFF1C] hover:w-12 " size={40} /> </a>
5858
</div>
5959
<div className="w-12 h-10 flex flex-col items-center">
60-
<a href="https://www.reddit.com/r/fosscu/" target="discord" > <FaReddit className= " hover:fill-current hover:text-[#0DFF1C] hover:w-12 " size={40} /> </a>
60+
<a href="https://www.reddit.com/r/fosscu/" target="discord" > <FaReddit className=" hover:fill-current hover:text-[#0DFF1C] hover:w-12 " size={40} /> </a>
6161
</div>
6262
<div className="w-12 h-10 flex flex-col items-center">
63-
<a href="Mailto:[email protected]" target="mail" ><FaEnvelope className= " hover:fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10" size={35} /></a>
63+
<a href="Mailto:[email protected]" target="mail" ><FaEnvelope className=" hover:fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10" size={35} /></a>
6464
</div>
6565
<div className="w-12 h-10 flex flex-col items-center">
66-
<a href="https://www.linkedin.com/company/fosscu/" target="linkedin" ><FaLinkedin className= " fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10" size={35} /></a>
66+
<a href="https://www.linkedin.com/company/fosscu/" target="linkedin" ><FaLinkedin className=" fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10" size={35} /></a>
6767
</div>
6868
<div className="w-12 h-10 flex flex-col items-center">
69-
<a href="https://twitter.com/fosscuk" target="twitter" ><FaTwitter className= " fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10 " size={35} /></a>
69+
<a href="https://twitter.com/fosscuk" target="twitter" ><FaTwitter className=" fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10 " size={35} /></a>
7070
</div>
7171
<div className="w-12 h-10 flex flex-col items-center">
72-
<a href= "https://matrix.to/#/#fosscu:matrix.org" target="Matrix" ><FaNetworkWired className= " fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10 " size={35} /></a>
73-
</div>
72+
<a href="https://matrix.to/#/#fosscu:matrix.org" target="Matrix" ><FaNetworkWired className=" fill-current hover:text-[#0DFF1C] hover:w-12 hover:h-10 " size={35} /></a>
73+
</div>
7474
</div>
7575
</div>
76-
<div class="lg:w-1/2 md:w-2/3 mx-auto">
77-
<form class="flex flex-wrap -m-2"
78-
// onSubmit={(e) => submit(e)}
79-
netlify>
80-
<div class="p-2 w-1/2">
81-
<div class="">
82-
<label for="name" class="leading-7 text-sm text-gray-400">
76+
<div className="lg:w-1/2 md:w-2/3 mx-auto">
77+
<form className="flex flex-wrap -m-2"
78+
// onSubmit={(e) => submit(e)}
79+
netlify>
80+
<div className="p-2 w-1/2">
81+
<div className="">
82+
<label for="name" className="leading-7 text-sm text-gray-400">
8383
Name
8484
</label>
8585
<input
8686
type="text"
8787
id="name"
8888
onChange={(e) => handle(e)}
8989
value={data.name}
90-
class="w-full bg-gray-800 hover:outline-2 bg-opacity-40 rounded border border-gray-700 focus:border-[#0dff1c] focus:bg-gray-900 focus:ring-2 focus:ring-[#0dff1c] text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
90+
className="w-full bg-gray-800 hover:outline-2 bg-opacity-40 rounded border border-gray-700 focus:border-[#0dff1c] focus:bg-gray-900 focus:ring-2 focus:ring-[#0dff1c] text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
9191
/>
9292
</div>
9393
</div>
94-
<div class="p-2 w-1/2">
95-
<div class="">
96-
<label for="email" class="leading-7 text-sm text-gray-400">
94+
<div className="p-2 w-1/2">
95+
<div className="">
96+
<label for="email" className="leading-7 text-sm text-gray-400">
9797
Email
9898
</label>
9999
<input
@@ -102,26 +102,26 @@ const Contact = () => {
102102
name="email"
103103
onChange={(e) => handle(e)}
104104
value={data.email}
105-
class="w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-[#0dff1c] focus:bg-gray-900 focus:ring-2 focus:ring-[#0dff1c] text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
105+
className="w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-[#0dff1c] focus:bg-gray-900 focus:ring-2 focus:ring-[#0dff1c] text-base outline-none text-gray-100 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out"
106106
/>
107107
</div>
108108
</div>
109-
<div class="p-2 w-full">
110-
<div class="">
111-
<label for="message" class="leading-7 text-sm text-gray-400">
109+
<div className="p-2 w-full">
110+
<div className="">
111+
<label for="message" className="leading-7 text-sm text-gray-400">
112112
Message
113113
</label>
114114
<textarea
115115
id="message"
116116
name="message"
117117
onChange={(e) => handle(e)}
118118
value={data.message}
119-
class="w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-[#0dff1c] focus:bg-gray-900 focus:ring-2 focus:ring-[#0dff1c] h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"
119+
className="w-full bg-gray-800 bg-opacity-40 rounded border border-gray-700 focus:border-[#0dff1c] focus:bg-gray-900 focus:ring-2 focus:ring-[#0dff1c] h-32 text-base outline-none text-gray-100 py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out"
120120
></textarea>
121121
</div>
122122
</div>
123-
<div class="p-2 w-full">
124-
<button class="flex mx-auto tracking-tight font-semibold text-black bg-[#00ff11c4] border-0 py-2 px-8 focus:outline-none hover:bg-[#0dff1c] rounded text-lg">
123+
<div className="p-2 w-full">
124+
<button className="flex mx-auto tracking-tight font-semibold text-black bg-[#00ff11c4] border-0 py-2 px-8 focus:outline-none hover:bg-[#0dff1c] rounded text-lg">
125125
Submit
126126
</button>
127127
</div>

‎src/components/Navbar.jsx

Lines changed: 30 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -39,55 +39,49 @@ const Navbar = () => {
3939
</h1>
4040
<ul className="hidden md:flex">
4141
<li
42-
className={`p-4 ${
43-
activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
44-
}`}
42+
className={`p-4 ${activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
43+
}`}
4544
>
4645
<Link to="/"> Home </Link>{" "}
4746
</li>
4847
<li
49-
className={`p-4 ${
50-
activeLink === "/about"
48+
className={`p-4 ${activeLink === "/about"
5149
? "text-[#0DFF1C]"
5250
: "hover:text-[#0DFF1C]"
53-
}`}
51+
}`}
5452
>
5553
<Link to="/about">About</Link>
5654
</li>
5755
<li
58-
className={`p-4 ${
59-
activeLink === "/team" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
60-
}`}
56+
className={`p-4 ${activeLink === "/team" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
57+
}`}
6158
>
6259
<Link to="/team"> Team </Link>{" "}
6360
</li>
6461

6562
<li
66-
className={`p-4 ${
67-
activeLink === "/resource"
63+
className={`p-4 ${activeLink === "/resource"
6864
? "text-[#0DFF1C]"
6965
: "hover:text-[#0DFF1C]"
70-
} hover:text-[#0DFF1C] translate-x-[-3.2em] hidden absolute bg-white text-gray-900 rounded mt-1 w-48 group-hover:block hover:rounded-md `}
66+
} hover:text-[#0DFF1C] translate-x-[-3.2em] hidden absolute bg-white text-gray-900 rounded mt-1 w-48 group-hover:block hover:rounded-md `}
7167
>
7268
<a href="/resource">Resources</a>
7369
</li>
7470

7571
<li
76-
className={`p-4 ${
77-
activeLink === "/contact"
72+
className={`p-4 ${activeLink === "/contact"
7873
? "text-[#0DFF1C]"
7974
: "hover:text-[#0DFF1C]"
80-
} hover:text-[#0DFF1C]`}
75+
} hover:text-[#0DFF1C]`}
8176
>
8277
<Link to="/contact">Contact</Link>
8378
</li>
8479

8580
<li
86-
className={`p-4 ${
87-
activeLink === "/shipyard"
81+
className={`p-4 ${activeLink === "/shipyard"
8882
? "text-[#0DFF1C]"
8983
: "hover:text-[#0DFF1C]"
90-
} hover:text-[#0DFF1C]`}
84+
} hover:text-[#0DFF1C]`}
9185
>
9286
<Link to="/shipyard">Shipyard</Link>
9387
</li>
@@ -160,39 +154,35 @@ const Navbar = () => {
160154
</center>
161155
<ul className="uppercase p-4">
162156
<li
163-
className={`p-4 ${
164-
activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
165-
} border-b border-gray-600 `}
157+
className={`p-4 ${activeLink === "/" ? "text-[#0DFF1C]" : "hover:text-[#0DFF1C]"
158+
} border-b border-gray-600 `}
166159
>
167160
<Link to="/" onClick={() => handleLinkClick("/")}>
168161
{" "}
169162
Home{" "}
170163
</Link>{" "}
171164
</li>
172165
<li
173-
className={`p-4 ${
174-
activeLink === "/about"
166+
className={`p-4 ${activeLink === "/about"
175167
? "text-[#0DFF1C]"
176168
: "hover:text-[#0DFF1C]"
177-
} border-b border-gray-600 `}
169+
} border-b border-gray-600 `}
178170
>
179171
<Link to="/about">About</Link>
180172
</li>
181173
<li
182-
className={`p-4 ${
183-
activeLink === "/team"
174+
className={`p-4 ${activeLink === "/team"
184175
? "text-[#0DFF1C]"
185176
: "hover:text-[#0DFF1C]"
186-
} border-b border-gray-600 `}
177+
} border-b border-gray-600 `}
187178
>
188179
<Link to="/team"> Team </Link>{" "}
189180
</li>
190181
<li
191-
className={`p-4 ${
192-
activeLink === "/resource"
182+
className={`p-4 ${activeLink === "/resource"
193183
? "text-[#0DFF1C]"
194184
: "hover:text-[#0DFF1C]"
195-
} border-b border-gray-600 `}
185+
} border-b border-gray-600 `}
196186
>
197187
<Link to="/resource">Resources</Link>{" "}
198188
</li>
@@ -203,14 +193,21 @@ const Navbar = () => {
203193
<a href="https://github.com/FOSS-Community">Projects</a>
204194
</li>
205195
<li
206-
className={`p-4 ${
207-
activeLink === "/contact"
196+
className={`p-4 ${activeLink === "/contact"
208197
? "text-[#0DFF1C]"
209198
: "hover:text-[#0DFF1C]"
210-
} border-b border-gray-600 `}
199+
} border-b border-gray-600 `}
211200
>
212201
<Link to="/contact">Contact</Link>
213202
</li>
203+
<li
204+
className={`p-4 ${activeLink === "/contact"
205+
? "text-[#0DFF1C]"
206+
: "hover:text-[#0DFF1C]"
207+
} border-b border-gray-600 `}
208+
>
209+
<Link to="/shipyard">Shipyard</Link>
210+
</li>
214211
<li className={`p-4 border-b border-gray-600 `}>
215212
<a href="https://lu.ma/fosscu">Calender</a>
216213
</li>

0 commit comments

Comments
 (0)