Merge pull request #4 from Valli81106/kt1

tracks almost done
SRM-IST-KTR · Nov 29, 2024 · b3da6c5 · b3da6c5
2 parents ca5bae6 + d63b6e5
commit b3da6c5
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 27 deletions.
diff --git a/components/Tracks.jsx b/components/Tracks.jsx
@@ -3,53 +3,82 @@ import React from "react";
 const Tracks = () => {
     return (
         <>
-            <div className="mt-[30px]">
+            <div className="mt-[30px] flex flex-col">
 
-                <div className="text-center align-middle justify-center lg:text-[119px] md:text-[100px] text-[70px] font-bold mb-[50px] text-[#FCF961] [text-shadow:0_7px_10px_rgb(255_255_255/_90%)]">TRACKS</div>
-                    <div className="grid lg:grid-cols-[303px_303px_303px] md:grid-cols-[303px_303px] sm:grid-cols-[303px] gap-[113px] justify-center mb-[80px]">
+                <div className="text-center align-middle justify-center lg:text-[119px] md:text-[100px] text-[70px] font-bold mb-[50px] text-[#FCF961] [text-shadow:0_7px_10px_rgb(255_255_255/_90%)]">
+                    TRACKS
+                </div>
+                    <div className="grid grid-cols-[303px] gap-[113px] justify-center align-middle items-center">
 
-                    <div class="bg-[#AB7A57] h-[318px] rounded-[20px] shadow-[0_15px_30px_-15px_rgba(0,0,0,0.7)] flex flex-col items-center relative transition ease-in-out delay-100 hover:shadow-[0_0_30px_0_rgba(255,255,255,1)] p-[30px]">
-                        <div className="mt-[30px]">
-                        <img src="../../AIML_icon.png" class="w-[168px] h-[177px]"></img>
+                    <div className="bg-[#AB7A57] h-[318px] rounded-[20px] shadow-[0_15px_30px_-15px_rgba(0,0,0,0.7)] flex flex-col lg:flex-row items-center relative delay-100 hover:shadow-[0_0_30px_0_rgba(255,255,255,1)] overflow-hidden hover:h-[700px] lg:hover:w-[700px] lg:hover:h-[318px] text-center transition-height ease-in-out duration-300">
+                        <div className="flex flex-col">
+                            <div className="mt-[50px] w-[303px] flex justify-center">
+                                <img src="../../AIML_icon.png" class="w-[152px] h-[152px]"></img>
+                            </div>
+                            <div className="text-[42px] text-[#EBE100] text-center font-semibold mb-[30px]">AI/ML</div>
                         </div>
-                        <div className="text-[42px] text-[#EBE100] text-center font-semibold absolute bottom-[30px]">AI/ML</div>
+
+                        <div className="p-[20px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
                     </div>
 
-                    <div className="bg-[#AB7A57] h-[318px] rounded-[20px] shadow-[0_15px_30px_-15px_rgba(0,0,0,0.7)] flex flex-col items-center relative transition ease-in-out delay-100 hover:shadow-[0_0_30px_0_rgba(255,255,255,1)]">
-                        <div className="mt-[30px]">
-                            <img src="../../healthcare_icon.png" class="w-[152px] h-[152px]"></img>
+                    <div className="bg-[#AB7A57] h-[318px] rounded-[20px] shadow-[0_15px_30px_-15px_rgba(0,0,0,0.7)] flex flex-col lg:flex-row items-center relative delay-100 hover:shadow-[0_0_30px_0_rgba(255,255,255,1)] overflow-hidden hover:h-[700px] lg:hover:w-[700px] lg:hover:h-[318px] text-center transition-all ease-in-out duration-300">
+                        <div className="flex flex-col">
+                            <div className="mt-[50px] w-[303px] flex justify-center">
+                                <img src="../../healthcare_icon.png" class="w-[152px] h-[152px]"></img>
+                            </div>
+                            <div className="text-[42px] text-[#EBE100] text-center font-semibold mb-[30px]">Healthcare</div>
                         </div>
-                        <div className="text-[42px] text-[#EBE100] text-center font-semibold absolute bottom-[30px]">Healthcare</div>
+
+                        <div className="p-[20px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
                     </div>
 
-                    <div class="bg-[#AB7A57] h-[318px] rounded-[20px] shadow-[0_15px_30px_-15px_rgba(0,0,0,0.7)] flex flex-col items-center relative transition ease-in-out delay-100 hover:shadow-[0_0_30px_0_rgba(255,255,255,1)]">
-                        <div className="mt-[15px]">
-                            <img src="../../open_innovation_icon.png" className="w-[201px] h-[201px]"></img>
+                    <div className="bg-[#AB7A57] h-[318px] rounded-[20px] shadow-[0_15px_30px_-15px_rgba(0,0,0,0.7)] flex flex-col lg:flex-row items-center relative delay-100 hover:shadow-[0_0_30px_0_rgba(255,255,255,1)] overflow-hidden hover:h-[700px] lg:hover:w-[700px] lg:hover:h-[318px] text-center transition-all ease-in-out duration-300">
+                        <div className="flex flex-col">
+                            <div className="mt-[30px] w-[303px] flex justify-center">
+                                <img src="../../open_innovation_icon.png" class="w-[152px] h-[152px]"></img>
+                            </div>
+                            <div className="text-[42px] text-[#EBE100] text-center font-semibold mb-[-15px]">Open</div>
+                            <div className="text-[42px] text-[#EBE100] text-center font-semibold mb-[30px]">Innovation</div>
                         </div>
-                        <div className="text-[42px] text-[#EBE100] text-center leading-[45px] font-semibold absolute bottom-[30px]">Open Innovation</div>
+
+                        <div className="p-[20px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
                     </div>
 
-                    <div class="bg-[#AB7A57] h-[318px] rounded-[20px] shadow-[0_15px_30px_-15px_rgba(0,0,0,0.7)] flex flex-col items-center relative transition ease-in-out delay-100 hover:shadow-[0_0_30px_0_rgba(255,255,255,1)]">
-                        <div className="mt-[30px]">
-                        <img src="..\..\megaphone_icon.png" className="w-[176px] h-[176px]"></img>
+                    <div className="bg-[#AB7A57] h-[318px] rounded-[20px] shadow-[0_15px_30px_-15px_rgba(0,0,0,0.7)] flex flex-col lg:flex-row items-center relative delay-100 hover:shadow-[0_0_30px_0_rgba(255,255,255,1)] overflow-hidden hover:h-[700px] lg:hover:w-[700px] lg:hover:h-[318px] text-center transition-all ease-in-out duration-300">
+                        <div className="flex flex-col">
+                            <div className="mt-[50px] w-[303px] flex justify-center">
+                                <img src="../../megaphone_icon.png" class="w-[152px] h-[152px]"></img>
+                            </div>
+                            <div className="text-[42px] text-[#EBE100] text-center font-semibold mb-[30px]">TBA</div>
                         </div>
-                        <div className="text-[42px] text-[#EBE100] text-center font-semibold mt-[30px] absolute bottom-[30px]">TBA</div>
+
+                        <div className="p-[20px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
                     </div>
 
-                    <div class="bg-[#AB7A57] h-[318px] rounded-[20px] shadow-[0_15px_30px_-15px_rgba(0,0,0,0.7)] flex flex-col items-center relative transition ease-in-out delay-100 hover:shadow-[0_0_30px_0_rgba(255,255,255,1)]">
-                        <div className="mt-[30px]">
-                        <img src="..\..\megaphone_icon.png" className="w-[176px] h-[176px]"></img>
+                    <div className="bg-[#AB7A57] h-[318px] rounded-[20px] shadow-[0_15px_30px_-15px_rgba(0,0,0,0.7)] flex flex-col lg:flex-row items-center relative delay-100 hover:shadow-[0_0_30px_0_rgba(255,255,255,1)] overflow-hidden hover:h-[700px] lg:hover:w-[700px] lg:hover:h-[318px] text-center transition-all ease-in-out duration-300">
+                        <div className="flex flex-col">
+                            <div className="mt-[50px] w-[303px] flex justify-center">
+                                <img src="../../megaphone_icon.png" class="w-[152px] h-[152px]"></img>
+                            </div>
+                            <div className="text-[42px] text-[#EBE100] text-center font-semibold mb-[30px]">TBA</div>
                         </div>
-                        <div className="text-[42px] text-[#EBE100] text-center font-semibold mt-[30px] absolute bottom-[30px]">TBA</div>
+
+                        <div className="p-[20px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
                     </div>
 
-                    <div className="bg-[#AB7A57] h-[318px] rounded-[20px] shadow-[0_15px_30px_-15px_rgba(0,0,0,0.7)] flex flex-col items-center relative transition ease-in-out delay-100 hover:shadow-[0_0_30px_0_rgba(255,255,255,1)]">
-                        <div className="mt-[30px]">
-                        <img src="..\..\megaphone_icon.png" className="w-[176px] h-[176px]"></img>
+                    <div className="bg-[#AB7A57] h-[318px] rounded-[20px] shadow-[0_15px_30px_-15px_rgba(0,0,0,0.7)] flex flex-col lg:flex-row items-center relative delay-100 hover:shadow-[0_0_30px_0_rgba(255,255,255,1)] overflow-hidden hover:h-[700px] lg:hover:w-[700px] lg:hover:h-[318px] text-center transition-all ease-in-out duration-300">
+                        <div className="flex flex-col">
+                            <div className="mt-[50px] w-[303px] flex justify-center">
+                                <img src="../../megaphone_icon.png" class="w-[152px] h-[152px]"></img>
+                            </div>
+                            <div className="text-[42px] text-[#EBE100] text-center font-semibold mb-[30px]">TBA</div>
                         </div>
-                        <div className="text-[42px] text-[#EBE100] text-center font-semibold mt-[30px] absolute bottom-[30px]">TBA</div>
+
+                        <div className="p-[20px]">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
                     </div>
 
+
+
                 </div>
             </div>
         </>

diff --git a/pages/index.js b/pages/index.js
@@ -1,4 +1,5 @@
 import Tracks from "@/components/Tracks";
+import About from "@/components/About";
 
 export default function Home() {
   return (

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,6 +7,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      transitionProperty: {
+        'height': 'height'
+      },
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",