diff --git a/package.json b/package.json index 5c27c976..4baaca75 100644 --- a/package.json +++ b/package.json @@ -15,12 +15,15 @@ "typecheck": "tsc" }, "dependencies": { - "@docusaurus/core": "3.7.0", - "@docusaurus/plugin-content-docs": "3.7.0", + "@docusaurus/plugin-content-blog": "^3.8.1", + "@docusaurus/plugin-content-docs": "^3.8.1", + "@docusaurus/plugin-content-pages": "^3.8.1", "@docusaurus/plugin-google-analytics": "^3.8.1", - "@docusaurus/plugin-ideal-image": "3.7.0", - "@docusaurus/preset-classic": "3.7.0", - "@docusaurus/theme-mermaid": "3.7.0", + "@docusaurus/plugin-ideal-image": "^3.8.1", + "@docusaurus/plugin-sitemap": "^3.8.1", + "@docusaurus/preset-classic": "^3.8.1", + "@docusaurus/theme-classic": "^3.8.1", + "@docusaurus/theme-mermaid": "^3.8.1", "@docusaurus/theme-search-algolia": "3.7.0", "@floating-ui/react": "^0.27.8", "@giscus/react": "^3.1.0", @@ -53,6 +56,7 @@ "vanilla-tilt": "^1.8.1" }, "devDependencies": { + "@docusaurus/core": "^3.8.1", "@docusaurus/module-type-aliases": "3.7.0", "@docusaurus/tsconfig": "3.7.0", "@docusaurus/types": "3.7.0", diff --git a/src/components/header/header.css b/src/components/header/header.css index a5c46acd..3e4c2061 100644 --- a/src/components/header/header.css +++ b/src/components/header/header.css @@ -1,230 +1,321 @@ .chh__header--body { - display: flex; - justify-content: center; - align-items: center; - transform-style: preserve-3d; - overflow: hidden; - padding: 3rem auto; - background-color: var(--ifm-background-color); - color: #000; - transition: background 0.4s ease, color 0.4s ease; -} - -html.theme-dark .chh__header--body { - background: linear-gradient(to right, #121212, #1e1e1e); - color: #fff; -} - -.chh__header { - display: flex; - flex-direction: row; - position: relative; -} - -.chh__header-content { - width: 100%; - flex: 1; - display: flex; - justify-content: center; - align-items: flex-start; - flex-direction: column; - margin-right: 2rem; -} - -.chh__header-content h1 { - font-weight: 700; - font-size: 62px; - line-height: 75px; - letter-spacing: -0.04em; - background: linear-gradient( - 30deg, - rgba(206, 86, 174, 0.972) 0%, - rgb(253 29 29 / 100%) 50%, - rgb(252 176 69 / 100%) 100% - ); - background-clip: text; - -webkit-text-fill-color: transparent; - transition: background 0.3s ease-in-out; -} - -html.theme-dark .chh__header-content h1 { - background: linear-gradient( - 45deg, - rgba(255, 255, 255, 0.9), - rgba(180, 180, 255, 0.9) - ); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; -} - -.chh__header-content p { - font-family: var(--font-family); - font-weight: 400; - font-size: 22px; - text-align: justify; - line-height: 30px; - margin-top: 1.5rem; - color: #000; /* Light mode text */ - transition: color 0.3s ease-in-out; -} - -/* Override paragraph color in dark mode */ -[data-theme='dark'] .chh__header-content p { - color: #ccc; /* Softer white for dark mode */ -} - - -html.theme-dark .chh__header-content p { - color: #ccc; -} - -.chh__header-content__input { - width: 100%; - margin: 2rem 0 1rem; - display: flex; - flex-direction: row; -} - -.chh__header-content__input--link { - text-decoration: none; - font-size: 20px; - line-height: 28px; - font-weight: 600; -} - -.chh__header-content__input--link:hover { - text-decoration: none; -} - -.chh__header-content__input button { - flex: 0.6; - width: 100%; - min-height: 50px; - font-weight: 400; - font-size: 20px; - line-height: 28px; - border: 2px solid #ff4820; - padding: 0 0.8rem; - cursor: pointer; - outline: none; - border-radius: 5px; - margin: 0 1rem 0 0; - background: linear-gradient(90deg, #07ab8a5f 0%, transparent 100%); -} - -html.theme-dark .chh__header-content__input button { - background: rgba(255, 255, 255, 0.05); - border-color: #4fe3c5; - color: #fff; -} - -.chh__header-content__input button:last-child { - background: transparent; -} - -.chh__header-content__input button:hover { - background: linear-gradient(90deg, #f0a90fd0 0%, transparent 100%); -} - -.chh__header-image { - width: auto; - height: auto; - flex: 1 0 0%; - display: flex; - justify-content: center; - align-items: center; - padding: 0.3rem; - border-radius: 10% 40%; -} - -.chh__header-image img { - transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); - filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.6)); -} - -.chh__header-image img:hover { - transform: scale(1.03); - filter: drop-shadow(10px 10px 20px rgba(169, 158, 158, 0.6)); -} - -@keyframes float { - 0% { - transform: translateY(0); - } - 50% { - transform: translateY(-10px); - } - 100% { - transform: translateY(0); - } -} - -.float-animation { - animation: float 2s ease-in-out infinite; -} - -/* ===== Responsive ===== */ -@media screen and (max-width: 1050px) { + display: flex; + justify-content: center; + align-items: center; + transform-style: preserve-3d; + overflow: hidden; + padding: 3rem auto; + + } .chh__header { - flex-direction: column; + display: flex; + flex-direction: row; + position: relative; } - + .chh__header-content { - margin: 0 0 3rem; - } -} - -@media screen and (max-width: 768px) { - .gradient__text { - text-align: center; + width: 100%; + flex: 1; + display: flex; + justify-content: center; + align-items: flex-start; + flex-direction: column; + margin-right: 2rem; } -} - -@media screen and (max-width: 650px) { + .chh__header-content h1 { - font-size: 48px; - line-height: 60px; + font-weight: 700; + font-size: 62px; + line-height: 75px; + letter-spacing: -0.04em; + background: linear-gradient( + 30deg, + rgba(206, 86, 174, 0.972) 0%, + rgb(253 29 29 / 100%) 50%, + rgb(252 176 69 / 100%) 100% + ); + background-clip: text; + -webkit-text-fill-color: transparent; } - + .chh__header-content p { - font-size: 16px; - line-height: 24px; + font-weight: 400; + font-size: 22px; + text-align: justify; + line-height: 30px; + margin-top: 1.5rem; } - - .chh__header-content__input input, + + .chh__header-content__input { + width: 100%; + margin: 2rem 0 1rem; + + display: flex; + flex-direction: row; + } + + .chh__header-content__input--link { + text-decoration: none; + font-size: 20px; + line-height: 28px; + font-weight: 600; + } + + .chh__header-content__input--link:hover { + text-decoration: none; + } + .chh__header-content__input button { - font-size: 16px; - line-height: 24px; + flex: 0.6; + width: 100%; + min-height: 50px; + font-weight: 400; + font-size: 20px; + line-height: 28px; + border: 2px solid #ff4820; + padding: 0 0.8rem; + cursor: pointer; + outline: none; + border-radius: 5px; + margin: 0 1rem 0 0; } -} - -@media screen and (max-width: 490px) { + + .chh__header-content__input button:last-child { + background: transparent; + } + + .chh__header-content__input button:hover { + background: linear-gradient(90deg, #f0a90fd0 0%, transparent 100%); + } + + .chh__header-image { + width: auto; + height: auto; + flex: 1 0 0%; + display: flex; + justify-content: center; + align-items: center; + padding: 0.3rem; + border-radius: 10% 40%; + } + + .chh__header-image img { + transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1); + filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.6)); + } + + .chh__header-image img:hover { + transform: scale(1.03); + filter: drop-shadow(10px 10px 20px rgba(169, 158, 158, 0.6)); + } + + @keyframes imageHoverEffect { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.03); + } + 100% { + transform: scale(1.06); + } + } + + .chh__header-image img:hover { + animation: damping 0.6s ease-in-out; /* Applied damping keyframes on hover */ + } + + @media screen and (max-width: 1050px) { + .chh__header { + flex-direction: column; + } + + .chh__header-content { + margin: 0 0 3rem; + } + } + @media screen and (max-width: 768px) { + .gradient__text{ + text-align: center; + } + + } + @media screen and (max-width: 350px) { + .anouncementBarContent, .navbar__title{ + font-size: medium; + } + } + @media screen and (max-width: 280px) { + .navbar__title{ + display: none; + } + } + @media screen and (max-width: 650px) { + .chh__header-content h1 { + font-size: 48px; + line-height: 60px; + } + + .chh__header-content p { + font-size: 16px; + line-height: 24px; + } + + .chh__header-content__input input, + .chh__header-content__input button { + font-size: 16px; + line-height: 24px; + } + } + + @media screen and (max-width: 490px) { + .chh__header-content h1 { + font-size: 36px; + line-height: 48px; + } + + .chh__header-content p { + font-size: 14px; + line-height: 24px; + } + + .chh__header-content__input input, + .chh__header-content__input button { + font-size: 12px; + line-height: 16px; + } + } + .chh__header { + display: flex; + flex-direction: row; + } + + .chh__header-content { + flex: 1; + display: flex; + justify-content: center; + align-items: flex-start; + flex-direction: column; + + margin-right: 5rem; + } + .chh__header-content h1 { - font-size: 36px; - line-height: 48px; + line-height: 75px; + letter-spacing: -0.04em; } - + .chh__header-content p { - font-size: 14px; - line-height: 24px; + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 28px; + + margin-top: 1.5rem; } - - .chh__header-content__input input, + + .chh__header-content__input { + width: 100%; + margin: 2rem 0 1rem; + + display: flex; + flex-direction: row; + } + + .chh__header-content__input input { + flex: 2; + width: 100%; + min-height: 50px; + font-family: var(--font-family); + font-weight: 400; + font-size: 20px; + line-height: 28px; + border: 2px solid #ff4820; + padding: 0 1rem; + outline: none; + + border-top-left-radius: 5px; + border-bottom-left-radius: 5px; + } + .chh__header-content__input button { - font-size: 12px; - line-height: 16px; + flex: 0.6; + width: 100%; + min-height: 50px; + font-weight: 400; + font-size: 20px; + line-height: 28px; + background: linear-gradient(90deg, #07ab8a5f 0%, transparent 100%); + border: 2px solid #20e3a2; + padding: 0 1rem; + cursor: pointer; + outline: none; + + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; } -} - -@media screen and (max-width: 350px) { - .anouncementBarContent, - .navbar__title { - font-size: medium; + + @media screen and (max-width: 1050px) { + .chh__header { + flex-direction: column; + } + + .chh__header-content { + margin: 0 0 3rem; + } } -} - -@media screen and (max-width: 280px) { - .navbar__title { - display: none; + + @media screen and (max-width: 650px) { + .chh__header-content h1 { + font-size: 48px; + line-height: 60px; + } + + .chh__header-content p { + font-size: 16px; + line-height: 24px; + } + + .chh__header-content__input input, + .chh__header-content__input button { + font-size: 16px; + line-height: 24px; + } } -} + + @media screen and (max-width: 490px) { + .chh__header-content h1 { + font-size: 36px; + line-height: 48px; + } + + .chh__header-content p { + font-size: 14px; + line-height: 24px; + } + + .chh__header-content__input input, + .chh__header-content__input button { + font-size: 12px; + line-height: 16px; + } + } + + @keyframes float { + 0% { + transform: translateY(0); + } + + 50% { + transform: translateY(-10px); + } + + 100% { + transform: translateY(0); + } + } + + .float-animation { + animation: float 2s ease-in-out infinite; + } + diff --git a/src/components/ui/FirebaseAuthGithub.tsx b/src/components/ui/FirebaseAuthGithub.tsx index eb8d80b3..ffc12197 100644 --- a/src/components/ui/FirebaseAuthGithub.tsx +++ b/src/components/ui/FirebaseAuthGithub.tsx @@ -50,7 +50,7 @@ const FirebaseAuthGithub: React.FC = () => { return (
- diff --git a/src/pages/blogs/Blogs.css b/src/pages/blogs/Blogs.css new file mode 100644 index 00000000..8274791b --- /dev/null +++ b/src/pages/blogs/Blogs.css @@ -0,0 +1,84 @@ +.blogs-section { + background-color: var(--bg-color); + color: var(--text-color); + padding: 2rem 1rem; + min-height: 100vh; + transition: background-color 0.3s ease, color 0.3s ease; +} + +:root { + --bg-color: #ffffff; + --text-color: #111827; +} + +html[data-theme='dark'] { + --bg-color: #1a1a1a; + --text-color: #d1d5db; +} + +body { + background-color: var(--bg-color); + color: var(--text-color); +} + +.blogs-description { + font-size: 1.125rem; + color: var(--muted-text); + line-height: 1.6; + max-width: 700px; + margin: 0 auto; +} + +:root { + --muted-text: #374151; +} + +html[data-theme='dark'] { + --muted-text: #d1d5db; +} + + +.blog-card { + background-color: var(--blog-card-bg); + color: var(--blog-text-primary); + transition: background-color 0.3s, color 0.3s; +} + +.blog-title { + font-size: 1.25rem; + font-weight: 600; + color: var(--blog-text-primary); + margin-bottom: 0.5rem; +} + +.blog-desc { + font-size: 0.95rem; + color: var(--blog-text-muted); + margin-bottom: 1rem; +} + +.read-more { + font-weight: 600; + text-decoration: none; + transition: color 0.3s; +} + +.light-link { + color: #3b82f6; +} + +.dark-link { + color: #93c5fd; +} + +:root { + --blog-card-bg: #ffffff; + --blog-text-primary: #111827; + --blog-text-muted: #6b7280; +} + +html[data-theme="dark"] { + --blog-card-bg: #1a1a1a; + --blog-text-primary: #f3f4f6; + --blog-text-muted: #9ca3af; +} diff --git a/src/pages/blogs/index.tsx b/src/pages/blogs/index.tsx index b2df23a2..7fd76142 100644 --- a/src/pages/blogs/index.tsx +++ b/src/pages/blogs/index.tsx @@ -4,6 +4,8 @@ import Layout from "@theme/Layout"; import Link from "@docusaurus/Link"; import blogs from "../../database/blogs"; import Head from "@docusaurus/Head"; +import { useColorMode } from "@docusaurus/theme-common"; +import "./Blogs.css"; // Make sure this path is correct export default function Blogs(): React.JSX.Element { const { siteConfig } = useDocusaurusContext(); @@ -20,15 +22,16 @@ export default function Blogs(): React.JSX.Element { src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js" /> -
+

Welcome to RecodeHive Blogs

-

+

Discover web development articles ranging from HTML and CSS to JavaScript, React, Node.js, DSA, and much more.

+
{blogs.map((blog) => ( @@ -40,10 +43,11 @@ export default function Blogs(): React.JSX.Element { ); } - const BlogCard = ({ blog }) => { + const { colorMode } = useColorMode(); + return ( -
+
{ />
-

{blog.title}

-

- {blog.description} -

+

{blog.title}

+

{blog.description}

- Read More + Read More →
); -}; \ No newline at end of file +}; diff --git a/src/pages/our-sponsors/Sponsors.css b/src/pages/our-sponsors/Sponsors.css index 77e6cf49..4a6949bb 100644 --- a/src/pages/our-sponsors/Sponsors.css +++ b/src/pages/our-sponsors/Sponsors.css @@ -1,55 +1,95 @@ -.sponsor-page { - padding: 2rem; - max-width: 1200px; +:root { + --sponsor-bg-light: #ffffff; + --sponsor-bg-dark: #1a1a1a; + + --sponsor-text-light: #111827; + --sponsor-text-dark: #d1d5db; + + --sponsor-muted-light: #6b7280; + --sponsor-muted-dark: #9ca3af; + + --tab-active-color-light: #342ccc; + --tab-active-color-dark: #7c3aed; + + --card-bg-light: #ffffff; + --card-bg-dark: #1a1a1a; + + --circle-bg-light: #eef2ff; + --circle-bg-dark: #1e293b; + + --text-primary-light: #1f2937; + --text-primary-dark: #d1d5db; + + --text-muted-light: #6b7280; + --text-muted-dark: #9ca3af; + } + + html[data-theme='dark'] { + --sponsor-bg-light: var(--sponsor-bg-dark); + --sponsor-text-light: var(--sponsor-text-dark); + --sponsor-muted-light: var(--sponsor-muted-dark); + --tab-active-color-light: var(--tab-active-color-dark); + --card-bg-light: var(--card-bg-dark); + --circle-bg-light: var(--circle-bg-dark); + --text-primary-light: var(--text-primary-dark); + --text-muted-light: var(--text-muted-dark); + } + + /* Page layout */ + .sponsor-page { + padding: 2rem 1rem; margin: 0 auto; -} - -.sponsor-page .sponsor-header { + width: 100%; + min-height: 100vh; + background-color: var(--sponsor-bg-light); + color: var(--sponsor-text-light); + } + + /* Header section */ + .sponsor-header { text-align: center; margin-bottom: 2rem; -} - -.TitleText { + } + + .TitleText { margin-top: 1rem; - background: linear-gradient(90deg, - rgb(152 0 255) 0%, - rgb(246 41 41) 50%, - rgb(255 169 8) 100%); + background: linear-gradient(90deg, #9800ff, #f62929, #ffa908); background-clip: text; + -webkit-background-clip: text; -webkit-text-fill-color: transparent; -} - -/* Tabs Styling */ -.tabs { + color: transparent; + } + + /* Tabs */ + .tabs { display: flex; justify-content: center; margin-bottom: 2rem; border-bottom: 1px solid #e2e8f0; padding-bottom: 0.5rem; -} - -.tab-button { + } + + .tab-button { padding: 0.75rem 1.5rem; margin: 0 0.5rem; border: none; background: none; font-size: 1.1rem; font-weight: 600; - color: #6b7280; + color: var(--sponsor-muted-light); cursor: pointer; transition: all 0.3s ease; position: relative; - outline: none; display: flex; align-items: center; gap: 8px; -} - -.tab-button.active { - color: #4f46e5; -} - -.tab-badge { + } + + .tab-button.active { + color: var(--tab-active-color-light); + } + + .tab-badge { background-color: #e0e7ff; color: #4f46e5; border-radius: 9999px; @@ -58,23 +98,14 @@ padding: 2px 8px; min-width: 24px; text-align: center; - transition: all 0.2s ease; -} - -.tab-button.active .tab-badge { - background-color: #4f46e5; + } + + .tab-button.active .tab-badge { + background-color: var(--tab-active-color-light); color: white; -} - -.no-sponsors { - grid-column: 1 / -1; - text-align: center; - padding: 2rem; - color: #6b7280; - font-size: 1.1rem; -} - -.tab-button::after { + } + + .tab-button::after { content: ''; position: absolute; bottom: -0.5rem; @@ -83,96 +114,96 @@ height: 3px; background: linear-gradient(90deg, #4f46e5, #7c3aed); transition: width 0.3s ease; -} - -.tab-button.active::after { + } + + .tab-button.active::after { width: 100%; -} - -.tab-content { + } + + /* Tab content */ + .tab-content { display: none; animation: fadeIn 0.5s ease; -} - -.tab-content.active { + } + + .tab-content.active { display: block; -} - -.sponsor-page .sponsors-list { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); - gap: 20px; - margin-top: 20px; -} - -.sponsor-page .sponsor-card { + } + + .no-sponsors { + grid-column: 1 / -1; + text-align: center; + padding: 2rem; + font-size: 1.1rem; + color: var(--sponsor-muted-light); + } + + /* Sponsor grid */ + .sponsors-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: 20px; + margin-top: 20px; + } + + /* Sponsor card */ + .sponsor-card { position: relative; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; - background: #fff; + background: var(--card-bg-light); + color: var(--text-primary-light); text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; align-items: center; -} - -.sponsor-page .sponsor-card::before { - position: absolute; - top: 0; - left: -100%; - width: 100%; - height: 100%; - transition: left 0.3s ease-in-out; -} - -.sponsor-page .sponsor-card:hover::before { - left: 100%; -} - -.sponsor-page .sponsor-card:hover { + } + + .sponsor-card:hover { transform: translateY(-5px); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); -} - -.sponsor-page .sponsor-card img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.sponsor-page .sponsor-card .avatar-wrapper { + } + + .avatar-wrapper { width: 110px; height: 110px; margin-bottom: 12px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px #f9fafb; -} - -.sponsor-page .sponsor-card .sponsor-name { + } + + .sponsor-card img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .sponsor-name { font-size: 1.2rem; font-weight: 600; margin-bottom: 4px; - color: #111827; -} - -.sponsor-page .sponsor-card .sponsor-desc { + color: var(--text-primary-light); + } + + .sponsor-desc { font-size: 0.95rem; - color: #4b5563; + color: var(--text-muted-light); margin-bottom: 10px; line-height: 1.4; -} - -.sponsor-page .sponsor-card .social-links { + } + + /* Social links */ + .social-links { display: flex; justify-content: center; gap: 10px; margin-top: 8px; -} - -.sponsor-page .sponsor-card .social-links a { + } + + .social-links a { display: flex; width: 36px; height: 36px; @@ -182,53 +213,50 @@ align-items: center; justify-content: center; transition: background-color 0.3s, transform 0.3s; -} - - -.sponsor-page .sponsor-card .social-links a:hover { + } + + .social-links a:hover { transform: scale(1.1); -} - -.sponsor-page .sponsor-card .social-links a.github:hover { + } + + .social-links a.github:hover { background-color: #333; -} - -.sponsor-page .sponsor-card .social-links a.linkedin:hover { + } + .social-links a.linkedin:hover { background-color: #0073b1; -} - -.sponsor-page .sponsor-card .social-links a.twitter:hover { + } + .social-links a.twitter:hover { background-color: #1da1f2; -} - -.sponsor-page .sponsor-card .social-links a.instagram:hover { + } + .social-links a.instagram:hover { background-color: #e4405f; -} - -.sponsor-page .sponsor-card.empty-card { - cursor: pointer; - background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%); - border: 2px dashed #4f46e5; - color: #4f46e5; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - padding: 40px 20px; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - min-height: 200px; - border-radius: 12px; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); - position: relative; - overflow: hidden; -} - -.sponsor-page .sponsor-card.empty-card:hover { - transform: translateY(-3px); - box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); -} - -.sponsor-page .sponsor-card.empty-card::before { + } + + /* Empty Card CTA */ + .empty-card { + cursor: pointer; + background: var(--card-bg-light); + color: var(--tab-active-color-light); + border: 2px dashed var(--tab-active-color-light); + padding: 40px 20px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 200px; + border-radius: 12px; + position: relative; + overflow: hidden; + transition: all 0.3s ease; + } + + .empty-card:hover { + transform: translateY(-3px); + box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.1), + 0 10px 10px -5px rgba(0, 0, 0, 0.04); + } + + .empty-card::before { content: ''; position: absolute; top: 0; @@ -236,42 +264,26 @@ width: 300%; height: 100%; background: linear-gradient( - 90deg, - transparent, - rgba(255, 255, 255, 0.4), - transparent + 90deg, + transparent, + rgba(255, 255, 255, 0.4), + transparent ); transition: 0.5s; z-index: 1; -} - -.sponsor-page .sponsor-card.empty-card:hover::before { + } + + .empty-card:hover::before { left: 100%; -} - -.sponsor-page .sponsor-card.empty-card:hover { - transform: translateY(-5px); - box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); -} - -.sponsor-page .sponsor-card.empty-card h3 { - font-size: 1.1rem; - font-weight: 600; - color: #4f46e5; - margin-top: 1rem; - z-index: 2; -} - -.sponsor-page .sponsor-card.empty-card .join-icon { - font-size: 2rem; - color: #4f46e5; - transition: transform 0.3s ease; + } + + .empty-card h3, + .empty-card .join-icon { z-index: 2; - margin: 0; - padding: 0; -} - -.sponsor-page .scanner-popup { + } + + /* Modal / Scanner */ + .scanner-popup { position: fixed; top: 0; left: 0; @@ -282,34 +294,40 @@ justify-content: center; align-items: center; z-index: 1000; -} - -.scanner-content { + } + + .scanner-content { position: relative; padding: 2rem; border-radius: 8px; text-align: center; max-width: 400px; width: 100%; - background: white; -} - -.sponsors-section { - margin-top: 2rem; -} - -.support-links { - margin-top: 5rem; - display: flex; - justify-content: center; - gap: 16px; - align-items: center; -} - -.scanner-button { + background: var(--card-bg-light); + color: var(--text-primary-light); + } + + .close-button { + position: absolute; + top: 12px; + right: 12px; + background: transparent; + border: none; + color: #444; + cursor: pointer; + padding: 4px; + transition: color 0.2s; + } + + .close-button:hover { + color: #000; + } + + /* CTA Button */ + .scanner-button { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: white; - padding: 12px 28px 12px 28px; /* Fixed padding to prevent jumping */ + padding: 12px 28px; border-radius: 8px; cursor: pointer; border: none; @@ -317,19 +335,17 @@ font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; - box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3), 0 2px 4px -1px rgba(79, 70, 229, 0.2); - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + transition: all 0.3s ease; display: inline-flex; align-items: center; justify-content: center; gap: 8px; + min-width: 200px; position: relative; overflow: hidden; - min-width: 200px; - text-align: center; -} - -.scanner-button::before { + } + + .scanner-button::before { content: ''; position: absolute; top: 0; @@ -339,45 +355,27 @@ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: 0.5s; z-index: 1; -} - -.scanner-button > * { + } + + .scanner-button > * { position: relative; z-index: 2; -} - -.scanner-button:hover { + } + + .scanner-button:hover { transform: translateY(-2px); - box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4), 0 4px 6px -2px rgba(79, 70, 229, 0.2); -} - -.scanner-button:hover::before { + box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.4), + 0 4px 6px -2px rgba(79, 70, 229, 0.2); + } + + .scanner-button:hover::before { left: 100%; -} - -.scanner-button:active { - transform: translateY(0); - box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3), 0 2px 4px -1px rgba(79, 70, 229, 0.2); -} - -.close-button { - position: absolute; - top: 12px; - right: 12px; - background: transparent; - border: none; - color: #444; - cursor: pointer; - padding: 4px; - transition: color 0.2s; -} - -.close-button:hover { - color: #000; -} - -@media (max-width: 600px) { + } + + /* Responsive */ + @media (max-width: 600px) { .sponsor-card { - width: 100%; + width: 100%; } -} \ No newline at end of file + } + \ No newline at end of file diff --git a/src/pages/our-sponsors/index.tsx b/src/pages/our-sponsors/index.tsx index 15653ba4..85522223 100644 --- a/src/pages/our-sponsors/index.tsx +++ b/src/pages/our-sponsors/index.tsx @@ -1,218 +1,218 @@ import React, { useState, useRef, useEffect } from "react"; -import SponsorCard from "./SponsorCard"; -import "./Sponsors.css"; import Layout from "@theme/Layout"; -import { FaPlusCircle, FaTimes } from 'react-icons/fa'; import Head from "@docusaurus/Head"; +import { FaPlusCircle, FaTimes } from "react-icons/fa"; import sponsors from "@site/src/database/sponsors"; -import { useHistory } from '@docusaurus/router'; +import SponsorCard from "./SponsorCard"; +import "./Sponsors.css"; +import { useColorMode } from "@docusaurus/theme-common"; -type TabType = 'current' | 'past'; +type TabType = "current" | "past"; const OurSponsors: React.FC = () => { - const [showScanner, setShowScanner] = useState(false); - const [activeTab, setActiveTab] = useState('current'); + return ( + + +