Skip to content

Add arrow icons for improved navigation flow between resource cards #392

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add arrow icons for improved navigation flow between resource cards #392

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"next": "15.1.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-icons": "^5.5.0",
"tailwind-merge": "^2.5.5",
"tailwindcss-animate": "^1.0.7"
},
Expand Down
51 changes: 42 additions & 9 deletions src/app/resources/ai/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
"use client"
"use client";
import { Spotlight } from "@/components/ui/spotlight";
import { BackgroundLines } from "@/components/ui/background-lines";
import { FloatingNav } from "@/components/ui/floating-navbar";
import { FloatingParticles } from "@/components/ui/floating-particles";
import { motion } from "framer-motion";
import { LuArrowRight, LuArrowDown } from "react-icons/lu";

export default function Web3Resources() {
return (
<div className="min-h-screen w-full bg-black/[0.96] antialiased relative overflow-hidden">
<FloatingNav/>
<FloatingNav />
<div className="absolute inset-0 z-[1] pointer-events-none">
<BackgroundLines className="h-full bg-transparent">
<></>
Expand All @@ -34,8 +35,9 @@ export default function Web3Resources() {
AI and ML Development Path
</h1>
<p className="text-xl text-neutral-300 max-w-3xl mx-auto">
We&apos;re currently curating the best resources for AI and ML development.
Check back soon for comprehensive guides and tutorials.
We&apos;re currently curating the best resources for AI and ML
development. Check back soon for comprehensive guides and
tutorials.
</p>
</motion.div>

Expand All @@ -45,11 +47,42 @@ export default function Web3Resources() {
transition={{ duration: 0.5, delay: 0.2 }}
className="flex justify-center"
>
<div className="p-8 rounded-lg backdrop-blur-sm border border-white/10 max-w-2xl">
<p className="text-gray-400 text-center">
Our team is working hard to bring you high-quality AI and ML development resources.

</p>
<div className="relative">
<div className="p-8 rounded-lg backdrop-blur-sm border border-white/10 max-w-2xl">
<p className="text-gray-400 text-center">
Our team is working hard to bring you high-quality AI and ML
development resources.
</p>
</div>

{/* Right arrow */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5, delay: 0.3 }}
className="absolute hidden md:block"
style={{
right: "-2rem",
top: "50%",
transform: "translateY(-50%)",
}}
>
<div className="w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/10">
<LuArrowRight className="w-5 h-5 text-white/70" />
</div>
</motion.div>

{/* Bottom arrow */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5, delay: 0.3 }}
className="flex justify-center w-full mt-4"
>
<div className="w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/10">
<LuArrowDown className="w-5 h-5 text-white/70" />
</div>
</motion.div>
</div>
</motion.div>
</div>
Expand Down
78 changes: 59 additions & 19 deletions src/app/resources/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,31 @@
"use client"
import dynamic from 'next/dynamic';
"use client";
import dynamic from "next/dynamic";
import { FloatingNav } from "@/components/ui/floating-navbar";
import { BackgroundLines } from "@/components/ui/background-lines";
import { motion } from 'framer-motion';
import { motion } from "framer-motion";
import { LuArrowRight, LuArrowDown } from "react-icons/lu";

const FloatingParticles = dynamic(() => import('@/components/ui/floating-particles').then(mod => mod.FloatingParticles), {
ssr: false
});
const FloatingParticles = dynamic(
() =>
import("@/components/ui/floating-particles").then(
(mod) => mod.FloatingParticles
),
{
ssr: false,
}
);

const Spotlight = dynamic(() => import('@/components/ui/spotlight').then(mod => mod.Spotlight), {
ssr: false
});
const Spotlight = dynamic(
() => import("@/components/ui/spotlight").then((mod) => mod.Spotlight),
{
ssr: false,
}
);

export default function AppResources() {


return (
<div className="min-h-screen w-full bg-black/[0.96] antialiased relative overflow-hidden">
<FloatingNav/>
<FloatingNav />
<div className="absolute inset-0 z-[1] pointer-events-none">
<BackgroundLines className="h-full bg-transparent">
<></>
Expand All @@ -43,8 +51,9 @@ export default function AppResources() {
App Development Path
</h1>
<p className="text-xl text-neutral-300 max-w-3xl mx-auto">
We&apos;re currently curating the best resources for App development.
Check back soon for comprehensive guides and tutorials.
We&apos;re currently curating the best resources for App
development. Check back soon for comprehensive guides and
tutorials.
</p>
</motion.div>

Expand All @@ -54,11 +63,42 @@ export default function AppResources() {
transition={{ duration: 0.5, delay: 0.2 }}
className="flex justify-center"
>
<div className="p-8 rounded-lg backdrop-blur-sm border border-white/10 max-w-2xl">
<p className="text-gray-400 text-center">
Our team is working hard to bring you high-quality App development resources.

</p>
<div className="relative">
<div className="p-8 rounded-lg backdrop-blur-sm border border-white/10 max-w-2xl">
<p className="text-gray-400 text-center">
Our team is working hard to bring you high-quality App
development resources.
</p>
</div>

{/* Right arrow */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5, delay: 0.3 }}
className="absolute hidden md:block"
style={{
right: "-2rem",
top: "50%",
transform: "translateY(-50%)",
}}
>
<div className="w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/10">
<LuArrowRight className="w-5 h-5 text-white/70" />
</div>
</motion.div>

{/* Bottom arrow */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5, delay: 0.3 }}
className="flex justify-center w-full mt-4"
>
<div className="w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/10">
<LuArrowDown className="w-5 h-5 text-white/70" />
</div>
</motion.div>
</div>
</motion.div>
</div>
Expand Down
54 changes: 43 additions & 11 deletions src/app/resources/backend/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
"use client"
"use client";
import { Spotlight } from "@/components/ui/spotlight";
import { BackgroundLines } from "@/components/ui/background-lines";
import { FloatingNav } from "@/components/ui/floating-navbar";
import { FloatingParticles } from "@/components/ui/floating-particles";
import { motion } from "framer-motion";
import { LuArrowRight, LuArrowDown } from "react-icons/lu";

export default function BackendResources() {


return (
<div className="min-h-screen w-full bg-black/[0.96] antialiased relative overflow-hidden">
<FloatingNav />
Expand Down Expand Up @@ -36,8 +35,9 @@ export default function BackendResources() {
Backend Development Path
</h1>
<p className="text-xl text-neutral-300 max-w-3xl mx-auto">
We&apos;re currently curating the best resources for backend development.
Check back soon for comprehensive guides and tutorials.
We&apos;re currently curating the best resources for backend
development. Check back soon for comprehensive guides and
tutorials.
</p>
</motion.div>

Expand All @@ -47,12 +47,44 @@ export default function BackendResources() {
transition={{ duration: 0.5, delay: 0.2 }}
className="flex justify-center"
>
<div className="p-8 rounded-lg backdrop-blur-sm border border-white/10 max-w-2xl">
<p className="text-gray-400 text-center">
Our team is working hard to bring you high-quality backend development resources.
The content will cover everything from server-side programming to database management
and API development.
</p>
<div className="relative">
<div className="p-8 rounded-lg backdrop-blur-sm border border-white/10 max-w-2xl">
<p className="text-gray-400 text-center">
Our team is working hard to bring you high-quality backend
development resources. The content will cover everything from
server-side programming to database management and API
development.
</p>
</div>

{/* Right arrow */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5, delay: 0.3 }}
className="absolute hidden md:block"
style={{
right: "-2rem",
top: "50%",
transform: "translateY(-50%)",
}}
>
<div className="w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/10">
<LuArrowRight className="w-5 h-5 text-white/70" />
</div>
</motion.div>

{/* Bottom arrow */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.5, delay: 0.3 }}
className="flex justify-center w-full mt-4"
>
<div className="w-10 h-10 flex items-center justify-center rounded-full bg-black/70 border border-white/10">
<LuArrowDown className="w-5 h-5 text-white/70" />
</div>
</motion.div>
</div>
</motion.div>
</div>
Expand Down
Loading