Merge pull request Yadav106#18 from rizzabh/main

[Added] Real Data

app/components/Contact/Card.jsx

@@ -7,8 +7,13 @@ const Card = () => {
         return (
           <div
             key={data.id}
-            className="flex flex-col mt-4 items-center justify-between">
-            <img className="w-[160px]" src={data.img} alt="lead-img" />
+            className="flex flex-col mt-4 items-center justify-between"
+          >
+            <img
+              className="w-[200px] h-[200px] rounded-full object-cover shadow-lg"
+              src={data.img}
+              alt="lead-img"
+            />
             <div className="my-4 text-center">
               <h1>{data.name}</h1>
               <p className="text-gray-500 text-xs">{data.pos}</p>

app/components/Contact/Contact.jsx

@@ -2,7 +2,7 @@ import Card from "./Card";
 
 const Contact = () => {
   return (
-    <div className="mt-16 w-2/3">
+    <div className="mt-16 w-2/3" id="Contact">
       <h1 className="text-center text-2xl md:text-3xl font-semibold">
         Contact The Leads
       </h1>

app/components/Contact/data.js

@@ -1,20 +1,20 @@
 const data = [
   {
     id: Date.now(),
-    img: "/contact-placeholder.svg",
-    name: "lead-1",
-    pos: "the-pos",
+    img: "/Vansh.jpg",
+    name: "Vansh Baghel",
+    pos: "GDSC Lead",
     socials: [
-      { imgUrl: "/github.svg", socialUrl: "their-social-url" },
+      { imgUrl: "/github.svg", socialUrl: "https://github.com/Vansh-Baghel" },
       { imgUrl: "/instagram.svg", socialUrl: "their-social-url" },
-      { imgUrl: "/linkedin.svg", socialUrl: "their-social-url" },
+      { imgUrl: "/linkedin.svg", socialUrl: "https://www.linkedin.com/in/vansh-baghel-24ab42232/" },
     ],
   },
   {
     id: Date.now(),
-    img: "/contact-placeholder.svg",
-    name: "lead-2",
-    pos: "the-pos",
+    img: "/Shreyansh.jpg",
+    name: "Shreyansh Shukla",
+    pos: "Vice Chairperson",
     socials: [
       { imgUrl: "/github.svg", socialUrl: "their-social-url" },
       { imgUrl: "/instagram.svg", socialUrl: "their-social-url" },
@@ -23,9 +23,9 @@ const data = [
   },
   {
     id: Date.now(),
-    img: "/contact-placeholder.svg",
-    name: "lead-3",
-    pos: "the-pos",
+    img: "/Vanshika.jpeg",
+    name: "Vanshika Patel",
+    pos: "Advisory",
     socials: [
       { imgUrl: "/github.svg", socialUrl: "their-social-url" },
       { imgUrl: "/instagram.svg", socialUrl: "their-social-url" },
@@ -34,9 +34,9 @@ const data = [
   },
   {
     id: Date.now(),
-    img: "/contact-placeholder.svg",
-    name: "lead-4",
-    pos: "the-pos",
+    img: "/Sahil.JPG",
+    name: "Sahil Yadav",
+    pos: "Technical Head",
     socials: [
       { imgUrl: "/github.svg", socialUrl: "their-social-url" },
       { imgUrl: "/instagram.svg", socialUrl: "their-social-url" },
@@ -45,9 +45,9 @@ const data = [
   },
   {
     id: Date.now(),
-    img: "/contact-placeholder.svg",
-    name: "lead-5",
-    pos: "the-pos",
+    img: "/Ayman.jpg",
+    name: "Ayman",
+    pos: "Logistics Head",
     socials: [
       { imgUrl: "/github.svg", socialUrl: "their-social-url" },
       { imgUrl: "/instagram.svg", socialUrl: "their-social-url" },
@@ -56,15 +56,15 @@ const data = [
   },
   {
     id: Date.now(),
-    img: "/contact-placeholder.svg",
-    name: "lead-6",
-    pos: "the-pos",
+    img: "/Manasraj.jpg",
+    name: "Manasraj Singh",
+    pos: "Oureach Head",
     socials: [
       { imgUrl: "/github.svg", socialUrl: "their-social-url" },
       { imgUrl: "/instagram.svg", socialUrl: "their-social-url" },
       { imgUrl: "/linkedin.svg", socialUrl: "their-social-url" },
     ],
-  },
+  }
 ];
 
 export default data;

app/components/Faq/Faq.jsx

@@ -4,31 +4,45 @@ import Accordion from "./Accordion";
 const FAQ = () => {
   return (
     <div className="p-4 w-6/12 max-sm:w-9/12 m-4">
-      <h1 className="text-4xl font-bold text-center mt-4">FAQ's</h1>
+      <h1 className="text-4xl font-bold text-center mt-4" id="Faq">
+        FAQ's
+      </h1>
       <div className="text-gray-600 text-md text-center mt-2">
         Frequently asked questions about the Program
       </div>
       <Accordion
-        title="Do you prefer Android or iOS"
-        answer="I like to use iOS products"
+        title="What is jetpack compose ?"
+        answer="
+        Jetpack Compose is a modern, fully declarative UI toolkit for building native Android applications. It is a part of the Android Jetpack libraries and is designed to simplify and accelerate UI development on Android. Compose provides a concise and intuitive way to build user interfaces using Kotlin programming language."
       />
       <Accordion
-        title="Do you prefer writing CSS or Tailwind?"
-        answer="I like to use Tailwind"
+        title="What are the perks of this camp?"
+        answer="Learning Opportunities
+        Skill Development
+        Hands-On Experience
+        Networking
+        Community Engagement
+        Access to Experts
+        Resume Building
+        Project Showcase
+        Certificates and Recognition
+        Career Opportunities
+        Personal Growth
+        Fun and Engaging Environment"
       />
       <Accordion
-        title="Do you prefer writing CSS or Tailwind?"
-        answer="I like to use Tailwind"
+        title="Is this beginner Friendly?"
+        answer="Whether you’re a beginner or ready to master Jetpack Compose, learn about the latest development tools and APIs to build better Android apps.
+        "
       />
       <Accordion
-        title="Do you prefer writing CSS or Tailwind?"
-        answer="I like to use Tailwind"
+        title="Is this Camp Expensive?"
+        answer="No, its Absolutely Free!"
       />
       <Accordion
-        title="Do you prefer writing CSS or Tailwind?"
-        answer="I like to use Tailwind"
+        title="Is this Camp Online?"
+        answer="Yes, this camp is completely online"
       />
-      <Accordion title="Firebase or Supabase?" answer="I am using Supabase!" />
     </div>
   );
 };

app/components/Footer/Footer.jsx

@@ -4,8 +4,14 @@ const Footer = () => {
   return (
     <>
       <div className="grid grid-cols-3 gap-6 p-4 mt-8 border-t border-t-gray-700 w-full max-md:grid-cols-1">
-        <div className="p-4">
-          <img src="/gdsc-logo.svg" height={75} width={75} alt="" />
+        <div className="p-4 pl-24 max-md:text-center max-md:pl-0">
+          <img
+            src="/gdsc-logo.svg"
+            height={75}
+            width={75}
+            alt=""
+            className="max-md:mx-auto"
+          />
           <div className="mt-2 font-semibold">GDSC-TCET</div>
           <div className="text-sm text-gray-500">
             Dive into our collection of Jetpack Compose projects on GitHub.
@@ -21,9 +27,7 @@ const Footer = () => {
             </a>
           </div>
           <div className="mt-2 text-sm text-gray-500">
-            <a href="https://gdsc.community.dev/thakur-college-of-engineering-and-technology/">
-              GDSC TCET
-            </a>
+            <a href="https://harshau007.github.io/gdsc-website/">GDSC TCET</a>
           </div>
         </div>
         <div className="p-4 mx-auto">
@@ -33,13 +37,19 @@ const Footer = () => {
           </div>
           <div className="grid grid-cols-2 gap-2 p-1 w-full max-sm:grid-cols-4 max-sm:">
             <div className="p-1">
-              <img src="/instagram.png" alt="" />
+              <a href="https://www.instagram.com/dsc.tcet/">
+                <img src="/instagram.png" alt="" />
+              </a>
             </div>
             <div className="p-1">
-              <img src="/github.png" alt="" />
+              <a href="https://github.com/DSC-TCET">
+                <img src="/github.png" alt="" />
+              </a>
             </div>
             <div className="p-1">
-              <img src="/linkedin.png" alt="" />
+              <a href="https://www.linkedin.com/company/dsc-tcet/">
+                <img src="/linkedin.png" alt="" />
+              </a>
             </div>
             <div className="p-1">
               <img src="/discord.png" alt="" />

app/components/Header/Header.jsx

@@ -11,9 +11,9 @@ const Header = () => {
 
   return (
     <>
-      <div className="text-gray-50 w-full p-4 md:p-6 flex justify-between items-center bg-gradient-to-b from-black">
+      <div className="text-gray-50 w-full p-4 md:p-6 flex justify-between items-center bg-gradient-to-b from-black ">
         <div className="flex md:mx-12 items-center gap-2">
-          <a href="#" className="logo">
+          <a href="/" className="logo">
             <img
               className="w-4/5 md:w-full"
               src="/gdsc-logo.svg"
@@ -24,13 +24,13 @@ const Header = () => {
         </div>
         <ul className="hidden list-none gap-12 my-4 md:mx-12 text-md text-gray-400 md:flex items-center justify-between">
           <li>
-            <a href="#">Home</a>
+            <a href="/">Home</a>
           </li>
           <li>
-            <a href="#">Contact</a>
+            <a href="#Contact">Contact</a>
           </li>
           <li>
-            <a href="#">FAQs</a>
+            <a href="#Faq">FAQs</a>
           </li>
         </ul>
         <div

app/globals.css

@@ -15,7 +15,9 @@
     --background-end-rgb: 2, 1, 27;
   }
 }
-
+*{
+  scroll-behavior: smooth;
+}
 body {
   overflow-x: hidden;
   color: rgb(var(--foreground-rgb));

app/layout.js

@@ -4,8 +4,9 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "JetPack Compose Camp",
+  description:
+    "This is a website for JetPack Compose Camp created and supervised by GDSC TCET",
 };
 
 export default function RootLayout({ children }) {

app/page.js

@@ -1,19 +1,18 @@
-import Header from './components/Header/Header'
-import Hero from './components/Hero/Hero'
-import Contact from './components/Contact/Contact'
-import Faq from './components/Faq/Faq'
-import Footer from './components/Footer/Footer'
-import Camp from './components/Camp/Camp'
+import Header from "./components/Header/Header";
+import Hero from "./components/Hero/Hero";
+import Contact from "./components/Contact/Contact";
+import Faq from "./components/Faq/Faq";
+import Footer from "./components/Footer/Footer";
+import Camp from "./components/Camp/Camp";
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between">
+    <main className="flex min-h-screen flex-col items-center justify-between scroll-smooth">
       <Header />
       <Hero />
-      <Camp/>
+      <Camp />
       <Faq />
       <Contact />
       <Footer />
-
     </main>
-  )
+  );
 }