Skip to content

Commit a65f5af

Browse files
momo-shogunmomo-shogun
committed
resources
1 parent 25e878b commit a65f5af

File tree

7 files changed

+238
-0
lines changed

7 files changed

+238
-0
lines changed

‎app/resources/component/resource-card.tsx

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
interface ResourceCardProps {
2+
title: string
3+
description: string
4+
isComingSoon?: boolean
5+
buttonColor?: string
6+
}
7+
8+
export function ResourceCard({ title, description, isComingSoon, buttonColor = "bg-blue-500" }: ResourceCardProps) {
9+
return (
10+
<div className="p-6 rounded-xl bg-white/5 border border-white/10 backdrop-blur-sm">
11+
<h3 className="text-2xl font-semibold text-white mb-3">{title}</h3>
12+
<p className="text-white/70 mb-6">{description}</p>
13+
<button
14+
className={`px-6 py-2 rounded-full ${isComingSoon ? "bg-gray-500 cursor-not-allowed" : buttonColor
15+
} text-white font-medium transition-transform hover:scale-105 active:scale-95`}
16+
disabled={isComingSoon}
17+
>
18+
{isComingSoon ? "Coming Soon" : "Explore resources"}
19+
</button>
20+
</div>
21+
)
22+
}
23+

‎app/resources/component/ripple.tsx

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, { ComponentPropsWithoutRef, CSSProperties } from "react";
2+
import { cn } from "@/lib/utils";
3+
4+
interface RippleProps extends ComponentPropsWithoutRef<"div"> {
5+
mainCircleSize?: number;
6+
mainCircleOpacity?: number;
7+
numCircles?: number;
8+
}
9+
10+
export const Ripple = React.memo(function Ripple({
11+
mainCircleSize = 210,
12+
mainCircleOpacity = 0.24,
13+
numCircles = 8,
14+
className,
15+
...props
16+
}: RippleProps) {
17+
return (
18+
<div
19+
className={cn(
20+
"pointer-events-none absolute inset-0 select-none [mask-image:linear-gradient(to_bottom,white,transparent)]",
21+
className
22+
)}
23+
{...props}
24+
>
25+
{Array.from({ length: numCircles }, (_, i) => {
26+
const size = mainCircleSize + i * 70;
27+
const opacity = Math.max(0, mainCircleOpacity - i * 0.03);
28+
const animationDelay = `${i * 0.06}s`;
29+
const borderStyle = i === numCircles - 1 ? "dashed" : "solid";
30+
const borderOpacity = Math.max(0, 5 + i * 5);
31+
32+
return (
33+
<div
34+
key={i}
35+
className={`absolute animate-ripple rounded-full border`}
36+
style={
37+
{
38+
width: `${size}px`,
39+
height: `${size}px`,
40+
opacity,
41+
animationDelay,
42+
borderStyle,
43+
borderWidth: "1px",
44+
borderColor: `hsl(var(--foreground), ${borderOpacity / 100})`,
45+
top: "50%",
46+
left: "50%",
47+
transform: "translate(-50%, -50%) scale(1)",
48+
// maskImage:
49+
// "radial-gradient(circle, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%)",
50+
// WebkitMaskImage:
51+
// "radial-gradient(circle, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%)",
52+
} as CSSProperties
53+
}
54+
/>
55+
);
56+
})}
57+
</div>
58+
);
59+
});
60+
61+
Ripple.displayName = "Ripple";

‎app/resources/component/search-bar.tsx

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { Search } from "lucide-react"
2+
3+
export function SearchBar() {
4+
return (
5+
<div className="relative max-w-xs mx-auto w-full">
6+
<input
7+
type="text"
8+
placeholder="Search resources..."
9+
className="w-full px-4 py-3 rounded-full border border-white/20 text-white placeholder:text-white/50 focus:outline-none focus:ring-2 focus:ring-white/20"
10+
/>
11+
<Search className="absolute right-4 top-1/2 transform -translate-y-1/2 text-white" size={20} />
12+
</div>
13+
)
14+
}
15+

‎app/resources/component/support-section.tsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { Card } from "@/components/ui/card"
2+
import { Button } from "@/components/ui/button"
3+
4+
export default function SupportSection() {
5+
return (
6+
<Card className="relative overflow-hidden bg-black text-white p-8 md:p-12">
7+
{/* Rainbow gradient background effect */}
8+
<div className="absolute inset-0 bg-gradient-to-r from-rose-500/10 via-emerald-500/10 to-violet-500/10 opacity-20" />
9+
10+
<div className="relative z-10 flex flex-col items-center justify-center gap-6 text-center max-w-3xl mx-auto">
11+
<h2 className="text-4xl md:text-5xl font-bold tracking-tight">Support Our Learning Community</h2>
12+
13+
<p className="text-lg md:text-xl text-gray-200">
14+
Help us grow by sharing this website with your friends and colleagues!
15+
</p>
16+
17+
<Button
18+
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"
19+
variant="ghost"
20+
>
21+
{/* Rainbow gradient border effect */}
22+
<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" />
23+
24+
<span className="relative z-10">Support Us</span>
25+
</Button>
26+
</div>
27+
</Card>
28+
)
29+
}
30+

‎app/resources/page.tsx

+90
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import { SearchBar } from "./component/search-bar"
2+
import { ResourceCard } from "./component/resource-card"
3+
import { Globe, Laptop } from "lucide-react"
4+
import Navbar1 from "@/components/navbar"
5+
import { Ripple } from "./component/ripple"
6+
import SupportSection from "./component/support-section"
7+
import Footer from "@/components/footer"
8+
9+
export default function ResourcesPage() {
10+
return (
11+
<div className="">
12+
<Navbar1 />
13+
<div className="min-h-screen bg-black text-white relative">
14+
{/* Hero Section */}
15+
<div className="relative pt-32 pb-16 px-4 text-center">
16+
<Ripple className="absolute inset-0 z-0" />
17+
18+
<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">
19+
Discover Resources
20+
</h1>
21+
<p className="text-xl md:text-2xl text-white/80 max-w-3xl mx-auto mb-12">
22+
Explore our curated collection of learning materials to enhance your skills in programming, web development,
23+
and DevOps.
24+
</p>
25+
<SearchBar />
26+
</div>
27+
28+
{/* Programming Languages Section */}
29+
<div className="relative px-4 pb-24 max-w-7xl mx-auto">
30+
<div className="flex items-center gap-3 mb-8">
31+
<Laptop className="text-white/80" size={32} />
32+
<h2 className="text-3xl font-semibold">Programming Languages</h2>
33+
</div>
34+
35+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
36+
<ResourceCard
37+
title="Python"
38+
description="Known for its simplicity and wide range of applications, from web dev to data science."
39+
buttonColor="bg-emerald-500"
40+
/>
41+
<ResourceCard
42+
title="C"
43+
description="A high-performance, compiled language that provides low-level memory management."
44+
/>
45+
<ResourceCard
46+
title="C++/CPP"
47+
description="Widely used for system/application software, game development, and more."
48+
/>
49+
<ResourceCard
50+
title="Java"
51+
description="A popular language for building large-scale enterprise applications and Android apps."
52+
isComingSoon
53+
/>
54+
</div>
55+
</div>
56+
57+
<div className="relative px-4 pb-24 max-w-7xl mx-auto">
58+
<div className="flex items-center gap-3 mb-8">
59+
<Globe className="text-white/80" size={32} />
60+
<h2 className="text-3xl font-semibold">Foundations</h2>
61+
</div>
62+
63+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
64+
<ResourceCard
65+
title="Python"
66+
description="Known for its simplicity and wide range of applications, from web dev to data science."
67+
buttonColor="bg-emerald-500"
68+
/>
69+
<ResourceCard
70+
title="C"
71+
description="A high-performance, compiled language that provides low-level memory management."
72+
/>
73+
<ResourceCard
74+
title="C++/CPP"
75+
description="Widely used for system/application software, game development, and more."
76+
/>
77+
<ResourceCard
78+
title="Java"
79+
description="A popular language for building large-scale enterprise applications and Android apps."
80+
isComingSoon
81+
/>
82+
</div>
83+
</div>
84+
</div>
85+
<SupportSection />
86+
<Footer />
87+
</div>
88+
)
89+
}
90+

‎components/navbar.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,14 @@ const Navbar1 = () => {
111111
<HoveredLink href="#">Blogs2</HoveredLink>
112112
</div>
113113
</MenuItem>
114+
<Link href="resources">
115+
<MenuItem setActive={setActive} active={active} item="Resources">
116+
<div className="flex flex-col space-y-4 text-sm">
117+
<HoveredLink href="#">Resources1</HoveredLink>
118+
<HoveredLink href="#">Resources2</HoveredLink>
119+
</div>
120+
</MenuItem>
121+
</Link>
114122
</Menu>
115123
</div>
116124
<div className="hidden lg:flex items-center space-x-4">

‎tailwind.config.ts

+11
Original file line numberDiff line numberDiff line change
@@ -101,13 +101,24 @@ export default {
101101
"background-position": "200%",
102102
},
103103
},
104+
ripple: {
105+
"0%, 100%": {
106+
transform: "translate(-50%, -50%) scale(1)",
107+
},
108+
"50%": {
109+
transform: "translate(-50%, -50%) scale(0.9)",
110+
},
111+
},
104112
},
105113
animation: {
106114
"accordion-down": "accordion-down 0.2s ease-out",
107115
"accordion-up": "accordion-up 0.2s ease-out",
108116
meteor: "meteor 5s linear infinite",
109117
rainbow: "rainbow var(--speed, 2s) infinite linear",
118+
ripple: "ripple var(--duration,2s) ease calc(var(--i, 0)*.2s) infinite",
119+
110120
},
121+
111122
},
112123
},
113124
plugins: [require("tailwindcss-animate")],

0 commit comments

Comments
 (0)