beatifying text

ASHMITA489 · Oct 1, 2023 · 0c64600 · 0c64600
1 parent 905a10e
commit 0c64600
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 30 deletions.
diff --git a/components/Fields.jsx b/components/Fields.jsx
@@ -3,11 +3,11 @@ import Image from "next/image";
 
 function Fields() {
   return (
-    <div className="p-20">
+    <div className="p-20 relative mx-auto">
       <p className="text-6xl font-semibold text-center">FIELDS WE WORK IN</p>
       {/* Web Development */}
-      <div className="flex items-center py-5">
-        <div className="w-2/3">
+      <div className="grid grid-cols-2 items-center py-5">
+        <div className="w-10/12">
           <p className="font-semibold text-6xl mb-5">Development</p>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt,
@@ -17,16 +17,16 @@ function Fields() {
           </p>
         </div>
         <div>
-          <Image src="/webdev-image.png" width={400} height={400} />
+          <Image src="/webdev-image.png" width={400} height={400}  alt=""/>
         </div>
       </div>
 
       {/* DSA AND CP */}
-      <div className="flex items-center py-5 bg-gray-100">
+      <div className="grid grid-cols-2 items-center py-5 bg-gray-100">
         <div>
-          <Image src="/dsacp-image.png" width={400} height={400} />
+          <Image src="/dsacp-image.png" width={400} height={400}  alt=""/>
         </div>
-        <div className="w-2/3">
+        <div className="w-10/12">
           <p className="font-semibold text-6xl mb-5">DSA And CP</p>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt,
@@ -38,8 +38,8 @@ function Fields() {
       </div>
 
       {/* Machine Learning */}
-      <div className="flex items-center py-5">
-        <div className="w-2/3">
+      <div className="grid grid-cols-2 items-center py-5">
+        <div className="w-10/12">
           <p className="font-semibold text-6xl mb-5">Machine Learning</p>
           <p>
             Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt,
@@ -49,7 +49,7 @@ function Fields() {
           </p>
         </div>
         <div>
-          <Image src="/ml-image.png" width={400} height={400} />
+          <Image src="/ml-image.png" width={400} height={400} alt=""/>
         </div>
       </div>
     </div>

diff --git a/components/Footer.jsx b/components/Footer.jsx
@@ -4,8 +4,8 @@ function Footer() {
   return (
 
     <footer className="bg-gray-100 py-8 sm:py-12">
-      <div className="container mx-auto px-4">
-        <div className="sm:flex sm:flex-wrap sm:-mx-4 md:py-4">
+      <div className="container mx-auto px-4 relative ">
+        <div className="sm:flex sm:flex-wrap mx-[27%] w-full">
           <div className="px-4 sm:w-1/2 md:w-1/4 xl:w-1/6">
             <h5 className="text-xl font-bold mb-6">Features</h5>
             <ul className="list-none footer-links">
@@ -63,21 +63,22 @@ function Footer() {
               </li>
             </ul>
           </div>
-          <div className="px-4 mt-4 sm:w-1/3 xl:w-1/6 sm:mx-auto xl:mt-0 xl:ml-auto">
+
+        </div>
+        <div className="px-4 mt-4 sm:w-1/3 xl:w-1/6 sm:mx-auto xl:mt-0 xl:ml-auto">
             <h5 className="text-xl font-bold mb-6 text-center xl:text-left">Stay connected</h5>
             <div className="flex justify-center xl:justify-start">
-              <a href="#" className="w-8 h-8 border border-2 border-gray-400 rounded-full text-center py-1 text-gray-600 hover:text-white hover:bg-blue-600 hover:border-blue-600">
+              <a href="#" className="w-8 h-8 border border-gray-400 rounded-full text-center py-1 text-gray-600 hover:text-white hover:bg-blue-600 hover:border-blue-600">
                 <i className="fab fa-facebook"></i>
               </a>
-              <a href="#" className="w-8 h-8 border border-2 border-gray-400 rounded-full text-center py-1 ml-2 text-gray-600 hover:text-white hover:bg-blue-400 hover:border-blue-400">
+              <a href="#" className="w-8 h-8 border border-gray-400 rounded-full text-center py-1 ml-2 text-gray-600 hover:text-white hover:bg-blue-400 hover:border-blue-400">
                 <i className="fab fa-twitter"></i>
               </a>
-              <a href="#" className="w-8 h-8 border border-2 border-gray-400 rounded-full text-center py-1 ml-2 text-gray-600 hover:text-white hover:bg-red-600 hover:border-red-600">
+              <a href="#" className="w-8 h-8 border border-gray-400 rounded-full text-center py-1 ml-2 text-gray-600 hover:text-white hover:bg-red-600 hover:border-red-600">
                 <i className="fab fa-google-plus-g"></i>
               </a>
             </div>
           </div>
-        </div>
       </div>
     </footer>
 

diff --git a/components/Landing.jsx b/components/Landing.jsx
@@ -8,9 +8,14 @@ function Landing() {
       {/* Landing text */}
       <div className="flex justify-center items-center">
         <div className="w-4/5 flex justify-center flex-col">
-          <p className="font-semibold text-5xl mb-10">
+          <p className="font-semibold text-5xl mb-10 leading-[4.8rem]">
             DEVELOPER STUDENT CLUBS <br />{" "}
-            <strong className="font-bold">Jadavpur University</strong>
+            <strong className="font-bold">
+              <span className="text-red-400">Ja</span>
+              <span className="text-blue-400">da</span >
+              <span className="text-yellow-400">vp</span>
+              <span className="text-green-600">ur</span> 
+              &nbsp; University</strong>
           </p>
           <p className="text-1xl">
             The Google Developer Student Club program is a program for
@@ -34,7 +39,7 @@ function Landing() {
         <div>
           <Player
             src="https://lottie.host/b7fcc177-9bcd-41d7-bb12-349512dc7a9f/lzngOsKudE.json"
-            className="player"
+            className="player md:hidden"
             loop
             autoplay
           />

diff --git a/components/Navbar.jsx b/components/Navbar.jsx
@@ -3,25 +3,25 @@ import Link from "next/link";
 
 const Navbar = () => {
   return (
-    <div className="h-[10vh] bg-white border-black border-b-2 flex items-center justify-between px-20 sticky top-0 z-50">
+    <div className="h-[10vh] bg-white border-black border-b-2 flex items-center justify-between px-20 sticky top-0 z-50 hover:bg-slate-800 transition-all duration-200">
       {/* Logo Image */}
       <Link href="/">
-        <Image src="/gdsc.png" width={400} height={300} />
+        <Image src="/gdsc.png" width={400} height={300} alt="logo"/>
       </Link>
 
       {/* Nav Links */}
       <div className="flex justify-between items-center w-1/3">
         <Link href="/events">
-          <p className="text-2xl hover:text-gray-400">Events</p>
+          <p className="text-2xl hover:text-gray-400 text-red-400">Events</p>
         </Link>
         <Link href="/gallery">
-          <p className="text-2xl hover:text-gray-400">Gallery</p>
+          <p className="text-2xl hover:text-gray-400 text-blue-400">Gallery</p>
         </Link>
         <Link href="/projects">
-          <p className="text-2xl hover:text-gray-400">Projects</p>
+          <p className="text-2xl hover:text-gray-400 text-yellow-400">Projects</p>
         </Link>
         <Link href="/team">
-          <p className="text-2xl hover:text-gray-400">Team</p>
+          <p className="text-2xl hover:text-gray-400 text-green-600">Team</p>
         </Link>
       </div>
     </div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,12 +5,12 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
+    "start": "next",
     "lint": "next lint"
   },
   "dependencies": {
     "@lottiefiles/react-lottie-player": "^3.5.3",
-    "next": "latest",
+    "next": "^13.5.3",
     "react": "latest",
     "react-dom": "latest"
   },
@@ -20,5 +20,9 @@
     "eslint-config-next": "latest",
     "postcss": "latest",
     "tailwindcss": "latest"
-  }
+  },
+  "description": "This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).",
+  "main": "next.config.js",
+  "author": "",
+  "license": "ISC"
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,12 +6,16 @@ module.exports = {
     './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
   theme: {
+
     extend: {
       backgroundImage: {
         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
         'gradient-conic':
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
+      screens: {
+        'md': {'min': '10px', 'max': '903px'}
+      }
     },
   },
   plugins: [],