rosuqt · rosuqt · Mar 18, 2025 · Mar 18, 2025
diff --git a/src/app/components/RemoveDoubleClick.tsx b/src/app/components/RemoveDoubleClick.tsx
@@ -0,0 +1,10 @@
+const RemoveDoubleClick = () => {
+    document.addEventListener("mousedown", (e) => {
+      if (e.detail > 1) {
+        e.preventDefault();
+      }
+    });
+  };
+
+  export default RemoveDoubleClick;
+
diff --git a/src/app/components/SingleLineFooter.tsx b/src/app/components/SingleLineFooter.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+
+const SingleLineFooter = () => (
+  <footer className="w-full bg-transparent text-gray-600 text-sm py-2 fixed bottom-0">
+    <div className="max-w-screen-xl mx-auto px-6 flex justify-between items-center">
+      <span className='font-semibold'>© 2025 InternConnect</span>
+      <div className="flex space-x-16">
+        <a href="/about" className="hover:no-underline">About Us</a>
+        <a href="/privacy-policy" className="hover:no-underline">Privacy Policy</a>
+        <a href="/terms-of-service" className="hover:no-underline">Terms of Service</a>
+        <a href="/contact" className="hover:no-underline">Contact Us</a>
+        <a href="/community-guidelines" className="hover:no-underline">Community Guidelines</a>
+      </div>
+    </div>
+  </footer>
+);
+
+export default SingleLineFooter;
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -15,6 +15,11 @@
   border-radius: 4px;
 }
 
+.no-select {
+  user-select: none;
+}
+
+
 
 
   @keyframes moveBackground {

diff --git a/src/app/landing/MainLanding.tsx b/src/app/landing/MainLanding.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/no-unescaped-entities */
 "use client";
 import LandingNav from "./components/LandingNav";
 import HeroSection from "./components/HeroSection";
@@ -13,6 +14,7 @@ import HowItWorks from "./components/HowitWorks";
 import AnimatedButton from "./components/Button2";
 import { AnimatePresence } from "framer-motion";
 import Footer from "./components/Footer";
+import RemoveDoubleClick from "../components/RemoveDoubleClick";
 
 
 
@@ -71,11 +73,12 @@ const images = [
 
 
 export default function MainLanding() {
-    const [hovered, setHovered] = useState(false);
+
 
   const [index, setIndex] = useState(0);
 
   useEffect(() => {
+    RemoveDoubleClick();
     if (images.length <= 1) return; 
 
     const interval = setInterval(() => {

diff --git a/src/app/landing/components/Footer.tsx b/src/app/landing/components/Footer.tsx
@@ -40,7 +40,7 @@ const Footer = () => {
             <ul className="space-y-2">
               <li><a href="/about" className="text-gray-700 hover:text-gray-900">About Us</a></li>
               <li><a href="/how-it-works" className="text-gray-700 hover:text-gray-900">How it Works</a></li>
-              <li><a href="/faq" className="text-gray-700 hover:text-gray-900">FAQ's</a></li>
+              <li><a href="/faq" className="text-gray-700 hover:text-gray-900">FAQ&apos;s</a></li>
             </ul>
           </div>
         </div>

diff --git a/src/app/sign-in/components/Checkbox.tsx b/src/app/sign-in/components/Checkbox.tsx
@@ -0,0 +1,78 @@
+import * as React from "react";
+import { motion, useMotionValue, useTransform } from "framer-motion";
+
+const tickVariants = {
+  pressed: (isChecked: boolean) => ({ pathLength: isChecked ? 0.85 : 0.2 }),
+  checked: { pathLength: 1 },
+  unchecked: { pathLength: 0 },
+};
+
+const boxVariants = {
+  hover: { scale: 1.05, strokeWidth: 60 },
+  pressed: { scale: 0.95, strokeWidth: 35 },
+  checked: { stroke: "#2196F3" },
+  unchecked: { stroke: "#ddd", strokeWidth: 50 },
+};
+
+interface CheckboxProps {
+  checked: boolean;
+  onChange: () => void;
+}
+
+export const Checkbox: React.FC<CheckboxProps> = ({ checked, onChange }) => {
+  const pathLength = useMotionValue(0);
+  const opacity = useTransform(pathLength, [0.05, 0.15], [0, 1]);
+
+  return (
+    <label className="relative flex items-center cursor-pointer">
+      <input
+        type="checkbox"
+        checked={checked}
+        onChange={onChange}
+        className="absolute opacity-0 w-0 h-0"
+      />
+
+      <motion.svg
+        initial={false}
+        animate={checked ? "checked" : "unchecked"}
+        whileHover="hover"
+        whileTap="pressed"
+        width="20"
+        height="20"
+        viewBox="0 0 440 440"
+      >
+        <motion.path
+          d="M 72 136 C 72 100.654 100.654 72 136 72 L 304 72 C 339.346 72 368 100.654 368 136 L 368 304 C 368 339.346 339.346 368 304 368 L 136 368 C 100.654 368 72 339.346 72 304 Z"
+          fill="transparent"
+          strokeWidth="50"
+          stroke="#A500FF"
+          variants={boxVariants}
+        />
+        <motion.path
+          d="M 0 128.666 L 128.658 257.373 L 341.808 0"
+          transform="translate(54.917 88.332) rotate(-4 170.904 128.687)"
+          fill="transparent"
+          strokeWidth="65"
+          stroke="hsl(0, 0%, 100%)"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          variants={tickVariants}
+          style={{ pathLength, opacity }}
+          custom={checked}
+        />
+        <motion.path
+          d="M 0 128.666 L 128.658 257.373 L 341.808 0"
+          transform="translate(54.917 68.947) rotate(-4 170.904 128.687)"
+          fill="transparent"
+          strokeWidth="65"
+          stroke="#703be7"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          variants={tickVariants}
+          style={{ pathLength, opacity }}
+          custom={checked}
+        />
+      </motion.svg>
+    </label>
+  );
+};
diff --git a/src/app/sign-in/page.tsx b/src/app/sign-in/page.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+
+import { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import { Checkbox } from "./components/Checkbox"; 
+import RemoveDoubleClick from "../components/RemoveDoubleClick";
+import SingleLineFooter from "../components/SingleLineFooter";
+
+export default function SignInPage() {
+  const [isVisible, setIsVisible] = useState(false);
+  const [rememberMe, setRememberMe] = useState(false);
+
+  useEffect(() => {
+    setIsVisible(true);
+    RemoveDoubleClick();
+  }, []);
+
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+
+    <div className="flex justify-center items-center min-h-screen bg-gray-100">
+   <div className="absolute top-0 left-0 m-4 text-xl font-bold">Test Logo</div>
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: isVisible ? 1 : 0, y: isVisible ? 0 : 20 }}
+        transition={{ duration: 0.5, ease: "easeOut" }}
+        className="bg-white p-8 rounded-2xl shadow-xl w-full max-w-md"
+      >
+        <h2 className="text-2xl font-semibold text-gray-800 mb-6 text-center">
+          Sign in
+        </h2>
+        <div className="space-y-4">
+          <input
+            type="text"
+            placeholder="Email or phone number"
+            className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+          <div className="relative">
+            <input
+              type={showPassword ? "text" : "password"} 
+              placeholder="Password"
+              className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              autoComplete="new-password"
+            />
+            <button 
+            type="button"
+            className="absolute inset-y-0 right-3 flex items-center text-blue-500 cursor-pointer"
+            onClick={() => setShowPassword(!showPassword)}>
+
+            {showPassword ? "Hide" : "Show"}
+            </button>
+          </div>
+          <div className="flex items-center space-x-2">
+            <input type="checkbox" className="hidden" />
+            <Checkbox checked={rememberMe} onChange={() => setRememberMe(!rememberMe)} />
+            <label htmlFor="remember" className="text-gray-700">
+              Remember me
+            </label>
+          </div>
+          <button className="w-full bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition">
+            Sign in
+          </button>
+          <p className="text-xs text-gray-500 text-center">
+            By clicking Sign In, you agree to the
+            <a href="#" className="text-blue-500"> User Agreement</a>,
+            <a href="#" className="text-blue-500"> Privacy Policy</a>, and
+            <a href="#" className="text-blue-500"> Cookie Policy</a>.
+          </p>
+          <div className="flex items-center my-4">
+            <div className="flex-1 h-px bg-gray-300"></div>
+            <span className="mx-3 text-gray-500">or</span>
+            <div className="flex-1 h-px bg-gray-300"></div>
+          </div>
+          <p className="text-sm text-gray-600">
+            For Student Login
+          </p>
+          <button className="w-full flex items-center justify-center border py-2 rounded-lg hover:bg-gray-200 transition">
+            <img
+              src="https://upload.wikimedia.org/wikipedia/commons/4/44/Microsoft_logo.svg"
+              alt="Microsoft logo"
+              className="w-5 h-5 mr-2"
+            />
+            Continue with Microsoft
+          </button>
+        </div>
+        <p className="text-center text-gray-600 mt-4">
+          New Employer? <a href="#" className="text-blue-500">Sign Up Today</a>
+        </p>
+      </motion.div>
+
+
+    <SingleLineFooter/>
+
+    </div>
+
+  );
+}