Snigdha-OS/Snigdha-OS.github.io
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/Snigdha-OS.github.io.git synced 2025-09-06 12:45:18 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ style: more enhanced ui

Browse Source
This commit is contained in:
eshanized
2025-01-01 11:19:51 +05:30
parent 1516f851f6
commit c00685c002
1 changed files with 30 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/home/ToolsShowcase.tsx
View File

@@ -1,40 +1,51 @@
import { motion } from 'framer-motion'; import { motion } from "framer-motion";
import { Terminal, Shield, Wifi, Globe, Lock, Database } from 'lucide-react'; import { Terminal, Shield, Wifi, Globe, Lock, Database } from "lucide-react";
const tools = [ const tools = [
{ name: 'Network Analysis', icon: Globe, color: 'text-blue-500' }, { name: "Network Analysis", icon: Globe, color: "text-blue-500" },
{ name: 'Penetration Testing', icon: Shield, color: 'text-green-500' }, { name: "Penetration Testing", icon: Shield, color: "text-green-500" },
{ name: 'Wireless Security', icon: Wifi, color: 'text-purple-500' }, { name: "Wireless Security", icon: Wifi, color: "text-purple-500" },
{ name: 'Cryptography', icon: Lock, color: 'text-red-500' }, { name: "Cryptography", icon: Lock, color: "text-red-500" },
{ name: 'Forensics', icon: Database, color: 'text-yellow-500' }, { name: "Forensics", icon: Database, color: "text-yellow-500" },
{ name: 'Exploitation', icon: Terminal, color: 'text-pink-500' }, { name: "Exploitation", icon: Terminal, color: "text-pink-500" },
]; ];
export function ToolsShowcase() { export function ToolsShowcase() {
return ( return (
<section className="py-20 bg-gradient-to-b from-gray-50 to-white"> <section className="py-20 bg-gradient-to-b from-gray-50 to-gray-100">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
{/* Header Section */}
<div className="text-center mb-12"> <div className="text-center mb-12">
<h2 className="text-3xl font-bold text-gray-900">Security Tools Suite</h2> <h2 className="text-4xl font-extrabold text-gray-900">Security Tools Suite</h2>
<p className="mt-4 text-lg text-gray-600"> <p className="mt-4 text-lg text-gray-600">
Comprehensive toolkit for security professionals A comprehensive toolkit tailored for security professionals.
</p> </p>
</div> </div>
<div className="grid grid-cols-2 md:grid-cols-3 gap-8"> {/* Tools Grid */}
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 gap-8">
{tools.map((tool, index) => ( {tools.map((tool, index) => (
<motion.div <motion.div
key={tool.name} key={tool.name}
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1, duration: 0.5 }} transition={{
whileHover={{ scale: 1.05, boxShadow: "0 10px 20px rgba(0, 0, 0, 0.1)" }} delay: index * 0.1,
className="flex flex-col items-center p-6 bg-white rounded-xl shadow-lg hover:shadow-2xl transition-transform duration-300 ease-in-out" duration: 0.6,
ease: "easeOut",
}}
whileHover={{
scale: 1.08,
boxShadow: "0 15px 30px rgba(0, 0, 0, 0.15)",
}}
className="flex flex-col items-center p-8 bg-white rounded-xl shadow-md hover:shadow-xl transition-transform duration-300"
> >
<div className="p-4 bg-gradient-to-r from-cornflower-blue/10 to-cornflower-blue/30 rounded-lg mb-4"> {/* Icon Section */}
<tool.icon className={`h-12 w-12 ${tool.color} transition-all`} /> <div className="p-4 bg-gradient-to-br from-cornflower-blue/10 to-cornflower-blue/30 rounded-full shadow-inner mb-6">
<tool.icon className={`h-14 w-14 ${tool.color} transition-all`} />
</div> </div>
<h3 className="text-lg font-semibold text-gray-900">{tool.name}</h3> {/* Tool Name */}
<h3 className="text-xl font-semibold text-gray-800">{tool.name}</h3>
</motion.div> </motion.div>
))} ))}
</div> </div>