notkshitij/Skycrate
1
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merged Atharv Ombase's changes from frontend branch into the main branch.

Browse Source
This commit is contained in:
K
2025-03-29 22:28:10 +05:30
parent 65783c1ca0
commit 9e68d73cf4
8 changed files with 180 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Frontend/package.json
+2
View File
@@ -10,11 +10,13 @@
"preview": "vite preview"
},
"dependencies": {
"@reduxjs/toolkit": "^2.6.0",
"@tailwindcss/vite": "^4.0.9",
"lucide-react": "^0.476.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-icons": "^5.5.0",
"react-redux": "^9.2.0",
"react-router-dom": "^7.2.0"
},
"devDependencies": {
Frontend/samples/landing.jpg
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 79 KiB

Frontend/samples/landing.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

Frontend/src/pages/Authentication/Login.jsx
+2 -23
View File
@@ -1,5 +1,4 @@
import React from "react";
import { FcGoogle } from "react-icons/fc";
import { FiEye, FiEyeOff } from "react-icons/fi";
import { Link } from "react-router-dom";
@@ -16,19 +15,7 @@ const Login = () => {
<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
@@ -38,14 +25,6 @@ const Login = () => {
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">
@@ -58,7 +37,7 @@ const Login = () => {
<button
type="button"
onClick={togglePassword}
className="absolute right-2 top-2 text-gray-500 hover:text-gray-700"
className="absolute right-2 top-4 text-2xl text-gray-500 hover:text-gray-700"
>
{showPassword ? <FiEyeOff /> : <FiEye />}
</button>
Frontend/src/pages/Authentication/SignUp.jsx
+3 -3
View File
@@ -1,5 +1,5 @@
// eslint-disable-next-line no-unused-vars
import React, { useState } from "react";
import { FcGoogle } from "react-icons/fc";
import { FiEye, FiEyeOff } from "react-icons/fi";
import { Link } from "react-router-dom";
@@ -40,7 +40,7 @@ const SignUp = () => {
<button
type="button"
onClick={() => setShowPassword(!showPassword)}
className="absolute right-3 top-3 text-gray-500 hover:text-gray-700"
className="absolute right-3 top-4 text-2xl text-gray-500 hover:text-gray-700"
>
{showPassword ? <FiEyeOff /> : <FiEye />}
</button>
@@ -56,7 +56,7 @@ const SignUp = () => {
<button
type="button"
onClick={() => setShowConfirmPassword(!showConfirmPassword)}
className="absolute right-3 top-3 text-gray-500 hover:text-gray-700"
className="absolute right-3 top-4 text-2xl text-gray-500 hover:text-gray-700"
>
{showConfirmPassword ? <FiEyeOff /> : <FiEye />}
</button>
Frontend/src/pages/UserPages/DrivethruLandingPage.jsx
+167 -51
View File
@@ -1,7 +1,7 @@
import Footer from "../../components/Footer";
import React from "react"
import { useState, useEffect } from "react"
import React from "react";
import { useState, useEffect } from "react";
import { Link } from "react-router-dom";
const DrivethruLandingPage = () => {
const features = [
@@ -9,38 +9,78 @@ const DrivethruLandingPage = () => {
title: "Easy Upload & Access",
description: "Drag & drop, instant access.",
icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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" />
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<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"
/>
</svg>
)
),
},
{
title: "Secure & Private",
description: "End-to-end encryption.",
icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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" />
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<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"
/>
</svg>
)
),
},
{
title: "Seamless Sharing",
description: "Share files with one click.",
icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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" />
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<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"
/>
</svg>
)
),
},
{
title: "Access Anywhere",
description: "Works on all devices.",
icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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" />
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<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"
/>
</svg>
)
}
),
},
];
const howItWorks = [
@@ -48,39 +88,84 @@ const DrivethruLandingPage = () => {
title: "Create an account",
description: "Sign up in seconds.",
icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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" />
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<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"
/>
</svg>
)
),
},
{
title: "Upload files",
description: "Drag & drop or select from your device.",
icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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" />
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<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"
/>
</svg>
)
),
},
{
title: "Manage files",
description: "Rename, move, or delete easily.",
icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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 strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<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
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
)
),
},
{
title: "Access anytime",
description: "Open files from any device.",
icon: (
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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" />
<svg
className="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<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"
/>
</svg>
)
}
),
},
];
// UseEffect and handle....click function to handle set and handle the animation of features..
@@ -94,7 +179,7 @@ const DrivethruLandingPage = () => {
}, 3000);
return () => clearInterval(interval);
}
}, [isPaused]);
}, [isPaused, features.length]);
// Handle user interaction
const handleFeatureClick = (index) => {
@@ -113,7 +198,7 @@ const DrivethruLandingPage = () => {
}, 3000);
return () => clearInterval(interval);
}
}, [isPaused1]);
}, [isPaused1, howItWorks.length]);
const handleFeatureClick1 = (index) => {
setActiveIndex1(index);
@@ -124,19 +209,33 @@ const DrivethruLandingPage = () => {
return (
<div className="min-h-screen overflow-x-hidden bg-white">
{/* Hero Section */}
<div id="about" className="bg-gradient-to-r from-blue-50 to-white min-h-[90vh] flex items-center relative">
<div
id="about"
className="bg-gradient-to-r from-blue-50 to-white min-h-[90vh] flex items-center relative"
>
<div className="container mx-auto px-4 md:px-6 lg:px-8 relative z-10">
<div className="flex flex-col md:flex-row items-center gap-8 lg:gap-12">
{/* Left Side - Text Content */}
<div className="w-full md:w-1/2 text-center md:text-left order-1 md:order-1">
<div className="w-full md:w-1/2 text-center md:text-left order-1 md:order-1">
<div className="flex justify-center md:justify-start items-center mb-6 lg:mb-8">
<div className="text-cyan-400 mr-2 md:mr-3">
<svg className="w-10 md:w-12 h-10 md:h-12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L2 12L12 22L22 12L12 2Z" stroke="currentColor" strokeWidth="3" fill="none" />
<svg
className="w-10 md:w-12 h-10 md:h-12"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 2L2 12L12 22L22 12L12 2Z"
stroke="currentColor"
strokeWidth="3"
fill="none"
/>
</svg>
</div>
<h1 className="text-4xl md:text-5xl font-bold text-black">Drive-thru</h1>
<h1 className="text-4xl md:text-5xl font-bold text-black">
Drive-thru
</h1>
</div>
<h2 className="text-xl md:text-2xl font-bold mb-4 md:mb-6 text-black">
@@ -144,17 +243,24 @@ const DrivethruLandingPage = () => {
</h2>
<p className="text-gray-800 mb-6 md:mb-10 text-base md:text-lg">
A simple, secure, and fast cloud storage solution for all your files. Upload, organize, and access with ease.
A simple, secure, and fast cloud storage solution for all your
files. Upload, organize, and access with ease.
</p>
{/* Buttons */}
<div className="flex flex-col sm:flex-row justify-center md:justify-start space-y-4 sm:space-y-0 sm:space-x-4">
<button className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium rounded-full px-6 py-4 md:px-8 md:py-6 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl">
<Link
to="/signup"
className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium rounded-full px-6 py-4 md:px-8 md:py-6 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl"
>
Get Started
</button>
<button className="bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-full px-6 py-4 md:px-8 md:py-6 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl">
</Link>
<Link
to="/login"
className="bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-full px-6 py-4 md:px-8 md:py-6 transform hover:scale-105 transition-all duration-300 shadow-lg hover:shadow-xl"
>
Login
</button>
</Link>
</div>
</div>
{/* Right Side - Image */}
@@ -173,10 +279,12 @@ const DrivethruLandingPage = () => {
</div>
{/* Features Section */}
<div id="features" className="w-full max-w-5xl mx-auto p-6 sm:p-8 bg-gray-100 rounded-lg shadow-lg">
<div
id="features"
className="w-full max-w-5xl mx-auto p-6 sm:p-8 bg-gray-100 rounded-lg shadow-lg"
>
<h2 className="text-3xl font-bold text-center mb-8">Key Features</h2>
<div className="flex flex-col-reverse md:flex-row items-center gap-8 lg:gap-12">
{/* Left Side - Image */}
<div className="w-full md:w-1/2 flex justify-center">
<img
@@ -192,8 +300,11 @@ const DrivethruLandingPage = () => {
{features.map((feature, index) => (
<div
key={index}
className={`p-5 border-2 rounded-lg cursor-pointer transition-all duration-500 ${index === activeIndex ? "border-blue-500 bg-white shadow-lg scale-105" : "border-gray-300"
}`}
className={`p-5 border-2 rounded-lg cursor-pointer transition-all duration-500 ${
index === activeIndex
? "border-blue-500 bg-white shadow-lg scale-105"
: "border-gray-300"
}`}
onClick={() => handleFeatureClick(index)}
>
<div className="flex items-center space-x-4">
@@ -213,18 +324,23 @@ const DrivethruLandingPage = () => {
</div>
{/* How It Works Section */}
<div id="howItWorks" className="w-full max-w-5xl mx-auto p-6 sm:p-8 bg-gray-100 rounded-lg shadow-lg">
<div
id="howItWorks"
className="w-full max-w-5xl mx-auto p-6 sm:p-8 bg-gray-100 rounded-lg shadow-lg"
>
<h2 className="text-3xl font-bold text-center mb-8">How It Works</h2>
<div className="flex flex-col md:flex-row items-center gap-8 lg:gap-12">
{/* Left Side - Feature List */}
<div className="w-full md:w-1/2">
<div className="space-y-6">
{howItWorks.map((howItWork, index) => (
<div
key={index}
className={`p-5 border-2 rounded-lg cursor-pointer transition-all duration-500 ${index === activeIndex1 ? "border-blue-500 bg-white shadow-lg scale-105" : "border-gray-300"
}`}
className={`p-5 border-2 rounded-lg cursor-pointer transition-all duration-500 ${
index === activeIndex1
? "border-blue-500 bg-white shadow-lg scale-105"
: "border-gray-300"
}`}
onClick={() => handleFeatureClick1(index)}
>
<div className="flex items-center space-x-4">
Frontend/src/store/api.js
View File