├── components
    ├── CustomScrollbar.module.css
    ├── CustomScrollbar.tsx
    ├── About.tsx
    ├── Login.tsx
    ├── Contact.tsx
    ├── FAQ.tsx
    ├── Snackbar.tsx
    ├── ui
    │   ├── Button.tsx
    │   ├── accordion.tsx
    │   ├── InfiniteMovingCards.tsx
    │   ├── LampEffect.tsx
    │   └── TypeWriter.tsx
    ├── Hero.tsx
    ├── HeroTypingEffect.tsx
    ├── Social.tsx
    ├── HeroText.tsx
    ├── Testimonials.tsx
    ├── Nav.tsx
    ├── Form.tsx
    ├── Footer.tsx
    └── Green and Black Minimal Code Search Logo.svg
├── .dockerignore
├── app
    ├── favicon.ico
    ├── faq
    │   ├── homeicon.png
    │   ├── page.tsx
    │   ├── faq.css
    │   └── faqs.js
    ├── about
    │   ├── homeicon.png
    │   └── page.tsx
    ├── contact
    │   ├── contact.jpg
    │   ├── homeicon.png
    │   └── page.tsx
    ├── licensing
    │   ├── homeicon.png
    │   ├── licensing.module.css
    │   └── page.tsx
    ├── privacypolicy
    │   ├── homeicon.png
    │   └── page.tsx
    ├── termsconditions
    │   ├── homeicon.png
    │   └── page.tsx
    ├── not-found.tsx
    ├── page.tsx
    ├── GoogleTranslate.tsx
    ├── Firebase
    │   └── firebase.js
    ├── api
    │   └── route.ts
    ├── layout.tsx
    ├── Footer.module.css
    ├── globals.css
    └── login
    │   └── page.tsx
├── public
    ├── 404.png
    ├── scrap-logo.png
    ├── vercel.svg
    └── next.svg
├── .vscode
    └── settings.json
├── next.config.mjs
├── postcss.config.mjs
├── utils
    └── cn.ts
├── lib
    └── utils.ts
├── Dockerfile
├── firebase.json
├── components.json
├── .gitignore
├── docker-compose.yml
├── tsconfig.json
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── feature_request.md
    │   ├── bug_report.md
    │   ├── docs.md
    │   └── pull-request.md
    ├── Pull_Request_Template.md
    └── workflows
    │   ├── autocomment-issue.yml
    │   └── close-old-issue.yml
├── tailwind.config.ts
├── LICENSE
├── package.json
├── learn.md
├── CONTRIBUTING.md
├── CODE_OF_CONDUCT.md
└── README.md


/components/CustomScrollbar.module.css:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.dockerignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .env
3 | 
4 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abidsyed25/ScrapQuest/HEAD/app/favicon.ico


--------------------------------------------------------------------------------
/public/404.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abidsyed25/ScrapQuest/HEAD/public/404.png


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "githubPullRequests.ignoredPullRequestBranches": ["main"]
3 | }
4 | 


--------------------------------------------------------------------------------
/app/faq/homeicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abidsyed25/ScrapQuest/HEAD/app/faq/homeicon.png


--------------------------------------------------------------------------------
/app/about/homeicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abidsyed25/ScrapQuest/HEAD/app/about/homeicon.png


--------------------------------------------------------------------------------
/app/contact/contact.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abidsyed25/ScrapQuest/HEAD/app/contact/contact.jpg


--------------------------------------------------------------------------------
/public/scrap-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abidsyed25/ScrapQuest/HEAD/public/scrap-logo.png


--------------------------------------------------------------------------------
/app/contact/homeicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abidsyed25/ScrapQuest/HEAD/app/contact/homeicon.png


--------------------------------------------------------------------------------
/app/licensing/homeicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abidsyed25/ScrapQuest/HEAD/app/licensing/homeicon.png


--------------------------------------------------------------------------------
/app/privacypolicy/homeicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abidsyed25/ScrapQuest/HEAD/app/privacypolicy/homeicon.png


--------------------------------------------------------------------------------
/app/termsconditions/homeicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Abidsyed25/ScrapQuest/HEAD/app/termsconditions/homeicon.png


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 | 
4 | export default nextConfig;
5 | 


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/utils/cn.ts:
--------------------------------------------------------------------------------
1 | import { ClassValue, clsx } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs));
6 | }


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { type ClassValue, clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM node:18-alpine
 2 | 
 3 | WORKDIR /app
 4 | 
 5 | COPY package.json package-lock.json ./
 6 | 
 7 | RUN npm install
 8 | 
 9 | COPY . .
10 | 
11 | RUN npm run build
12 | 
13 | EXPOSE 3000
14 | 
15 | CMD ["npm", "run", "dev:docker"]
16 | 


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "hosting": {
 3 |     "public": "build",
 4 |     "site": "",
 5 |     "ignore": [
 6 |       "firebase.json",
 7 |       "**/.*",
 8 |       "**/node_modules/**"
 9 |     ],
10 |     "rewrites": [
11 |       {
12 |         "source": "**"
13 |       }
14 |     ]
15 |   }
16 | }


--------------------------------------------------------------------------------
/components/CustomScrollbar.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import styles from './CustomScrollbar.module.css';  
 3 | 
 4 | const CustomScrollbar: React.FC = () => {
 5 |     return (
 6 |         <div className={styles.customScrollbar} style={{ height: '200px' }}>
 7 |             
 8 |         </div>
 9 |     );
10 | };
11 | 
12 | export default CustomScrollbar;
13 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "slate",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }


--------------------------------------------------------------------------------
/app/not-found.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | 
 3 | export default function NotFound() {
 4 |   return (
 5 |     <div className="global flex flex-col justify-center items-center h-[90vh]">
 6 |       <img src="/404.png" alt="404 not found picture" className="max:w-1/4 sm:w-2/5" />
 7 |       <Link href="/" className="text-2xl font-bold bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded-xl">Go Home</Link>
 8 |     </div>
 9 |   );
10 | }


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import Footer from "@/components/Footer";
 2 | import Hero from "@/components/Hero";
 3 | import { Nav } from "@/components/Nav";
 4 | import Image from "next/image";
 5 | import CustomScrollbar from "@/components/CustomScrollbar";
 6 | 
 7 | export default function Home() {
 8 |   return (
 9 |     <div className="bg-gray-950" style={{ height: "100vh" }}>
10 |       <Nav />
11 |       <CustomScrollbar />
12 |       <Hero />
13 |       <Footer/>
14 |     </div>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | .env
31 | 
32 | # vercel
33 | .vercel
34 | 
35 | # typescript
36 | *.tsbuildinfo
37 | next-env.d.ts
38 | 


--------------------------------------------------------------------------------
/components/About.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import { useRouter } from "next/navigation";
 3 | 
 4 | export default function Contact() {
 5 |   const router = useRouter();
 6 | 
 7 |   const handleNavigation = () => {
 8 |     router.push('/about');
 9 |   };
10 |   
11 |   return (
12 |     
13 |     <button onClick={handleNavigation}type="button" className="text-white bg-[#24292F] hover:bg-[#24292F]/90 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-gray-500 dark:hover:bg-[#050708]/30 mb-1 mr-2">
14 |      About Us
15 |     </button>
16 | );
17 | }


--------------------------------------------------------------------------------
/components/Login.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import { useRouter } from "next/navigation";
 3 | 
 4 | export default function Login() {
 5 |   const router = useRouter();
 6 | 
 7 |   const handleNavigation = () => {
 8 |     router.push('/login');
 9 |   };
10 | 
11 |   return (
12 |       <button onClick={handleNavigation} type="button" className="text-white bg-[#24292F] hover:bg-[#24292F]/90 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-gray-500 dark:hover:bg-[#050708]/30 mb-1 mr-2">
13 |         Go to Login Page
14 |       </button>
15 |   );
16 | }
17 | 


--------------------------------------------------------------------------------
/components/Contact.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import { useRouter } from "next/navigation";
 3 | 
 4 | export default function Contact() {
 5 |   const router = useRouter();
 6 | 
 7 |   const handleNavigation = () => {
 8 |     router.push('/contact');
 9 |   };
10 | 
11 |   return (
12 |     
13 |       <button onClick={handleNavigation}type="button" className="text-white bg-[#24292F] hover:bg-[#24292F]/90 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-gray-500 dark:hover:bg-[#050708]/30 mb-1 mr-2">
14 |         Go to Contact Page
15 |       </button>
16 |   );
17 | }


--------------------------------------------------------------------------------
/components/FAQ.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import { useRouter } from "next/navigation";
 3 | 
 4 | export default function FAQButton() {
 5 |   const router = useRouter();
 6 | 
 7 |   const handleNavigation = () => {
 8 |     router.push('/faq');
 9 |   };
10 |   
11 |   return (
12 |     <button 
13 |       onClick={handleNavigation} 
14 |       type="button" 
15 |       className="text-white bg-[#24292F] hover:bg-[#24292F]/90 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-gray-500 dark:hover:bg-[#050708]/30 mb-1 mr-2">
16 |       FAQ
17 |     </button>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/docker-compose.yml:
--------------------------------------------------------------------------------
 1 | version: '3.8'
 2 | 
 3 | services:
 4 |   scrapquest:
 5 |     build: .
 6 |     image: scrapquest
 7 |     container_name: scrapquest
 8 |     depends_on:
 9 |       - browserless
10 |     ports:
11 |       - "3000:3000"
12 |     environment:
13 |       - NODE_ENV=development
14 |     volumes:
15 |       - .:/usr/src/app
16 |       - /usr/src/app/node_modules
17 | 
18 | 
19 |   browserless:
20 |     image: browserless/chrome
21 |     ports:
22 |       - "3001:3000"
23 |     environment:
24 |       - MAX_CONCURRENT_SESSIONS=10
25 |       - CONNECTION_TIMEOUT=30000
26 |       - PREBOOT_CHROME=true 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "app/g", "app/Firebase/firebase.js"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: 💡 Feature Request
 3 | about: Suggest an interesting feature idea for this project
 4 | title: '💡[FEATURE]: '
 5 | labels: 'enhancement'
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 | 
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 | 
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 | 
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.


--------------------------------------------------------------------------------
/components/Snackbar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import { Toast } from "flowbite-react";
 3 | import { HiCheck, HiExclamation, HiX } from "react-icons/hi";
 4 | 
 5 | 
 6 | export default function Snackbar({state,setstate}:any){
 7 | 
 8 |   const handleCloseSnackbar = () => {
 9 |     setstate(null);
10 |   }
11 |      return <>
12 |          <Toast className="fixed top-14 right-2 md:right-10">
13 |          <div className="inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-orange-100 text-orange-500 dark:bg-orange-700 dark:text-orange-200">
14 |           <HiExclamation className="h-5 w-5" />
15 |         </div>
16 |         <div className="ml-3 text-sm font-normal">{state}</div>
17 |         <Toast.Toggle onClick={handleCloseSnackbar}/>
18 |       </Toast>
19 |      </>
20 | } 


--------------------------------------------------------------------------------
/app/GoogleTranslate.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import React, { useEffect } from "react";
 4 | import Script from "next/script";
 5 | 
 6 | 
 7 | const GoogleTranslate = () => {
 8 |   return (
 9 |     <div className="absolute top-[57px] md:top-12 z-[1] right-0">
10 |     <div id="google_element"></div>
11 |     <Script
12 |       src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"
13 |       strategy="afterInteractive"
14 |     />
15 |     <Script
16 |       id="google-translate"
17 |       strategy="afterInteractive"
18 |       dangerouslySetInnerHTML={{
19 |         __html: `
20 |           function loadGoogleTranslate() {
21 |             new google.translate.TranslateElement({
22 |               pageLanguage: 'en'
23 |             }, 'google_element');
24 |           }
25 |         `,
26 |       }}
27 |     />
28 |   </div>
29 | 
30 |   );
31 | };
32 | 
33 | export default GoogleTranslate;
34 | 


--------------------------------------------------------------------------------
/components/ui/Button.tsx:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | interface MagicButtonProps {
 4 |   title: string;
 5 |   onClick?: () => void;
 6 |   type?: "button" | "submit" | "reset";
 7 |   disabled?: boolean;
 8 | }
 9 | 
10 | const MagicButton: React.FC<MagicButtonProps> = ({ title, onClick, type = "button", disabled }) => {
11 |   return (
12 |     <button 
13 |       type={type} 
14 |       onClick={onClick} 
15 |       disabled={disabled}
16 |       className="relative inline-flex h-12 overflow-hidden rounded-lg p-[1px] focus:outline-none"
17 |     >
18 |       <span className="absolute inset-[-1000%] animate-[spin_2s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#00509E_0%,#00C6A7_50%,#00509E_100%)]"  />
19 |       <span className="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-lg bg-slate-950 px-7 text-sm font-medium text-white backdrop-blur-3xl">
20 |         {title}
21 |       </span>
22 |     </button>
23 |   );
24 | };
25 | 
26 | export default MagicButton;
27 | 


--------------------------------------------------------------------------------
/app/Firebase/firebase.js:
--------------------------------------------------------------------------------
 1 | import { initializeApp } from 'firebase/app';
 2 | import { getAuth, GoogleAuthProvider, GithubAuthProvider, FacebookAuthProvider, TwitterAuthProvider } from 'firebase/auth';
 3 | 
 4 | const firebaseConfig = {
 5 |   apiKey: 'YOUR_API_KEY',
 6 |   authDomain: 'YOUR_AUTH_DOMAIN',
 7 |   projectId: 'YOUR_PROJECT_ID',
 8 |   storageBucket: 'YOUR_STORAGE_BUCKET',
 9 |   messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
10 |   appId: 'YOUR_APP_ID',
11 | };
12 | 
13 | // Initialize Firebase
14 | const app = initializeApp(firebaseConfig);
15 | 
16 | // Initialize Firebase Authentication and get a reference to the service
17 | const auth = getAuth(app);
18 | 
19 | // Initialize Auth Providers
20 | const googleProvider = new GoogleAuthProvider();
21 | const githubProvider = new GithubAuthProvider();
22 | const facebookProvider = new FacebookAuthProvider();
23 | const twitterProvider = new TwitterAuthProvider();
24 | 
25 | export { auth, googleProvider, githubProvider, facebookProvider, twitterProvider };
26 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | import flowbite from "flowbite-react/tailwind";
 3 | 
 4 | const config: Config = {
 5 |   content: [
 6 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 8 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
 9 |     flowbite.content(),
10 |   ],
11 |   theme: {
12 |     extend: {
13 |       backgroundImage: {
14 |         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
15 |         "gradient-conic":
16 |           "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
17 |       },
18 |       animation: {
19 |         scroll:
20 |           "scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite",
21 |       },
22 |       keyframes: {
23 |         scroll: {
24 |           to: {
25 |             transform: "translate(calc(-50% - 0.5rem))",
26 |           },
27 |         },
28 |       },
29 |     },
30 |   },
31 |   plugins: [flowbite.plugin(),],
32 | };
33 | export default config;
34 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: 🪲 Bug Report
 3 | about: Create a bug report to help us resolving the bug
 4 | title: '🪲[Bug]: '
 5 | labels: 'bug'
 6 | assignees: ''
 7 | 
 8 | ---
 9 | 
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 | 
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 |  - OS: [e.g. iOS]
28 |  - Browser [e.g. chrome, safari]
29 |  - Version [e.g. 22]
30 | 
31 | **Smartphone (please complete the following information):**
32 |  - Device: [e.g. iPhone6]
33 |  - OS: [e.g. iOS8.1]
34 |  - Browser [e.g. stock browser, safari]
35 |  - Version [e.g. 22]
36 | 
37 | **Additional context**
38 | Add any other context about the problem here.


--------------------------------------------------------------------------------
/components/Hero.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import Form from "./Form";
 4 | import Snackbar from "./Snackbar";
 5 | import { TypewriterEffectSmoothDemo } from "./HeroText";
 6 | import HeroTypingEffect from "./HeroTypingEffect";
 7 | import Testimonials from "./Testimonials";
 8 | import { LampContainer } from "./ui/LampEffect";
 9 | 
10 | export default function Hero() {
11 |   return (
12 |     <>
13 |       <>
14 |       <div className="relative h-screen flex flex-col justify-center items-center max-sm:px-2 ">
15 |         <LampContainer>
16 |           <div className="text-center w-full max-w-xl max-lg:mb-[-18px]">
17 |             {/* Unlock insights from the web with our powerful web scraper */}
18 |             {/* <TypewriterEffectSmoothDemo /> */}
19 |             <HeroTypingEffect />
20 |           </div>
21 |           <div className="w-full max-w-xl max-lg:mt-12 max-md:mt-8 max-sm:mt-6">
22 |             <Form />
23 |           </div>
24 |         </LampContainer>
25 |       </div>
26 |       <Testimonials />
27 |     </>
28 |     </>
29 |   );
30 | }
31 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/docs.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: 📝 Documentation
 3 | about: Propose changes and improvements to ScrapQuest Docs.
 4 | title: '📝[Docs]: '
 5 | labels: 'enhancement'
 6 | assignees: ''
 7 | ---
 8 | 
 9 | **What Docs changes are you proposing?**
10 | Provide a clear description of the changes you're proposing for the documentation. Are you suggesting corrections, clarifications, additions, or updates?
11 | 
12 | **Why do the Docs need this improvement? What is the motivation for this change? How will this change benefit the community?**
13 | Explain the motivation behind the proposed changes and how they will benefit the community or users of the documentation.
14 | 
15 | **Describe the solution you'd like**
16 | Provide a clear and concise description of the changes you'd like to see implemented in the documentation.
17 | 
18 | **Describe alternatives you've considered**
19 | If you've thought about alternative approaches or solutions, briefly describe them here.
20 | 
21 | **Additional context**
22 | Add any additional context, examples, or screenshots related to the proposed documentation changes.
23 | 


--------------------------------------------------------------------------------
/app/licensing/licensing.module.css:
--------------------------------------------------------------------------------
 1 | .faqBackground {
 2 |     background: linear-gradient(34deg, transparent, rgba(1, 77, 114, 0.556));
 3 |   }
 4 |   
 5 |   .homeIcon {
 6 |     position: absolute !important;
 7 |     top: 4rem; 
 8 |     left: 1rem;
 9 |     width: 2.5rem;
10 |     cursor: pointer;
11 |     transition: transform 0.3s ease, box-shadow 0.3s ease !important;
12 |   }
13 |   
14 |   .homeIcon:hover {
15 |     transform: scale(1.1) !important;
16 |     box-shadow: 0 4px 8px rgba(0, 108, 106, 0.767) !important;
17 |   }
18 |   
19 |   .licensingContainer {
20 |     color: #fff;
21 |     width: 100%;
22 |   }
23 |   
24 |   .faqTitle {
25 |     text-align: center;
26 |     margin-bottom: 2rem;
27 |     margin-top: 35px;
28 |     text-shadow: 1px 1px 2px rgb(1, 53, 79), 0 0 1em rgb(24, 159, 226), 0 0 0.2em blue;
29 |     font-size: 42px;
30 |   }
31 |   
32 |   
33 |   .mitLicenseTitle {
34 |     font-size: 25px; 
35 |     font-weight: bold;
36 |     margin-top: 2rem;
37 |     margin-bottom: 1.1rem;
38 |   }
39 |   
40 |   .paragraph {
41 |     font-size: 20px; 
42 |     line-height:2;
43 |     margin-bottom: 20px;
44 |   }
45 |   


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2024 Abid
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/components/HeroTypingEffect.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import Typewriter from "typewriter-effect";
 3 | 
 4 | const HeroTypingEffect = () => {
 5 |   return (
 6 |     <div className="text-3xl font-bold mt-6 mb-0 lg:mt-16 lg:mb-8 max-lg:text-2xl max-md:text-xl max-sm:text-base max-md:mt-8 max-md:mb-4 max-sm:mt-6 ">
 7 |       <div className="text-blue-900 max-lg:mt-12">
 8 |         <Typewriter
 9 |           onInit={(typewriter) => {
10 |             typewriter
11 |               .typeString("Unlock insights from the web")
12 |               .pauseFor(2500)
13 |               .start()
14 |               .callFunction(() => {
15 |                 typewriter.stop();
16 |               });
17 |           }}
18 |           options={{
19 |             delay: 20,
20 |           }}
21 |         />
22 |       </div>
23 |       <div className="text-cyan-400 max-lg:text-blue-900">
24 |         <Typewriter
25 |           onInit={(typewriter) => {
26 |             typewriter
27 |               .pauseFor(2000)
28 |               .typeString("with our powerful web scraper")
29 |               .start()
30 |               .callFunction(() => {
31 |                 typewriter.stop();
32 |               });
33 |           }}
34 |           options={{
35 |             delay: 20,
36 |           }}
37 |         />
38 |       </div>
39 |     </div>
40 |     
41 |   );
42 | };
43 | 
44 | export default HeroTypingEffect;
45 | 


--------------------------------------------------------------------------------
/.github/Pull_Request_Template.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Description
 3 | 
 4 | Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
 5 | 
 6 | Fixes:  #(issue no.)
 7 | 
 8 | <!---give the issue number you fixed----->
 9 | 
10 | ## Type of change
11 | 
12 | <!----Please delete options that are not relevant.And in order to tick the check box just but x inside them for example [x] like this----->
13 | 
14 | - [ ] Bug fix (non-breaking change which fixes an issue)
15 | - [ ] New feature (non-breaking change which adds functionality)
16 | - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
17 | - [ ] This change requires a documentation update
18 | 
19 | # Checklist:
20 | 
21 | <!----Please delete options that are not relevant.And in order to tick the check box just but x inside them for example [x] like this----->
22 | - [ ] I have made this from my own
23 | - [ ] I have taken help from some online resourses 
24 | - [ ] My code follows the style guidelines of this project
25 | - [ ] I have performed a self-review of my own code
26 | - [ ] I have commented my code, particularly in hard-to-understand areas
27 | - [ ] I have made corresponding changes to the documentation
28 | - [ ] My changes generate no new warnings
29 | 
30 | 
31 | # ATTACH SCREEN-SHOTS / DEPLOYMENT LINK
32 | 


--------------------------------------------------------------------------------
/components/Social.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import { useRouter } from "next/navigation";
 3 | export default function Social(){
 4 |     const router = useRouter();
 5 |     return <>
 6 |          
 7 |                 <button onClick={() => router.push('https://github.com/Abidsyed25/ScrapQuest')} type="button" className="text-white bg-[#24292F] hover:bg-[#24292F]/90 font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-gray-500 dark:hover:bg-[#050708]/30 mb-1 mr-2">
 8 |                     <svg className="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
 9 |                         <path fillRule="evenodd" d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z" clipRule="evenodd" />
10 |                     </svg>
11 |                     Star on Github
12 |                 </button>
13 |     </>
14 | }


--------------------------------------------------------------------------------
/app/api/route.ts:
--------------------------------------------------------------------------------
 1 | import { NextResponse } from 'next/server';
 2 | import puppeteer from 'puppeteer';
 3 | 
 4 | 
 5 | 
 6 | 
 7 | export async function POST(request: Request) {
 8 |   let browser;
 9 |   try {
10 |     const { url } = await request.json();
11 | 
12 |     const urlRegex = /^(http|https):\/\/[^ "]+$/;
13 | 
14 |     if (!urlRegex.test(url)) {
15 |         return NextResponse.json({urlerror:"invalid url"});
16 |     }
17 | 
18 |     if (process.env.API) {
19 |       // If the API URL is present, connect to the existing browser instance
20 |       console.log("api tested");
21 |       browser = await puppeteer.connect({ browserWSEndpoint: process.env.API });
22 |   } else {
23 |       // If the API URL is not present, launch a new browser instance
24 |       browser = await puppeteer.launch();
25 |   }
26 |     const page = await browser.newPage();
27 |     console.log(url);
28 |     await page.goto(url);
29 |     const extractedText = await page.$eval('*', (el: any) => el.innerText);
30 |     console.log(extractedText);
31 |     if (browser) {
32 |       await browser.close();
33 |     }
34 | 
35 |     return NextResponse.json({ extractedText });
36 |   } catch (error) {
37 |     if (browser) {
38 |       await browser.close();
39 |     }
40 |     console.error(error);
41 |     return NextResponse.json({ error });
42 |   }
43 | }
44 | 
45 | export async function GET(request: Request) {
46 |   return NextResponse.json({a:"get request working"});
47 | }
48 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import type { Metadata } from "next";
 3 | import { Inter } from "next/font/google";
 4 | import "./globals.css";
 5 | import GoogleTranslate from "./GoogleTranslate"; // Ensure this import is correct
 6 | 
 7 | const inter = Inter({ subsets: ["latin"] });
 8 | 
 9 | export const metadata: Metadata = {
10 |   title: "ScrapQuest",
11 |   description: "Unlock insights from the web with our powerful web scraper",
12 |   other: { 'google-site-verification': "3riqoLz1ctin_Cjqew-2mycvrLFtfbq9K9mfYfUx7gk" },
13 | };
14 | 
15 | export default function RootLayout({
16 |   children,
17 | }: Readonly<{
18 |   children: React.ReactNode;
19 | }>) {
20 |   return (
21 |     <html lang="en">
22 |       <head>
23 |       <script src="//code.tidio.co/fdylvmddtyb7vzsk5frdt3ncrk6cwobs.js" async></script>
24 |         <script
25 |           dangerouslySetInnerHTML={{
26 |             __html: `
27 |               window.dataLayer = window.dataLayer || [];
28 |               function gtag(){dataLayer.push(arguments);}
29 |               gtag('js', new Date());
30 |               gtag('config', 'G-8QXWGCQ3R0');
31 |             `,
32 |           }}
33 |         />
34 |       </head>
35 |       <body className={inter.className}>
36 |         <header>
37 |           <div className="header-content">
38 |             <GoogleTranslate />
39 |           </div>
40 |         </header>
41 |         {children}
42 |       </body>
43 |     </html>
44 |   );
45 | }
46 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "temp",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint",
10 |     "dev:docker": "next dev"
11 |   },
12 |   "dependencies": {
13 |     "@fortawesome/fontawesome-free": "^6.6.0",
14 |     "@fortawesome/fontawesome-svg-core": "^6.5.2",
15 |     "@fortawesome/free-solid-svg-icons": "^6.5.2",
16 |     "@fortawesome/react-fontawesome": "^0.2.2",
17 |     "@hookform/resolvers": "^3.5.0",
18 |     "@radix-ui/react-accordion": "^1.2.0",
19 |     "@tsparticles/engine": "^3.4.0",
20 |     "@tsparticles/react": "^3.0.0",
21 |     "@tsparticles/slim": "^3.4.0",
22 |     "class-variance-authority": "^0.7.0",
23 |     "clsx": "^2.1.1",
24 |     "firebase": "^10.12.4",
25 |     "flowbite-react": "^0.9.0",
26 |     "framer-motion": "^11.2.12",
27 |     "lucide-react": "^0.400.0",
28 |     "next": "^14.2.5",
29 |     "puppeteer": "^22.6.5",
30 |     "react": "^18",
31 |     "react-dom": "^18",
32 |     "react-hook-form": "^7.51.5",
33 |     "react-router-dom": "^6.24.1",
34 |     "tailwind-merge": "^2.3.0",
35 |     "tailwindcss-animate": "^1.0.7",
36 |     "typewriter-effect": "^2.21.0"
37 |   },
38 |   "devDependencies": {
39 |     "@types/node": "^20",
40 |     "@types/react": "^18",
41 |     "@types/react-dom": "^18",
42 |     "postcss": "^8",
43 |     "tailwindcss": "^3.4.3",
44 |     "typescript": "^5"
45 |   }
46 | }
47 | 


--------------------------------------------------------------------------------
/app/Footer.module.css:
--------------------------------------------------------------------------------
 1 | .heading {
 2 |     position: relative;
 3 |     display: inline-block;
 4 |   }
 5 |   
 6 |   .heading::before,
 7 |   .heading::after {
 8 |     content: "";
 9 |     position: absolute;
10 |     width: 0;
11 |     height: 2px;
12 |     /* background: linear-gradient(135deg, rgba(8,90,159,1) 34%, rgba(0,149,180,1) 70%, rgba(2,0,36,1) 255%); */
13 |     background-color:rgb(0, 154, 201);
14 |     transition: width 0.4s ease;
15 |   }
16 |   
17 |   .heading::before {
18 |     top: -5px;
19 |     left: 0;
20 |   }
21 |   
22 |   .heading::after {
23 |     bottom: -5px;
24 |     right: 0;
25 |   }
26 |   
27 |   .heading:hover::before {
28 |     width: 100%;
29 |   }
30 |   
31 |   .heading:hover::after {
32 |     width: 100%;
33 |   }
34 |   
35 |   .heading:hover {
36 |     cursor: pointer;
37 |     text-shadow: rgb(0, 116, 218) 1px 0 10px;
38 | }
39 | 
40 | .link:hover {
41 |     text-shadow: rgb(1, 88, 164) 1px 0 10px;
42 |     color : rgb(172, 172, 254);
43 |     transform: scale(1.07);
44 |   }
45 | 
46 |   .link {
47 |    
48 |     color: rgb(226, 241, 255);
49 |     transition: color 0.3s ease, transform 0.3s ease;
50 | }
51 | 
52 | .link::after {
53 |     content: '';
54 |     position: absolute;
55 |     bottom: 0;
56 |     left: 0;
57 |     width: 0;
58 |     /* height: 1.5px; */
59 |     background-color: rgb(187, 187, 255);
60 |     transition: width 0.3s ease;
61 | }
62 | 
63 | 
64 | 
65 | .link:hover::after {
66 |     width: 70%;
67 | 
68 | }
69 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/pull-request.md:
--------------------------------------------------------------------------------
 1 | ### Description
 2 | 
 3 | Please include a summary of the changes and the related issue. Please also include relevant motivation and context. List any dependencies that are required for this change.
 4 | 
 5 | Fixes #(issue)
 6 | 
 7 | ### Type of Change
 8 | 
 9 | - [ ] Bug fix (non-breaking change which fixes an issue)
10 | - [ ] New feature (non-breaking change which adds functionality)
11 | - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
12 | - [ ] Documentation update
13 | 
14 | ### How Has This Been Tested?
15 | 
16 | Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration.
17 | 
18 | - [ ] Test A
19 | - [ ] Test B
20 | 
21 | **Test Configuration**:
22 | * Firmware version:
23 | * Hardware:
24 | * Toolchain:
25 | * SDK:
26 | 
27 | ### Checklist:
28 | 
29 | - [ ] My code follows the style guidelines of this project
30 | - [ ] I have performed a self-review of my own code
31 | - [ ] I have commented my code, particularly in hard-to-understand areas
32 | - [ ] I have made corresponding changes to the documentation
33 | - [ ] My changes generate no new warnings
34 | - [ ] I have added tests that prove my fix is effective or that my feature works
35 | - [ ] New and existing unit tests pass locally with my changes
36 | - [ ] Any dependent changes have been merged and published in downstream modules
37 | 


--------------------------------------------------------------------------------
/components/HeroText.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { TypewriterEffectSmooth } from "./ui/TypeWriter";
 4 | 
 5 | export function TypewriterEffectSmoothDemo() {
 6 |   const words = [
 7 |     {
 8 |       text: "Unlock",
 9 |       className: "text-blue-900 md:text-3xl text-xl italic",
10 |     },
11 |     {
12 |       text: "insights",
13 |       className: "text-blue-900 md:text-3xl text-xl italic",
14 |     },
15 |     {
16 |       text: "from",
17 |       className: "text-blue-900 md:text-3xl text-xl  italic",
18 |     },
19 |     {
20 |       text: "the",
21 |       className: "text-blue-900 md:text-3xl text-xl italic",
22 |     },
23 |     {
24 |       text: "web",
25 |       className: "text-blue-900 md:text-3xl text-xl italic",
26 |     },
27 |     {
28 |       text: "with",
29 |       className: "text-blue-900 md:text-3xl text-xl italic",
30 |     },
31 |     {
32 |       text: "our",
33 |       className: "text-blue-900 md:text-3xl text-xl italic",
34 |     },
35 |     {
36 |       text: "powerful",
37 |       className: "text-blue-900 md:text-3xl text-xl italic",
38 |     },
39 |     {
40 |       text: "web",
41 |       className: "text-teal-400 md:text-3xl text-xl",
42 |     },
43 |     {
44 |       text: "scraper",
45 |       className: "text-teal-400  md:text-3xl text-xl",
46 |     },
47 |   ];
48 |   return (
49 |     <div className="max-w-screen-xl mx-auto">
50 |       <div className=" mx-autofont-bold mb-4">
51 |         <TypewriterEffectSmooth words={words} />
52 |       </div>
53 |     </div>
54 |   );
55 | }
56 | 


--------------------------------------------------------------------------------
/.github/workflows/autocomment-issue.yml:
--------------------------------------------------------------------------------
 1 | name: Auto Comment on Issue
 2 | 
 3 | on:
 4 |   issues:
 5 |     types: [opened]
 6 | 
 7 | permissions:
 8 |   issues: write
 9 | 
10 | jobs:
11 |   comment:
12 |     runs-on: ubuntu-latest
13 |     permissions:
14 |       issues: write
15 |     steps:
16 |       - name: Add Comment to Issue
17 |         run: |
18 |           COMMENT=$(cat <<EOF
19 |           {
20 |             "body": "Thank you for creating this issue! 🎉 We'll look into it as soon as possible. In the meantime, please make sure to provide all the necessary details and context. If you have any questions or additional information, feel free to add them here. Your contributions are highly appreciated! 😊\n\nYou can also check our [CONTRIBUTING.md](https://github.com/Abidsyed25/ScrapQuest/blob/main/CONTRIBUTING.md) for guidelines on contributing to this project."
21 |           }
22 |           EOF
23 |           )
24 |           RESPONSE=$(curl -s -o response.json -w "%{http_code}" \ 
25 |             -X POST \
26 |             -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
27 |             -H "Accept: application/vnd.github.v3+json" \
28 |             https://api.github.com/repos/${{ github.repository }}/issues/${{ github.event.issue.number }}/comments \
29 |             -d "$COMMENT")
30 |           cat response.json
31 |           if [ "$RESPONSE" -ne 201 ]; then
32 |             echo "Failed to add comment"
33 |             exit 1
34 |           fi
35 |         env:
36 |           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
37 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | :root {
 6 |   --foreground-rgb: 0, 0, 0;
 7 |   --background-start-rgb: 253, 255, 213;
 8 |   --background-end-rgb: 255, 255, 255;
 9 | }
10 | 
11 | @media (prefers-color-scheme: dark) {
12 |   :root {
13 |     --foreground-rgb: 255, 255, 255;
14 |     --background-start-rgb: 0, 0, 0;
15 |     --background-end-rgb: 0, 0, 0;
16 |   }
17 | }
18 | 
19 | body {
20 |   color: rgb(var(--foreground-rgb));
21 |   background: linear-gradient(
22 |       to bottom,
23 |       transparent,
24 |       rgb(var(--background-end-rgb))
25 |     )
26 |     rgb(var(--background-start-rgb));
27 |     margin: 0;
28 |     padding: 0;
29 | }
30 | 
31 | .header-content {
32 |   position: relative;
33 |   height: 0px; /* Adjust as necessary */
34 |   display: flex;
35 |   align-items: center;
36 |   justify-content: space-between;
37 |   background-color: #007bff; /* Adjust the color if needed */
38 |   padding: 0 20px; /* Adjust the padding if needed */
39 | }
40 | 
41 | 
42 | 
43 | @layer utilities {
44 |   .text-balance {
45 |     text-wrap: balance;
46 |   }
47 | }
48 | 
49 | ::-webkit-scrollbar {
50 |   width: 10px;
51 | }
52 | 
53 | ::-webkit-scrollbar-track {
54 |   background: #78aab8;
55 |   border-radius: 4px;
56 | }
57 | 
58 | ::-webkit-scrollbar-thumb {
59 |   /* background: #4d7fff; */
60 |   background: linear-gradient(45deg, rgb(3, 54, 78), #0383d3);
61 |   border-radius: 10px;
62 |   text-shadow: 2px 2px 5px #00ffb3;
63 |   transition: background 0.9s ease-in-out;
64 | }
65 | 
66 | ::-webkit-scrollbar-thumb:hover {
67 |   /* background: #00ffff; */
68 |   /* background: linear-gradient(45deg, #021e85, #00caca); */
69 |   background: linear-gradient(45deg, rgb(1, 141, 206), #0268a8);
70 | 
71 | 
72 | }


--------------------------------------------------------------------------------
/app/faq/page.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { Nav } from "@/components/Nav";
 3 | import {
 4 |   Accordion,
 5 |   AccordionContent,
 6 |   AccordionItem,
 7 |   AccordionTrigger,
 8 | } from "@/components/ui/accordion";
 9 | import faqs from "./faqs"; // Adjust the path to faqs.js as per your project structure
10 | import Link from "next/link";
11 | import Image from "next/image";
12 | import homeIcon from './homeicon.png'; // Adjust the path to homeicon.png as per your project structure
13 | import Footer from '@/components/Footer';
14 | import "./faq.css";
15 | 
16 | const FAQ: React.FC = () => {
17 |   return (
18 |     <>
19 |       <div className="relative bg-gradient-to-r from-[rgb(2,6,23)] via-[rgb(5,45,65)] to-[rgb(2,6,23)] text-white min-h-screen">
20 |         <Nav />
21 |         <div className="container mx-auto p-6 max-w-[48rem]">
22 |           <h1 className="text-4xl font-bold mb-6 faq-title">
23 |             Frequently Asked{" "}
24 |             <span>Questions</span>
25 |           </h1>
26 |           <div className="flex flex-col items-center justify-center">
27 |             <div style={{ width: "750px" }}>
28 |               <Accordion type="multiple" className="w-full">
29 |                 {faqs.map((faq, index) => (
30 |                   <AccordionItem key={index} value={`item-${index}`} className="my-4">
31 |                     <AccordionTrigger className="accordion-trigger">
32 |                       {faq.question}
33 |                     </AccordionTrigger>
34 |                     <AccordionContent className="accordion-content">
35 |                       {faq.answer}
36 |                     </AccordionContent>
37 |                   </AccordionItem>
38 |                 ))}
39 |               </Accordion>
40 |             </div>
41 |           </div>
42 |         </div>
43 |       </div>
44 |       <Footer />
45 |     </>
46 |   );
47 | }
48 | 
49 | export default FAQ;


--------------------------------------------------------------------------------
/.github/workflows/close-old-issue.yml:
--------------------------------------------------------------------------------
 1 | name: Close Old Issues
 2 | on:
 3 |   schedule:
 4 |     - cron: "0 0 * * *"
 5 | 
 6 | jobs:
 7 |   close-issues:
 8 |     runs-on: ubuntu-latest
 9 | 
10 |     steps:
11 |       - name: Checkout Repository
12 |         uses: actions/checkout@v4
13 | 
14 |       - name: Close Old Issues
15 |         run: |
16 |           open_issues=$(curl -s -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
17 |             "https://api.github.com/repos/${{ github.repository }}/issues?state=open" \
18 |             | jq -r '.[] | .number')
19 |           for issue in $open_issues; do
20 |             # Get the last updated timestamp of the issue
21 |             last_updated=$(curl -s -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
22 |               "https://api.github.com/repos/${{ github.repository }}/issues/$issue" \
23 |               | jq -r '.updated_at')
24 |             days_since_update=$(( ( $(date +%s) - $(date -d "$last_updated" +%s) ) / 86400 ))
25 |             if [ $days_since_update -gt 180 ]; then
26 |               curl -s -X PATCH -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
27 |                 -H "Accept: application/vnd.github.v3+json" \
28 |                 -d '{"state":"closed"}' \
29 |                 "https://api.github.com/repos/${{ github.repository }}/issues/$issue"
30 |               
31 |               # Add a comment explaining when the issue will be closed
32 |               curl -s -X POST -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
33 |                 -H "Accept: application/vnd.github.v3+json" \
34 |                 -d '{"body":"This issue has been automatically closed because it has been inactive for more than 6 months. If you believe this is still relevant, feel free to reopen it or create a new one. Thank you!"}' \
35 |                 "https://api.github.com/repos/${{ github.repository }}/issues/$issue/comments"
36 |             fi
37 |           done
38 | 


--------------------------------------------------------------------------------
/components/ui/accordion.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AccordionPrimitive from "@radix-ui/react-accordion"
 5 | import { ChevronDown } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const Accordion = AccordionPrimitive.Root
10 | 
11 | const AccordionItem = React.forwardRef<
12 |   React.ElementRef<typeof AccordionPrimitive.Item>,
13 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
14 | >(({ className, ...props }, ref) => (
15 |   <AccordionPrimitive.Item
16 |     ref={ref}
17 |     className={cn("border-b", className)}
18 |     {...props}
19 |   />
20 | ))
21 | AccordionItem.displayName = "AccordionItem"
22 | 
23 | const AccordionTrigger = React.forwardRef<
24 |   React.ElementRef<typeof AccordionPrimitive.Trigger>,
25 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
26 | >(({ className, children, ...props }, ref) => (
27 |   <AccordionPrimitive.Header className="flex">
28 |     <AccordionPrimitive.Trigger
29 |       ref={ref}
30 |       className={cn(
31 |         "flex flex-1 items-center justify-between py-4 text-lg font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
32 |         className
33 |       )}
34 |       {...props}
35 |     >
36 |       {children}
37 |       <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
38 |     </AccordionPrimitive.Trigger>
39 |   </AccordionPrimitive.Header>
40 | ))
41 | AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
42 | 
43 | const AccordionContent = React.forwardRef<
44 |   React.ElementRef<typeof AccordionPrimitive.Content>,
45 |   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
46 | >(({ className, children, ...props }, ref) => (
47 |   <AccordionPrimitive.Content
48 |     ref={ref}
49 |     className="overflow-hidden text-md transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
50 |     {...props}
51 |   >
52 |     <div className={cn("pb-4 pt-0", className)}>{children}</div>
53 |   </AccordionPrimitive.Content>
54 | ))
55 | 
56 | AccordionContent.displayName = AccordionPrimitive.Content.displayName
57 | 
58 | export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
59 | 


--------------------------------------------------------------------------------
/app/faq/faq.css:
--------------------------------------------------------------------------------
 1 | /* FAQStyles.css */
 2 | 
 3 | body {
 4 |   margin: 0;
 5 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 6 | }
 7 | 
 8 | .faq-background {
 9 |   /* background-image: url('./QueMark Bg.jpg');
10 |   background-size: cover;
11 |   */
12 |   background: linear-gradient(135deg, transparent, rgba(1, 77, 114, 0.556));
13 | }
14 | 
15 | .faq-title {
16 |   text-align: center;
17 |   margin-bottom: 2rem;
18 |   text-shadow: 1px 1px 2px rgb(1, 53, 79), 0 0 1em rgb(24, 159, 226), 0 0 0.2em blue;
19 | }
20 | 
21 | .faq-title span {
22 |   background-color: #005258;
23 |   padding: 0.2rem 0.5rem;
24 |   border-radius: 0.5rem;
25 |   text-shadow: 1px 1px 2px rgba(1, 53, 79, 0.436), 0 0 1em rgb(24, 159, 226), 0 0 0.2em blue;
26 | }
27 | 
28 | .accordion-trigger {
29 |   background: linear-gradient(135deg, rgba(0, 0, 0, 0.1), rgba(20, 58, 77, 0.6), rgba(1, 27, 41, 0.4));
30 |   color: white;
31 |   font-size: 21px;
32 |   padding: 1rem 1.5rem;
33 |   border-radius: 0.5rem;
34 |   margin-bottom: 0.5rem;
35 |   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
36 |   transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
37 | }
38 | 
39 | .accordion-trigger:hover {
40 |   text-decoration: none;
41 |   text-shadow: 1px 1px 2px rgb(1, 53, 79), 0 0 1em rgb(24, 159, 226), 0 0 0.2em blue;
42 |   background: linear-gradient(135deg, transparent, rgb(1, 68, 102));
43 |   transform: scale(1.05);
44 |   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
45 | }
46 | 
47 | .accordion-content {
48 |   background: linear-gradient(135deg, rgba(8, 1, 26, 0.1), rgba(31, 31, 96, 0.6), rgba(0, 0, 20, 0.4));
49 |   padding: 1rem 1.5rem;
50 |   border-radius: 0.5rem;
51 |   margin-top: 0.5rem;
52 |   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
53 |   transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
54 | }
55 | 
56 | .accordion-content:hover {
57 |   background: linear-gradient(135deg, rgba(15, 2, 50, 0.1), rgba(30, 23, 60, 0.6), rgba(2, 2, 55, 0.4));
58 |   text-decoration: none;
59 |   text-shadow: 1px 1px 2px rgb(1, 53, 79), 0 0 1em rgb(0, 3, 4), 0 0 0.2em blue;
60 |   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
61 | }


--------------------------------------------------------------------------------
/components/Testimonials.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import React, { useEffect, useState } from "react";
 4 | import { InfiniteMovingCards } from "../components/ui/InfiniteMovingCards";
 5 | 
 6 | const testimonials = [
 7 |   {
 8 |     quote:
 9 |       "ScrapQuest has revolutionized the way we handle data extraction. The platform is incredibly user-friendly and saves us hours of manual scraping. We can now focus on analyzing the data instead of collecting it. Highly recommended for anyone in need of efficient web scraping solutions!",
10 |     name: "John D",
11 |     title: "Data Analyst",
12 |   },
13 |   {
14 |     quote:
15 |       "Running a small business means wearing many hats, and ScrapQuest has taken a significant load off my shoulders. The intuitive interface and powerful scraping capabilities allow me to gather market insights effortlessly. It’s like having an extra team member dedicated to data collection!",
16 |     name: "Emily R",
17 |     title: " Research Scientist",
18 |   },
19 |   {
20 |     quote:
21 |       "Integrating web data into our applications used to be a daunting task, but ScrapQuest made it incredibly simple. The platform’s robust API and straightforward documentation helped us get up and running in no time. It’s an indispensable tool for any developer working with web data.",
22 |     name: "Sophia L.",
23 |     title: "Software Developer",
24 |   },
25 |   {
26 |     quote:
27 |       "ScrapQuest is the best web scraping tool I’ve ever used. It’s efficient, reliable, and the customer support is top-notch. We can now collect data from multiple sources quickly and accurately, which has significantly improved our market analysis process. I can’t imagine going back to our old methods!",
28 |     name: "David M",
29 |     title: "Market Researcher",
30 |   },
31 | ];
32 | 
33 | 
34 | function Testimonials() {
35 |   return (
36 |     <>
37 |       <div className="h-[40rem] bg-slate-950 rounded-md flex flex-col antialiased items-center justify-center relative overflow-hidden -mt-80">
38 |     <h1 className="text-3xl -mt-16">TESTIMONIALS</h1>
39 |         <InfiniteMovingCards
40 |           items={testimonials}
41 |           direction="right"
42 |           speed="slow"
43 |         />
44 |       </div>
45 |     </>
46 |   );
47 | }
48 | 
49 | export default Testimonials;
50 | 


--------------------------------------------------------------------------------
/app/faq/faqs.js:
--------------------------------------------------------------------------------
 1 | const faqs = [
 2 |     {
 3 |         question:"What is ScrapQuest?",
 4 |         answer:"ScrapQuest is a platform designed to make data extraction from websites effortless and efficient. It provides tools for quickly gathering valuable information from any website.",
 5 |     },
 6 |     {
 7 |         question: "How does ScrapQuest work?",
 8 |         answer: "Our solution offers a powerful and intuitive platform for web scraping. Users can easily and quickly collect data from any website, with a seamless experience that minimizes technical complexities.",
 9 |     },
10 |     {
11 |         question: "Who can use ScrapQuest?",
12 |         answer: "ScrapQuest is designed for businesses, researchers, and developers who need to gather data from the web. Whether you need insights for your business, data for your research projects, or want to integrate web data into your applications, ScrapQuest is here to help.",
13 |     },
14 |     {
15 |         question: "What kind of support does ScrapQuest offer?",
16 |         answer: "We offer comprehensive support to help you get the most out of ScrapQuest. If you have any questions or need assistance, feel free to reach out to our team.",
17 |     },
18 |     {
19 |         question: "How can I contact ScrapQuest?",
20 |         answer: "  If you have any questions or need support, you can reach out to us through our contact page or support email. We're here to help!",
21 |     },
22 |     {
23 |         question: "Is there a free trial available?",
24 |         answer: "  Yes, ScrapQuest offers a free trial so you can explore our features and see how our platform can meet your needs before committing to a paid plan.",
25 |     },
26 |     {
27 |         question: "Can I cancel my subscription at any time?",
28 |         answer: " Absolutely. You can cancel your subscription at any time. If you have any issues with cancellation, our support team is here to assist you.",
29 |     },
30 |     {
31 |         question: "Do I need technical skills to use ScrapQuest?",
32 |         answer: "Not at all. ScrapQuest is designed to be user-friendly and intuitive, even for those without technical skills. Our platform guides you through the data extraction process with ease.",
33 |     },
34 |     {
35 |         question: "Is my data safe with ScrapQuest?",
36 |         answer: " Yes, we prioritize the security and privacy of your data. ScrapQuest employs advanced security measures to ensure that your data is protected at all times.",
37 |     },
38 | ];
39 | 
40 | export default faqs;
41 | 


--------------------------------------------------------------------------------
/app/licensing/page.tsx:
--------------------------------------------------------------------------------
 1 | import { Nav } from "@/components/Nav";
 2 | import React from "react";
 3 | import Footer from "@/components/Footer";
 4 | import Link from "next/link";
 5 | import Image from "next/image";
 6 | import homeIcon from './homeicon.png'; 
 7 | import styles from './licensing.module.css'; 
 8 | 
 9 | const Licensing: React.FC = () => {
10 |   return (
11 |     <div className={styles.faqBackground}>
12 |       <Nav />
13 |       <Link href="/" passHref>
14 |         <Image src={homeIcon} alt="Home" className={styles.homeIcon} width={50} height={50} />
15 |       </Link>
16 |       <div className={`container mx-auto p-6 max-w-[48rem] ${styles.licensingContainer}`}>
17 |         <h1 className={`text-4xl font-bold mb-6 ${styles.faqTitle}`}>
18 |           Licensing{" "}
19 |         </h1>
20 | 
21 |         <section className="mb-6">
22 |           <p className={styles.mitLicenseTitle}>
23 |             MIT License
24 |           </p>
25 |           <p className={styles.paragraph}>
26 |             Copyright (c) 2024 Abid
27 |           </p>
28 |           <p className={styles.paragraph}>
29 |             Permission is hereby granted, free of charge, to any person obtaining a copy
30 |             of this software and associated documentation files (the "Software"), to deal
31 |             in the Software without restriction, including without limitation the rights
32 |             to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
33 |             copies of the Software, and to permit persons to whom the Software is
34 |             furnished to do so, subject to the following conditions:
35 |           </p>
36 |           <p className={styles.paragraph}>
37 |             The above copyright notice and this permission notice shall be included in all
38 |             copies or substantial portions of the Software.
39 |           </p>
40 |           <p className={styles.paragraph}>
41 |             THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
42 |             IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
43 |             FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
44 |             AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
45 |             LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
46 |             OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
47 |             SOFTWARE.
48 |           </p>
49 |         </section>
50 |       </div>
51 |       <Footer />
52 |     </div>
53 |   );
54 | };
55 | 
56 | export default Licensing;
57 | 


--------------------------------------------------------------------------------
/learn.md:
--------------------------------------------------------------------------------
 1 | # ScrapQuest - Learning Guide
 2 | 
 3 | Welcome to ScrapQuest! This guide will walk you through setting up and understanding the basics of this powerful web scraping tool. Whether you're a beginner or an experienced developer, we've got you covered.
 4 | 
 5 | ## Introduction
 6 | 
 7 | ScrapQuest is designed to simplify the process of extracting data from websites. It's built using modern technologies like Next.js, TypeScript, and Puppeteer with Browserless, making it efficient and versatile.
 8 | 
 9 | ### What You'll Learn
10 | 
11 | By the end of this guide, you'll:
12 | 
13 | - Understand how ScrapQuest works.
14 | - Set up ScrapQuest locally on your machine.
15 | - Gain insights into its architecture and components.
16 | - Feel confident in using ScrapQuest for your web scraping needs.
17 | 
18 | ## Technologies Used
19 | 
20 | Before diving into ScrapQuest, let's briefly go over the technologies involved:
21 | 
22 | - **Next.js**: A React framework for building server-side rendered and static web applications.
23 | - **Puppeteer**: A Node.js library for controlling headless Chrome or Chromium, used for web scraping.
24 | - **Browserless**: A service providing headless browser instances for Puppeteer.
25 | - **TypeScript**: A statically typed superset of JavaScript for improved code quality and developer productivity.
26 | 
27 | ## Setting Up Locally
28 | 
29 | Follow these steps to set up ScrapQuest on your local machine:
30 | 
31 | ### Prerequisites
32 | 
33 | - Make sure you have Node.js (version 18) installed. You can download it [here](https://nodejs.org/).
34 | 
35 | ### Installation Steps
36 | 
37 | 1. Clone the ScrapQuest repository:
38 |     ```bash
39 |     git clone https://github.com/Abidsyed25/Quine-ScrapQuest.git
40 |     ```
41 | 
42 | 2. Navigate to the project directory:
43 |     ```bash
44 |     cd quine-scrapquest
45 |     ```
46 | 
47 | 3. Install dependencies:
48 |     ```bash
49 |     npm install
50 |     ```
51 | 
52 | 4. Start the development server:
53 |     ```bash
54 |     npm run dev
55 |     ```
56 | 
57 | 5. Open `localhost:3000` in your browser.
58 | 
59 | > **Note:** Due to limitations on the deployed version, it's recommended to set up the project locally for complete functionality.
60 | 
61 | ## Contributing to ScrapQuest
62 | 
63 | We welcome contributions from the community to improve ScrapQuest. Whether it's bug fixes, feature enhancements, or documentation improvements, your contributions are valuable.
64 | 
65 | ### Contribution Guidelines
66 | 
67 | Before contributing, please review our [contribution guidelines](CONTRIBUTING.md) for a smooth and collaborative process.
68 | 
69 | We appreciate your interest in making ScrapQuest even better!
70 | 
71 | ## Conclusion
72 | 
73 | Congratulations! You've successfully set up ScrapQuest and learned the basics of web scraping using this powerful tool. Feel free to explore further, experiment with different websites, and contribute to its development.
74 | 


--------------------------------------------------------------------------------
/components/Nav.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { FaHome, FaInfoCircle, FaEnvelope, FaGithub, FaQuestionCircle, FaSignInAlt, FaPenSquare, FaShieldAlt } from "react-icons/fa";
 4 | import { Navbar } from "flowbite-react";
 5 | 
 6 | export function Nav() {
 7 |   return (
 8 |     <Navbar fluid rounded className="bg-gradient-to-r from-[rgb(2,6,23)] via-[rgb(2,41,61)] to-[rgb(2,6,23)]">
 9 |       <Navbar.Brand href="/">
10 |         <span className="whitespace-nowrap text-2xl font-semibold text-white">
11 |           ScrapQuest
12 |         </span>
13 |       </Navbar.Brand>
14 |       <div className="flex md:order-2">
15 |         <Navbar.Toggle className="text-white" />
16 |       </div>
17 |       <Navbar.Collapse>
18 |         <Navbar.Link href="/" className="text-white text-lg md:text-sm flex items-center transform hover:scale-110 transition-transform duration-200 hover:text-blue-300">
19 |           <FaHome className="mr-2" />
20 |           Home
21 |         </Navbar.Link>
22 |         <Navbar.Link href="/about" className="text-white text-lg md:text-sm flex items-center transform hover:scale-110 transition-transform duration-200 hover:text-blue-300">
23 |           <FaInfoCircle className="mr-2" />
24 |           About Us
25 |         </Navbar.Link>
26 |         <Navbar.Link href="/contact" className="text-white text-lg md:text-sm flex items-center transform hover:scale-110 transition-transform duration-200 hover:text-blue-300">
27 |           <FaEnvelope className="mr-2" />
28 |           Contact
29 |         </Navbar.Link>
30 |         <Navbar.Link href="https://github.com/Abidsyed25/ScrapQuest" className="text-white text-lg md:text-sm flex items-center transform hover:scale-110 transition-transform duration-200 hover:text-blue-300">
31 |           <FaGithub className="mr-2" />
32 |           Star on Github
33 |         </Navbar.Link>
34 |         <Navbar.Link href="/faq" className="text-white text-lg md:text-sm flex items-center transform hover:scale-110 transition-transform duration-200 hover:text-blue-300">
35 |           <FaQuestionCircle className="mr-2" />
36 |           FAQ
37 |         </Navbar.Link>
38 |         <Navbar.Link href="/termsconditions" className="text-white text-lg md:text-sm flex items-center transform hover:scale-110 transition-transform duration-200 hover:text-blue-300">
39 |           <FaPenSquare className="mr-2" />
40 |           Terms & Conditions
41 |         </Navbar.Link>
42 |         <Navbar.Link href="/privacypolicy" className="text-white text-lg md:text-sm flex items-center transform hover:scale-110 transition-transform duration-200 hover:text-blue-300">
43 |           <FaShieldAlt className="mr-2" />
44 |           Privacy Policy
45 |         </Navbar.Link>
46 |         <Navbar.Link href="/login" className="text-white text-lg md:text-sm hover:underline flex items-center">
47 |           <FaSignInAlt className="mr-2" />
48 |           Begin Your Journey
49 |         </Navbar.Link>
50 |       </Navbar.Collapse>
51 |     </Navbar>
52 |   );
53 | }
54 | 


--------------------------------------------------------------------------------
/components/Form.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import { useState } from "react";
 4 | import Snackbar from "./Snackbar";
 5 | import MagicButton from "./ui/Button";
 6 | 
 7 | export default function Form() {
 8 |   const [url, seturl] = useState<string>("");
 9 |   const [load, setload] = useState(false);
10 |   const [err, seterr] = useState<any>(null);
11 |   const update = (e: any) => {
12 |     seturl(e.target.value);
13 |   };
14 | 
15 |   const send = async (e: React.FormEvent<HTMLFormElement>) => {
16 |     e.preventDefault();
17 |     setload(true);
18 |     if (err) {
19 |       setload(false);
20 |       return;
21 |     }
22 | 
23 |     try {
24 |       const response = await fetch(
25 |         process.env.NEXT_PUBLIC_APP || "http://localhost:3000/api",
26 |         {
27 |           method: "POST",
28 |           headers: {
29 |             "Content-Type": "application/json",
30 |           },
31 |           body: JSON.stringify({ url }),
32 |         }
33 |       );
34 | 
35 |       console.log("Request sent successfully!");
36 |       const data = await response.json();
37 |       if (data.extractedText) {
38 |         const blob = new Blob([data.extractedText], { type: "text/plain" });
39 |         const url2 = window.URL.createObjectURL(blob);
40 |         const a = document.createElement("a");
41 |         a.href = url2;
42 |         a.download = "data.txt";
43 |         document.body.appendChild(a);
44 |         a.click();
45 |         window.URL.revokeObjectURL(url2);
46 |       } else {
47 |         if (data.urlerror) {
48 |           seterr(data.urlerror);
49 |         } else {
50 |           seterr("URL cannot be loaded");
51 |         }
52 | 
53 |         setTimeout(() => {
54 |           seterr(null);
55 |         }, 3000);
56 |       }
57 |       setload(false);
58 |     } catch (error: any) {
59 |       console.error("Error:", error.message);
60 |       seterr("Vercel timeout error. Please setup project locally");
61 |       setTimeout(() => {
62 |         seterr(null);
63 |       }, 3000);
64 |       setload(false);
65 |     }
66 |   };
67 | 
68 |   return (
69 |     <>
70 |       <form className="mb-6 flex flex-col items-center" onSubmit={send}>
71 |         <label className="block mb-2 text-sm font-medium text-white dark:text-white max-md:text-xs">
72 |           Type a website url
73 |         </label>
74 |         <input
75 |           onChange={update}
76 |           type="text"
77 |           id="success"
78 |           className="lg:w-[50rem] w-[20rem] bg-green-50 border border-blue-500 text-blue-900 dark:text-blue-400 placeholder-black-700 dark:placeholder-black-500 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-blue-500 mb-5 max-lg:text-sm max-md:text-xs max-sm:p-2 max-sm:w-[85%]"
79 |           placeholder="https://www.example.com"
80 |         />
81 | 
82 |           <MagicButton
83 |             title={load ? "Downloading..." : "Download now"}
84 |             type="submit"
85 |             disabled={load}
86 |           />
87 | 
88 |         {err && <Snackbar state={err} setstate={seterr} />}
89 |       </form>
90 |     </>
91 |   );
92 | }
93 | 


--------------------------------------------------------------------------------
/components/ui/InfiniteMovingCards.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { cn } from "@/utils/cn";
  4 | import React, { useEffect, useState } from "react";
  5 | 
  6 | export const InfiniteMovingCards = ({
  7 |   items,
  8 |   direction = "left",
  9 |   speed = "fast",
 10 |   pauseOnHover = true,
 11 |   className,
 12 | }: {
 13 |   items: {
 14 |     quote: string;
 15 |     name: string;
 16 |     title: string;
 17 |   }[];
 18 |   direction?: "left" | "right";
 19 |   speed?: "fast" | "normal" | "slow";
 20 |   pauseOnHover?: boolean;
 21 |   className?: string;
 22 | }) => {
 23 |   const containerRef = React.useRef<HTMLDivElement>(null);
 24 |   const scrollerRef = React.useRef<HTMLUListElement>(null);
 25 | 
 26 |   useEffect(() => {
 27 |     addAnimation();
 28 |   }, []);
 29 |   const [start, setStart] = useState(false);
 30 |   function addAnimation() {
 31 |     if (containerRef.current && scrollerRef.current) {
 32 |       const scrollerContent = Array.from(scrollerRef.current.children);
 33 | 
 34 |       scrollerContent.forEach((item) => {
 35 |         const duplicatedItem = item.cloneNode(true);
 36 |         if (scrollerRef.current) {
 37 |           scrollerRef.current.appendChild(duplicatedItem);
 38 |         }
 39 |       });
 40 | 
 41 |       getDirection();
 42 |       getSpeed();
 43 |       setStart(true);
 44 |     }
 45 |   }
 46 |   const getDirection = () => {
 47 |     if (containerRef.current) {
 48 |       if (direction === "left") {
 49 |         containerRef.current.style.setProperty(
 50 |           "--animation-direction",
 51 |           "forwards"
 52 |         );
 53 |       } else {
 54 |         containerRef.current.style.setProperty(
 55 |           "--animation-direction",
 56 |           "reverse"
 57 |         );
 58 |       }
 59 |     }
 60 |   };
 61 |   const getSpeed = () => {
 62 |     if (containerRef.current) {
 63 |       if (speed === "fast") {
 64 |         containerRef.current.style.setProperty("--animation-duration", "20s");
 65 |       } else if (speed === "normal") {
 66 |         containerRef.current.style.setProperty("--animation-duration", "40s");
 67 |       } else {
 68 |         containerRef.current.style.setProperty("--animation-duration", "80s");
 69 |       }
 70 |     }
 71 |   };
 72 |   return (
 73 |     <div
 74 |       ref={containerRef}
 75 |       className={cn(
 76 |         "scroller relative z-20  max-w-7xl overflow-hidden  [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]",
 77 |         className
 78 |       )}
 79 |     >
 80 |       <ul
 81 |         ref={scrollerRef}
 82 |         className={cn(
 83 |           " flex min-w-full shrink-0 gap-4 py-4 w-max flex-nowrap",
 84 |           start && "animate-scroll ",
 85 |           pauseOnHover && "hover:[animation-play-state:paused]"
 86 |         )}
 87 |       >
 88 |         {items.map((item, idx) => (
 89 |           <li
 90 |             className="w-[350px] max-w-full relative rounded-2xl border border-b-0 flex-shrink-0 border-slate-700 px-8 py-6 md:w-[450px]"
 91 |             style={{
 92 |               background:
 93 |                 "linear-gradient(180deg, var(--slate-800), var(--slate-900)",
 94 |             }}
 95 |             key={item.name}
 96 |           >
 97 |             <blockquote>
 98 |               <div
 99 |                 aria-hidden="true"
100 |                 className="user-select-none -z-1 pointer-events-none absolute -left-0.5 -top-0.5 h-[calc(100%_+_4px)] w-[calc(100%_+_4px)]"
101 |               ></div>
102 |               <span className=" relative z-20 text-sm leading-[1.6] text-gray-100 font-normal">
103 |                 {item.quote}
104 |               </span>
105 |               <div className="relative z-20 mt-6 flex flex-row items-center">
106 |                 <span className="flex flex-col gap-1">
107 |                   <span className=" text-sm leading-[1.6] text-gray-400 font-normal">
108 |                     {item.name}
109 |                   </span>
110 |                   <span className=" text-sm leading-[1.6] text-gray-400 font-normal">
111 |                     {item.title}
112 |                   </span>
113 |                 </span>
114 |               </div>
115 |             </blockquote>
116 |           </li>
117 |         ))}
118 |       </ul>
119 |     </div>
120 |   );
121 | };
122 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # **Contributing Guidelines** 📄
 2 | 
 3 | This documentation contains a set of guidelines to help you during the contribution process.
 4 | We are happy to welcome all the contributions from anyone willing to improve/add new scripts to this project.
 5 | Thank you for helping out and remember, **no contribution is too small.**
 6 | <br>
 7 | Please note we have a [code of conduct](CODE_OF_CONDUCT.md)  please follow it in all your interactions with the project.
 8 | 
 9 | 
10 | 
11 | <br>
12 | 
13 | ## **Need some help regarding the basics?🤔**
14 | 
15 | 
16 | You can refer to the following articles on basics of Git and Github and also contact the Project Mentors,
17 | in case you are stuck:
18 | 
19 | - [Forking a Repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo)
20 | - [Cloning a Repo](https://help.github.com/en/desktop/contributing-to-projects/creating-an-issue-or-pull-request)
21 | - [How to create a Pull Request](https://opensource.com/article/19/7/create-pull-request-github)
22 | - [Getting started with Git and GitHub](https://towardsdatascience.com/getting-started-with-git-and-github-6fcd0f2d4ac6)
23 | - [Learn GitHub from Scratch](https://docs.github.com/en/get-started/start-your-journey/git-and-github-learning-resources)
24 | 
25 | <br>
26 | 
27 | ### Alternatively, contribute using GitHub Desktop
28 | 
29 | 1. **Open GitHub Desktop:**
30 |    Launch GitHub Desktop and log in to your GitHub account if you haven't already.
31 | 
32 | 2. **Clone the Repository:**
33 |    - If you haven't cloned the ScrapQuest repository yet, you can do so by clicking on the "File" menu and selecting "Clone Repository."
34 |    - Choose the ScrapQuest repository from the list of repositories on GitHub and clone it to your local machine.
35 | 
36 | 3. **Switch to the Correct Branch:**
37 |    - Ensure you are on the branch that you want to submit a pull request for.
38 |    - If you need to switch branches, you can do so by clicking on the "Current Branch" dropdown menu and selecting the desired branch.
39 | 
40 | 4. **Make Changes:**
41 |    Make your changes to the code or files in the repository using your preferred code editor.
42 | 
43 | 5. **Commit Changes:**
44 |    - In GitHub Desktop, you'll see a list of the files you've changed. Check the box next to each file you want to include in the commit.
45 |    - Enter a summary and description for your changes in the "Summary" and "Description" fields, respectively. Click the "Commit to <branch-name>" button to commit your changes to the local branch.
46 | 
47 | 6. **Push Changes to GitHub:**
48 |    After committing your changes, click the "Push origin" button in the top right corner of GitHub Desktop to push your changes to your forked repository on GitHub.
49 | 
50 | 7. **Create a Pull Request:**
51 |   - Go to the GitHub website and navigate to your fork of the ScrapQuest repository.
52 |   - You should see a button to "Compare & pull request" between your fork and the original repository. Click on it.
53 | 
54 | 8. **Review and Submit:**
55 |    - On the pull request page, review your changes and add any additional information, such as a title and description, that you want to include with your pull request.
56 |    - Once you're satisfied, click the "Create pull request" button to submit your pull request.
57 | 
58 | 9. **Wait for Review:**
59 |     Your pull request will now be available for review by the project maintainers. They may provide feedback or ask for changes before merging your pull request into the main branch of the ScrapQuest repository.
60 | 
61 | ## **Issue Report Process 📌**
62 | 
63 | 1. Go to the project's issues.
64 | 2. Give proper description for the issues.
65 | 3. Don't spam to get the assignment of the issue 😀.
66 | 4. Wait for till someone is looking into it !.
67 | 5. Start working on issue only after you got assigned that issue 🚀.
68 | 
69 | <br>
70 | 
71 | ## **Pull Request Process 🚀**
72 | 
73 | 1. Ensure that you have self reviewed your code 😀
74 | 2. Make sure you have added the proper description for the functionality of the code
75 | 3. I have commented my code, particularly in hard-to-understand areas.
76 | 4. Add screenshot it help in review.
77 | 5. Submit your PR by giving the necesarry information in PR template and hang tight we will review it really soon 🚀
78 | 
79 | <br>
80 | 
81 | # **Thank you for contributing💗** 
82 | 


--------------------------------------------------------------------------------
/components/ui/LampEffect.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import React from "react";
  3 | import { motion } from "framer-motion";
  4 | import { cn } from "@/utils/cn";
  5 | 
  6 | export function LampDemo() {
  7 |   return (
  8 |     <LampContainer>
  9 |       <motion.h1
 10 |         initial={{ opacity: 0.5, y: 100 }}
 11 |         whileInView={{ opacity: 1, y: 0 }}
 12 |         transition={{
 13 |           delay: 0.3,
 14 |           duration: 0.8,
 15 |           ease: "easeInOut",
 16 |         }}
 17 |         className="mt-8 bg-gradient-to-br from-slate-300 to-slate-500 py-4 bg-clip-text text-center text-4xl font-medium tracking-tight text-transparent md:text-7xl"
 18 |       >
 19 |         Build lamps <br /> the right way
 20 |       </motion.h1>
 21 |     </LampContainer>
 22 |   );
 23 | }
 24 | 
 25 | export const LampContainer = ({
 26 |   children,
 27 |   className,
 28 | }: {
 29 |   children: React.ReactNode;
 30 |   className?: string;
 31 | }) => {
 32 |   return (
 33 |     <div
 34 |       className={cn(
 35 |         "relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-slate-950 w-full rounded-md z-0",
 36 |         className
 37 |       )}
 38 |     >
 39 |       <div className="relative flex w-full flex-1 scale-y-125 items-center justify-center isolate z-0 ">
 40 |         <motion.div
 41 |           initial={{ opacity: 0.5, width: "15rem" }}
 42 |           whileInView={{ opacity: 1, width: "30rem" }}
 43 |           transition={{
 44 |             delay: 0.3,
 45 |             duration: 0.8,
 46 |             ease: "easeInOut",
 47 |           }}
 48 |           style={{
 49 |             backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`,
 50 |           }}
 51 |           className="absolute inset-auto right-1/2 h-56 overflow-visible w-[30rem] bg-gradient-conic from-cyan-500 via-transparent to-transparent text-white [--conic-position:from_70deg_at_center_top]"
 52 |         >
 53 |           <div className="absolute  w-[100%] left-0 bg-slate-950 h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]" />
 54 |           <div className="absolute  w-40 h-[100%] left-0 bg-slate-950  bottom-0 z-20 [mask-image:linear-gradient(to_right,white,transparent)]" />
 55 |         </motion.div>
 56 |         <motion.div
 57 |           initial={{ opacity: 0.5, width: "15rem" }}
 58 |           whileInView={{ opacity: 1, width: "30rem" }}
 59 |           transition={{
 60 |             delay: 0.3,
 61 |             duration: 0.8,
 62 |             ease: "easeInOut",
 63 |           }}
 64 |           style={{
 65 |             backgroundImage: `conic-gradient(var(--conic-position), var(--tw-gradient-stops))`,
 66 |           }}
 67 |           className="absolute inset-auto left-1/2 h-56 w-[30rem] bg-gradient-conic from-transparent via-transparent to-cyan-500 text-white [--conic-position:from_290deg_at_center_top]"
 68 |         >
 69 |           <div className="absolute  w-40 h-[100%] right-0 bg-slate-950  bottom-0 z-20 [mask-image:linear-gradient(to_left,white,transparent)]" />
 70 |           <div className="absolute  w-[100%] right-0 bg-slate-950 h-40 bottom-0 z-20 [mask-image:linear-gradient(to_top,white,transparent)]" />
 71 |         </motion.div>
 72 |         <div className="absolute top-1/2 h-48 w-full translate-y-12 scale-x-150 bg-slate-950 blur-2xl"></div>
 73 |         <div className="absolute top-1/2 z-50 h-48 w-full bg-transparent opacity-10 backdrop-blur-md"></div>
 74 |         <div className="absolute inset-auto z-50 h-36 w-[28rem] -translate-y-1/2 rounded-full bg-cyan-500 opacity-50 blur-3xl"></div>
 75 |         <motion.div
 76 |           initial={{ width: "8rem" }}
 77 |           whileInView={{ width: "16rem" }}
 78 |           transition={{
 79 |             delay: 0.3,
 80 |             duration: 0.8,
 81 |             ease: "easeInOut",
 82 |           }}
 83 |           className="absolute inset-auto z-30 h-36 w-64 -translate-y-[6rem] rounded-full bg-cyan-400 blur-2xl"
 84 |         ></motion.div>
 85 |         <motion.div
 86 |           initial={{ width: "15rem" }}
 87 |           whileInView={{ width: "30rem" }}
 88 |           transition={{
 89 |             delay: 0.3,
 90 |             duration: 0.8,
 91 |             ease: "easeInOut",
 92 |           }}
 93 |           className="absolute inset-auto z-50 h-0.5 w-[30rem] -translate-y-[7rem] bg-cyan-400 "
 94 |         ></motion.div>
 95 | 
 96 |         <div className="absolute inset-auto z-40 h-44 w-full -translate-y-[12.5rem] bg-slate-950 "></div>
 97 |       </div>
 98 | 
 99 |       <div className="relative z-50 flex -translate-y-80 flex-col items-center px-5">
100 |         {children}
101 |       </div>
102 |     </div>
103 |   );
104 | };
105 | 


--------------------------------------------------------------------------------
/components/ui/TypeWriter.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { cn } from "../../utils/cn";
  4 | import { motion, stagger, useAnimate, useInView } from "framer-motion";
  5 | import { useEffect } from "react";
  6 | 
  7 | export const TypewriterEffect = ({
  8 |   words,
  9 |   className,
 10 |   cursorClassName,
 11 | }: {
 12 |   words: {
 13 |     text: string;
 14 |     className?: string;
 15 |   }[];
 16 |   className?: string;
 17 |   cursorClassName?: string;
 18 | }) => {
 19 |   // split text inside of words into array of characters
 20 |   const wordsArray = words.map((word) => {
 21 |     return {
 22 |       ...word,
 23 |       text: word.text.split(""),
 24 |     };
 25 |   });
 26 | 
 27 |   const [scope, animate] = useAnimate();
 28 |   const isInView = useInView(scope);
 29 |   useEffect(() => {
 30 |     if (isInView) {
 31 |       animate(
 32 |         "span",
 33 |         {
 34 |           display: "inline-block",
 35 |           opacity: 1,
 36 |           width: "fit-content",
 37 |         },
 38 |         {
 39 |           duration: 0.3,
 40 |           delay: stagger(0.1),
 41 |           ease: "easeInOut",
 42 |         }
 43 |       );
 44 |     }
 45 |   }, [isInView]);
 46 | 
 47 |   const renderWords = () => {
 48 |     return (
 49 |       <div className="max-w-full sm:max-w-md">
 50 |         <motion.div ref={scope} className="inline">
 51 |           {wordsArray.map((word, idx) => {
 52 |             return (
 53 |               <div key={`word-${idx}`} className="inline-block">
 54 |                 {word.text.map((char, index) => (
 55 |                   <motion.span
 56 |                     initial={{}}
 57 |                     key={`char-${index}`}
 58 |                     className={cn(
 59 |                       `dark:text-white text-black opacity-0 hidden`,
 60 |                       word.className
 61 |                     )}
 62 |                   >
 63 |                     {char}
 64 |                   </motion.span>
 65 |                 ))}
 66 |                 &nbsp;
 67 |               </div>
 68 |             );
 69 |           })}
 70 |         </motion.div>
 71 |       </div>
 72 |     );
 73 |   };
 74 |   return (
 75 |     <div
 76 |       className={cn(
 77 |         "text-base sm:text-xl md:text-3xl lg:text-5xl font-bold text-center",
 78 |         className
 79 |       )}
 80 |     >
 81 |       {renderWords()}
 82 |       <motion.span
 83 |         initial={{
 84 |           opacity: 0,
 85 |         }}
 86 |         animate={{
 87 |           opacity: 1,
 88 |         }}
 89 |         transition={{
 90 |           duration: 0.8,
 91 |           repeat: Infinity,
 92 |           repeatType: "reverse",
 93 |         }}
 94 |         className={cn(
 95 |           "inline-block rounded-sm w-[4px] h-4 md:h-6 lg:h-10 bg-blue-500",
 96 |           cursorClassName
 97 |         )}
 98 |       ></motion.span>
 99 |     </div>
100 |   );
101 | };
102 | 
103 | export const TypewriterEffectSmooth = ({
104 |   words,
105 |   className,
106 |   cursorClassName,
107 | }: {
108 |   words: {
109 |     text: string;
110 |     className?: string;
111 |   }[];
112 |   className?: string;
113 |   cursorClassName?: string;
114 | }) => {
115 |   // split text inside of words into array of characters
116 |   const wordsArray = words.map((word) => {
117 |     return {
118 |       ...word,
119 |       text: word.text.split(""),
120 |     };
121 |   });
122 |   const renderWords = () => {
123 |     return (
124 |       <div className="px-6 flex ">
125 |         {wordsArray.map((word, idx) => {
126 |           return (
127 |             <div key={`word-${idx}`} className=" inline-block">
128 |               {word.text.map((char, index) => (
129 |                 <span
130 |                   key={`char-${index}`}
131 |                   className={cn(`dark:text-white text-black `, word.className)}
132 |                 >
133 |                   {char}
134 |                 </span>
135 |               ))}
136 |               &nbsp;
137 |             </div>
138 |           );
139 |         })}
140 |       </div>
141 |     );
142 |   };
143 | 
144 |   return (
145 |     <div className={cn("flex space-x-1 my-6", className)}>
146 |       <motion.div
147 |         className="overflow-hidden pb-2"
148 |         initial={{
149 |           width: "0%",
150 |         }}
151 |         whileInView={{
152 |           width: "fit-content",
153 |         }}
154 |         transition={{
155 |           duration: 2,
156 |           ease: "linear",
157 |           delay: 1,
158 |         }}
159 |       >
160 |         <div
161 |           className="text-xs sm:text-base md:text-xl lg:text:3xl xl:text-5xl font-bold"
162 |           style={{
163 |             whiteSpace: "nowrap",
164 |           }}
165 |         >
166 |           {renderWords()}{" "}
167 |         </div>{" "}
168 |       </motion.div>
169 |       <motion.span
170 |         initial={{
171 |           opacity: 0,
172 |         }}
173 |         animate={{
174 |           opacity: 1,
175 |         }}
176 |         transition={{
177 |           duration: 0.8,
178 |           repeat: Infinity,
179 |           repeatType: "reverse",
180 |         }}
181 |         className={cn(
182 |           "block rounded-sm w-[4px] h-11 max-lg:h-9 max-md:h-7 max-sm:h-6 bg-blue-500",
183 |           cursorClassName
184 |         )}
185 |       ></motion.span>
186 |     </div>
187 |   );
188 | };
189 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
  1 | # Contributor Covenant Code of Conduct
  2 | 
  3 | ## Our Pledge
  4 | 
  5 | We as members, contributors, and leaders pledge to make participation in our
  6 | community a harassment-free experience for everyone, regardless of age, body
  7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
  8 | identity and expression, level of experience, education, socio-economic status,
  9 | nationality, personal appearance, race, religion, or sexual identity
 10 | and orientation.
 11 | 
 12 | We pledge to act and interact in ways that contribute to an open, welcoming,
 13 | diverse, inclusive, and healthy community.
 14 | 
 15 | ## Our Standards
 16 | 
 17 | Examples of behavior that contributes to a positive environment for our
 18 | community include:
 19 | 
 20 | * Demonstrating empathy and kindness toward other people
 21 | * Being respectful of differing opinions, viewpoints, and experiences
 22 | * Giving and gracefully accepting constructive feedback
 23 | * Accepting responsibility and apologizing to those affected by our mistakes,
 24 |   and learning from the experience
 25 | * Focusing on what is best not just for us as individuals, but for the
 26 |   overall community
 27 | 
 28 | Examples of unacceptable behavior include:
 29 | 
 30 | * The use of sexualized language or imagery, and sexual attention or
 31 |   advances of any kind
 32 | * Trolling, insulting or derogatory comments, and personal or political attacks
 33 | * Public or private harassment
 34 | * Publishing others' private information, such as a physical or email
 35 |   address, without their explicit permission
 36 | * Other conduct which could reasonably be considered inappropriate in a
 37 |   professional setting
 38 | 
 39 | ## Enforcement Responsibilities
 40 | 
 41 | Community leaders are responsible for clarifying and enforcing our standards of
 42 | acceptable behavior and will take appropriate and fair corrective action in
 43 | response to any behavior that they deem inappropriate, threatening, offensive,
 44 | or harmful.
 45 | 
 46 | Community leaders have the right and responsibility to remove, edit, or reject
 47 | comments, commits, code, wiki edits, issues, and other contributions that are
 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
 49 | decisions when appropriate.
 50 | 
 51 | ## Scope
 52 | 
 53 | This Code of Conduct applies within all community spaces, and also applies when
 54 | an individual is officially representing the community in public spaces.
 55 | Examples of representing our community include using an official e-mail address,
 56 | posting via an official social media account, or acting as an appointed
 57 | representative at an online or offline event.
 58 | 
 59 | ## Enforcement
 60 | 
 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
 62 | reported to the community leaders responsible for enforcement at
 63 | [Abidsyed25](https://github.com/Abidsyed25)/[ScrapQuest](https://github.com/Abidsyed25/ScrapQuest)
 64 | All complaints will be reviewed and investigated promptly and fairly.
 65 | 
 66 | All community leaders are obligated to respect the privacy and security of the
 67 | reporter of any incident.
 68 | 
 69 | ## Enforcement Guidelines
 70 | 
 71 | Community leaders will follow these Community Impact Guidelines in determining
 72 | the consequences for any action they deem in violation of this Code of Conduct:
 73 | 
 74 | ### 1. Correction
 75 | 
 76 | **Community Impact**: Use of inappropriate language or other behavior deemed
 77 | unprofessional or unwelcome in the community.
 78 | 
 79 | **Consequence**: A private, written warning from community leaders, providing
 80 | clarity around the nature of the violation and an explanation of why the
 81 | behavior was inappropriate. A public apology may be requested.
 82 | 
 83 | ### 2. Warning
 84 | 
 85 | **Community Impact**: A violation through a single incident or series
 86 | of actions.
 87 | 
 88 | **Consequence**: A warning with consequences for continued behavior. No
 89 | interaction with the people involved, including unsolicited interaction with
 90 | those enforcing the Code of Conduct, for a specified period of time. This
 91 | includes avoiding interactions in community spaces as well as external channels
 92 | like social media. Violating these terms may lead to a temporary or
 93 | permanent ban.
 94 | 
 95 | ### 3. Temporary Ban
 96 | 
 97 | **Community Impact**: A serious violation of community standards, including
 98 | sustained inappropriate behavior.
 99 | 
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 | 
106 | ### 4. Permanent Ban
107 | 
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior,  harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 | 
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 | 
115 | ## Attribution
116 | 
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 | 
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 | 
124 | [homepage]: https://www.contributor-covenant.org
125 | 
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.


--------------------------------------------------------------------------------
/app/about/page.tsx:
--------------------------------------------------------------------------------
  1 | 'use client';
  2 | 
  3 | import React from 'react';
  4 | import { Nav } from '@/components/Nav';
  5 | import Footer from '@/components/Footer';
  6 | import Link from 'next/link';
  7 | import Image from 'next/image';
  8 | import homeIcon from './homeicon.png';
  9 | 
 10 | const About: React.FC = () => {
 11 |   const headingStyle: React.CSSProperties = {
 12 |     textShadow: '2px 2px 5px rgba(0, 0, 0, 0.9), 0 0 1em rgba(16, 47, 96, 0.9), 0 0 0.5em rgba(0, 0, 128, 0.9)',
 13 |     marginTop: '35px',
 14 |     transition: 'color 0.5s ease, text-shadow 0.5s ease',
 15 |   };
 16 | 
 17 |   return (
 18 |     <div className="relative bg-gradient-to-r from-[rgb(2,6,23)] via-[rgb(5,45,65)] to-[rgb(2,6,23)] text-white min-h-screen">
 19 |       <Nav />
 20 |       <div
 21 |   className="container mx-auto p-6 max-w-4xl shadow-lg rounded-lg mt-10 mb-10 relative overflow-hidden"
 22 |   style={{
 23 |     background: `linear-gradient(to right, #01172e, #012242, #01172e), 
 24 |                  linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.1) 60%, transparent)`,
 25 |     backgroundBlendMode: 'overlay',
 26 |   }}
 27 | >
 28 |         
 29 |         <HomeIcon />
 30 | 
 31 |         <div className="mb-12 text-center">
 32 |           <h1 className="text-5xl font-bold mb-4" style={headingStyle}>
 33 |             About <span className="bg-[#003366] rounded px-3 text-white animate-pulse">Us</span>
 34 |           </h1>
 35 |           <p className="text-lg mx-auto max-w-3xl" style={{ fontSize: '20px', lineHeight: '2', marginBottom: '20px' }}>
 36 |             Discover who we are, what we do, and why we are passionate about making web data extraction simple and accessible.
 37 |           </p>
 38 |         </div>
 39 | 
 40 |         <section className="mb-12 text-left">
 41 |           <h2 className="text-3xl font-semibold mb-6 relative">
 42 |             Welcome to ScrapQuest!
 43 |             <div className="absolute inset-0 bg-gradient-to-r from-[#004080] to-[#00264d] opacity-40 -z-10 animate-pulse"></div>
 44 |           </h2>
 45 |           <p className="text-lg leading-relaxed" style={{ fontSize: '20px', lineHeight: '2', marginBottom: '20px' }}>
 46 |             At ScrapQuest, we make data extraction from websites effortless and efficient. Our cutting-edge solution is designed to help you quickly gather valuable information from any website without the usual hassle and complications.
 47 |           </p>
 48 |         </section>
 49 | 
 50 |         <section className="mb-12 text-left">
 51 |           <h2 className="text-3xl font-semibold mb-6 relative">
 52 |             Our Mission
 53 |             <div className="absolute inset-0 bg-gradient-to-r from-[#004080] to-[#00264d] opacity-40 -z-10 animate-pulse"></div>
 54 |           </h2>
 55 |           <p className="text-lg leading-relaxed" style={{ fontSize: '20px', lineHeight: '2', marginBottom: '20px' }}>
 56 |             Our mission is to simplify the process of web scraping, making it accessible and straightforward for everyone. Whether you're a business looking to gain insights, a researcher needing data for your projects, or a developer seeking to integrate web data into your applications, ScrapQuest is here to help.
 57 |           </p>
 58 |         </section>
 59 | 
 60 |         <section className="mb-12 text-left">
 61 |           <h2 className="text-3xl font-semibold mb-6 relative">
 62 |             What We Do
 63 |             <div className="absolute inset-0 bg-gradient-to-r from-[#011d39] to-[#00264d] opacity-40 -z-10 animate-pulse"></div>
 64 |           </h2>
 65 |           <p className="text-lg leading-relaxed" style={{ fontSize: '20px', lineHeight: '2', marginBottom: '20px' }}>
 66 |             ScrapQuest offers a powerful and intuitive platform for web scraping. Our solution allows users to easily and quickly collect data from any website. We focus on providing a seamless experience that minimizes the technical complexities of data extraction, enabling users to obtain the information they need with ease.
 67 |           </p>
 68 |         </section>
 69 | 
 70 |         <section className="mb-12 text-left">
 71 |           <h2 className="text-3xl font-semibold mb-6 relative">
 72 |             Contact Us
 73 |             <div className="absolute inset-0 bg-gradient-to-r from-[#004080] to-[#00264d] opacity-40 -z-10 animate-pulse"></div>
 74 |           </h2>
 75 |           <p className="text-lg leading-relaxed" style={{ fontSize: '20px', lineHeight: '2', marginBottom: '20px' }}>
 76 |             Have questions or need support? Feel free to reach out to our team. We're here to help you get the most out of ScrapQuest.
 77 |           </p>
 78 |           <div className="mt-4">
 79 |             <p>Email: <a href="mailto:support@scrapquest.com" className="text-blue-200 hover:underline transition-colors duration-300">support@scrapquest.com</a></p>
 80 |             <p>Phone: <a href="tel:+123456789" className="text-blue-200 hover:underline transition-colors duration-300">+1 234 567 89</a></p>
 81 |           </div>
 82 |         </section>
 83 |       </div>
 84 |       <Footer />
 85 |     </div>
 86 |   );
 87 | };
 88 | 
 89 | const HomeIcon: React.FC = () => {
 90 |   const [hover, setHover] = React.useState(false);
 91 | 
 92 |   return (
 93 |     <Link href="/" passHref>
 94 |       <Image
 95 |         src={homeIcon}
 96 |         alt="Home"
 97 |         style={{
 98 |           position: 'fixed',
 99 |           top: '4rem',
100 |           left: '1rem',
101 |           width: '2.5rem',
102 |           cursor: 'pointer',
103 |           zIndex: 1000,
104 |           transition: 'transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease',
105 |           transform: hover ? 'scale(1.2)' : 'scale(1)',
106 |           boxShadow: hover ? '0px 6px 20px rgba(0, 0, 0, 0.6)' : 'none',
107 |           filter: hover ? 'brightness(1.5) drop-shadow(0 0 10px rgba(255, 255, 255, 0.8))' : 'brightness(1)',
108 |         }}
109 |         width={50}
110 |         height={50}
111 |         className="homeIcon"
112 |         onMouseEnter={() => setHover(true)}
113 |         onMouseLeave={() => setHover(false)}
114 |       />
115 |     </Link>
116 |   );
117 | }
118 | 
119 | export default About;
120 | 


--------------------------------------------------------------------------------
/app/privacypolicy/page.tsx:
--------------------------------------------------------------------------------
  1 | import { Nav } from "@/components/Nav";
  2 | import React from "react";
  3 | import Footer from "@/components/Footer";
  4 | import Link from "next/link";
  5 | import Image from "next/image";
  6 | import homeIcon from './homeicon.png';
  7 | 
  8 | const PrivacyPolicy: React.FC = () => {
  9 |   const homeIconStyle: React.CSSProperties = {
 10 |     position: 'absolute',
 11 |     top: '4rem',
 12 |     left: '2.5rem',
 13 |     width: '2.5rem',
 14 |     cursor: 'pointer'
 15 |   };
 16 | 
 17 |   return (
 18 |     <div className="relative bg-gradient-to-r from-[rgb(2,6,23)] via-[rgb(5,45,65)] to-[rgb(2,6,23)] text-white min-h-screen">
 19 |       <Nav />
 20 |       <Link href="/" passHref>
 21 |         <Image src={homeIcon} alt="Home" style={homeIconStyle} width={50} height={50} />
 22 |       </Link>
 23 |       <div className="container mx-auto p-6 max-w-[48rem]">
 24 |       <h1 className="text-4xl font-bold mb-8 text-center text-[#00e6e6] leading-tight border-b-4 border-gray-500 pb-2">Privacy Policy</h1>
 25 | 
 26 |         <section className="mb-8">
 27 |           <h2 className="text-3xl font-semibold mb-4 text-center text-[#00e6e6]">
 28 |             Introduction
 29 |           </h2>
 30 |           <p className="mb-6 text-gray-300">
 31 |             This Privacy Policy describes how ScrapQuest ("we," "our," "us")
 32 |             collects, uses, and protects the personal information you provide
 33 |             when using our website and services. By accessing or using ScrapQuest,
 34 |             you agree to the terms of this Privacy Policy.
 35 |           </p>
 36 |         </section>
 37 | 
 38 |         <section className="mb-8">
 39 |           <h2 className="text-3xl font-semibold mb-4 text-center text-[#00e6e6]">
 40 |             Information Collection and Use
 41 |           </h2>
 42 |           <p className="mb-6 text-gray-300">
 43 |             We may collect the following types of personal information when you use
 44 |             our services:
 45 |           </p>
 46 |           <ul className="list-disc list-inside text-gray-300 mb-6 pl-4">
 47 |             <li className="mb-2">
 48 |               <strong className="text-[#00e6e6]">Account Information:</strong> When you create an account, we
 49 |               collect your name, email address, and any other information you
 50 |               provide.
 51 |             </li>
 52 |             <li className="mb-2">
 53 |               <strong className="text-[#00e6e6]">Usage Data:</strong> We may collect information about how you
 54 |               interact with our website and services, such as your IP address,
 55 |               browser type, pages visited, and referring URL.
 56 |             </li>
 57 |             <li className="mb-2">
 58 |               <strong className="text-[#00e6e6]">Cookies and Tracking Technologies:</strong> We use cookies and
 59 |               similar tracking technologies to enhance your experience and collect
 60 |               additional usage data.
 61 |             </li>
 62 |           </ul>
 63 |         </section>
 64 | 
 65 |         <section className="mb-8">
 66 |           <h2 className="text-3xl font-semibold mb-4 text-center text-[#00e6e6]">
 67 |             Use of Information
 68 |           </h2>
 69 |           <p className="mb-6 text-gray-300">
 70 |             We use the information we collect for the following purposes:
 71 |           </p>
 72 |           <ul className="list-disc list-inside text-gray-300 mb-6 pl-4">
 73 |             <li className="mb-2">To provide and maintain our services.</li>
 74 |             <li className="mb-2">To personalize your experience and improve our website.</li>
 75 |             <li className="mb-2">To communicate with you, including responding to your inquiries and providing customer support.</li>
 76 |             <li className="mb-2">To enforce our Terms and Conditions and other legal agreements.</li>
 77 |           </ul>
 78 |         </section>
 79 | 
 80 |         <section className="mb-8">
 81 |           <h2 className="text-3xl font-semibold mb-4 text-center text-[#00e6e6]">
 82 |             Data Sharing and Disclosure
 83 |           </h2>
 84 |           <p className="mb-6 text-gray-300">
 85 |             We do not sell, trade, or otherwise transfer your personal information
 86 |             to third parties without your consent, except as described in this
 87 |             Privacy Policy or as required by law.
 88 |           </p>
 89 |           <p className="mb-6 text-gray-300">
 90 |             We may share your information with:
 91 |           </p>
 92 |           <ul className="list-disc list-inside text-gray-300 mb-6 pl-4">
 93 |             <li className="mb-2">
 94 |               <strong className="text-[#00e6e6]">Service Providers:</strong> We may engage third-party companies
 95 |               to assist in providing our services, subject to confidentiality
 96 |               obligations.
 97 |             </li>
 98 |             <li className="mb-2">
 99 |               <strong className="text-[#00e6e6]">Legal Compliance:</strong> We may disclose information when
100 |               required by law or to protect our rights and interests.
101 |             </li>
102 |           </ul>
103 |         </section>
104 | 
105 |         <section className="mb-8">
106 |           <h2 className="text-3xl font-semibold mb-4 text-center text-[#00e6e6]">
107 |             Data Security
108 |           </h2>
109 |           <p className="mb-6 text-gray-300">
110 |             We implement security measures to protect your personal information from
111 |             unauthorized access, alteration, disclosure, or destruction.
112 |           </p>
113 |         </section>
114 | 
115 |         <section className="mb-8">
116 |           <h2 className="text-3xl font-semibold mb-4 text-center text-[#00e6e6]">
117 |             Your Choices
118 |           </h2>
119 |           <p className="mb-6 text-gray-300">
120 |             You can choose not to provide certain information, although this may
121 |             limit your ability to use some features of our services.
122 |           </p>
123 |         </section>
124 | 
125 |         <section className="mb-8">
126 |           <h2 className="text-3xl font-semibold mb-4 text-center text-[#00e6e6]">
127 |             Changes to This Privacy Policy
128 |           </h2>
129 |           <p className="mb-6 text-gray-300">
130 |             We may update this Privacy Policy from time to time. We will notify you
131 |             of any changes by posting the new Privacy Policy on this page.
132 |           </p>
133 |         </section>
134 | 
135 |         <section className="mb-8">
136 |           <h2 className="text-3xl font-semibold mb-4 text-center text-[#00e6e6]">Contact Us</h2>
137 |           <p className="mb-6 text-gray-300 text-center">
138 |             If you have any questions or concerns about this Privacy Policy, please
139 |             contact us:
140 |           </p>
141 |           <p className="mb-6 text-gray-300 text-center">
142 |             Email:{" "}
143 |             <a href="mailto:support@scrapquest.com" className="text-[#00e6e6] hover:underline">
144 |               support@scrapquest.com
145 |             </a>
146 |             <br />
147 |             Phone:{" "}
148 |             <a href="tel:+123456789" className="text-[#00e6e6] hover:underline">
149 |               +1 234 567 89
150 |             </a>
151 |           </p>
152 |         </section>
153 |       </div>
154 |       <Footer />
155 |     </div>
156 |   );
157 | };
158 | 
159 | export default PrivacyPolicy;


--------------------------------------------------------------------------------
/components/Footer.tsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import Link from "next/link";
  3 | import {
  4 |   FaHome,
  5 |   FaInfoCircle,
  6 |   FaEnvelope,
  7 |   FaGithub,
  8 |   FaQuestionCircle,
  9 |   FaSignInAlt,
 10 |   FaPenSquare,
 11 |   FaShieldAlt,
 12 |   FaFacebookF,
 13 |   FaTwitter,
 14 |   FaLinkedinIn,
 15 |   FaAddressBook,
 16 |   FaFileContract,
 17 | } from "react-icons/fa";
 18 | import { FaXTwitter } from "react-icons/fa6";
 19 | import styles from '../app/Footer.module.css'; 
 20 | 
 21 | export default function Footer() {
 22 |   const currentYear = new Date().getFullYear();
 23 | 
 24 |   return (
 25 |     <footer className="bg-gradient-to-r from-[rgb(2,6,23)] via-[rgb(2,41,61)] to-[rgb(2,6,23)] text-white py-8">
 26 |       <div className="max-w-screen-xl mx-auto px-4">
 27 |         <div className="md:flex md:justify-between">
 28 |           <div className="mb-6 md:mb-0">
 29 |             <Link href="/" legacyBehavior>
 30 |               <a className="text-2xl font-bold text-white">ScrapQuest</a>
 31 |             </Link>
 32 |           </div>
 33 |           <div className="grid grid-cols-1 gap-8 sm:gap-6 sm:grid-cols-4">
 34 |             <div>
 35 |               <h2 className={`mb-6 text-sm font-semibold text-blue-200 uppercase ${styles.heading}`}>
 36 |                 Social Links
 37 |               </h2>
 38 |               <ul className="text-blue-100">
 39 |                 <li className="mb-3">
 40 |                   <a
 41 |                     href="https://www.linkedin.com"
 42 |                     className={`flex items-center text-base ${styles.link}`}
 43 |                   >
 44 |                     <FaLinkedinIn className="w-4 h-4 mr-3 transition-all duration-300 transform-origin-center" />
 45 |                     LinkedIn
 46 |                   </a>
 47 |                 </li>
 48 |                 <li className="mb-3">
 49 |                   <a
 50 |                     href="mailto:example@example.com"
 51 |                     className={`flex items-center text-base ${styles.link}`}
 52 |                   >
 53 |                     <FaEnvelope className="w-4 h-4 mr-3 transition-all duration-300 transform-origin-center" />
 54 |                     Email
 55 |                   </a>
 56 |                 </li>
 57 |                 <li className="mb-3">
 58 |                   <a
 59 |                     href="https://www.facebook.com"
 60 |                     className={`flex items-center text-base ${styles.link}`}
 61 |                   >
 62 |                     <FaFacebookF className="w-4 h-4 mr-3 transition-all duration-300 transform-origin-center" />
 63 |                     Facebook
 64 |                   </a>
 65 |                 </li>
 66 |                 <li className="mb-3">
 67 |                   <a
 68 |                     href="https://www.x.com"
 69 |                     className={`flex items-center text-base ${styles.link}`}
 70 |                   >
 71 |                     <FaXTwitter className="w-4 h-4 mr-3 transition-all duration-300 transform-origin-center" />
 72 |                     Twitter
 73 |                   </a>
 74 |                 </li>
 75 |               </ul>
 76 |             </div>
 77 |             <div>
 78 |               <h2 className={`mb-6 text-sm font-semibold text-blue-200 uppercase ${styles.heading}`}>
 79 |                 Resources
 80 |               </h2>
 81 |               <ul className="text-blue-100">
 82 |                 <li className="mb-3">
 83 |                   <a
 84 |                     href="/"
 85 |                     className={`flex items-center text-base ${styles.link}`}
 86 |                   >
 87 |                     <FaHome className="w-4 h-4 mr-3 transition-all duration-300 transform-origin-center" />
 88 |                     Home
 89 |                   </a>
 90 |                 </li>
 91 |                 <li className="mb-3">
 92 |                   <a
 93 |                     href="/about"
 94 |                     className={`flex items-center text-base ${styles.link}`}
 95 |                   >
 96 |                     <FaInfoCircle className="w-4 h-4 mr-3 transition-all duration-300 transform-origin-center" />
 97 |                     About Us
 98 |                   </a>
 99 |                 </li>
100 |                 <li className="mb-3">
101 |                   <a
102 |                     href="https://github.com/Abidsyed25/ScrapQuest"
103 |                     className={`flex items-center text-base ${styles.link}`}
104 |                   >
105 |                     <FaGithub className="w-4 h-4 mr-3 transition-all duration-300 transform-origin-center" />
106 |                     Star on Github
107 |                   </a>
108 |                 </li>
109 |               </ul>
110 |             </div>
111 |             <div>
112 |               <h2 className={`mb-6 text-sm font-semibold text-blue-200 uppercase ${styles.heading}`}>
113 |                 Help Center
114 |               </h2>
115 |               <ul className="text-blue-100">
116 |                 <li className="mb-3">
117 |                   <a
118 |                     href="/faq"
119 |                     className={`flex items-center text-base ${styles.link}`}
120 |                   >
121 |                     <FaQuestionCircle className="w-4 h-4 mr-3 transition-all duration-300 transform-origin-center" />
122 |                     FAQ
123 |                   </a>
124 |                 </li>
125 |                 <li className="mb-3">
126 |                   <a
127 |                     href="/login"
128 |                     className={`flex items-center text-base ${styles.link}`}
129 |                   >
130 |                     <FaSignInAlt className="w-4 h-4 mr-3 transition-all duration-300 transform-origin-center" />
131 |                     Begin Your Journey
132 |                   </a>
133 |                 </li>
134 |                 <li className="mb-3">
135 |                   <a
136 |                     href="/contact"
137 |                     className={`flex items-center text-base ${styles.link}`}
138 |                   >
139 |                     <FaAddressBook className="w-4 h-4 mr-3 transition-all duration-300 transform-origin-center" />
140 |                     Contact Us
141 |                   </a>
142 |                 </li>
143 |               </ul>
144 |             </div>
145 |             <div>
146 |               <h2 className={`mb-6 text-sm font-semibold text-blue-200 uppercase ${styles.heading}`}>
147 |                 Legal
148 |               </h2>
149 |               <ul className="text-blue-100">
150 |                 <li className="mb-3">
151 |                   <a
152 |                     href="/privacypolicy"
153 |                     className={`flex items-center text-base ${styles.link}`}
154 |                   >
155 |                     <FaShieldAlt className="w-4 h-4 mr-3 transition-all duration-300 transform-origin-center" />
156 |                     Privacy Policy
157 |                   </a>
158 |                 </li>
159 |                 <li className="mb-3">
160 |                   <a
161 |                     href="/termsconditions"
162 |                     className={`flex items-center text-base ${styles.link}`}
163 |                   >
164 |                     <FaPenSquare className="w-4 h-4 mr-3 transition-all duration-300 transform-origin-center" />
165 |                     Terms &amp; Conditions
166 |                   </a>
167 |                 </li>
168 |                 <li className="mb-3">
169 |                   <a
170 |                     href="/licensing"
171 |                     className={`flex items-center text-base ${styles.link}`}
172 |                   >
173 |                     <FaFileContract className="w-4 h-4 mr-2" />
174 |                     Licensing
175 |                   </a>
176 |                 </li>
177 |               </ul>
178 |             </div>
179 |           </div>
180 |         </div>
181 |         <hr className="my-6 border-blue-400 sm:mx-auto" />
182 |         <div className="text-center mt-4">
183 |           <span className="text-base text-blue-200 italic">
184 |             &copy; {currentYear} ScrapQuest™. All Rights Reserved.
185 |           </span>
186 |         </div>
187 |       </div>
188 |     </footer>
189 |   );
190 | }
191 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <a id="top"></a>
  2 |   <h1 align="center">ScrapQuest</h1>
  3 |   
  4 |   <h3 align="center">
  5 |   
  6 |     
  7 | [![Typing SVG](https://readme-typing-svg.herokuapp.com?font=Fira+Code&pause=1000&color=000000&random=false&width=660&lines=Solution+for+extracting+data+from+websites+effortlessly)](https://git.io/typing-svg)
  8 | </h3>
  9 | 
 10 | 
 11 | <hr>
 12 |   
 13 | 
 14 | ### ⚡About Us:
 15 | ScrapQuest is your go-to solution for effortlessly extracting data from websites. It's a simple yet powerful web scraper built with Next.js, TypeScript, and Puppeteer with Browserless. With ScrapQuest, you can quickly gather valuable information from any website without hassle.
 16 | 
 17 | <hr>
 18 | 
 19 | 
 20 | 
 21 | ## ⚡short video for reference:
 22 | 
 23 | https://github.com/Abidsyed25/ScrapQuest/assets/116893970/7ee87ae2-b691-44de-8cd9-ead09fa985e7
 24 | 
 25 | 
 26 | Frontend Deployed here :- [scrap-quest.vercel.app/](https://scrap-quest.vercel.app/)
 27 | 
 28 | > [!NOTE]  
 29 | > Due to some limitations, website functionality is limited on vercel. So setup project locally for complete functionality
 30 | <hr>
 31 | 
 32 | <!-----------------------------------------------------------TECH STACKS---------------------------------------------------------------------------------------->
 33 | 
 34 | <div>
 35 | <h2><img src="https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Travel%20and%20places/High%20Voltage.png" alt="High Voltage" width="35" height="35" />Tech Stack</h2>
 36 | </div>
 37 | <div >
 38 | 	<img width="46" src="https://user-images.githubusercontent.com/25181517/183890598-19a0ac2d-e88a-4005-a8df-1ee36782fde1.png" alt="TypeScript" title="TypeScript"/>
 39 | 	<img width="46" src="https://github.com/marwin1991/profile-technology-icons/assets/136815194/5f8c622c-c217-4649-b0a9-7e0ee24bd704" alt="Next.js" title="Next.js"/>
 40 | 	<img width="46" src="https://github.com/marwin1991/profile-technology-icons/assets/136815194/ab742751-b55b-43d7-8f49-9a67e293f67c" alt="Puppeteer" title="Puppeteer"/>
 41 | </div>
 42 | 
 43 | <ul>
 44 |   <li>
 45 |     <strong>Next.js:</strong> A React framework for building server-side rendered and static web applications.
 46 |   </li>
 47 |   <li>
 48 |     <strong>Puppeteer:</strong> A Node.js library for controlling headless Chrome or Chromium, used here for web scraping.
 49 |   </li>
 50 |   <li>
 51 |     <strong>Browserless:</strong> A service that provides headless browser instances for Puppeteer.
 52 |   </li>
 53 |   <li>
 54 |     <strong>TypeScript:</strong> A statically typed superset of JavaScript that adds type definitions for improved code quality and developer productivity.
 55 |   </li>
 56 | </ul>
 57 | <hr>
 58 | 
 59 | ## ⚡Setup locally
 60 | 
 61 | Follow these steps to set up ScrapQuest locally:
 62 | 
 63 | #### Prerequisites
 64 | 
 65 | - Node.js (version 18) installed on your machine. You can download it [here](https://nodejs.org/).
 66 | 
 67 | ### Steps 
 68 | 
 69 | 
 70 | #### Using Docker
 71 | 
 72 | <ol>
 73 |   <li>
 74 |     
 75 | Fork the Repository
 76 |     
 77 |   </li>
 78 |   <li>
 79 |   Clone your Fork from GitHub<br>
 80 | 
 81 | ```bash
 82 | git clone https://github.com/<your-user-name>/ScrapQuest.git
 83 | ```
 84 |     
 85 |   </li>
 86 |   <li>
 87 | 
 88 | ```bash
 89 | cd ScrapQuest
 90 | ```
 91 |     
 92 |   </li>
 93 |   <li>
 94 | 
 95 | ```bash
 96 | docker-compose up
 97 | ```
 98 | 
 99 |   </li>
100 | </ol>
101 | - open localhost:3000 on the browser
102 | 
103 | #### Without Docker
104 | 
105 | <ol>
106 |   <li>
107 |     
108 | Fork the Repository
109 |     
110 |   </li>
111 |   <li>
112 |   Clone your Fork from GitHub<br>
113 | 
114 | ```bash
115 | git clone https://github.com/<your-user-name>/ScrapQuest.git
116 | ```
117 |     
118 |   </li>
119 |   <li>
120 | 
121 | ```bash
122 | cd ScrapQuest
123 | ```
124 |     
125 |   </li>
126 |   <li>
127 |     
128 | ```bash
129 | npm install
130 | ```
131 |   </li>
132 |   <li>
133 |     
134 | ```bash
135 | npm run dev
136 | ```
137 |     
138 |   </li>
139 | </ol>
140 | 
141 | - open localhost:3000 on the browser
142 | 
143 | ## ✍️ Open Source Contribution Welcome:
144 | 
145 | We welcome contributions from the community to improve ScrapQuest. Whether it's bug fixes, feature enhancements, or documentation improvements, your contributions are valuable.
146 | <hr>
147 | <!--------------------------------------------------------------Contribution Guideline --------------------------------------------------------------------->
148 | 
149 | 
150 | <details>
151 |  <summary><h2>:sparkles:Contribution Guidelines:</h2></summary>
152 | 
153 | To submit your contributions, follow these steps:
154 | 
155 | 1. **Fork the Repository**: Click the "Fork" button at the top right corner of the repository to create your own copy.
156 | 
157 | 2. **Clone Your Fork**: Clone your forked repository to your local machine using the following command:
158 |    ```
159 |    git clone https://github.com/Your-Username/ScrapQuest.git
160 |    ```
161 | 
162 | 3. **Create a Branch**: Create a new branch for your changes:
163 |    ```
164 |    git checkout -b my-feature
165 |    ```
166 | 
167 | 4. **Make Changes**: Make your desired changes to the codebase.
168 | 
169 | 5. **Commit Changes**: Commit your changes with a descriptive commit message:
170 |    ```
171 |    git commit -m "Add new feature"
172 |    ```
173 | 
174 | 6. **Push Changes**: Push your changes to your forked repository:
175 |    ```
176 |    git push origin my-feature
177 |    ```
178 | 
179 | 7. **Submit a Pull Request**: Go to your forked repository on GitHub and submit a pull request. Be sure to provide a detailed description of your changes and why they are necessary.
180 | </details>
181 |    
182 | <hr>
183 | <!---------------------------------------------------------- Code of conduct --------------------------------------------------------------------------------->
184 | <div>
185 | <h2><img src = "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Hand%20gestures/Handshake.png" width="35" height="35"> Code of Conduct:</h2>
186 | </div>
187 | 
188 | Please note that this project is released with a [Contributor Code of Conduct](./CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms. And we appreciate your interest in contributing to ScrapQuest! Let's make it better together.
189 | <hr>
190 | 
191 | 
192 | 
193 | 
194 | <!------------------------------------------------------------------------FEATURED IN------------------------------------------------------------------------------>
195 | 
196 | ## :zap: Featured In:
197 | 
198 | 
199 |  <div>
200 |     <h2><img src="https://github.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/blob/master/Emojis/Hand%20gestures/Flexed%20Biceps.png?raw=true" width="35" height="35" > Open Source Programs</h2>
201 |   </div>
202 | <table>
203 |    <tr>
204 |       <th>Event Logo</th>
205 |       <th>Event Name</th>
206 |       <th>Event Description</th>
207 |    </tr>
208 |    <tr>
209 |       <td><img src="https://user-images.githubusercontent.com/63473496/153487849-4f094c16-d21c-463e-9971-98a8af7ba372.png" width="200" height="auto" loading="lazy" alt="GSSoC 24"/></td>
210 |       <td>GirlScript Summer of Code 2024</td>
211 |       <td>GirlScript Summer of Code is a three-month-long Open Source Program conducted every summer by GirlScript Foundation. It is an initiative to bring more beginners to Open-Source Software Development.</td>
212 |    </tr>
213 | </table>
214 | <hr>
215 | 
216 | <!-- License -->
217 | <div>
218 | <h2><img src = "https://raw.githubusercontent.com/Tarikul-Islam-Anik/Animated-Fluent-Emojis/master/Emojis/Objects/Page%20with%20Curl.png" width="35" height="35"> License:</h2>
219 | </div>
220 | 
221 | [![License](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)<br>
222 | This project is licensed under the [MIT License](./LICENSE).
223 | 
224 | <hr>
225 | <!------------------------------------------------------------contributors-------------------------------------------------------------------->          
226 | <h2 align = "center">Our Contributors ❤️</h2>
227 | <div align = "center">
228 |  <h3>Thank you for contributing to our repository</h3>
229 |  <h1> We appreciate your help in making ScrapQuest even better.😃</h1>
230 |  <a href="https://github.com/Abidsyed25/ScrapQuest/graphs/contributors">
231 |   <img src="https://contrib.rocks/image?repo=Abidsyed25/ScrapQuest" />
232 | </a>
233 | 
234 | </div>
235 | 
236 | <div>
237 |   <h2><img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f64f_1f3fb/512.webp" width="35" height="35"> Support </h2>
238 | </div>
239 | 
240 | <div>
241 |   Don't forget to leave a star<img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f31f/512.webp" width="35" height="30"> for this project!
242 | </div> <br>
243 | 
244 | <a href="#top" style="position: fixed; bottom: 20px; right: 20px; background-color: black ; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; border-radius: 5px; font-family: Arial; font-size: 16px;">Go to Top</a>
245 | 
246 | ****
247 | 
248 | <h6 align="center">Made with ❤️ by Abid </h6>
249 | 
250 | 
251 | 
252 | 
253 | 
254 | 


--------------------------------------------------------------------------------
/app/contact/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import * as z from "zod";
  3 | import { useForm } from "react-hook-form";
  4 | import { zodResolver } from "@hookform/resolvers/zod";
  5 | import { Nav } from "@/components/Nav";
  6 | import React, { useState, useEffect } from "react";
  7 | import Link from "next/link";
  8 | import Image from "next/image";
  9 | import homeIcon from "./homeicon.png"; // Ensure this path is correct
 10 | import Footer from "@/components/Footer";
 11 | import contact from "./contact.jpg";
 12 | import { FaFacebookF, FaGoogle, FaLinkedinIn } from "react-icons/fa";
 13 | import { FaXTwitter } from "react-icons/fa6";
 14 | import "@fortawesome/fontawesome-free/css/all.min.css";
 15 | 
 16 | // Define the form schema using zod
 17 | const formSchema = z.object({
 18 |   name: z.string().nonempty("Name is required"),
 19 |   email: z.string().email("Invalid email address"),
 20 |   feedbackType: z.string().nonempty("Please select a feedback type"),
 21 |   issue: z.string().optional(),
 22 |   otherFeedback: z.string().optional(),
 23 | });
 24 | 
 25 | // Contact form component
 26 | export default function Contact() {
 27 |   const [isSubmitted, setIsSubmitted] = useState(false);
 28 |   const form = useForm<z.infer<typeof formSchema>>({
 29 |     resolver: zodResolver(formSchema),
 30 |     defaultValues: {
 31 |       name: "",
 32 |       email: "",
 33 |       feedbackType: "",
 34 |       issue: "",
 35 |       otherFeedback: "",
 36 |     },
 37 |   });
 38 | 
 39 |   // Handle form submission
 40 |   const handleSubmit = (values: z.infer<typeof formSchema>) => {
 41 |     console.log(values);
 42 |     // Handle form submission (e.g., send data to the server)
 43 |     setIsSubmitted(true);
 44 |     form.reset();
 45 |     setTimeout(() => setIsSubmitted(false), 3000); // Hide notification after 3 seconds
 46 |   };
 47 | 
 48 |   // Function to show other feedback input when "Other" is selected
 49 |   const renderOtherFeedbackInput = () => {
 50 |     if (form.watch("feedbackType") === "other") {
 51 |       return (
 52 |         <div className="flex flex-col">
 53 |           <label htmlFor="otherFeedback" className="font-semibold">
 54 |             Other Feedback
 55 |           </label>
 56 |           <textarea
 57 |             id="otherFeedback"
 58 |             placeholder="Enter your feedback here"
 59 |             {...form.register("otherFeedback")}
 60 |             className="p-2 border rounded resize-none text-black"
 61 |           />
 62 |           {form.formState.errors.otherFeedback && (
 63 |             <p className="text-red-500">
 64 |               {form.formState.errors.otherFeedback.message}
 65 |             </p>
 66 |           )}
 67 |         </div>
 68 |       );
 69 |     }
 70 |     return null;
 71 |   };
 72 | 
 73 |   const homeIconStyle: React.CSSProperties = {
 74 |     position: "absolute",
 75 |     top: "4rem", // Adjust as needed for positioning
 76 |     left: "1rem", // Adjust as needed for positioning
 77 |     width: "2.5rem",
 78 |     cursor: "pointer",
 79 |   };
 80 | 
 81 |   return (
 82 |     <div className="min-h-screen bg-[rgb(2,6,23)] py-12">
 83 |       <Nav />
 84 |       <div className="container mx-auto px-4 max-w-6xl relative">
 85 |         <Link href="/" passHref>
 86 |           <Image
 87 |             src={homeIcon}
 88 |             alt="Home"
 89 |             className="w-12 h-12 mb-8 hover:opacity-80 transition-opacity"
 90 |             width={48}
 91 |             height={48}
 92 |           />
 93 |         </Link>
 94 |         
 95 |         <h1 className="text-5xl font-extrabold text-center text-white mb-4">
 96 |           Contact <span className="bg-[rgb(2,41,61)] rounded-lg px-4 py-1">Us</span>
 97 |         </h1>
 98 |         
 99 |         <p className="text-2xl text-center text-gray-300 mb-12">
100 |           We're here to help. Let us know how we can assist you.
101 |         </p>
102 |         
103 |         <div className="bg-gradient-to-r from-[rgb(2,6,23)] via-[rgb(2,41,61)] to-[rgb(2,6,23)] 
104 |                         rounded-lg overflow-hidden
105 |                         shadow-[0_15px_30px_rgba(100,150,200,0.3),_0_10px_10px_rgba(100,150,200,0.2)]
106 |                         hover:shadow-[0_20px_40px_rgba(100,150,200,0.4),_0_15px_15px_rgba(100,150,200,0.3)]
107 |                         transition-all duration-300 ease-in-out
108 |                         max-w-4xl mx-auto mb-20">
109 |           <div className="flex flex-col md:flex-row">
110 |             <div className="p-6 md:w-2/5">
111 |               <Image src={contact} height={400} width={280} alt="contact" className="mx-auto mb-6" />
112 |               <div className="space-y-3">
113 |                 <h2 className="text-2xl font-bold text-white">Get in Touch</h2>
114 |                 <p className="text-sm text-gray-300">We'd love to hear from you. Send us a message and we'll respond as soon as possible.</p>
115 |                 <div className="flex justify-center space-x-4 text-gray-300">
116 |                   <a href="https://www.facebook.com" className="hover:text-white transition-colors">
117 |                     <FaFacebookF className="w-5 h-5" />
118 |                   </a>
119 |                   <a href="https://www.x.com" className="hover:text-white transition-colors">
120 |                     <FaXTwitter className="w-5 h-5" />
121 |                   </a>
122 |                   <a href="https://www.gmail.com" className="hover:text-white transition-colors">
123 |                     <FaGoogle className="w-5 h-5" />
124 |                   </a>
125 |                   <a href="https://www.linkedin.com" className="hover:text-white transition-colors">
126 |                     <FaLinkedinIn className="w-5 h-5" />
127 |                   </a>
128 |                 </div>
129 |               </div>
130 |             </div>
131 |             
132 |             <div className="p-6 md:w-3/5">
133 |               <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4">
134 |                 <div>
135 |                   <label htmlFor="name" className="block text-sm font-medium text-gray-300">Full Name</label>
136 |                   <input
137 |                     id="name"
138 |                     type="text"
139 |                     placeholder="John Doe"
140 |                     {...form.register("name")}
141 |                     className="mt-1 block w-full rounded-md bg-[rgb(2,6,23)] border-[rgb(2,41,61)] text-white placeholder-gray-500 shadow-sm focus:border-blue-500 focus:ring-blue-500"
142 |                   />
143 |                   {form.formState.errors.name && (
144 |                     <p className="mt-1 text-sm text-red-400">{form.formState.errors.name.message}</p>
145 |                   )}
146 |                 </div>
147 |   
148 |                 <div>
149 |                   <label htmlFor="email" className="block text-sm font-medium text-gray-300">Email Address</label>
150 |                   <input
151 |                     id="email"
152 |                     type="email"
153 |                     placeholder="johndoe@example.com"
154 |                     {...form.register("email")}
155 |                     className="mt-1 block w-full rounded-md bg-[rgb(2,6,23)] border-[rgb(2,41,61)] text-white placeholder-gray-500 shadow-sm focus:border-blue-500 focus:ring-blue-500"
156 |                   />
157 |                   {form.formState.errors.email && (
158 |                     <p className="mt-1 text-sm text-red-400">{form.formState.errors.email.message}</p>
159 |                   )}
160 |                 </div>
161 |   
162 |                 <div>
163 |                   <label htmlFor="feedbackType" className="block text-sm font-medium text-gray-300">Type of Feedback</label>
164 |                   <select
165 |                     id="feedbackType"
166 |                     {...form.register("feedbackType")}
167 |                     className="mt-1 block w-full rounded-md bg-[rgb(2,6,23)] border-[rgb(2,41,61)] text-white shadow-sm focus:border-blue-500 focus:ring-blue-500"
168 |                   >
169 |                     <option value="">Select...</option>
170 |                     <option value="question">Question</option>
171 |                     <option value="suggestion">Suggestion</option>
172 |                     <option value="issue">Issue</option>
173 |                     <option value="other">Other</option>
174 |                   </select>
175 |                   {form.formState.errors.feedbackType && (
176 |                     <p className="mt-1 text-sm text-red-400">{form.formState.errors.feedbackType.message}</p>
177 |                   )}
178 |                 </div>
179 |   
180 |                 {renderOtherFeedbackInput()}
181 |   
182 |                 <div>
183 |                   <label htmlFor="issue" className="block text-sm font-medium text-gray-300">Message</label>
184 |                   <textarea
185 |                     id="issue"
186 |                     placeholder="Please provide details about your question, suggestion, or issue"
187 |                     {...form.register("issue")}
188 |                     rows={3}
189 |                     className="mt-1 block w-full rounded-md bg-[rgb(2,6,23)] border-[rgb(2,41,61)] text-white placeholder-gray-500 shadow-sm focus:border-blue-500 focus:ring-blue-500"
190 |                   />
191 |                   {form.formState.errors.issue && (
192 |                     <p className="mt-1 text-sm text-red-400">{form.formState.errors.issue.message}</p>
193 |                   )}
194 |                 </div>
195 |   
196 |                 <button
197 |                   type="submit"
198 |                   className="w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-md shadow transition-colors"
199 |                 >
200 |                   Submit
201 |                 </button>
202 |               </form>
203 |               
204 |               {isSubmitted && (
205 |                 <p className="mt-4 text-sm text-blue-300 font-semibold">Thank you! Your message has been sent successfully.</p>
206 |               )}
207 |             </div>
208 |           </div>
209 |         </div>
210 |       </div>
211 |       <Footer />
212 |     </div>
213 |   );
214 | }
215 | 


--------------------------------------------------------------------------------
/app/termsconditions/page.tsx:
--------------------------------------------------------------------------------
  1 | import { Nav } from "@/components/Nav";
  2 | import React from "react";
  3 | import Link from "next/link";
  4 | import Image from "next/image";
  5 | import homeIcon from './homeicon.png'; // Ensure this path is correct
  6 | import Footer from "@/components/Footer";
  7 | const TermsAndConditions = () => {
  8 |   const homeIconStyle: React.CSSProperties = {
  9 |     position: 'absolute',
 10 |     top: '0.1rem',
 11 |     left: '-28rem',
 12 |     width: '2.5rem',
 13 |     cursor: 'pointer'
 14 |   };
 15 | 
 16 |   return (
 17 |     <div className="relative bg-gradient-to-r from-[rgb(2,6,23)] via-[rgb(5,45,65)] to-[rgb(2,6,23)] text-white min-h-screen">
 18 |       <Nav />
 19 |       <div className="container mx-auto p-6 max-w-[48rem]">
 20 |         <div style={{ position: 'relative' }}>
 21 |           <Link href="/" legacyBehavior>
 22 |             <a>
 23 |               <Image src={homeIcon} alt="Home" style={homeIconStyle} width={50} height={50} />
 24 |             </a>
 25 |           </Link>
 26 |         </div>
 27 | 
 28 |         <h1 className="text-4xl font-bold mb-6 text-center">
 29 |           Terms and <span className="bg-[#8abf83] rounded px-2">Conditions</span>
 30 |         </h1>
 31 | 
 32 |         <section className="mb-6">
 33 |           <h2 className="text-2xl font-semibold mb-4 text-center">
 34 |             Introduction
 35 |           </h2>
 36 |           <p className="mb-6 text-white-700">
 37 |             Welcome to ScrapQuest! These Terms and Conditions outline the rules
 38 |             and regulations for the use of ScrapQuest website and services. By
 39 |             accessing and using our website, you accept and agree to comply with
 40 |             these terms. If you do not agree with any part of these terms, you
 41 |             should not use our website or services.
 42 |           </p>
 43 |         </section>
 44 | 
 45 |         <section className="mb-6">
 46 |           <h2 className="text-2xl font-semibold mb-4 text-center">
 47 |             Definitions
 48 |           </h2>
 49 |           <ul className="list-disc list-inside text-white-700 mb-6">
 50 |             <li>
 51 |               <strong>&quot;Service&quot;</strong> refers to the web scraping
 52 |               services provided by ScrapQuest.
 53 |             </li>
 54 |             <li>
 55 |               <strong>&quot;We,&quot; &quot;Us,&quot; &quot;Our&quot;</strong>{" "}
 56 |               refers to ScrapQuest.
 57 |             </li>
 58 |             <li>
 59 |               <strong>&quot;You,&quot; &quot;Your&quot;</strong> refers to the
 60 |               user or customer of our website and services.
 61 |             </li>
 62 |           </ul>
 63 |         </section>
 64 | 
 65 |         <section className="mb-6">
 66 |           <h2 className="text-2xl font-semibold mb-4 text-center">
 67 |             Use of Service
 68 |           </h2>
 69 |           <h3 className="text-xl font-semibold mb-2">Eligibility</h3>
 70 |           <p className="mb-6 text-white-700">
 71 |             You must be at least 18 years old to use our services. By using our
 72 |             services, you represent and warrant that you are at least 18 years
 73 |             old and have the legal capacity to enter into these Terms and
 74 |             Conditions.
 75 |           </p>
 76 | 
 77 |           <h3 className="text-xl font-semibold mb-2">Account Registration</h3>
 78 |           <p className="mb-6 text-white-700">
 79 |             To access certain features of our services, you may need to create
 80 |             an account. You agree to provide accurate and complete information
 81 |             when creating your account and to update this information as
 82 |             necessary. You are responsible for maintaining the confidentiality
 83 |             of your account credentials and for all activities that occur under
 84 |             your account.
 85 |           </p>
 86 | 
 87 |           <h3 className="text-xl font-semibold mb-2">Prohibited Activities</h3>
 88 |           <p className="mb-6 text-white-700">
 89 |             When using our services, you agree not to:
 90 |           </p>
 91 |           <ul className="list-disc list-inside text-white-700 mb-6">
 92 |             <li>Use our services for any illegal or unauthorized purpose.</li>
 93 |             <li>
 94 |               Attempt to gain unauthorized access to our systems or networks.
 95 |             </li>
 96 |             <li>
 97 |               Use our services to scrape websites that you do not have
 98 |               permission to scrape.
 99 |             </li>
100 |             <li>
101 |               Interfere with or disrupt the integrity or performance of our
102 |               services.
103 |             </li>
104 |           </ul>
105 |         </section>
106 | 
107 |         <section className="mb-6">
108 |           <h2 className="text-2xl font-semibold mb-4 text-center">
109 |             Intellectual Property
110 |           </h2>
111 |           <p className="mb-6 text-white-700">
112 |             All content, trademarks, logos, and intellectual property displayed
113 |             on our website are the property of ScrapQuest or its licensors. You
114 |             may not use, reproduce, distribute, or create derivative works from
115 |             any content without our prior written consent.
116 |           </p>
117 |         </section>
118 | 
119 |         <section className="mb-6">
120 |           <h2 className="text-2xl font-semibold mb-4 text-center">
121 |             Data Privacy
122 |           </h2>
123 |           <p className="mb-6 text-white-700">
124 |             We value your privacy and are committed to protecting your personal
125 |             information. Please review our{" "}
126 |             <a href="#" className="text-blue-600">
127 |               Privacy Policy
128 |             </a>{" "}
129 |             to understand how we collect, use, and protect your data.
130 |           </p>
131 |         </section>
132 | 
133 |         <section className="mb-6">
134 |           <h2 className="text-2xl font-semibold mb-4 text-center">
135 |             Limitation of Liability
136 |           </h2>
137 |           <p className="mb-6 text-white-700">
138 |             To the fullest extent permitted by law, ScrapQuest shall not be
139 |             liable for any indirect, incidental, special, consequential, or
140 |             punitive damages, or any loss of profits or revenues, whether
141 |             incurred directly or indirectly, or any loss of data, use, goodwill,
142 |             or other intangible losses resulting from:
143 |           </p>
144 |           <ul className="list-disc list-inside text-white-700 mb-6">
145 |             <li>Your use or inability to use our services.</li>
146 |             <li>
147 |               Any unauthorized access to or use of our servers and/or any
148 |               personal information stored therein.
149 |             </li>
150 |             <li>
151 |               Any interruption or cessation of transmission to or from our
152 |               services.
153 |             </li>
154 |           </ul>
155 |         </section>
156 | 
157 |         <section className="mb-6">
158 |           <h2 className="text-2xl font-semibold mb-4 text-center">
159 |             Indemnification
160 |           </h2>
161 |           <p className="mb-6 text-white-700">
162 |             You agree to indemnify and hold harmless ScrapQuest, its affiliates,
163 |             officers, agents, and employees, from any claim or demand, including
164 |             reasonable attorneys&quot; fees, made by any third party due to or
165 |             arising out of your use of our services, your violation of these
166 |             terms, or your violation of any rights of another.
167 |           </p>
168 |         </section>
169 | 
170 |         <section className="mb-6">
171 |           <h2 className="text-2xl font-semibold mb-4 text-center">
172 |             Modifications to the Service and Terms
173 |           </h2>
174 |           <p className="mb-6 text-white-700">
175 |             We reserve the right to modify or discontinue our services at any
176 |             time, with or without notice. We also reserve the right to modify
177 |             these Terms and Conditions at any time. Your continued use of our
178 |             services after any such changes constitutes your acceptance of the
179 |             new terms.
180 |           </p>
181 |         </section>
182 | 
183 |         <section className="mb-6">
184 |           <h2 className="text-2xl font-semibold mb-4 text-center">
185 |             Governing Law
186 |           </h2>
187 |           <p className="mb-6 text-white-700">
188 |             These Terms and Conditions are governed by and construed in
189 |             accordance with the laws of the jurisdiction in which ScrapQuest
190 |             operates, without regard to its conflict of law principles.
191 |           </p>
192 |         </section>
193 | 
194 |         <section className="mb-6">
195 |   <h2 className="text-2xl font-semibold mb-4 text-center">Contact Us</h2>
196 |   <p className="mb-6 text-white-700">
197 |     If you have any questions or concerns about these Terms and Conditions, please contact us:
198 |   </p>
199 |   <div className="p-4 rounded shadow-lg text-center text-white transform transition-transform duration-300 hover:scale-105" style={{ background: 'linear-gradient(to right, rgba(11, 26, 32, 0.4), rgba(32, 58, 67, 0.4), rgba(11, 26, 32, 0.4))' }}>
200 |     <p className="mb-4">
201 |       Email:{" "}
202 |       <a href="mailto:support@scrapquest.com" className="text-blue-200 hover:text-blue-400 underline">
203 |         support@scrapquest.com
204 |       </a>
205 |     </p>
206 |     <p>
207 |       Phone:{" "}
208 |       <a href="tel:+123456789" className="text-blue-200 hover:text-blue-400 underline">
209 |         +1 234 567 89
210 |       </a>
211 |     </p>
212 |   </div>
213 | </section>
214 | 
215 | 
216 | 
217 |         <p className="mb-6 text-white-700 text-center">
218 |           By using our website and services, you acknowledge that you have read,
219 |           understood, and agree to be bound by these Terms and Conditions.
220 |         </p>
221 |       </div>
222 |       <Footer />
223 |     </div>
224 |   );
225 | };
226 | 
227 | export default TermsAndConditions;
228 | 


--------------------------------------------------------------------------------
/components/Green and Black Minimal Code Search Logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" zoomAndPan="magnify" viewBox="0 0 375 374.999991" height="500" preserveAspectRatio="xMidYMid meet" version="1.0"><defs><g/><clipPath id="9acd2e00f8"><path d="M 85.265625 116 L 150 116 L 150 192 L 85.265625 192 Z M 85.265625 116 " clip-rule="nonzero"/></clipPath><clipPath id="d40b6aaf73"><path d="M 152.574219 112.703125 L 222.421875 112.703125 L 222.421875 207.136719 L 152.574219 207.136719 Z M 152.574219 112.703125 " clip-rule="nonzero"/></clipPath></defs><rect x="-37.5" width="450" fill="#ffffff" y="-37.499999" height="449.999989" fill-opacity="1"/><rect x="-37.5" width="450" fill="#ffffff" y="-37.499999" height="449.999989" fill-opacity="1"/><g clip-path="url(#9acd2e00f8)"><path fill="#211d1d" d="M 88.222656 148.988281 L 141.761719 116.835938 C 142.570312 116.390625 143.464844 116.164062 144.453125 116.164062 C 145.933594 116.164062 147.199219 116.691406 148.253906 117.746094 C 149.304688 118.796875 149.832031 120.066406 149.832031 121.546875 C 149.832031 123.472656 148.914062 125.042969 147.074219 126.253906 L 101.070312 153.828125 L 147.074219 181.40625 C 148.914062 182.617188 149.832031 184.183594 149.832031 186.113281 C 149.832031 187.59375 149.304688 188.859375 148.253906 189.914062 C 147.199219 190.96875 145.933594 191.492188 144.453125 191.492188 C 143.464844 191.492188 142.570312 191.269531 141.761719 190.824219 L 88.222656 158.671875 C 86.25 157.414062 85.265625 155.800781 85.265625 153.828125 C 85.265625 151.855469 86.25 150.242188 88.222656 148.988281 " fill-opacity="1" fill-rule="nonzero"/></g><path fill="#211d1d" d="M 289.734375 153.828125 C 289.734375 155.800781 288.746094 157.414062 286.773438 158.671875 L 233.234375 190.824219 C 232.425781 191.269531 231.53125 191.492188 230.542969 191.492188 C 229.0625 191.492188 227.796875 190.96875 226.742188 189.914062 C 225.691406 188.859375 225.164062 187.59375 225.164062 186.113281 C 225.164062 184.183594 226.082031 182.617188 227.921875 181.40625 L 273.925781 153.828125 L 227.921875 126.253906 C 226.082031 125.042969 225.164062 123.472656 225.164062 121.546875 C 225.164062 120.066406 225.691406 118.796875 226.742188 117.746094 C 227.796875 116.691406 229.0625 116.164062 230.542969 116.164062 C 231.53125 116.164062 232.425781 116.390625 233.234375 116.835938 L 286.773438 148.988281 C 288.746094 150.242188 289.734375 151.855469 289.734375 153.828125 " fill-opacity="1" fill-rule="nonzero"/><g clip-path="url(#d40b6aaf73)"><path fill="#67c656" d="M 213.828125 151.488281 C 207.714844 162.089844 194.164062 165.71875 183.5625 159.597656 C 172.960938 153.476562 169.328125 139.925781 175.449219 129.324219 C 181.574219 118.730469 195.125 115.097656 205.71875 121.214844 C 216.320312 127.335938 219.949219 140.886719 213.828125 151.488281 Z M 208.488281 116.414062 C 208.476562 116.410156 208.472656 116.414062 208.460938 116.402344 C 195.21875 108.773438 178.296875 113.320312 170.652344 126.554688 C 163.492188 138.960938 167.019531 154.589844 178.355469 162.8125 L 173.238281 171.675781 L 171.296875 170.554688 C 170.90625 170.324219 170.398438 170.460938 170.175781 170.855469 L 152.765625 201.019531 C 152.535156 201.410156 152.671875 201.917969 153.058594 202.140625 L 161.96875 207.285156 C 162.355469 207.507812 162.863281 207.371094 163.09375 206.984375 L 180.503906 176.820312 C 180.726562 176.425781 180.59375 175.925781 180.203125 175.691406 L 178.261719 174.574219 L 182.132812 167.867188 L 183.371094 165.710938 C 196.167969 171.421875 211.472656 166.65625 218.625 154.257812 C 226.273438 141.011719 221.738281 124.070312 208.488281 116.414062 " fill-opacity="1" fill-rule="nonzero"/></g><path fill="#67c656" d="M 199.257812 121.4375 C 189.007812 123.363281 180.511719 129.820312 175.738281 138.535156 C 176.757812 129.28125 184.253906 121.785156 193.867188 121.085938 C 195.71875 120.949219 197.527344 121.082031 199.257812 121.4375 " fill-opacity="1" fill-rule="nonzero"/><g fill="#211d1d" fill-opacity="1"><g transform="translate(96.727474, 236.911143)"><g><path d="M 8.046875 -18.5625 C 9.023438 -18.5625 9.984375 -18.414062 10.921875 -18.125 C 11.867188 -17.84375 12.570312 -17.5625 13.03125 -17.28125 L 13.703125 -16.828125 L 12.015625 -13.515625 C 11.878906 -13.609375 11.691406 -13.722656 11.453125 -13.859375 C 11.222656 -14.003906 10.785156 -14.191406 10.140625 -14.421875 C 9.492188 -14.660156 8.890625 -14.78125 8.328125 -14.78125 C 7.640625 -14.78125 7.109375 -14.628906 6.734375 -14.328125 C 6.359375 -14.035156 6.171875 -13.640625 6.171875 -13.140625 C 6.171875 -12.890625 6.253906 -12.65625 6.421875 -12.4375 C 6.597656 -12.226562 6.898438 -12.003906 7.328125 -11.765625 C 7.753906 -11.523438 8.128906 -11.328125 8.453125 -11.171875 C 8.785156 -11.023438 9.289062 -10.804688 9.96875 -10.515625 C 11.144531 -10.015625 12.148438 -9.332031 12.984375 -8.46875 C 13.816406 -7.613281 14.234375 -6.640625 14.234375 -5.546875 C 14.234375 -4.503906 14.046875 -3.59375 13.671875 -2.8125 C 13.296875 -2.03125 12.78125 -1.414062 12.125 -0.96875 C 11.46875 -0.53125 10.738281 -0.207031 9.9375 0 C 9.144531 0.21875 8.285156 0.328125 7.359375 0.328125 C 6.566406 0.328125 5.785156 0.242188 5.015625 0.078125 C 4.242188 -0.078125 3.597656 -0.273438 3.078125 -0.515625 C 2.566406 -0.765625 2.101562 -1.003906 1.6875 -1.234375 C 1.28125 -1.472656 0.984375 -1.671875 0.796875 -1.828125 L 0.515625 -2.078125 L 2.578125 -5.5625 C 2.753906 -5.414062 3 -5.226562 3.3125 -5 C 3.625 -4.769531 4.171875 -4.460938 4.953125 -4.078125 C 5.742188 -3.703125 6.441406 -3.515625 7.046875 -3.515625 C 8.796875 -3.515625 9.671875 -4.109375 9.671875 -5.296875 C 9.671875 -5.546875 9.609375 -5.773438 9.484375 -5.984375 C 9.359375 -6.203125 9.132812 -6.414062 8.8125 -6.625 C 8.5 -6.84375 8.222656 -7.015625 7.984375 -7.140625 C 7.742188 -7.265625 7.347656 -7.457031 6.796875 -7.71875 C 6.242188 -7.976562 5.832031 -8.175781 5.5625 -8.3125 C 4.457031 -8.851562 3.601562 -9.53125 3 -10.34375 C 2.394531 -11.164062 2.09375 -12.046875 2.09375 -12.984375 C 2.09375 -14.617188 2.695312 -15.957031 3.90625 -17 C 5.113281 -18.039062 6.492188 -18.5625 8.046875 -18.5625 Z M 8.046875 -18.5625 "/></g></g></g><g fill="#211d1d" fill-opacity="1"><g transform="translate(114.438952, 236.911143)"><g><path d="M 11.03125 -3.75 C 11.65625 -3.75 12.265625 -3.84375 12.859375 -4.03125 C 13.460938 -4.226562 13.90625 -4.414062 14.1875 -4.59375 L 14.609375 -4.875 L 16.375 -1.34375 C 16.3125 -1.300781 16.226562 -1.242188 16.125 -1.171875 C 16.019531 -1.097656 15.78125 -0.960938 15.40625 -0.765625 C 15.03125 -0.566406 14.628906 -0.390625 14.203125 -0.234375 C 13.773438 -0.0859375 13.210938 0.0390625 12.515625 0.15625 C 11.828125 0.269531 11.117188 0.328125 10.390625 0.328125 C 8.691406 0.328125 7.082031 -0.0859375 5.5625 -0.921875 C 4.050781 -1.753906 2.832031 -2.898438 1.90625 -4.359375 C 0.976562 -5.816406 0.515625 -7.390625 0.515625 -9.078125 C 0.515625 -10.359375 0.785156 -11.585938 1.328125 -12.765625 C 1.867188 -13.941406 2.59375 -14.953125 3.5 -15.796875 C 4.40625 -16.640625 5.460938 -17.3125 6.671875 -17.8125 C 7.878906 -18.3125 9.117188 -18.5625 10.390625 -18.5625 C 11.566406 -18.5625 12.648438 -18.421875 13.640625 -18.140625 C 14.640625 -17.859375 15.34375 -17.578125 15.75 -17.296875 L 16.375 -16.875 L 14.609375 -13.34375 C 14.503906 -13.4375 14.347656 -13.546875 14.140625 -13.671875 C 13.929688 -13.796875 13.515625 -13.957031 12.890625 -14.15625 C 12.273438 -14.363281 11.65625 -14.46875 11.03125 -14.46875 C 10.019531 -14.46875 9.117188 -14.304688 8.328125 -13.984375 C 7.535156 -13.660156 6.90625 -13.234375 6.4375 -12.703125 C 5.976562 -12.171875 5.625 -11.597656 5.375 -10.984375 C 5.132812 -10.378906 5.015625 -9.757812 5.015625 -9.125 C 5.015625 -7.738281 5.53125 -6.492188 6.5625 -5.390625 C 7.601562 -4.296875 9.09375 -3.75 11.03125 -3.75 Z M 11.03125 -3.75 "/></g></g></g><g fill="#211d1d" fill-opacity="1"><g transform="translate(133.939112, 236.911143)"><g><path d="M 1.328125 -18.234375 L 7.84375 -18.234375 C 9.59375 -18.234375 11.019531 -17.765625 12.125 -16.828125 C 13.226562 -15.890625 13.78125 -14.550781 13.78125 -12.8125 C 13.78125 -11.46875 13.445312 -10.34375 12.78125 -9.4375 C 12.113281 -8.539062 11.203125 -7.90625 10.046875 -7.53125 L 16.328125 0 L 11.046875 0 L 5.484375 -7.203125 L 5.484375 0 L 1.328125 0 Z M 5.484375 -10.140625 L 5.96875 -10.140625 C 6.351562 -10.140625 6.675781 -10.144531 6.9375 -10.15625 C 7.195312 -10.175781 7.492188 -10.226562 7.828125 -10.3125 C 8.171875 -10.40625 8.445312 -10.53125 8.65625 -10.6875 C 8.863281 -10.851562 9.039062 -11.085938 9.1875 -11.390625 C 9.332031 -11.703125 9.40625 -12.078125 9.40625 -12.515625 C 9.40625 -12.960938 9.332031 -13.34375 9.1875 -13.65625 C 9.039062 -13.96875 8.863281 -14.203125 8.65625 -14.359375 C 8.445312 -14.523438 8.171875 -14.648438 7.828125 -14.734375 C 7.492188 -14.828125 7.195312 -14.878906 6.9375 -14.890625 C 6.675781 -14.898438 6.351562 -14.90625 5.96875 -14.90625 L 5.484375 -14.90625 Z M 5.484375 -10.140625 "/></g></g></g><g fill="#211d1d" fill-opacity="1"><g transform="translate(152.622223, 236.911143)"><g><path d="M 10.578125 -18.234375 L 17.9375 0 L 13.484375 0 L 12.125 -3.640625 L 5.1875 -3.640625 L 3.84375 0 L -0.625 0 L 6.734375 -18.234375 Z M 10.71875 -7.296875 L 8.6875 -12.59375 L 8.640625 -12.59375 L 6.609375 -7.296875 Z M 10.71875 -7.296875 "/></g></g></g><g fill="#211d1d" fill-opacity="1"><g transform="translate(172.806949, 236.911143)"><g><path d="M 1.328125 -18.234375 L 7.96875 -18.234375 C 9.832031 -18.234375 11.335938 -17.753906 12.484375 -16.796875 C 13.628906 -15.835938 14.203125 -14.441406 14.203125 -12.609375 C 14.203125 -10.785156 13.617188 -9.351562 12.453125 -8.3125 C 11.296875 -7.28125 9.800781 -6.765625 7.96875 -6.765625 L 5.484375 -6.765625 L 5.484375 0 L 1.328125 0 Z M 5.484375 -10.078125 L 6.65625 -10.078125 C 7.582031 -10.078125 8.34375 -10.265625 8.9375 -10.640625 C 9.53125 -11.015625 9.828125 -11.628906 9.828125 -12.484375 C 9.828125 -13.347656 9.53125 -13.96875 8.9375 -14.34375 C 8.34375 -14.71875 7.582031 -14.90625 6.65625 -14.90625 L 5.484375 -14.90625 Z M 5.484375 -10.078125 "/></g></g></g><g fill="#67c656" fill-opacity="1"><g transform="translate(190.394274, 236.911143)"><g><path d="M 5.765625 3.828125 L 4.765625 2.3125 C 4.816406 2.257812 4.878906 2.1875 4.953125 2.09375 C 5.023438 2.007812 5.175781 1.84375 5.40625 1.59375 C 5.644531 1.351562 5.875 1.140625 6.09375 0.953125 C 6.3125 0.773438 6.566406 0.613281 6.859375 0.46875 C 7.160156 0.320312 7.4375 0.25 7.6875 0.25 L 7.6875 0.15625 C 5.539062 -0.257812 3.804688 -1.320312 2.484375 -3.03125 C 1.171875 -4.738281 0.515625 -6.769531 0.515625 -9.125 C 0.515625 -11.78125 1.394531 -14.015625 3.15625 -15.828125 C 4.925781 -17.648438 7.070312 -18.5625 9.59375 -18.5625 C 12.125 -18.5625 14.265625 -17.648438 16.015625 -15.828125 C 17.765625 -14.015625 18.640625 -11.78125 18.640625 -9.125 C 18.640625 -6.957031 18.054688 -5.046875 16.890625 -3.390625 C 15.734375 -1.742188 14.207031 -0.632812 12.3125 -0.0625 L 12.3125 0.015625 C 12.394531 0.015625 12.78125 0.0820312 13.46875 0.21875 C 14.164062 0.363281 14.722656 0.4375 15.140625 0.4375 C 15.691406 0.4375 16.195312 0.335938 16.65625 0.140625 C 17.113281 -0.0546875 17.429688 -0.25 17.609375 -0.4375 L 17.875 -0.75 L 19.171875 2.0625 C 19.148438 2.132812 19.101562 2.222656 19.03125 2.328125 C 18.96875 2.441406 18.816406 2.640625 18.578125 2.921875 C 18.347656 3.203125 18.085938 3.453125 17.796875 3.671875 C 17.503906 3.890625 17.117188 4.085938 16.640625 4.265625 C 16.160156 4.441406 15.648438 4.53125 15.109375 4.53125 C 14.210938 4.53125 13.113281 4.242188 11.8125 3.671875 C 10.519531 3.097656 9.40625 2.8125 8.46875 2.8125 C 7.945312 2.8125 7.460938 2.894531 7.015625 3.0625 C 6.566406 3.226562 6.242188 3.398438 6.046875 3.578125 Z M 5 -9.125 C 5 -8.414062 5.078125 -7.753906 5.234375 -7.140625 C 5.398438 -6.535156 5.65625 -5.984375 6 -5.484375 C 6.34375 -4.984375 6.816406 -4.585938 7.421875 -4.296875 C 8.035156 -4.003906 8.757812 -3.859375 9.59375 -3.859375 C 11.132812 -3.859375 12.28125 -4.359375 13.03125 -5.359375 C 13.78125 -6.367188 14.15625 -7.625 14.15625 -9.125 C 14.15625 -10.613281 13.769531 -11.863281 13 -12.875 C 12.238281 -13.882812 11.101562 -14.390625 9.59375 -14.390625 C 8.082031 -14.390625 6.9375 -13.878906 6.15625 -12.859375 C 5.382812 -11.835938 5 -10.59375 5 -9.125 Z M 5 -9.125 "/></g></g></g><g fill="#67c656" fill-opacity="1"><g transform="translate(212.411856, 236.911143)"><g><path d="M 15.328125 -18.234375 L 15.328125 -6.46875 C 15.328125 -4.226562 14.722656 -2.535156 13.515625 -1.390625 C 12.304688 -0.242188 10.539062 0.328125 8.21875 0.328125 C 5.894531 0.328125 4.128906 -0.242188 2.921875 -1.390625 C 1.710938 -2.535156 1.109375 -4.226562 1.109375 -6.46875 L 1.109375 -18.234375 L 5.265625 -18.234375 L 5.265625 -7.6875 C 5.265625 -6.21875 5.492188 -5.191406 5.953125 -4.609375 C 6.421875 -4.035156 7.175781 -3.75 8.21875 -3.75 C 9.257812 -3.75 10.007812 -4.035156 10.46875 -4.609375 C 10.9375 -5.191406 11.171875 -6.21875 11.171875 -7.6875 L 11.171875 -18.234375 Z M 15.328125 -18.234375 "/></g></g></g><g fill="#67c656" fill-opacity="1"><g transform="translate(231.713277, 236.911143)"><g><path d="M 11.75 -18.234375 L 11.75 -14.578125 L 5.484375 -14.578125 L 5.484375 -10.953125 L 11.484375 -10.953125 L 11.484375 -7.3125 L 5.484375 -7.3125 L 5.484375 -3.640625 L 11.75 -3.640625 L 11.75 0 L 1.328125 0 L 1.328125 -18.234375 Z M 11.75 -18.234375 "/></g></g></g><g fill="#67c656" fill-opacity="1"><g transform="translate(247.393149, 236.911143)"><g><path d="M 8.046875 -18.5625 C 9.023438 -18.5625 9.984375 -18.414062 10.921875 -18.125 C 11.867188 -17.84375 12.570312 -17.5625 13.03125 -17.28125 L 13.703125 -16.828125 L 12.015625 -13.515625 C 11.878906 -13.609375 11.691406 -13.722656 11.453125 -13.859375 C 11.222656 -14.003906 10.785156 -14.191406 10.140625 -14.421875 C 9.492188 -14.660156 8.890625 -14.78125 8.328125 -14.78125 C 7.640625 -14.78125 7.109375 -14.628906 6.734375 -14.328125 C 6.359375 -14.035156 6.171875 -13.640625 6.171875 -13.140625 C 6.171875 -12.890625 6.253906 -12.65625 6.421875 -12.4375 C 6.597656 -12.226562 6.898438 -12.003906 7.328125 -11.765625 C 7.753906 -11.523438 8.128906 -11.328125 8.453125 -11.171875 C 8.785156 -11.023438 9.289062 -10.804688 9.96875 -10.515625 C 11.144531 -10.015625 12.148438 -9.332031 12.984375 -8.46875 C 13.816406 -7.613281 14.234375 -6.640625 14.234375 -5.546875 C 14.234375 -4.503906 14.046875 -3.59375 13.671875 -2.8125 C 13.296875 -2.03125 12.78125 -1.414062 12.125 -0.96875 C 11.46875 -0.53125 10.738281 -0.207031 9.9375 0 C 9.144531 0.21875 8.285156 0.328125 7.359375 0.328125 C 6.566406 0.328125 5.785156 0.242188 5.015625 0.078125 C 4.242188 -0.078125 3.597656 -0.273438 3.078125 -0.515625 C 2.566406 -0.765625 2.101562 -1.003906 1.6875 -1.234375 C 1.28125 -1.472656 0.984375 -1.671875 0.796875 -1.828125 L 0.515625 -2.078125 L 2.578125 -5.5625 C 2.753906 -5.414062 3 -5.226562 3.3125 -5 C 3.625 -4.769531 4.171875 -4.460938 4.953125 -4.078125 C 5.742188 -3.703125 6.441406 -3.515625 7.046875 -3.515625 C 8.796875 -3.515625 9.671875 -4.109375 9.671875 -5.296875 C 9.671875 -5.546875 9.609375 -5.773438 9.484375 -5.984375 C 9.359375 -6.203125 9.132812 -6.414062 8.8125 -6.625 C 8.5 -6.84375 8.222656 -7.015625 7.984375 -7.140625 C 7.742188 -7.265625 7.347656 -7.457031 6.796875 -7.71875 C 6.242188 -7.976562 5.832031 -8.175781 5.5625 -8.3125 C 4.457031 -8.851562 3.601562 -9.53125 3 -10.34375 C 2.394531 -11.164062 2.09375 -12.046875 2.09375 -12.984375 C 2.09375 -14.617188 2.695312 -15.957031 3.90625 -17 C 5.113281 -18.039062 6.492188 -18.5625 8.046875 -18.5625 Z M 8.046875 -18.5625 "/></g></g></g><g fill="#67c656" fill-opacity="1"><g transform="translate(265.104627, 236.911143)"><g><path d="M 0.171875 -14.578125 L 0.171875 -18.234375 L 12.984375 -18.234375 L 12.984375 -14.578125 L 8.65625 -14.578125 L 8.65625 0 L 4.5 0 L 4.5 -14.578125 Z M 0.171875 -14.578125 "/></g></g></g></svg>


--------------------------------------------------------------------------------
/app/login/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React, { useState } from "react";
  4 | import { useForm } from "react-hook-form";
  5 | import * as z from "zod";
  6 | import { zodResolver } from "@hookform/resolvers/zod";
  7 | import { getAuth, GoogleAuthProvider, signInWithPopup, GithubAuthProvider, TwitterAuthProvider } from "firebase/auth";
  8 | import { auth,githubProvider } from "../Firebase/firebase"; // Assuming you have a firebaseConfig file
  9 | import { FacebookAuthProvider } from "firebase/auth";
 10 | import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 11 | import { FaXTwitter } from "react-icons/fa6";
 12 | import { faEye, faEyeSlash, faHouse } from '@fortawesome/free-solid-svg-icons';
 13 | import { useRouter } from 'next/navigation';
 14 | 
 15 | // Define the form schema using zod
 16 | const formSchema = z.object({
 17 |   name: z.string().nonempty("*Name is required"),
 18 |   email: z.string().email("*Invalid email address"),
 19 |   password: z.string().min(6, "*Password should be at least 6 characters"),
 20 | });
 21 | 
 22 | export default function SignInSignUp() {
 23 |   const [type, setType] = useState("signIn");
 24 |   const [isSubmitted, setIsSubmitted] = useState(false);
 25 |   const [isVisible, setIsVisible] = useState(false);
 26 |   const router = useRouter();
 27 | 
 28 |   const signInForm = useForm<z.infer<typeof formSchema>>({
 29 |     resolver: zodResolver(formSchema),
 30 |     defaultValues: {
 31 |       email: "",
 32 |       password: ""
 33 |     }
 34 |   });
 35 | 
 36 |   const signUpForm = useForm<z.infer<typeof formSchema>>({
 37 |     resolver: zodResolver(formSchema),
 38 |     defaultValues: {
 39 |       name: "",
 40 |       email: "",
 41 |       password: ""
 42 |     }
 43 |   });
 44 | 
 45 |   // Handle form submission
 46 |   const handleSignInSubmit = (values: z.infer<typeof formSchema>) => {
 47 |     console.log("Sign In:", values);
 48 |     // Handle form submission (e.g., send data to the server)
 49 |     setIsSubmitted(true);
 50 |     signInForm.reset();
 51 |     setTimeout(() => setIsSubmitted(false), 3000); // Hide notification after 3 seconds
 52 |   };
 53 | 
 54 |   const handleSignUpSubmit = (values: z.infer<typeof formSchema>) => {
 55 |     console.log("Sign Up:", values);
 56 |     // Handle form submission (e.g., send data to the server)
 57 |     setIsSubmitted(true);
 58 |     signUpForm.reset();
 59 |     setTimeout(() => setIsSubmitted(false), 3000); // Hide notification after 3 seconds
 60 |   };
 61 | 
 62 |   const handleGoogleSignIn = async () => {
 63 |     const provider = new GoogleAuthProvider();
 64 |     try {
 65 |       const result = await signInWithPopup(auth, provider);
 66 |       const user = result.user;
 67 |       console.log("Google Sign-In successful:", user);
 68 |       // Handle success (e.g., redirect, save user info, etc.)
 69 |     } catch (error) {
 70 |       console.error("Google Sign-In error:", error);
 71 |     }
 72 |   };
 73 |   const handleGithubSignIn = async () => {
 74 |     try {
 75 |       const result = await signInWithPopup(auth, githubProvider);
 76 |       const user = result.user;
 77 |       console.log("GitHub Sign-In successful:", user);
 78 |     } catch (error) {
 79 |       console.error("GitHub Sign-In error:", error);
 80 |     }
 81 |   };
 82 |   const handleFacebookSignIn = async () => {
 83 |     const provider = new FacebookAuthProvider();
 84 |     try {
 85 |       const result = await signInWithPopup(auth, provider);
 86 |       const user = result.user;
 87 |       console.log("Facebook Sign-In successful:", user);
 88 |     } catch (error) {
 89 |       console.error("Facebook Sign-In error:", error);
 90 |     }
 91 |   };
 92 | 
 93 |   const handleTwitterSignIn = async () => {
 94 |     const provider = new TwitterAuthProvider();
 95 |     try {
 96 |       const result = await signInWithPopup(auth, provider);
 97 |       const user = result.user;
 98 |       console.log("Twitter Sign-In successful:", user);
 99 |       // Handle success (e.g., redirect, save user info, etc.)
100 |     } catch (error) {
101 |       console.error("Twitter Sign-In error:", error);
102 |     }
103 |   };
104 |   
105 |   const handleOnClick = (text: string) => {
106 |     if (text !== type) {
107 |       setType(text);
108 |     }
109 |   };
110 | 
111 |   const homeClickHandler = () => {
112 |     router.push("/");
113 |   };
114 | 
115 |   const togglePasswordVisibility = () => {
116 |     setIsVisible(!isVisible);
117 |   };
118 | 
119 |   const containerClass = `container ${
120 |     type === "signUp" ? "right-panel-active" : ""
121 |   }`;
122 | 
123 |   return (
124 |     <div className="App">
125 |       <style>{`
126 |         @import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
127 |         @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
128 |         
129 |         * {
130 |           box-sizing: border-box;
131 |         }
132 | 
133 |         body {
134 |           background: black;
135 |           display: flex;
136 |           justify-content: center;
137 |           align-items: center;
138 |           flex-direction: column;
139 |           font-family: 'Montserrat', sans-serif;
140 |           height: 100vh;
141 |           margin: -20px 0 50px;
142 |         }
143 | 
144 |         h1 {
145 |           font-weight: bold;
146 |           margin: 0;
147 |           color: darkturquoise;
148 |           font-size: 26px;
149 |         }
150 | 
151 |         h2 {
152 |           text-align: center;
153 |         }
154 | 
155 |         p {
156 |           font-size: 16px;
157 |           font-weight: 100;
158 |           line-height: 20px;
159 |           letter-spacing: 0.5px;
160 |           margin: 20px 0 30px;
161 |         }
162 | 
163 |         span {
164 |           font-size: 14px;
165 |           color: #333;
166 |         }
167 | 
168 |         a {
169 |           color: blue;
170 |           font-size: 14px;
171 |           text-decoration: none;
172 |           margin: 15px 0;
173 |         }
174 | 
175 |         button {
176 |           border-radius: 20px;
177 |           border: 2px solid yellow;
178 |           background-color: darkturquoise;
179 |           color: #ffffff;
180 |           font-size: 12px;
181 |           font-weight: bold;
182 |           padding: 12px 45px;
183 |           letter-spacing: 1px;
184 |           text-transform: uppercase;
185 |           transition: transform 80ms ease-in;
186 |         }
187 |         button:hover {
188 |         transform: scale(1.1);
189 |         }
190 | 
191 |         button:active {
192 |           transform: scale(0.95);
193 |         }
194 | 
195 |         button:focus {
196 |           outline: none;
197 |         }
198 | 
199 |         button.ghost {
200 |           background-color: transparent;
201 |           border-color: darkturquoise;
202 |         }
203 |         .google-translate-container {
204 |           position: absolute;
205 |           top: -80px; /* Adjust as needed */
206 |           right: 10px; /* Adjust as needed */
207 |           z-index: 1000; /* Ensure it is above other elements */
208 |         }
209 |         form {
210 |           background-color: #ffffff;
211 |           display: flex;
212 |           align-items: center;
213 |           justify-content: center;
214 |           flex-direction: column;
215 |           padding: 0 50px;
216 |           height: 100%;
217 |           text-align: center;
218 |           border: solid 2px darkturquoise;
219 |         }
220 | 
221 |         input {
222 |           background-color: #eee;
223 |           border: dotted 2px darkturquoise;
224 |           padding: 12px 15px;
225 |           margin: 8px 0;
226 |           width: 100%;
227 |           color: darkturquoise;  
228 |         }
229 | 
230 |         .container {
231 |           background-color: #fff;
232 |           border-radius: 10px;
233 |           border: solid 2px darkturquoise;
234 |           box-shadow: 10px 14px 28px rgba(0, 0, 0, 0.25), 10px 10px 10px rgba(0, 0, 0, 0.22);
235 |           position: relative;
236 |           overflow: hidden;
237 |           height: 580px;
238 |           width: 1250px;
239 |           max-width: 100%;
240 |           min-height: 480px;
241 |         }
242 | 
243 |         .form-container {
244 |           position: absolute;
245 |           top: 0;
246 |           height: 100%;
247 |           transition: all 0.6s ease-in-out;
248 |           border: solid 2px darkturquoise;
249 |         }
250 | 
251 |         .eye-button {
252 |           position: absolute;
253 |           right: -19px;
254 |           top: 9px;
255 |           background: none;
256 |           border: none;
257 |           cursor: pointer;
258 |           color: darkturquoise;
259 |         }
260 | 
261 |         .sign-in-container {
262 |           left: 0;
263 |           width: 50%;
264 |           z-index: 2;
265 |           border: solid 2px darkturquoise;
266 |         }
267 | 
268 |         .container.right-panel-active .sign-in-container {
269 |           transform: translateX(100%);
270 |         }
271 | 
272 |         .sign-up-container {
273 |           left: 0;
274 |           width: 50%;
275 |           opacity: 0;
276 |           z-index: 1;
277 |         }
278 | 
279 |         .container.right-panel-active .sign-up-container {
280 |           transform: translateX(100%);
281 |           opacity: 1;
282 |           z-index: 5;
283 |           animation: show 0.6s;
284 |         }
285 | 
286 |         @keyframes show {
287 |           0% {
288 |             opacity: 0;
289 |             transform: translateX(200%);
290 |           }
291 |           100% {
292 |             opacity: 1;
293 |             transform: translateX(0);
294 |           }
295 |         }
296 | 
297 |         .overlay-container {
298 |           position: absolute;
299 |           top: 0;
300 |           left: 50%;
301 |           width: 50%;
302 |           height: 100%;
303 |           overflow: hidden;
304 |           transition: transform 0.6s ease-in-out;
305 |           z-index: 100;
306 |           
307 |         }
308 | 
309 |         .container.right-panel-active .overlay-container {
310 |           transform: translateX(-100%);
311 |         }
312 | 
313 |         .overlay {
314 |           background: #ff416c;
315 |           background: -webkit-linear-gradient(to right, #242533, #242533);
316 |           background: linear-gradient(to right, #242533, #242533);
317 |           background-repeat: no-repeat;
318 |           background-size: cover;
319 |           background-position: 0 0;
320 |           color: #ffffff;
321 |           position: relative;
322 |           left: -100%;
323 |           height: 100%;
324 |           width: 200%;
325 |           transform: translateX(0);
326 |           transition: transform 0.6s ease-in-out;
327 |         }
328 | 
329 |         .container.right-panel-active .overlay {
330 |           transform: translateX(50%);
331 |         }
332 | 
333 |         .overlay-panel {
334 |           position: absolute;
335 |           display: flex;
336 |           align-items: center;
337 |           justify-content: center;
338 |           flex-direction: column;
339 |           padding: 0 40px;
340 |           text-align: center;
341 |           top: 0;
342 |           height: 100%;
343 |           width: 50%;
344 |           transform: translateX(0);
345 |           transition: transform 0.6s ease-in-out;
346 |         }
347 | 
348 |         .overlay-left {
349 |           transform: translateX(-20%);
350 |         }
351 | 
352 |         .container.right-panel-active .overlay-left {
353 |           transform: translateX(0);
354 |         }
355 | 
356 |         .overlay-right {
357 |           right: 0;
358 |           transform: translateX(0);
359 |         }
360 | 
361 |         .container.right-panel-active .overlay-right {
362 |           transform: translateX(20%);
363 |         }
364 |         .social-container {
365 |   display: flex;
366 |   justify-content: center; /* Center items horizontally */
367 |   align-items: center; /* Center items vertically */
368 |   gap: 10px; /* Space between icons */
369 |   margin-top: 20px; /* Optional: Add some margin to the top */
370 | }
371 | 
372 | .social-container .social {
373 |   display: flex;
374 |   align-items: center;
375 |   justify-content: center;
376 |   height: 50px;
377 |   width: 50px;
378 |   border-radius: 50%;
379 |   background-color: darkturquoise;
380 |   margin: 0; /* Remove left and right margins, using gap instead */
381 |   font-size: 20px;
382 |   color: white;
383 |   transition: transform 0.3s ease;
384 | }
385 | 
386 | .social-container .social:hover {
387 |   transform: scale(1.1);
388 | }
389 |   
390 | 
391 | 
392 |         .form-container input {
393 |           position: relative;
394 |           display: inline-block;
395 |         }
396 | 
397 |         .password-input-container {
398 |           position: relative;
399 |           width: 100%;
400 |         }
401 | 
402 |         .fab {
403 |           font-size: 24px;
404 |         }
405 | 
406 |         .notification {
407 |           background-color: #242533;
408 |           color: white;
409 |           padding: 10px;
410 |           border-radius: 5px;
411 |           margin-top: 10px;
412 |           border: solid 2px darkturquoise;
413 |         }
414 | 
415 |         .house-container {
416 |           position: absolute;
417 |           top: 8px; /* Adjust as needed */
418 |           left: 8px; /* Adjust as needed */
419 |           z-index: 1000; /* Ensure it is above other elements */
420 |         }
421 |       `}</style>
422 |       <div className={containerClass}>
423 |         <div className="house-container">
424 |           <FontAwesomeIcon
425 |             icon={faHouse}
426 |             size="2x"
427 |             color="darkturquoise"
428 |             onClick={homeClickHandler}
429 |             style={{ cursor: "pointer" }}
430 |           />
431 |         </div>
432 |         <div className="form-container sign-up-container">
433 |           <form
434 |             onSubmit={signUpForm.handleSubmit(handleSignUpSubmit)}
435 |             style={{ position: "relative" }}
436 |           >
437 |             <h1>Create Account</h1>
438 |             <div className="social-container">
439 |               <a href="#" className="social" onClick={handleFacebookSignIn}>
440 |                 <i className="fab fa-facebook-f"></i>
441 |               </a>
442 |               <a href="#" className="social" onClick={handleGoogleSignIn}>
443 |                 <i className="fab fa-google-plus-g"></i>
444 |               </a>
445 |               <a href="#" className="social">
446 |                 <i className="fab fa-linkedin-in"></i>
447 |               </a>
448 |               <a href="#" className="social" onClick={handleTwitterSignIn}>
449 |               <FaXTwitter className="w-6 h-6" />
450 |               </a>
451 |               <a href="#" className="social" onClick={handleGithubSignIn}>
452 |               <i className="fab fa-github"></i>
453 |               </a>
454 |             </div>
455 |             <span>or use your email for registration</span>
456 |             <input
457 |               {...signUpForm.register("name")}
458 |               type="text"
459 |               placeholder="Name"
460 |             />
461 |             {signUpForm.formState.errors.name && (
462 |               <p>{signUpForm.formState.errors.name.message}</p>
463 |             )}
464 |             <input
465 |               {...signUpForm.register("email")}
466 |               type="email"
467 |               placeholder="Email"
468 |             />
469 |             {signUpForm.formState.errors.email && (
470 |               <p>{signUpForm.formState.errors.email.message}</p>
471 |             )}
472 |             <div className="password-input-container">
473 |               <input
474 |                 {...signUpForm.register("password")}
475 |                 type={isVisible ? "text" : "password"}
476 |                 placeholder="Password"
477 |               />
478 |               <button
479 |                 type="button"
480 |                 className="eye-button"
481 |                 onClick={togglePasswordVisibility}
482 |               >
483 |                 <FontAwesomeIcon
484 |                   icon={isVisible ? faEyeSlash : faEye}
485 |                   color="darkturquoise"
486 |                 />
487 |               </button>
488 |             </div>
489 |             {signUpForm.formState.errors.password && (
490 |               <p>{signUpForm.formState.errors.password.message}</p>
491 |             )}
492 |             <button type="submit">Sign Up</button>
493 |             {isSubmitted && <div className="notification">Success!</div>}
494 |           </form>
495 |         </div>
496 | 
497 |         <div className="form-container sign-in-container">
498 |           <form
499 |             onSubmit={signInForm.handleSubmit(handleSignInSubmit)}
500 |             style={{ position: "relative" }}
501 |           >
502 |             <h1>Sign in</h1>
503 |             <div className="social-container">
504 |               <a href="#" className="social" onClick={handleFacebookSignIn}>
505 |                 <i className="fab fa-facebook-f"></i>
506 |               </a>
507 |               <a href="#" className="social" onClick={handleGoogleSignIn}>
508 |                 <i className="fab fa-google-plus-g"></i>
509 |               </a>
510 |               <a href="#" className="social">
511 |                 <i className="fab fa-linkedin-in"></i>
512 |               </a>
513 |               <a href="#" className="social" onClick={handleTwitterSignIn}>
514 |               <FaXTwitter className="w-6 h-6" />
515 |                </a>
516 |              <a href="#" className="social" onClick={handleGithubSignIn}>
517 |               <i className="fab fa-github"></i>
518 |               </a>
519 |             </div>
520 |             <span>or use your account</span>
521 |             <input
522 |               {...signInForm.register("email")}
523 |               type="email"
524 |               placeholder="Email"
525 |             />
526 |             {signInForm.formState.errors.email && (
527 |               <p>{signInForm.formState.errors.email.message}</p>
528 |             )}
529 |             <div className="password-input-container">
530 |               <input
531 |                 {...signInForm.register("password")}
532 |                 type={isVisible ? "text" : "password"}
533 |                 placeholder="Password"
534 |               />
535 |               <button
536 |                 type="button"
537 |                 className="eye-button"
538 |                 onClick={togglePasswordVisibility}
539 |               >
540 |                 <FontAwesomeIcon
541 |                   icon={isVisible ? faEyeSlash : faEye}
542 |                   color="darkturquoise"
543 |                 />
544 |               </button>
545 |             </div>
546 |             {signInForm.formState.errors.password && (
547 |               <p>{signInForm.formState.errors.password.message}</p>
548 |             )}
549 |             <button type="submit">Sign In</button>
550 |             {isSubmitted && <div className="notification">Success!</div>}
551 |           </form>
552 |         </div>
553 | 
554 |         <div className="overlay-container">
555 |           <div className="overlay">
556 |             <div className="overlay-panel overlay-left">
557 |               <h1>Welcome Back!</h1>
558 |               <p>
559 |                 To keep connected with us please login with your personal info
560 |               </p>
561 |               <button
562 |                 className="ghost"
563 |                 id="signIn"
564 |                 onClick={() => handleOnClick("signIn")}
565 |               >
566 |                 Sign In
567 |               </button>
568 |             </div>
569 |             <div className="overlay-panel overlay-right">
570 |               <h1>Hello, Friend!</h1>
571 |               <p>Enter your personal details and start your journey with us</p>
572 |               <button
573 |                 className="ghost"
574 |                 id="signUp"
575 |                 onClick={() => handleOnClick("signUp")}
576 |               >
577 |                 Sign Up
578 |               </button>
579 |             </div>
580 |           </div>
581 |         </div>
582 |       </div>
583 |     </div>
584 |   );
585 | }


--------------------------------------------------------------------------------