From a65f5af0b4dc7c1074737069d59cd152bdced067 Mon Sep 17 00:00:00 2001 From: momo-shogun Date: Thu, 23 Jan 2025 16:07:52 +0530 Subject: [PATCH 1/3] resources --- app/resources/component/resource-card.tsx | 23 ++++++ app/resources/component/ripple.tsx | 61 ++++++++++++++ app/resources/component/search-bar.tsx | 15 ++++ app/resources/component/support-section.tsx | 30 +++++++ app/resources/page.tsx | 90 +++++++++++++++++++++ components/navbar.tsx | 8 ++ tailwind.config.ts | 11 +++ 7 files changed, 238 insertions(+) create mode 100644 app/resources/component/resource-card.tsx create mode 100644 app/resources/component/ripple.tsx create mode 100644 app/resources/component/search-bar.tsx create mode 100644 app/resources/component/support-section.tsx create mode 100644 app/resources/page.tsx diff --git a/app/resources/component/resource-card.tsx b/app/resources/component/resource-card.tsx new file mode 100644 index 0000000..45653f7 --- /dev/null +++ b/app/resources/component/resource-card.tsx @@ -0,0 +1,23 @@ +interface ResourceCardProps { + title: string + description: string + isComingSoon?: boolean + buttonColor?: string +} + +export function ResourceCard({ title, description, isComingSoon, buttonColor = "bg-blue-500" }: ResourceCardProps) { + return ( +
+

{title}

+

{description}

+ +
+ ) +} + diff --git a/app/resources/component/ripple.tsx b/app/resources/component/ripple.tsx new file mode 100644 index 0000000..fca6e0a --- /dev/null +++ b/app/resources/component/ripple.tsx @@ -0,0 +1,61 @@ +import React, { ComponentPropsWithoutRef, CSSProperties } from "react"; +import { cn } from "@/lib/utils"; + +interface RippleProps extends ComponentPropsWithoutRef<"div"> { + mainCircleSize?: number; + mainCircleOpacity?: number; + numCircles?: number; +} + +export const Ripple = React.memo(function Ripple({ + mainCircleSize = 210, + mainCircleOpacity = 0.24, + numCircles = 8, + className, + ...props +}: RippleProps) { + return ( +
+ {Array.from({ length: numCircles }, (_, i) => { + const size = mainCircleSize + i * 70; + const opacity = Math.max(0, mainCircleOpacity - i * 0.03); + const animationDelay = `${i * 0.06}s`; + const borderStyle = i === numCircles - 1 ? "dashed" : "solid"; + const borderOpacity = Math.max(0, 5 + i * 5); + + return ( +
+ ); + })} +
+ ); +}); + +Ripple.displayName = "Ripple"; diff --git a/app/resources/component/search-bar.tsx b/app/resources/component/search-bar.tsx new file mode 100644 index 0000000..72bc1b3 --- /dev/null +++ b/app/resources/component/search-bar.tsx @@ -0,0 +1,15 @@ +import { Search } from "lucide-react" + +export function SearchBar() { + return ( +
+ + +
+ ) +} + diff --git a/app/resources/component/support-section.tsx b/app/resources/component/support-section.tsx new file mode 100644 index 0000000..b88c3f9 --- /dev/null +++ b/app/resources/component/support-section.tsx @@ -0,0 +1,30 @@ +import { Card } from "@/components/ui/card" +import { Button } from "@/components/ui/button" + +export default function SupportSection() { + return ( + + {/* Rainbow gradient background effect */} +
+ +
+

Support Our Learning Community

+ +

+ Help us grow by sharing this website with your friends and colleagues! +

+ + +
+ + ) +} + diff --git a/app/resources/page.tsx b/app/resources/page.tsx new file mode 100644 index 0000000..142fcce --- /dev/null +++ b/app/resources/page.tsx @@ -0,0 +1,90 @@ +import { SearchBar } from "./component/search-bar" +import { ResourceCard } from "./component/resource-card" +import { Globe, Laptop } from "lucide-react" +import Navbar1 from "@/components/navbar" +import { Ripple } from "./component/ripple" +import SupportSection from "./component/support-section" +import Footer from "@/components/footer" + +export default function ResourcesPage() { + return ( +
+ +
+ {/* Hero Section */} +
+ + +

+ Discover Resources +

+

+ Explore our curated collection of learning materials to enhance your skills in programming, web development, + and DevOps. +

+ +
+ + {/* Programming Languages Section */} +
+
+ +

Programming Languages

+
+ +
+ + + + +
+
+ +
+
+ +

Foundations

+
+ +
+ + + + +
+
+
+ +
+
+ ) +} + diff --git a/components/navbar.tsx b/components/navbar.tsx index 579c18a..d54d8bc 100644 --- a/components/navbar.tsx +++ b/components/navbar.tsx @@ -111,6 +111,14 @@ const Navbar1 = () => { Blogs2
+ + +
+ Resources1 + Resources2 +
+ +
diff --git a/tailwind.config.ts b/tailwind.config.ts index f9a5f82..71f43ee 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -101,13 +101,24 @@ export default { "background-position": "200%", }, }, + ripple: { + "0%, 100%": { + transform: "translate(-50%, -50%) scale(1)", + }, + "50%": { + transform: "translate(-50%, -50%) scale(0.9)", + }, + }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", meteor: "meteor 5s linear infinite", rainbow: "rainbow var(--speed, 2s) infinite linear", + ripple: "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite", + }, + }, }, plugins: [require("tailwindcss-animate")], From ad579c9a6c2db4484cd147501af696babba772d1 Mon Sep 17 00:00:00 2001 From: momo-shogun Date: Thu, 23 Jan 2025 18:13:24 +0530 Subject: [PATCH 2/3] rmv search --- app/resources/component/search-bar.tsx | 15 --------------- app/resources/page.tsx | 1 - 2 files changed, 16 deletions(-) delete mode 100644 app/resources/component/search-bar.tsx diff --git a/app/resources/component/search-bar.tsx b/app/resources/component/search-bar.tsx deleted file mode 100644 index 72bc1b3..0000000 --- a/app/resources/component/search-bar.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Search } from "lucide-react" - -export function SearchBar() { - return ( -
- - -
- ) -} - diff --git a/app/resources/page.tsx b/app/resources/page.tsx index 142fcce..7487557 100644 --- a/app/resources/page.tsx +++ b/app/resources/page.tsx @@ -22,7 +22,6 @@ export default function ResourcesPage() { Explore our curated collection of learning materials to enhance your skills in programming, web development, and DevOps.

-
{/* Programming Languages Section */} From 456953709cc4debeb30559029ffb8dcfb7827566 Mon Sep 17 00:00:00 2001 From: momo-shogun Date: Thu, 23 Jan 2025 19:03:20 +0530 Subject: [PATCH 3/3] rmv search 2 --- app/resources/page.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/resources/page.tsx b/app/resources/page.tsx index 7487557..e2aeca3 100644 --- a/app/resources/page.tsx +++ b/app/resources/page.tsx @@ -1,4 +1,3 @@ -import { SearchBar } from "./component/search-bar" import { ResourceCard } from "./component/resource-card" import { Globe, Laptop } from "lucide-react" import Navbar1 from "@/components/navbar"