Merge pull request #28 from kamini08/main

Add SIH Registration Frontend

app/(default)/sihregistration/page.tsx

@@ -0,0 +1,40 @@
+// pages/register.tsx
+import SIHRegistrationForm from "@/components/forms/sihForm";
+import { FormProvider } from "@/components/forms/formContext";
+import DotPattern from "@/components/magicui/dot-pattern";
+import "../../css/additional-styles/form.css";
+import { cn } from "@/lib/utils";
+const RegisterPage = () => {
+  return (
+    <FormProvider>
+      <div className="w-50 mt-16 mx-auto flex flex-col items-center justify-center">
+        <div className="container">
+          <div className="box">
+            <div className="title">
+              <span className="block"></span>
+              <h1 className="h1">
+                Register for Smart India Hackathon!<span></span>
+              </h1>
+            </div>
+          </div>
+        </div>
+
+        <div className="form-container my-2">
+          <SIHRegistrationForm />
+        </div>
+        <DotPattern
+          width={20}
+          height={20}
+          cx={1}
+          cy={1}
+          cr={1}
+          className={cn(
+            "[mask-image:linear-gradient(to_bottom_right,white,transparent,transparent)] "
+          )}
+        />
+      </div>
+    </FormProvider>
+  );
+};
+
+export default RegisterPage;

app/css/additional-styles/form.css

@@ -0,0 +1,95 @@
+.form-container {
+  width: min(600px, 100%);
+  background: transparent;
+}
+
+.h1,
+.h2 {
+  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
+}
+.form-container select {
+  background-color: black;
+}
+
+.form-container select option {
+  color: white;
+  outline: none;
+  width: min(200px, 100%);
+  height: fit-content;
+}
+
+.form-container button {
+  border-radius: 0.5rem;
+}
+
+.container {
+  width: 100%;
+  background: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.container .box {
+  margin-top: 3rem;
+  text-align: center;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+.container .box .title {
+  width: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 50px;
+}
+.container .box .title .block {
+  width: 0%;
+  height: inherit;
+  background: #52c264;
+  position: absolute;
+  animation: mainBlock 2s cubic-bezier(0.74, 0.06, 0.4, 0.92) forwards;
+  display: flex;
+}
+.container .box .title h1 {
+  font-family: "Poppins";
+  color: #fff;
+  -webkit-animation: mainFadeIn 2s forwards;
+  -o-animation: mainFadeIn 2s forwards;
+  animation: mainFadeIn 2s forwards;
+  animation-delay: 1.6s;
+  opacity: 0;
+  display: flex;
+  align-items: baseline;
+  position: relative;
+}
+
+@keyframes mainBlock {
+  0% {
+    width: 0%;
+    left: 0;
+  }
+  50% {
+    width: 100%;
+    left: 0;
+  }
+  100% {
+    width: 0;
+    left: 100%;
+  }
+}
+
+@keyframes mainFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@media screen and (max-width: 678px) {
+  .form-container {
+    margin: 3rem 0;
+  }
+}

app/css/additional-styles/utility-patterns.css

@@ -46,7 +46,7 @@
 .form-select,
 .form-checkbox,
 .form-radio {
-    @apply bg-white border border-gray-300 focus:border-gray-500;
+    @apply border border-gray-300 focus:border-gray-500;
 }
 
 .form-input,

components/forms/accordion.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+
+interface AccordionProps {
+  title: string;
+  children: React.ReactNode;
+}
+
+const Accordion: React.FC<AccordionProps> = ({ title, children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleAccordion = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <div className="mb-4">
+      <button
+        type="button"
+        className="w-full text-white py-2 px-4 rounded-md focus:outline-none form-input bg-transparent focus:border-none focus:outline-offset-0 focus:outline-green-500 flex justify-between"
+        onClick={toggleAccordion}
+      >
+        <span>{title}</span>
+        <span className="h-4 w-4">
+          {!isOpen ? (
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+              <path
+                fill="#ffffff"
+                d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"
+              />
+            </svg>
+          ) : (
+            ""
+          )}
+        </span>
+      </button>
+      {isOpen && <div className="mt-2 p-4">{children}</div>}
+    </div>
+  );
+};
+
+export default Accordion;

components/forms/formContext.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import React, { createContext, useContext, useState } from "react";
+
+interface ITeamInfo {
+  team_name: string;
+  college_name: string;
+  team_size: number;
+  team_leader: {
+    name: string;
+    email: string;
+    phone: string;
+  };
+}
+
+interface ITeamMember {
+  name: string;
+  email: string;
+  phone: string;
+  role: string;
+  enrollment_id: string;
+  course: string;
+  year_of_study: string;
+  branch: string;
+}
+
+interface IProjectInfo {
+  title: string;
+  abstract: string;
+  problem_statement: string;
+  tech_stack: string;
+}
+
+interface IFormData {
+  team_info: ITeamInfo;
+  team_members: ITeamMember[];
+  project_information: IProjectInfo;
+}
+
+interface IFormContextType {
+  formData: IFormData;
+  setFormData: React.Dispatch<React.SetStateAction<IFormData>>;
+}
+
+const FormContext = createContext<IFormContextType | undefined>(undefined);
+
+export const useFormContext = () => {
+  const context = useContext(FormContext);
+  if (!context) {
+    throw new Error("useFormContext must be used within a FormProvider");
+  }
+  return context;
+};
+
+export const FormProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [formData, setFormData] = useState<IFormData>({
+    team_info: {
+      team_name: "",
+      college_name: "",
+      team_size: 6,
+      team_leader: {
+        name: "",
+        email: "",
+        phone: "",
+      },
+    },
+    team_members: Array.from({ length: 6 }, () => ({
+      name: "",
+      email: "",
+      phone: "",
+      role: "",
+      enrollment_id: "",
+      course: "",
+      year_of_study: "",
+      branch: "",
+    })),
+    project_information: {
+      title: "",
+      abstract: "",
+      problem_statement: "",
+      tech_stack: "",
+    },
+  });
+
+  return (
+    <FormContext.Provider value={{ formData, setFormData }}>
+      {children}
+    </FormContext.Provider>
+  );
+};