Projects page
This commit is contained in:
+3
-37
@@ -14,6 +14,7 @@ import {
|
|||||||
Lock,
|
Lock,
|
||||||
Sparkles,
|
Sparkles,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
|
import WebStuff from "@/components/Web";
|
||||||
|
|
||||||
export default function HomePage() {
|
export default function HomePage() {
|
||||||
const [mounted, setMounted] = useState(false);
|
const [mounted, setMounted] = useState(false);
|
||||||
@@ -86,7 +87,7 @@ export default function HomePage() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-linear-to-br from-slate-950 via-purple-950 to-slate-950 text-white">
|
<WebStuff>
|
||||||
{/* Animated background */}
|
{/* Animated background */}
|
||||||
<div className="fixed inset-0 opacity-20">
|
<div className="fixed inset-0 opacity-20">
|
||||||
<div
|
<div
|
||||||
@@ -355,41 +356,6 @@ export default function HomePage() {
|
|||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</motion.section>
|
</motion.section>
|
||||||
|
</WebStuff>
|
||||||
{/* Footer */}
|
|
||||||
<footer className="relative z-10 px-6 py-12 border-t border-slate-800/50 mt-20">
|
|
||||||
<div className="max-w-7xl mx-auto">
|
|
||||||
<div className="flex flex-col md:flex-row justify-between items-center gap-6">
|
|
||||||
<img src="orus.svg" alt="Logo" className="h-4" />
|
|
||||||
|
|
||||||
<div className="text-slate-400 text-center">
|
|
||||||
© 2025 ORUS. Open source for everyone. Built with 💜 for
|
|
||||||
developers.
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex gap-6">
|
|
||||||
<motion.a
|
|
||||||
href="https://github.com/orus-dev"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-slate-400 hover:text-purple-400 transition-colors"
|
|
||||||
whileHover={{ scale: 1.2, rotate: 5 }}
|
|
||||||
>
|
|
||||||
<Github className="w-6 h-6" />
|
|
||||||
</motion.a>
|
|
||||||
<motion.a
|
|
||||||
href="https://discord.gg/HFRsNxfCqT"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-slate-400 hover:text-purple-400 transition-colors"
|
|
||||||
whileHover={{ scale: 1.2, rotate: -5 }}
|
|
||||||
>
|
|
||||||
<MessageSquare className="w-6 h-6" />
|
|
||||||
</motion.a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,378 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import {
|
||||||
|
Github,
|
||||||
|
MessageSquare,
|
||||||
|
Shield,
|
||||||
|
Code2,
|
||||||
|
Rocket,
|
||||||
|
Lock,
|
||||||
|
Sparkles,
|
||||||
|
ExternalLink,
|
||||||
|
Star,
|
||||||
|
GitFork,
|
||||||
|
Terminal,
|
||||||
|
Globe,
|
||||||
|
Zap,
|
||||||
|
Package,
|
||||||
|
} from "lucide-react";
|
||||||
|
import WebStuff from "@/components/Web";
|
||||||
|
|
||||||
|
export default function ProjectsPage() {
|
||||||
|
const [mounted, setMounted] = useState(false);
|
||||||
|
const [activeFilter, setActiveFilter] = useState("all");
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setMounted(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const projects = [
|
||||||
|
{
|
||||||
|
title: "SecureAuth Pro",
|
||||||
|
description:
|
||||||
|
"Enterprise-grade authentication system with zero-trust architecture and advanced threat detection.",
|
||||||
|
category: "security",
|
||||||
|
icon: Shield,
|
||||||
|
stars: 2450,
|
||||||
|
forks: 340,
|
||||||
|
tech: ["TypeScript", "Node.js", "PostgreSQL"],
|
||||||
|
status: "Active",
|
||||||
|
github: "https://github.com/orus-dev",
|
||||||
|
demo: "#",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "DevOps Toolkit",
|
||||||
|
description:
|
||||||
|
"Complete CI/CD automation suite with container orchestration and infrastructure as code.",
|
||||||
|
category: "devtools",
|
||||||
|
icon: Terminal,
|
||||||
|
stars: 1820,
|
||||||
|
forks: 290,
|
||||||
|
tech: ["Go", "Docker", "Kubernetes"],
|
||||||
|
status: "Active",
|
||||||
|
github: "https://github.com/orus-dev",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "CloudSync API",
|
||||||
|
description:
|
||||||
|
"Real-time data synchronization service with end-to-end encryption and multi-region support.",
|
||||||
|
category: "infrastructure",
|
||||||
|
icon: Globe,
|
||||||
|
stars: 980,
|
||||||
|
forks: 145,
|
||||||
|
tech: ["Rust", "Redis", "GraphQL"],
|
||||||
|
status: "Beta",
|
||||||
|
github: "https://github.com/orus-dev",
|
||||||
|
demo: "#",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "CodeGuard Scanner",
|
||||||
|
description:
|
||||||
|
"Automated code security scanner with AI-powered vulnerability detection and remediation suggestions.",
|
||||||
|
category: "security",
|
||||||
|
icon: Lock,
|
||||||
|
stars: 3200,
|
||||||
|
forks: 480,
|
||||||
|
tech: ["Python", "TensorFlow", "FastAPI"],
|
||||||
|
status: "Active",
|
||||||
|
github: "https://github.com/orus-dev",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "MicroFramework",
|
||||||
|
description:
|
||||||
|
"Lightweight, blazing-fast microservices framework with built-in service mesh and observability.",
|
||||||
|
category: "devtools",
|
||||||
|
icon: Zap,
|
||||||
|
stars: 1560,
|
||||||
|
forks: 210,
|
||||||
|
tech: ["TypeScript", "gRPC", "Prometheus"],
|
||||||
|
status: "Active",
|
||||||
|
github: "https://github.com/orus-dev",
|
||||||
|
demo: "#",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "PackageHub",
|
||||||
|
description:
|
||||||
|
"Private package registry with caching, versioning, and dependency analysis for modern development.",
|
||||||
|
category: "infrastructure",
|
||||||
|
icon: Package,
|
||||||
|
stars: 720,
|
||||||
|
forks: 95,
|
||||||
|
tech: ["Node.js", "MongoDB", "S3"],
|
||||||
|
status: "Beta",
|
||||||
|
github: "https://github.com/orus-dev",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const filters = [
|
||||||
|
{ id: "all", label: "All Projects" },
|
||||||
|
{ id: "security", label: "Security" },
|
||||||
|
{ id: "devtools", label: "Dev Tools" },
|
||||||
|
{ id: "infrastructure", label: "Infrastructure" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const filteredProjects =
|
||||||
|
activeFilter === "all"
|
||||||
|
? projects
|
||||||
|
: projects.filter((p) => p.category === activeFilter);
|
||||||
|
|
||||||
|
const containerVariants = {
|
||||||
|
hidden: { opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
staggerChildren: 0.1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const itemVariants = {
|
||||||
|
hidden: { y: 20, opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
y: 0,
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
duration: 0.5,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<WebStuff>
|
||||||
|
{/* Hero Section */}
|
||||||
|
<motion.section
|
||||||
|
className="relative z-10 px-6 py-16 lg:py-24 max-w-7xl mx-auto"
|
||||||
|
variants={containerVariants}
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
>
|
||||||
|
<div className="text-center max-w-4xl mx-auto">
|
||||||
|
<motion.div variants={itemVariants} className="mb-6">
|
||||||
|
<span className="inline-flex items-center gap-2 px-4 py-2 bg-purple-500/10 border border-purple-500/20 rounded-full text-purple-400 text-sm">
|
||||||
|
<Sparkles className="w-4 h-4" />
|
||||||
|
Open Source Projects
|
||||||
|
</span>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.h1
|
||||||
|
variants={itemVariants}
|
||||||
|
className="text-5xl lg:text-6xl font-bold mb-6"
|
||||||
|
>
|
||||||
|
<span className="bg-linear-to-r from-white via-purple-200 to-blue-200 bg-clip-text text-transparent">
|
||||||
|
Building the Future
|
||||||
|
</span>
|
||||||
|
</motion.h1>
|
||||||
|
|
||||||
|
<motion.p
|
||||||
|
variants={itemVariants}
|
||||||
|
className="text-xl text-slate-300 mb-8 leading-relaxed max-w-3xl mx-auto"
|
||||||
|
>
|
||||||
|
Explore our collection of open-source projects designed to empower
|
||||||
|
developers and enhance security across the ecosystem.
|
||||||
|
</motion.p>
|
||||||
|
|
||||||
|
{/* Filter Tabs */}
|
||||||
|
<motion.div
|
||||||
|
variants={itemVariants}
|
||||||
|
className="flex flex-wrap justify-center gap-3"
|
||||||
|
>
|
||||||
|
{filters.map((filter) => (
|
||||||
|
<button
|
||||||
|
key={filter.id}
|
||||||
|
onClick={() => setActiveFilter(() => filter.id)}
|
||||||
|
className={`px-6 py-2.5 rounded-lg font-medium transition-all ${
|
||||||
|
activeFilter === filter.id
|
||||||
|
? "bg-purple-500 text-white shadow-lg shadow-purple-500/50"
|
||||||
|
: "bg-slate-800/50 text-slate-300 hover:bg-slate-700/50 border border-slate-700"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{filter.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
{/* Projects Grid */}
|
||||||
|
<motion.section
|
||||||
|
className="relative z-10 px-6 py-12 max-w-7xl mx-auto"
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
variants={containerVariants}
|
||||||
|
>
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{filteredProjects.map((project, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
layout
|
||||||
|
className="relative group"
|
||||||
|
whileHover={{ y: -8 }}
|
||||||
|
viewport={{ once: false }}
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 bg-linear-to-r from-purple-500/20 to-blue-500/20 rounded-2xl blur-xl group-hover:blur-2xl transition-all" />
|
||||||
|
<div className="relative bg-slate-900/80 backdrop-blur border border-slate-700 hover:border-purple-500/50 rounded-2xl p-6 transition-all h-full flex flex-col">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-start justify-between mb-4">
|
||||||
|
<div className="inline-flex items-center justify-center w-12 h-12 bg-purple-500/10 rounded-xl">
|
||||||
|
<project.icon className="w-6 h-6 text-purple-400" />
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
className={`px-3 py-1 rounded-full text-xs font-medium ${
|
||||||
|
project.status === "Active"
|
||||||
|
? "bg-green-500/10 text-green-400 border border-green-500/20"
|
||||||
|
: "bg-yellow-500/10 text-yellow-400 border border-yellow-500/20"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{project.status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<h3 className="text-xl font-bold mb-2 group-hover:text-purple-400 transition-colors">
|
||||||
|
{project.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-slate-400 text-sm mb-4 leading-relaxed grow">
|
||||||
|
{project.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Stats */}
|
||||||
|
<div className="flex items-center gap-4 mb-4 text-sm text-slate-400">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Star className="w-4 h-4" />
|
||||||
|
<span>{project.stars.toLocaleString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<GitFork className="w-4 h-4" />
|
||||||
|
<span>{project.forks}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tech Stack */}
|
||||||
|
<div className="flex flex-wrap gap-2 mb-4">
|
||||||
|
{project.tech.map((tech, idx) => (
|
||||||
|
<span
|
||||||
|
key={idx}
|
||||||
|
className="px-2.5 py-1 bg-slate-800/50 border border-slate-700 rounded-md text-xs text-slate-300"
|
||||||
|
>
|
||||||
|
{tech}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex gap-2 pt-4 border-t border-slate-800">
|
||||||
|
<a
|
||||||
|
href={project.github}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 rounded-lg text-sm font-medium transition-colors"
|
||||||
|
>
|
||||||
|
<Github className="w-4 h-4" />
|
||||||
|
Code
|
||||||
|
</a>
|
||||||
|
{project.demo && (
|
||||||
|
<a
|
||||||
|
href={project.demo}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex-1 inline-flex items-center justify-center gap-2 px-4 py-2 bg-purple-500/10 hover:bg-purple-500/20 border border-purple-500/20 rounded-lg text-sm font-medium text-purple-400 transition-colors"
|
||||||
|
>
|
||||||
|
<ExternalLink className="w-4 h-4" />
|
||||||
|
Demo
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
{/* Stats Section */}
|
||||||
|
<motion.section
|
||||||
|
className="relative z-10 px-6 py-20 max-w-7xl mx-auto"
|
||||||
|
initial="hidden"
|
||||||
|
whileInView="visible"
|
||||||
|
viewport={{ once: true }}
|
||||||
|
variants={containerVariants}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
variants={itemVariants}
|
||||||
|
className="bg-slate-900/30 backdrop-blur border border-slate-800 rounded-3xl p-8 lg:p-12"
|
||||||
|
>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||||
|
{[
|
||||||
|
{ label: "Projects", value: "24+" },
|
||||||
|
{ label: "Contributors", value: "180+" },
|
||||||
|
{ label: "Stars", value: "12.5K+" },
|
||||||
|
{ label: "Forks", value: "2.1K+" },
|
||||||
|
].map((stat, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
variants={itemVariants}
|
||||||
|
className="text-center"
|
||||||
|
>
|
||||||
|
<div className="text-3xl lg:text-4xl font-bold text-purple-400 mb-2">
|
||||||
|
{stat.value}
|
||||||
|
</div>
|
||||||
|
<div className="text-slate-400">{stat.label}</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</motion.section>
|
||||||
|
|
||||||
|
{/* CTA Section */}
|
||||||
|
<motion.section
|
||||||
|
className="relative z-10 px-6 py-20 max-w-5xl mx-auto"
|
||||||
|
initial="hidden"
|
||||||
|
whileInView="visible"
|
||||||
|
viewport={{ once: true }}
|
||||||
|
variants={containerVariants}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
variants={itemVariants}
|
||||||
|
className="relative overflow-hidden bg-linear-to-r from-purple-500/10 to-blue-500/10 backdrop-blur border border-purple-500/20 rounded-3xl p-12 text-center"
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 bg-linear-to-r from-purple-500/5 to-blue-500/5" />
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
<h2 className="text-3xl lg:text-4xl font-bold mb-4">
|
||||||
|
Want to Contribute?
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-300 text-lg mb-8 max-w-2xl mx-auto">
|
||||||
|
All our projects are open source and welcoming to contributors.
|
||||||
|
Join us in building tools that make a difference.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
|
<motion.a
|
||||||
|
href="https://github.com/orus-dev"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center justify-center gap-2 px-8 py-4 bg-purple-600 hover:bg-purple-500 rounded-lg font-semibold text-lg transition-colors"
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
<Github className="w-5 h-5" />
|
||||||
|
View on GitHub
|
||||||
|
</motion.a>
|
||||||
|
|
||||||
|
<motion.a
|
||||||
|
href="https://discord.gg/HFRsNxfCqT"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center justify-center gap-2 px-8 py-4 border border-slate-600 hover:border-slate-400 rounded-lg font-semibold text-lg transition-colors"
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
<MessageSquare className="w-5 h-5" />
|
||||||
|
Join Discord
|
||||||
|
</motion.a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</motion.section>
|
||||||
|
</WebStuff>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,166 @@
|
|||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Github, MessageSquare } from "lucide-react";
|
||||||
|
|
||||||
|
export default function WebStuff({
|
||||||
|
children,
|
||||||
|
}: Readonly<{
|
||||||
|
children?: React.ReactNode;
|
||||||
|
}>) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-linear-to-br from-slate-950 via-purple-950 to-slate-950 text-white">
|
||||||
|
{/* Animated background */}
|
||||||
|
<div className="fixed inset-0 opacity-20">
|
||||||
|
<div
|
||||||
|
className="absolute inset-0"
|
||||||
|
style={{
|
||||||
|
backgroundImage: `radial-gradient(circle at 2px 2px, rgb(168, 85, 247) 1px, transparent 0)`,
|
||||||
|
backgroundSize: "50px 50px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Gradient orbs */}
|
||||||
|
<div className="fixed inset-0 overflow-hidden pointer-events-none">
|
||||||
|
<motion.div
|
||||||
|
className="absolute top-1/4 -left-1/4 w-96 h-96 bg-purple-500/30 rounded-full blur-3xl"
|
||||||
|
animate={{
|
||||||
|
scale: [1, 1.2, 1],
|
||||||
|
opacity: [0.3, 0.5, 0.3],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 8,
|
||||||
|
repeat: Infinity,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<motion.div
|
||||||
|
className="absolute bottom-1/4 -right-1/4 w-96 h-96 bg-blue-500/30 rounded-full blur-3xl"
|
||||||
|
animate={{
|
||||||
|
scale: [1.2, 1, 1.2],
|
||||||
|
opacity: [0.3, 0.5, 0.3],
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 8,
|
||||||
|
repeat: Infinity,
|
||||||
|
delay: 1,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<motion.nav
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
variants={{
|
||||||
|
hidden: { y: -40, opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
y: 0,
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
duration: 0.6,
|
||||||
|
ease: [0.25, 0.1, 0.25, 1], // smooth ease
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
className="relative z-10 px-6 py-6 flex justify-between items-center max-w-7xl mx-auto"
|
||||||
|
>
|
||||||
|
<motion.a
|
||||||
|
className="flex items-center"
|
||||||
|
href="/"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.1 }}
|
||||||
|
>
|
||||||
|
<img src="orus2.svg" alt="Logo" className="h-4" />
|
||||||
|
</motion.a>
|
||||||
|
|
||||||
|
{/* Menu */}
|
||||||
|
<motion.div
|
||||||
|
className="flex gap-6 items-center"
|
||||||
|
variants={{
|
||||||
|
hidden: {},
|
||||||
|
visible: {
|
||||||
|
transition: {
|
||||||
|
staggerChildren: 0.08,
|
||||||
|
delayChildren: 0.15,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{["Blog", "Projects", "About"].map((item) => (
|
||||||
|
<motion.a
|
||||||
|
key={item}
|
||||||
|
href={`/${item.toLowerCase()}`}
|
||||||
|
className="text-slate-300 hover:text-white transition-colors hidden md:block"
|
||||||
|
variants={{
|
||||||
|
hidden: { opacity: 0, y: -12 },
|
||||||
|
visible: { opacity: 1, y: 0 },
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 0.45,
|
||||||
|
ease: [0.25, 0.1, 0.25, 1],
|
||||||
|
}}
|
||||||
|
whileHover={{ y: -2 }}
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</motion.a>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<motion.a
|
||||||
|
href="https://discord.gg/HFRsNxfCqT"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="inline-flex items-center gap-2 px-4 py-2 bg-purple-500 hover:bg-purple-600 rounded-lg font-semibold transition-colors text-sm"
|
||||||
|
variants={{
|
||||||
|
hidden: { opacity: 0, y: -12 },
|
||||||
|
visible: { opacity: 1, y: 0 },
|
||||||
|
}}
|
||||||
|
transition={{
|
||||||
|
duration: 0.45,
|
||||||
|
ease: [0.25, 0.1, 0.25, 1],
|
||||||
|
}}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
<MessageSquare className="w-4 h-4" />
|
||||||
|
Join Discord
|
||||||
|
</motion.a>
|
||||||
|
</motion.div>
|
||||||
|
</motion.nav>
|
||||||
|
|
||||||
|
{children}
|
||||||
|
|
||||||
|
<footer className="relative z-10 px-6 py-12 border-t border-slate-800/50 mt-20">
|
||||||
|
<div className="max-w-7xl mx-auto">
|
||||||
|
<div className="flex flex-col md:flex-row justify-between items-center gap-6">
|
||||||
|
<img src="orus.svg" alt="Logo" className="h-4" />
|
||||||
|
|
||||||
|
<div className="text-slate-400 text-center">
|
||||||
|
© 2025 ORUS. Open source for everyone. Built with 💜 for
|
||||||
|
developers.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex gap-6">
|
||||||
|
<motion.a
|
||||||
|
href="https://github.com/orus-dev"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-slate-400 hover:text-purple-400 transition-colors"
|
||||||
|
whileHover={{ scale: 1.2, rotate: 5 }}
|
||||||
|
>
|
||||||
|
<Github className="w-6 h-6" />
|
||||||
|
</motion.a>
|
||||||
|
<motion.a
|
||||||
|
href="https://discord.gg/HFRsNxfCqT"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-slate-400 hover:text-purple-400 transition-colors"
|
||||||
|
whileHover={{ scale: 1.2, rotate: -5 }}
|
||||||
|
>
|
||||||
|
<MessageSquare className="w-6 h-6" />
|
||||||
|
</motion.a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user