nav bar cloud and navbtns were added

Merged Ombase's changes in main branch from frontend branch.
- Landing page - Login page - Sign-up page
2025-03-27 22:45:11 +05:30 · 2025-02-26 12:06:47 +05:30 · 2025-02-24 23:26:32 +05:30 · 2025-02-21 22:39:56 +05:30 · 2025-02-21 22:31:24 +05:30
26 changed files with 5562 additions and 18 deletions
@@ -1 +0,0 @@
-environment-variables.txt
@@ -0,0 +1,28 @@
+# Info
+
+---
+
+## Work distribution
+
+- Design: Kapil
+- Frontend: Shivani, Shriniwas, Ombase, Tejas, Sonali, Dinesh
+- Backend: Vedang, Lalit
+- DBMS: Lalit
+- HDFS: Sonali, Prajakta, Poonam
+
+---
+
+## Description
+
+In this mini project, we'll be creating something similar to Google Drive. There shall be 3 pages, landing, login/registration and main page where all the files uploaded by the user will be shown. Kapil is supposed to design the UI and send it over by Sunday. Based on this design, people in the frontend department shall work on the pages.
+
+Landing page is basically a home page containing small description of the project, features etc. Login/registration page will ask for username/password. Lalit is expected to implement it using MySQL/MongoDB, i.e. he is responsible for user authentication. Once the user is authenticated, they shall be redirected to the main page where they can view their files, and upload/delete them.
+
+Vedang is responsible to developing the backend code in Java for encrypting the uploaded files and decrypting the downloaded files. These files will be stored in Hadoop File System (HDFS) which shall be handled by Sonali, Prajakta and Poonam.
+
+We are planning to make this a good enough project so that we can maybe open source it and make it a part of our resume. Therefore it is important that y'all work sahi se and finish your stuff by the deadlines. We are expected to finish the entire project ✨ before IN-SEM exam ✨
+
+While you are working on the project, note down the things you are doing so that we can provide it to the people doing the documentation.
+
+---
+
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/image.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link href="/src/styles.css" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.css" rel="stylesheet" />
+
+  <title>Drive-thru</title>
+
+</head>
+
+<body>
+  <script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
+
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
@@ -0,0 +1,35 @@
+{
+  "name": "drive-thru",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.0.9",
+    "flowbite": "^3.1.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
+    "react-router-dom": "^7.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.21.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.21.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^15.15.0",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^4.0.9",
+    "vite": "^6.2.0"
+  }
+}
@@ -0,0 +1,22 @@
+import "./App.css";
+import DrivethruLandingPage from "./pages/DrivethruLandingPage";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Login from "./pages/Authentication/Login";
+import SignUp from "./pages/Authentication/SignUp";
+
+function App() {
+  return (
+    <Router>
+      <Routes>
+        {/* Landing Page at root ("/") */}
+        <Route path="/" element={<DrivethruLandingPage />} />
+
+        {/* Login Page at "/login" */}
+        <Route path="/login" element={<Login />} />
+        <Route path="/signup" element={<SignUp />} />
+      </Routes>
+    </Router>
+  );
+}
+
+export default App;
@@ -0,0 +1,19 @@
+const Footer = () => {
+  return (
+    <footer className="bg-gradient-to-r from-[#689adc] via-[#6da1e6] h-[353px] w-full pt-16 pb-8">
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-center mb-4">
+          <div className="text-cyan-400 mr-3">
+            <img src="/image.png" alt="logo" className="h-auto w-16 drop-shadow-lg " />
+          </div>
+          <h1 className="text-5xl font-bold text-black">Drive-thru</h1>
+        </div>
+        <p className="text-black text-center">
+        A mini project designed and engineering by Team 2025  <br />All rights reserved.
+        </p>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "flowbite/src/themes/default";
@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.jsx";
+
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
@@ -0,0 +1,94 @@
+import React from "react";
+import { FcGoogle } from "react-icons/fc";
+import { FiEye, FiEyeOff } from "react-icons/fi";
+import { Link } from "react-router-dom";
+
+const Login = () => {
+  const [showPassword, setShowPassword] = React.useState(false);
+
+  const togglePassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-100 flex items-center justify-center p-4">
+      <div className="w-full max-w-md bg-white rounded-4xl shadow-lg p-8">
+        <h1 className="text-2xl font-bold mb-6 text-gray-900 text-center">
+          Log in
+        </h1>
+        <button className="flex items-center justify-center w-full py-3 mb-4 border border-gray-300 rounded-lg hover:bg-gray-50">
+          <FcGoogle className="text-xl mr-2" />
+          <span className="text-gray-700 font-medium">
+            Continue with Google
+          </span>
+        </button>
+        <div className="flex items-center my-4">
+          <div className="flex-grow border-t border-gray-300" />
+          <span className="px-2 text-gray-500 text-sm">
+            Or login with email
+          </span>
+          <div className="flex-grow border-t border-gray-300" />
+        </div>
+        <div className="mb-4">
+          <div className="flex items-center">
+            <input
+              type="email"
+              id="email"
+              placeholder="Enter your email"
+              className="w-full border border-gray-300 rounded-l-lg px-4 py-4 focus:outline-none focus:border-blue-500"
+            />
+          </div>
+          <div className="mb-6">
+            <Link
+              to="#!"
+              className="text-sm text-blue-600 hover:underline inline-block text-center"
+            >
+              Login via OTP
+            </Link>
+          </div>
+        </div>
+        <div className="mb-1">
+          <div className="relative">
+            <input
+              type={showPassword ? "text" : "password"}
+              id="password"
+              placeholder="Enter your password"
+              className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:border-blue-500 pr-10"
+            />
+            <button
+              type="button"
+              onClick={togglePassword}
+              className="absolute right-2 top-2 text-gray-500 hover:text-gray-700"
+            >
+              {showPassword ? <FiEyeOff /> : <FiEye />}
+            </button>
+          </div>
+        </div>
+        <div className="mb-6 ">
+          <Link
+            to="#!"
+            className="text-sm text-blue-600 hover:underline inline-block"
+          >
+            Forgot password?
+          </Link>
+        </div>
+        <button className="w-full py-3 bg-gradient-to-r from-[#1877F2] to-[#0E458C] hover:from-[#0E458C] hover:to-[#1877F2] text-white font-semibold rounded-full shadow-md transition duration-300">
+          Login
+        </button>
+        <div className="text-center mt-6">
+          <p className="text-gray-700">
+            Don’t have an account?{" "}
+            <Link
+              to="/signup"
+              className="text-emerald-500 hover:underline font-medium"
+            >
+              Sign up
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;
@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+import { FcGoogle } from "react-icons/fc";
+import { FiEye, FiEyeOff } from "react-icons/fi";
+import { Link } from "react-router-dom";
+
+const SignUp = () => {
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+
+  return (
+    <div className="min-h-screen bg-gray-100 flex items-center justify-center p-6">
+      <div className="w-full max-w-md bg-white rounded-2xl shadow-lg p-8">
+        <h1 className="text-2xl font-bold text-gray-900  mb-6">Sign Up</h1>
+
+        {/* Form Fields */}
+        <div className="space-y-4">
+          <input
+            type="text"
+            placeholder="First Name"
+            className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+          <input
+            type="text"
+            placeholder="Last Name"
+            className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+          <input
+            type="email"
+            placeholder="Enter your email"
+            className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          />
+
+          {/* Password Field */}
+          <div className="relative">
+            <input
+              type={showPassword ? "text" : "password"}
+              placeholder="Enter your password"
+              className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500 pr-10"
+            />
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="absolute right-3 top-3 text-gray-500 hover:text-gray-700"
+            >
+              {showPassword ? <FiEyeOff /> : <FiEye />}
+            </button>
+          </div>
+
+          {/* Confirm Password Field */}
+          <div className="relative">
+            <input
+              type={showConfirmPassword ? "text" : "password"}
+              placeholder="Confirm your password"
+              className="w-full border border-gray-300 rounded-lg px-4 py-4 focus:outline-none focus:ring-2 focus:ring-blue-500 pr-10"
+            />
+            <button
+              type="button"
+              onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+              className="absolute right-3 top-3 text-gray-500 hover:text-gray-700"
+            >
+              {showConfirmPassword ? <FiEyeOff /> : <FiEye />}
+            </button>
+          </div>
+        </div>
+
+        {/* Sign Up Button */}
+        <button className="w-full mt-6 py-3 bg-gradient-to-r from-[#10B981] to-[#07533A] hover:from-[#0E458C] hover:to-[#1877F2] text-white font-semibold rounded-lg shadow-md transition duration-300">
+          Sign Up
+        </button>
+
+        {/* Redirect to Login */}
+        <p className="text-center mt-4 text-gray-700">
+          Already have an account?{" "}
+          <Link
+            to="/login"
+            className="text-blue-500 hover:underline font-medium"
+          >
+            Login
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default SignUp;
@@ -0,0 +1,293 @@
+import React from "react";
+import Footer from "../components/Footer";
+
+{
+  /* <img src="vector.png" alt="" className="h-100" /> */
+}
+
+const DrivethruLandingPage = () => {
+  return (
+    <div className="min-h-screen bg-white overflow-hidden">
+      <div className="bg-white min-h-screen flex items-center relative">
+        <div className="container mx-auto px-6 relative z-10">
+
+          <div className="w-full bg-gray-100 shadow-md py-4 px-6 flex justify-between items-center mt-5">
+            <h1 className="text-xl font-bold">Drive-thru</h1>
+            <div className="flex space-x-6">
+              <a href="#features" className="text-gray-700 hover:text-black">Key Features</a>
+              <a href="#how-it-works" className="text-gray-700 hover:text-black">How It Works</a>
+            </div>
+          </div>
+
+          <div className="flex flex-col md:flex-row items-center  justify-between w-full min-h-screen">
+
+            {/* <div className="hidden md:block md:w-1/2 lg:w-3/5"></div> */}
+
+            <div className="flex items-center justify-center">
+              <img src="data:image/png;base64,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" alt="cloud image" className="flex justify-center my-6 mx-7 w-full h-auto" />
+            </div>
+
+
+
+            <div className="w-full mt-70  md:w-1/2 lg:w-2/5 max-w-lg bg-transparent">
+
+              <div className="flex items-center mb-8">
+
+                <img src="/image.png" alt="logo" className="h-auto w-12" />
+
+                <h1 className="text-5xl font-bold text-black">Drive-thru</h1>
+              </div>
+
+              <h2 className="text-2xl font-bold mb-6 text-black">
+                Store, Access & Share Your Files — Anytime, Anywhere!
+              </h2>
+
+              <p className="text-gray-800 mb-10 text-lg">
+                A simple, secure, and fast cloud storage solution for all your
+                files. Upload, organize, and access with ease.
+              </p>
+
+              <div className="flex flex-row space-x-4">
+                <button className="px-6 py-3 bg-emerald-500 hover:bg-emerald-600 text-white font-medium rounded-full transition-colors duration-200 shadow-md">
+                  Get Started
+                </button>
+                <button className="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-full transition-colors duration-200 shadow-md">
+                  Login
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-white py-16">
+        <div className="container mx-auto px-6">
+          <div className="flex flex-col md:flex-row items-center justify-between mb-24">
+            {" "}
+            <div className="w-full md:w-1/2 lg:w-2/5 flex justify-center md:justify-end">
+              <img
+                src="./He.png"
+                alt="Person using Drive-thru on laptop"
+                className="mx h-auto max-w-full"
+              />
+            </div>
+            {/* Features Card */}
+            <div className="w-full md:w-1/2 lg:w-3/5 mb-12 md:mb-0">
+              <div className="bg-blue-100 rounded-3xl p-8 md:p-10 shadow-lg" id="features">
+                <h2 className="text-3xl font-bold mb-8">Key Features</h2>
+
+                <div className="space-y-6">
+                  <div className="flex items-start">
+                    <div className="text-emerald-500 mr-3 mt-1">
+                      <svg
+                        className="w-6 h-6"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"
+                        ></path>
+                      </svg>
+                    </div>
+                    <p className="text-lg font-semibold">
+                      "Easy Upload & Access" – Drag & drop, instant access.
+                    </p>
+                  </div>
+
+                  <div className="flex items-start">
+                    <div className="text-emerald-500 mr-3 mt-1">
+                      <svg
+                        className="w-6 h-6"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+                        ></path>
+                      </svg>
+                    </div>
+                    <p className="text-lg font-semibold">
+                      "Secure & Private" – End-to-end encryption.
+                    </p>
+                  </div>
+
+                  <div className="flex items-start">
+                    <div className="text-emerald-500 mr-3 mt-1">
+                      <svg
+                        className="w-6 h-6"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"
+                        ></path>
+                      </svg>
+                    </div>
+                    <p className="text-lg font-semibold">
+                      "Seamless Sharing" – Share files with one click.
+                    </p>
+                  </div>
+
+                  <div className="flex items-start">
+                    <div className="text-emerald-500 mr-3 mt-1">
+                      <svg
+                        className="w-6 h-6"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h.5A2.5 2.5 0 0020 5.5v-1.65"
+                        ></path>
+                      </svg>
+                    </div>
+                    <p className="text-lg font-semibold">
+                      "Access Anywhere" – Works on all devices.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* How It Works Section */}
+          <div className="flex flex-col md:flex-row-reverse items-center justify-between">
+            {/* Person with Phone Image */}
+            <div className="w-full md:w-1/2 lg:w-2/5 mb-12 md:mb-0 flex justify-center md:justify-start">
+              <img
+                src="./She.png"
+                alt="Person using Drive-thru on phone"
+                className="h-auto max-w-full"
+              />
+            </div>
+
+            {/* How It Works Card */}
+            <div className="w-full md:w-1/2 lg:w-3/5">
+              <div className="bg-blue-100 rounded-3xl p-8 md:p-10 shadow-lg" id="how-it-works">
+                <h2 className="text-3xl font-bold mb-8">How It Works</h2>
+
+                <div className="space-y-6">
+                  <div className="flex items-start">
+                    <div className="text-emerald-500 mr-3 mt-1">
+                      <svg
+                        className="w-6 h-6"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                        ></path>
+                      </svg>
+                    </div>
+                    <p className="text-lg font-semibold">
+                      Create an account – Sign up in seconds.
+                    </p>
+                  </div>
+
+                  <div className="flex items-start">
+                    <div className="text-emerald-500 mr-3 mt-1">
+                      <svg
+                        className="w-6 h-6"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
+                        ></path>
+                      </svg>
+                    </div>
+                    <p className="text-lg font-semibold">
+                      Upload files – Drag & drop or select from your device.
+                    </p>
+                  </div>
+
+                  <div className="flex items-start">
+                    <div className="text-emerald-500 mr-3 mt-1">
+                      <svg
+                        className="w-6 h-6"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
+                        ></path>
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                        ></path>
+                      </svg>
+                    </div>
+                    <p className="text-lg font-semibold">
+                      Manage files – Rename, move, or delete easily.
+                    </p>
+                  </div>
+
+                  <div className="flex items-start">
+                    <div className="text-emerald-500 mr-3 mt-1">
+                      <svg
+                        className="w-6 h-6"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth="2"
+                          d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                        ></path>
+                      </svg>
+                    </div>
+                    <p className="text-lg font-semibold">
+                      Access anytime – Open files from any device.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Footer></Footer>
+    </div>
+  );
+};
+
+export default DrivethruLandingPage;
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss(),
+  ],
+})
@@ -1,6 +1,26 @@
 # CC-MINI (2025)

-`deployment` branch is intended only for pushing deployment files.
-
 ---

+## Git config
+
+Create a new directory for this project, and run these following commands for initalizing git:
+
+```shell
+git clone https://github.com/kshitij-ka/cc-mini.git
+cd cc-mini
+git config --local user.name "Your name"
+git config --local user.email "your@ema.il"
+git config --local core.autocrlf input # For Linux/MacOS users
+git config --local core.autocrlf true # For Windows users
+git checkout frontend # If you're working on frontend
+git checkout backend # If you're working on backend
+```
+
+## Where to push?
+
+- For frontend, please push to [Frontend](https://github.com/kshitij-ka/cc-mini/tree/frontend/Frontend) folder in the [frontend branch](https://github.com/kshitij-ka/cc-mini/tree/frontend).
+- For backend, please push to [Backend](https://github.com/kshitij-ka/cc-mini/tree/backend/Backend) folder in the [backend branch](https://github.com/kshitij-ka/cc-mini/tree/backend/).
+- I will be merging changes from both the branches in the main branch for deploying.
+
+---
@@ -1,15 +0,0 @@
-----BEGIN PGP MESSAGE-----
-
-hF4DgDtqgMBzTpASAQdAN9Hlcs7Jwec23tYTzz4fnF8+i8sq9hHUR/gwxt4bEzww
-4/pSfujLd/Hjf95kf1xAJzKw2K0KxKEG6JpWoSNzblKROKnTDshiusYC3ZS4Lzva
-1MDfAQkCEFd3bEysTE5nhDwCnguTGVMQLVeRcxCxXARG85BSZMCAPBbUzDk0pGU2
-nl6aiDJEi6Dmh6Du4eIFHhqt+P6L6KKbfLwkclrJX8HI/6n5as4xgDc1rRyqs+11
-HDzz+ZM+2T5cLExA5GqDD5o0hFAMURtKmaI/C6W5QWjuBs6cQCrFWE3XcfT5daYg
-eG+y5d8ZvQOytsAkWX6GgSqV0YBRuqbVJh+JpBT9j62LndMR7We297gw+K7nM+/Y
-r1ZBJFduIT/D4fZbhpf63bRTZO7BO9RGgHPhpubzkb14aznbJlGJjWSzbIetr2uT
-NKb8JqUY+Kd89299rewXozdwYFfjkT8RYMxhdwlREQD4F9pweaLAaOYFDv7JCqbi
-hhog/JLw7tv6vcaTOKEDsfnPZemOz65PT6hNevxOUsuHQ89hB7X8nJihXMZqPXva
-X5dZTwVSzRBk6isrDUU3HqSP+HHYAygpm1uTKJFoavu4WCz9APFjiRoxYQQuA5Yz
-HUqga7xBYTs3hOHwiSY56gzCm6CA3Z7JbQqcTOfkC8To9w==
-=rSxA
-----END PGP MESSAGE-----
Author	SHA1	Message	Date
Shriniwas	82f71af2f5	nav bar cloud and navbtns were added	2025-03-27 22:45:11 +05:30
Kshitij	ddb39e4258	Merged Ombase's changes in main branch from frontend branch. - Landing page - Login page - Sign-up page	2025-02-26 12:06:47 +05:30
Kshitij	7e02ff5ba0	Added git config and branch info in readme.	2025-02-24 23:26:32 +05:30
Kshitij	4f8d15836d	Added info file containing info, duh!	2025-02-21 22:39:56 +05:30
Kshitij	895872c0bd	Initial commit.	2025-02-21 22:31:24 +05:30