diff --git a/package-lock.json b/package-lock.json index aa7efc0..e66d0b0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,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" }, @@ -4604,6 +4605,15 @@ "react": "^19.0.0" } }, + "node_modules/react-icons": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz", + "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 09a281e..ad14af9 100644 --- a/package.json +++ b/package.json @@ -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" }, diff --git a/src/app/resources/ai/page.tsx b/src/app/resources/ai/page.tsx index 53e7743..d7141c6 100644 --- a/src/app/resources/ai/page.tsx +++ b/src/app/resources/ai/page.tsx @@ -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 (
- +
<> @@ -34,8 +35,9 @@ export default function Web3Resources() { AI and ML Development Path

- We're currently curating the best resources for AI and ML development. - Check back soon for comprehensive guides and tutorials. + We're currently curating the best resources for AI and ML + development. Check back soon for comprehensive guides and + tutorials.

@@ -45,11 +47,42 @@ export default function Web3Resources() { transition={{ duration: 0.5, delay: 0.2 }} className="flex justify-center" > -
-

- Our team is working hard to bring you high-quality AI and ML development resources. - -

+
+
+

+ Our team is working hard to bring you high-quality AI and ML + development resources. +

+
+ + {/* Right arrow */} + +
+ +
+ + + {/* Bottom arrow */} + +
+ +
+
diff --git a/src/app/resources/app/page.tsx b/src/app/resources/app/page.tsx index c283518..7190621 100644 --- a/src/app/resources/app/page.tsx +++ b/src/app/resources/app/page.tsx @@ -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 (
- +
<> @@ -43,8 +51,9 @@ export default function AppResources() { App Development Path

- We're currently curating the best resources for App development. - Check back soon for comprehensive guides and tutorials. + We're currently curating the best resources for App + development. Check back soon for comprehensive guides and + tutorials.

@@ -54,11 +63,42 @@ export default function AppResources() { transition={{ duration: 0.5, delay: 0.2 }} className="flex justify-center" > -
-

- Our team is working hard to bring you high-quality App development resources. - -

+
+
+

+ Our team is working hard to bring you high-quality App + development resources. +

+
+ + {/* Right arrow */} + +
+ +
+ + + {/* Bottom arrow */} + +
+ +
+
diff --git a/src/app/resources/backend/page.tsx b/src/app/resources/backend/page.tsx index 3392264..444bd9a 100644 --- a/src/app/resources/backend/page.tsx +++ b/src/app/resources/backend/page.tsx @@ -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 (
@@ -36,8 +35,9 @@ export default function BackendResources() { Backend Development Path

- We're currently curating the best resources for backend development. - Check back soon for comprehensive guides and tutorials. + We're currently curating the best resources for backend + development. Check back soon for comprehensive guides and + tutorials.

@@ -47,12 +47,44 @@ export default function BackendResources() { transition={{ duration: 0.5, delay: 0.2 }} className="flex justify-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. -

+
+
+

+ 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. +

+
+ + {/* Right arrow */} + +
+ +
+ + + {/* Bottom arrow */} + +
+ +
+
diff --git a/src/app/resources/frontend/page.tsx b/src/app/resources/frontend/page.tsx index 3853764..08e44c6 100644 --- a/src/app/resources/frontend/page.tsx +++ b/src/app/resources/frontend/page.tsx @@ -1,25 +1,33 @@ -"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 frontendData from "@/data/resources/frontend/index.json"; import Link from "next/link"; -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 FrontendResources() { - - return (
- +
<> @@ -35,8 +43,6 @@ export default function FrontendResources() {
- - -
@@ -80,20 +86,48 @@ export default function FrontendResources() {
- {index !== frontendData.path.length - 1 && ( -
-
+ {/* Right arrow (between cards in same row) */} + {index < frontendData.path.length - 1 && + (index + 1) % 3 !== 0 && ( + +
+ +
+ + )} + + {/* Bottom arrow for mobile view (except last card) */} + {index < frontendData.path.length - 1 && ( + +
+ +
+ )} ))}
-
-
+
); -} \ No newline at end of file +} diff --git a/src/app/resources/page.tsx b/src/app/resources/page.tsx index 5451040..beda3fe 100644 --- a/src/app/resources/page.tsx +++ b/src/app/resources/page.tsx @@ -1,49 +1,50 @@ -"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 Link from "next/link"; +import { LuArrowRight, LuArrowDown } from "react-icons/lu"; +import React from "react"; const resourceCategories = [ { title: "Frontend Development", description: "Learn to build beautiful and interactive user interfaces", link: "/resources/frontend", - color: "from-purple-500 to-pink-500" + color: "from-purple-500 to-pink-500", }, { title: "Backend Development", description: "Master server-side programming and APIs", link: "/resources/backend", - color: "from-green-500 to-emerald-500" + color: "from-green-500 to-emerald-500", }, { title: "Web3 Development", description: "Dive into blockchain and decentralized applications", link: "/resources/web3", - color: "from-blue-500 to-indigo-500" + color: "from-blue-500 to-indigo-500", }, { title: "App Development", description: "Create mobile applications for iOS and Android", link: "/resources/app", - color: "from-orange-500 to-red-500" + color: "from-orange-500 to-red-500", }, { title: "AI & Machine Learning", description: "Explore artificial intelligence and ML concepts", link: "/resources/ai", - color: "from-teal-500 to-cyan-500" - } + color: "from-teal-500 to-cyan-500", + }, ]; export default function Resources() { - return (
- +
<> @@ -69,41 +70,104 @@ export default function Resources() { Developer Resources

- Curated learning paths and resources to help you master different aspects of development + Curated learning paths and resources to help you master different + aspects of development

-
+
{resourceCategories.map((category, index) => ( - - -
-
-
- -

- {category.title} -

-

- {category.description} -

-
-
- - + +
+ + +
+
+
+

+ {category.title} +

+

+ {category.description} +

+
+
+ + + + {/* Desktop horizontal arrows (only between cards in the same row) */} + {index < resourceCategories.length - 1 && + (index + 1) % 3 !== 0 && ( + +
+ +
+ + )} + + {/* Tablet horizontal arrows (only between cards in the same row) */} + {index < resourceCategories.length - 1 && index % 2 === 0 && ( + +
+ +
+ + )} + + {/* Mobile vertical arrows (after each card except the last) */} + {index < resourceCategories.length - 1 && ( + +
+ +
+ + )} +
+ ))}
); -} \ No newline at end of file +} diff --git a/src/app/resources/web3/page.tsx b/src/app/resources/web3/page.tsx index 4893765..ca869a9 100644 --- a/src/app/resources/web3/page.tsx +++ b/src/app/resources/web3/page.tsx @@ -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 Web3Resources() { - - return (
@@ -36,8 +35,9 @@ export default function Web3Resources() { Web3 Development Path

- We're currently curating the best resources for Web3 development. - Check back soon for comprehensive guides and tutorials. + We're currently curating the best resources for Web3 + development. Check back soon for comprehensive guides and + tutorials.

@@ -47,11 +47,42 @@ export default function Web3Resources() { transition={{ duration: 0.5, delay: 0.2 }} className="flex justify-center" > -
-

- Our team is working hard to bring you high-quality Web3 development resources. - -

+
+
+

+ Our team is working hard to bring you high-quality Web3 + development resources. +

+
+ + {/* Right arrow */} + +
+ +
+ + + {/* Bottom arrow */} + +
+ +
+