Uniform Theme

This code is made while keeping mind the unifor theme , which is followed by Google Developer Student Club and the primary color in this is bg-blue-500.This will ensure uniformirty across pages.

package.json

@@ -48,6 +48,7 @@
     "react-icons": "^5.3.0",
     "react-resizable-panels": "^2.1.4",
     "react-toastify": "^10.0.6",
+    "sharp": "^0.33.5",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",

src/app/(pages)/About/page.jsx

@@ -157,7 +157,7 @@ export default function About() {
 
                             <button
                                 type="submit"
-                                className="group mt-4 flex w-full items-center justify-center gap-2 rounded-md bg-rose-600 px-5 py-3 text-white transition focus:outline-none focus:ring focus:ring-yellow-400 sm:mt-0 sm:w-auto"
+                                className="group mt-4 flex w-full items-center justify-center gap-2 rounded-md bg-blue-500 hover:bg-blue-600 px-5 py-3 text-white transition focus:outline-none focus:ring focus:ring-blue-400 sm:mt-0 sm:w-auto"
                             >
                                 <span className="text-sm font-medium"> Sign Up </span>
                                 <svg

src/app/(pages)/Events/EventItem.js

@@ -19,7 +19,7 @@ const EventItem = ({ title, date, description, videoSrc, id }) => {
                 <h2 className="event-title">{title}</h2>
                 <p className="event-date">Date: {date}</p>
                 <p className="event-description">{description}</p>
-                <Link href={`/SingleEvent/${id}`} passHref className="event-link">
+                <Link href={`/SingleEvent/${id}`} passHref className="event-link bg-blue-500">
                     Learn More
                 </Link>
             </div>

src/app/(pages)/Events/Events.css

@@ -127,7 +127,7 @@
 
 .event-link {
   display: inline-block;
-  background-color: #333333;
+  background-color: #3b82f6;
   color: #fff;
   padding: 8px 15px;
   border-radius: 4px;
@@ -136,7 +136,7 @@
 }
 
 .event-link:hover {
-  background-color: #555;
+  background-color: #2563eb;
 }
 
 @media screen and (max-width: 768px) {

src/app/(pages)/FAQsForum/page.jsx

@@ -57,7 +57,7 @@ const FAQForum = () => {
 
         {/* FAQs Section */}
         <section className="mb-16 mt-10">
-          <h2 className="text-4xl font-semibold text-indigo-600 mb-8 text-center">
+          <h2 className="text-4xl font-semibold text-blue-600 mb-8 text-center">
             Frequently Asked Questions
           </h2>
           <div className="space-y-6">
@@ -102,7 +102,7 @@ const FAQForum = () => {
 
         {/* Forum Section */}
         <section>
-          <h2 className="text-4xl font-semibold text-indigo-600 mb-8 text-center">
+          <h2 className="text-4xl font-semibold text-blue-600 mb-8 text-center">
             Forum
           </h2>
 
@@ -130,7 +130,7 @@ const FAQForum = () => {
             </div>
             <button
               type="submit"
-              className="mt-4 px-6 py-3 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 transition duration-300 ease-in-out"
+              className="mt-4 px-6 py-3 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600 transition duration-300 ease-in-out"
             >
               Submit Post
             </button>
@@ -139,11 +139,11 @@ const FAQForum = () => {
           {/* All Posts */}
           <section>
             <div className="flex justify-between items-center mb-6">
-              <h2 className="text-4xl font-semibold text-indigo-600">
+              <h2 className="text-4xl font-semibold text-blue-600">
                 All Posts
               </h2>
               <button
-                className="px-4 py-2 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-600 transition duration-300"
+                className="px-4 py-2 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600 transition duration-300"
                 onClick={handleSort}
               >
                 Sort

src/app/(pages)/GeminiAI/page.jsx

@@ -122,18 +122,30 @@ export default function GeminiAI() {
                 </Box>
                 <Divider />
                 <form onSubmit={handleSubmit} style={{ display: 'flex', alignItems: 'center', marginTop: '1rem' }}>
-                    <TextField
-                        fullWidth
-                        variant="outlined"
-                        value={userInput}
-                        onChange={(e) => setUserInput(e.target.value)}
-                        placeholder="Type a message..."
-                        style={{ marginRight: '1rem', backgroundColor: 'white', borderRadius: '4px' }}
-                    />
-                    <Button type="submit" variant="contained" color="primary" endIcon={<SendIcon />}>
-                        Send
-                    </Button>
-                </form>
+    <TextField
+        fullWidth
+        variant="outlined"
+        value={userInput}
+        onChange={(e) => setUserInput(e.target.value)}
+        placeholder="Type a message..."
+        style={{
+            marginRight: '1rem',
+            backgroundColor: 'white',
+            borderRadius: '4px',
+            height: '56px', // Adjust height to match button
+        }}
+    />
+    <Button
+        type="submit"
+        variant="contained"
+        color="primary"
+        endIcon={<SendIcon />}
+        style={{ height: '56px' }} // Match the height of the input
+    >
+        Send
+    </Button>
+</form>
+
             </Paper>
         </Container>
     );

src/app/(pages)/Projects/Card.jsx

@@ -26,7 +26,7 @@ function Card(props) {
       <div className="px-6 py-4 flex justify-center">
         <a
           href={props.link}
-          className="inline-block px-4 py-2 bg-gradient-to-r from-blue-500 to-indigo-500 text-white rounded-lg shadow-md hover:from-blue-600 hover:to-indigo-600 transition duration-300 transform hover:scale-105"
+          className="inline-block px-4 py-2  bg-blue-500  text-white rounded-lg shadow-md hover:from-blue-600 hover:to-indigo-600 transition duration-300 transform hover:scale-105"
           target="_blank"
           rel="noopener noreferrer"
         >

src/app/(pages)/Resources/page.jsx

@@ -49,15 +49,15 @@ function Resource() {
               : resources.map((resource, index) => (
               <motion.a
                 key={index}
-                className="block rounded-xl border border-gray-800 p-8 shadow-xl transition hover:border-pink-500/10 hover:shadow-pink-500/10"
+                className="block rounded-xl border border-gray-800 p-8 shadow-xl transition hover:border-blue-500/10 hover:shadow-blue-500/10"
                 href={`/Resources/${resource.id}`}
                 initial={{ opacity: 0, scale: 0.95 }}
                 animate={{ opacity: 1, scale: 1 }}
                 transition={{ duration: 0.5, delay: index * 0.1 }}
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
-                  className="size-10 text-pink-500"
+                  className="size-10 text-blue-500"
                   fill="none"
                   viewBox="0 0 24 24"
                   stroke="currentColor"
@@ -86,7 +86,7 @@ function Resource() {
             ) : (
             <motion.a
               href="/signup"
-              className="inline-block rounded bg-pink-600 px-12 py-3 text-sm font-medium text-white transition hover:bg-pink-700 focus:outline-none focus:ring focus:ring-yellow-400"
+              className="inline-block rounded bg-blue-500 px-12 py-3 text-sm font-medium text-white transition hover:bg-blue-600"
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.5 }}

src/app/(pages)/Resources/resources.js

@@ -39,7 +39,7 @@ const resources = [
     },
     {
         id: 3,
-        title: "UI/UX Development",
+        title: "UI / UX Development",
         description: "To learn UX design, follow this roadmap",
         extendedContent: `
             User Experience (UX) and User Interface (UI) design are crucial for creating products that users find intuitive and enjoyable.

src/app/(pages)/Subscribe/page.jsx

@@ -71,7 +71,7 @@ export default function Subscribe() {
                                 placeholder="[email protected]"
                                 className="bg-gray-100 rounded-lg w-full text-center h-12 focus:outline-slate-400 focus:shadow-lg transition-shadow duration-300 ease-in-out"
                             />
-                            <Button className="hover:scale-105 transition-transform duration-300 ease-in-out">Subscribe</Button>
+                            <Button className="hover:scale-105 transition-transform duration-300 ease-in-out bg-blue-500 hover:bg-blue-600 text-white">Subscribe</Button>
                         </motion.div>
                     </div>
                 </motion.div>

src/components/Global/Header.jsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 
 import { cn } from "@/lib/utils";
 // import { Icons } from "@/components/icons";
-
+