resources page ui

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 (
+        <div className="p-6 rounded-xl bg-white/5 border border-white/10 backdrop-blur-sm">
+            <h3 className="text-2xl font-semibold text-white mb-3">{title}</h3>
+            <p className="text-white/70 mb-6">{description}</p>
+            <button
+                className={`px-6 py-2 rounded-full ${isComingSoon ? "bg-gray-500 cursor-not-allowed" : buttonColor
+                    } text-white font-medium transition-transform hover:scale-105 active:scale-95`}
+                disabled={isComingSoon}
+            >
+                {isComingSoon ? "Coming Soon" : "Explore resources"}
+            </button>
+        </div>
+    )
+}
+

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 (
+        <div
+            className={cn(
+                "pointer-events-none absolute inset-0 select-none [mask-image:linear-gradient(to_bottom,white,transparent)]",
+                className
+            )}
+            {...props}
+        >
+            {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 (
+                    <div
+                        key={i}
+                        className={`absolute animate-ripple rounded-full border`}
+                        style={
+                            {
+                                width: `${size}px`,
+                                height: `${size}px`,
+                                opacity,
+                                animationDelay,
+                                borderStyle,
+                                borderWidth: "1px",
+                                borderColor: `hsl(var(--foreground), ${borderOpacity / 100})`,
+                                top: "50%",
+                                left: "50%",
+                                transform: "translate(-50%, -50%) scale(1)",
+                                // maskImage:
+                                //     "radial-gradient(circle, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%)",
+                                // WebkitMaskImage:
+                                //     "radial-gradient(circle, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%)",
+                            } as CSSProperties
+                        }
+                    />
+                );
+            })}
+        </div>
+    );
+});
+
+Ripple.displayName = "Ripple";

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 (
+        <Card className="relative overflow-hidden bg-black text-white p-8 md:p-12">
+            {/* Rainbow gradient background effect */}
+            <div className="absolute inset-0 bg-gradient-to-r from-rose-500/10 via-emerald-500/10 to-violet-500/10 opacity-20" />
+
+            <div className="relative z-10 flex flex-col items-center justify-center gap-6 text-center max-w-3xl mx-auto">
+                <h2 className="text-4xl md:text-5xl font-bold tracking-tight">Support Our Learning Community</h2>
+
+                <p className="text-lg md:text-xl text-gray-200">
+                    Help us grow by sharing this website with your friends and colleagues!
+                </p>
+
+                <Button
+                    className="w-full sm:w-auto px-8 py-6 text-lg font-medium relative overflow-hidden group bg-white/10 hover:bg-white/20 transition-colors"
+                    variant="ghost"
+                >
+                    {/* Rainbow gradient border effect */}
+                    <div className="absolute inset-0 bg-gradient-to-r from-rose-500 via-emerald-500 to-violet-500 opacity-20 group-hover:opacity-30 transition-opacity" />
+
+                    <span className="relative z-10">Support Us</span>
+                </Button>
+            </div>
+        </Card>
+    )
+}
+

app/resources/page.tsx

@@ -0,0 +1,88 @@
+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 (
+    <div className="">
+      <Navbar1 />
+      <div className="min-h-screen bg-black text-white relative">
+        {/* Hero Section */}
+        <div className="relative pt-32 pb-16 px-4 text-center">
+          <Ripple className="absolute inset-0 z-0" />
+
+          <h1 className="text-5xl md:text-6xl font-extrabold mb-6 bg-gradient-to-r from-white to-white/80 bg-clip-text text-transparent shadow-text">
+            Discover Resources
+          </h1>
+          <p className="text-xl md:text-2xl text-white/80 max-w-3xl mx-auto mb-12">
+            Explore our curated collection of learning materials to enhance your skills in programming, web development,
+            and DevOps.
+          </p>
+        </div>
+
+        {/* Programming Languages Section */}
+        <div className="relative px-4 pb-24 max-w-7xl mx-auto">
+          <div className="flex items-center gap-3 mb-8">
+            <Laptop className="text-white/80" size={32} />
+            <h2 className="text-3xl font-semibold">Programming Languages</h2>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <ResourceCard
+              title="Python"
+              description="Known for its simplicity and wide range of applications, from web dev to data science."
+              buttonColor="bg-emerald-500"
+            />
+            <ResourceCard
+              title="C"
+              description="A high-performance, compiled language that provides low-level memory management."
+            />
+            <ResourceCard
+              title="C++/CPP"
+              description="Widely used for system/application software, game development, and more."
+            />
+            <ResourceCard
+              title="Java"
+              description="A popular language for building large-scale enterprise applications and Android apps."
+              isComingSoon
+            />
+          </div>
+        </div>
+
+        <div className="relative px-4 pb-24 max-w-7xl mx-auto">
+          <div className="flex items-center gap-3 mb-8">
+            <Globe className="text-white/80" size={32} />
+            <h2 className="text-3xl font-semibold">Foundations</h2>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+            <ResourceCard
+              title="Python"
+              description="Known for its simplicity and wide range of applications, from web dev to data science."
+              buttonColor="bg-emerald-500"
+            />
+            <ResourceCard
+              title="C"
+              description="A high-performance, compiled language that provides low-level memory management."
+            />
+            <ResourceCard
+              title="C++/CPP"
+              description="Widely used for system/application software, game development, and more."
+            />
+            <ResourceCard
+              title="Java"
+              description="A popular language for building large-scale enterprise applications and Android apps."
+              isComingSoon
+            />
+          </div>
+        </div>
+      </div>
+      <SupportSection />
+      <Footer />
+    </div>
+  )
+}
+

components/navbar.tsx

@@ -111,6 +111,14 @@ const Navbar1 = () => {
                   <HoveredLink href="#">Blogs2</HoveredLink>
                 </div>
               </MenuItem>
+              <Link href="resources">
+                <MenuItem setActive={setActive} active={active} item="Resources">
+                  <div className="flex flex-col space-y-4 text-sm">
+                    <HoveredLink href="#">Resources1</HoveredLink>
+                    <HoveredLink href="#">Resources2</HoveredLink>
+                  </div>
+                </MenuItem>
+              </Link>
             </Menu>
           </div>
             <div className="hidden lg:flex items-center space-x-4">

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")],