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

Improved the landing page and footer

Browse Source
This commit is contained in:
Dinesh065
2025-02-27 22:42:14 +05:30
parent 8ba3d6e093
commit 000ae78d1e
5 changed files with 388 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Frontend/src/components/Footer.jsx
+152 -22
View File
@@ -1,29 +1,159 @@
import { useState } from "react";
import {
Facebook,
Twitter,
Instagram,
Linkedin,
Mail,
Phone,
MapPin,
} from "lucide-react";
const Footer = () => {
const [email, setEmail] = useState("");
//Currently storing user email in localstorage
const handleSubscribe = () => {
if (email.trim() !== "") {
localStorage.setItem("subscribedEmail", email);
alert("You have successfully subscribed!");
setEmail("");
}
};
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">
<svg
className="w-12 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>
<footer className="bg-gradient-to-r from-[#4a7cbd] via-[#5b4fd3] to-[#9377ff] w-full pt-16 pb-8">
<div className="container mx-auto px-6">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
<div className="space-y-4">
<div className="flex items-center">
<div className="text-white mr-3">
<svg
className="w-10 h-10"
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>
<h3 className="text-2xl font-bold text-white">Drive-thru</h3>
</div>
<p className="text-white/90">
Your secure cloud storage solution for all your digital needs.
</p>
<div className="flex space-x-4">
<a href="https://facebook.com" target="_blank" rel="noopener noreferrer">
<Facebook className="w-5 h-5 text-white cursor-pointer hover:text-cyan-200 transition-all duration-200 transform hover:scale-110" />
</a>
<a href="https://twitter.com" target="_blank" rel="noopener noreferrer">
<Twitter className="w-5 h-5 text-white cursor-pointer hover:text-cyan-200 transition-all duration-200 transform hover:scale-110" />
</a>
<a href="https://instagram.com" target="_blank" rel="noopener noreferrer">
<Instagram className="w-5 h-5 text-white cursor-pointer hover:text-cyan-200 transition-all duration-200 transform hover:scale-110" />
</a>
<a href="https://linkedin.com" target="_blank" rel="noopener noreferrer">
<Linkedin className="w-5 h-5 text-white cursor-pointer hover:text-cyan-200 transition-all duration-200 transform hover:scale-110" />
</a>
</div>
</div>
{/* Quick Links */}
<div>
<h4 className="font-semibold text-white mb-4">Quick Links</h4>
<ul className="space-y-2">
<li>
<a
href="#about"
className="text-white/90 hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
>
About Us
</a>
</li>
<li>
<a
href="#features"
className="text-white/90 hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
>
Features
</a>
</li>
<li>
<a
href="#howItWorks"
className="text-white/90 hover:text-white transition-all duration-200 hover:translate-x-1 inline-block"
>
How It Works
</a>
</li>
</ul>
</div>
{/* Contact Info */}
<div>
<h4 className="font-semibold text-white mb-4">Contact</h4>
<ul className="space-y-2">
<li className="flex items-center text-white/90 hover:text-white group transition-colors duration-200">
<Mail className="w-4 h-4 mr-2 group-hover:text-cyan-200" />
support@drivethru.com
</li>
<li className="flex items-center text-white/90 hover:text-white group transition-colors duration-200">
<Phone className="w-4 h-4 mr-2 group-hover:text-cyan-200" />
+91 3628206234
</li>
<li className="flex items-center text-white/90 hover:text-white group transition-colors duration-200">
<MapPin className="w-4 h-4 mr-2 group-hover:text-cyan-200" />
123 Cloud Street, Digital City
</li>
</ul>
</div>
{/* Newsletter */}
<div>
<h4 className="font-semibold text-white mb-4">Stay Updated</h4>
<p className="text-white/90 mb-4">
Get exclusive tips, updates on new features, and special offers directly in your inbox.
</p>
<div className="space-y-4">
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter your email"
className="w-full px-4 py-2 rounded-md bg-white/10 border border-white/20 text-white placeholder:text-white/50 focus:bg-white/20 transition-all duration-200 outline-none focus:ring-2 focus:ring-white/30"
/>
<button
onClick={handleSubscribe}
className="w-full px-4 py-2 rounded-md bg-white text-blue-600 font-medium hover:bg-opacity-90 transition-all duration-200 transform hover:scale-105"
>
Subscribe to Newsletter
</button>
</div>
</div>
</div>
<div className="h-px w-full bg-white/20 my-8" />
{/* Bottom Section */}
<div className="flex flex-col md:flex-row justify-between items-center text-white/90 text-sm">
<p>© {new Date().getFullYear()} Drive-Thru. All rights reserved.</p>
<div className="flex gap-4 mt-4 md:mt-0">
<a href="#" className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block">
Privacy Policy
</a>
<a href="#" className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block">
Terms of Service
</a>
<a href="#" className="hover:text-white transition-all duration-200 hover:translate-x-1 inline-block">
Cookie Policy
</a>
</div>
<h1 className="text-5xl font-bold text-black">Drive-thru</h1>
</div>
<p className="text-black text-center">
About | Privacy Policy | Terms of Service | Contact@
{new Date().getFullYear()} Drive-Thru. All rights reserved.
</p>
</div>
</footer>
);