MAJOR CHANGES

chaitanya-codes · Sep 21, 2024 · c3c6f44 · c3c6f44
1 parent c548113
commit c3c6f44
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 67 deletions.
diff --git a/src/app/components/Categories.tsx b/src/app/components/Categories.tsx
@@ -40,9 +40,6 @@ function getCategories(categories) {
 export const Categories = () => {
     return (
         <div>
-            <div className="mt-10">
-                <p className="ml-4 font-russo inline text-5xl text-white">Latest<span className='text-blue-300'> Research projects opening</span></p>
-            </div>
             <p className="ml-4 font-russo inline text-5xl text-white">Explore by <span className='text-blue-300'>category</span></p>
             <div className='grid grid-cols-4 grid-rows-2'>
                 {getCategories(["AI/ML", "NLP", "Electronics", "Automotive",

diff --git a/src/app/components/ResearchProjects.tsx b/src/app/components/ResearchProjects.tsx
@@ -1,14 +1,6 @@
 "use client";
 import React from 'react'
 
-
-
-function openPage(project: string){
-    if(typeof window !== "undefined"){
-        alert("you clicked "+project)
-    }
-}
-
 function Capsule(text) {
     return (
         <div className="inline rounded-[80px] p-2 bg-[rgba(86,_205,_173,_0.10)]">{text}</div>
@@ -47,6 +39,9 @@ function getProjects() {
 const ResearchProjects = () => {
     return (
         <div>
+            <div className="mt-10">
+                <p className="ml-4 font-russo inline text-5xl text-white">Latest<span className='text-blue-300'> Research projects opening</span></p>
+            </div>
             <div className='grid grid-cols-2 grid-rows-4'>
                 {getProjects()}
             </div>

diff --git a/src/app/components/hero.tsx b/src/app/components/hero.tsx
@@ -37,9 +37,6 @@ const Hero = () => {
                         loop: true,
                     }}
                 />
-                {/* <p className="slogan-blue">500+ Internships,</p>
-                <p className="slogan-blue">Research opportunities </p>
-                <p className="slogan-blue">& Alumni Connection</p> */}
             </div>
             <p className="grey-text ml-2">Great platform for the opportunity seeker</p>
             <p className="grey-text ml-2">that searching for new career heights and passionate about startups.</p>

diff --git a/src/app/components/project.tsx b/src/app/components/project.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+const project = () => {
+  return (
+    <div>
+        LOOOOOL
+    </div>
+  )
+}
+
+export default project
diff --git a/src/app/research/page.tsx b/src/app/research/page.tsx
@@ -1,70 +1,71 @@
 "use client";
 import Navbar from "../components/Navbar";
 import SearchBar from "../components/SearchBar";
-
+import { useRouter } from "next/navigation";
 
 export default function NextPage() {
-    return (
-      <div>
-        <Navbar showLogin ={false}/>
-        <div className="mx-28">
-          <h1 className="text-4xl font-bold slogan-blue mb-4">Find Your Dream Research Opportutinies</h1>
-        </div>
-        <SearchBar text1="Find by field" text2="Find by faculty"></SearchBar>
-        <ResearchProjects></ResearchProjects>
-      </div>
-    );
-  }
-function selectProject(project: string) {
-    if (typeof window !== "undefined") {
-        alert("YOU CLICKED " + project + " !")
+    const router = useRouter();
+    function selectProject(project: string) {
+        if (typeof window !== "undefined") {
+            router.push("/research/project")
+        }
     }
-}
 
-function Capsule(text) {
-    return (
-        <div className="inline rounded-[80px] p-2 bg-[rgba(86,_205,_173,_0.10)]">{text}</div>
-    )
-}
+    function Capsule(text) {
+        return (
+            <div className="inline rounded-[80px] p-2 bg-[rgba(86,_205,_173,_0.10)]">{text}</div>
+        )
+    }
 
-function getProjects() {
-    const projects = ["Quantum Dot-Assisted Photonic Signal ", "AI-Driven Traffic Flow Optimization", "Biosensor-Enhanced Disease Detection", "Graphene-Based Flexible Electronics",
-        "Data-Driven Predictive Healthcare", "Cognitive Load Assessment Virtual Reality", "CRISPR-Cas9 Mediated Gene Editing", "Smart City Development Through IoT"];
+    function getProjects() {
+        const projects = ["Quantum Dot-Assisted Photonic Signal ", "AI-Driven Traffic Flow Optimization", "Biosensor-Enhanced Disease Detection", "Graphene-Based Flexible Electronics",
+            "Data-Driven Predictive Healthcare", "Cognitive Load Assessment Virtual Reality", "CRISPR-Cas9 Mediated Gene Editing", "Smart City Development Through IoT"];
 
-    return projects.map((project, index) => (
-        <div key={index} className='py-10 px-16 bg-white m-5'>
-            <svg className="inline mr-4" xmlns="http://www.w3.org/2000/svg" width="49" height="58" viewBox="0 0 49 58" fill="none">
-                <g clipPath="url(#clip0_69_21370)">
-                    <path fillRule="evenodd" clipRule="evenodd" d="M0 14.4938V42.9387L24.4321 57.6283L24.9992 56.7151L24.4321 29.1084L0.840059 14.5107L0 14.4938Z" fill="#449B82" />
-                    <path fillRule="evenodd" clipRule="evenodd" d="M48.5995 14.3602V43.2058L24.4316 57.6285V29.1085L47.7143 14.3819L48.5995 14.3602Z" fill="#9BDB9C" />
-                    <path fillRule="evenodd" clipRule="evenodd" d="M24.3 0.20401L48.6 14.3597L24.4321 29.5839L0 14.4933L24.3 0.20401Z" fill="#56CDAD" />
-                    <path fillRule="evenodd" clipRule="evenodd" d="M36.5063 11.5483L28.2876 16.413V26.2319L20.053 21.2873L12.1348 25.9742V46.497L20.3535 41.4004V30.3534L29.1317 35.957L36.5063 31.3839V11.5483Z" fill="white" />
-                </g>
-                <defs>
-                    <clipPath id="clip0_69_21370">
-                        <rect width="48.6" height="57.6" fill="white" transform="translate(0 0.200012)" />
-                    </clipPath>
-                </defs>
-            </svg>
-            <button className="inline" onClick={() => selectProject(project)}>
-                <p className='font-russo text-lg mb-2'>{project}</p>
-            </button>
-            <div className='mt-3'>
-            {Capsule('Full-Time')}
-            {Capsule('Chemistry')}
+        return projects.map((project, index) => (
+            <div key={index} className='py-10 px-16 bg-white m-5'>
+                <svg className="inline mr-4" xmlns="http://www.w3.org/2000/svg" width="49" height="58" viewBox="0 0 49 58" fill="none">
+                    <g clipPath="url(#clip0_69_21370)">
+                        <path fillRule="evenodd" clipRule="evenodd" d="M0 14.4938V42.9387L24.4321 57.6283L24.9992 56.7151L24.4321 29.1084L0.840059 14.5107L0 14.4938Z" fill="#449B82" />
+                        <path fillRule="evenodd" clipRule="evenodd" d="M48.5995 14.3602V43.2058L24.4316 57.6285V29.1085L47.7143 14.3819L48.5995 14.3602Z" fill="#9BDB9C" />
+                        <path fillRule="evenodd" clipRule="evenodd" d="M24.3 0.20401L48.6 14.3597L24.4321 29.5839L0 14.4933L24.3 0.20401Z" fill="#56CDAD" />
+                        <path fillRule="evenodd" clipRule="evenodd" d="M36.5063 11.5483L28.2876 16.413V26.2319L20.053 21.2873L12.1348 25.9742V46.497L20.3535 41.4004V30.3534L29.1317 35.957L36.5063 31.3839V11.5483Z" fill="white" />
+                    </g>
+                    <defs>
+                        <clipPath id="clip0_69_21370">
+                            <rect width="48.6" height="57.6" fill="white" transform="translate(0 0.200012)" />
+                        </clipPath>
+                    </defs>
+                </svg>
+                <button className="inline" onClick={() => selectProject(project)}>
+                    <p className='font-russo text-lg mb-2'>{project}</p>
+                </button>
+                <div className='mt-3'>
+                    {Capsule('Full-Time')}
+                    {Capsule('Chemistry')}
+                </div>
+            </div>
+        ))
+    }
 
+    const ResearchProjects = () => {
+        return (
+            <div>
+                <div className='grid grid-cols-2 grid-rows-4'>
+                    {getProjects()}
+                </div>
             </div>
-        </div>
-    ))
-}
+        )
+    }
+
 
-const ResearchProjects = () => {
     return (
         <div>
-            <div className='grid grid-cols-2 grid-rows-4'>
-                {getProjects()}
+            <Navbar showLogin={false} />
+            <div className="mx-28">
+                <h1 className="text-4xl font-bold slogan-blue mb-4">Find Your Dream Research Opportutinies</h1>
             </div>
+            <SearchBar text1="Find by field" text2="Find by faculty"></SearchBar>
+            <ResearchProjects></ResearchProjects>
         </div>
-    )
+    );
 }
-
diff --git a/src/app/research/project/page.tsx b/src/app/research/project/page.tsx
@@ -0,0 +1,40 @@
+import React from 'react'
+import Navbar from '@/app/components/Navbar'
+import Footer from '@/app/components/Footer'
+
+const project = () => {
+    return (
+        <div>
+            <Navbar showLogin={false}></Navbar>
+            <div className='h-[30vh] flex justify-center items-center bg-gray-300'>
+                <div className='w-[80vw] h-[20vh] bg-white'>
+                    <div className='flex mt-10 relative'>
+                        <div className='w-20 h-20 ml-6 bg-gray-800'></div>
+                        <div>
+                            <div className='text-slate-700 ml-3 text-3xl font-redhat'>Chemistry Research Professor</div>
+                            <div className='text-slate-700 ml-4 mt-2 text-xl font-redhat'>Dr. Sumit Rajdev • VIT Vellore • Part-Time</div>
+                        </div>
+                        <svg className="absolute right-44 top-2" xmlns="http://www.w3.org/2000/svg" width="33" height="34" viewBox="0 0 33 34" fill="none">
+                            <g clip-path="url(#clip0_187_12011)">
+                                <path d="M8.66797 20.7646C10.8771 20.7646 12.668 18.9079 12.668 16.6175C12.668 14.3272 10.8771 12.4705 8.66797 12.4705C6.45883 12.4705 4.66797 14.3272 4.66797 16.6175C4.66797 18.9079 6.45883 20.7646 8.66797 20.7646Z" stroke="#7C8493" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                <path d="M24.668 12.4704C26.8771 12.4704 28.668 10.6137 28.668 8.32333C28.668 6.03297 26.8771 4.17627 24.668 4.17627C22.4588 4.17627 20.668 6.03297 20.668 8.32333C20.668 10.6137 22.4588 12.4704 24.668 12.4704Z" stroke="#7C8493" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                <path d="M24.668 29.0588C26.8771 29.0588 28.668 27.2021 28.668 24.9117C28.668 22.6213 26.8771 20.7646 24.668 20.7646C22.4588 20.7646 20.668 22.6213 20.668 24.9117C20.668 27.2021 22.4588 29.0588 24.668 29.0588Z" stroke="#7C8493" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                <path d="M12.2681 14.8204L21.0681 10.1204" stroke="#7C8493" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                                <path d="M12.2681 18.4146L21.0681 23.1146" stroke="#7C8493" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                            </g>
+                            <defs>
+                                <clipPath id="clip0_187_12011">
+                                    <rect width="32" height="33.1765" fill="white" transform="translate(0.667969 0.0292969)" />
+                                </clipPath>
+                            </defs>
+                        </svg>
+                        <button className='absolute right-4 w-[9vw] h-[7vh] bg-blue-900'>Apply</button>
+                    </div>
+                </div>
+            </div>
+            <Footer></Footer>
+        </div>
+    )
+}
+
+export default project