diff --git a/package.json b/package.json index 4baaca75..5c27c976 100644 --- a/package.json +++ b/package.json @@ -15,15 +15,12 @@ "typecheck": "tsc" }, "dependencies": { - "@docusaurus/plugin-content-blog": "^3.8.1", - "@docusaurus/plugin-content-docs": "^3.8.1", - "@docusaurus/plugin-content-pages": "^3.8.1", + "@docusaurus/core": "3.7.0", + "@docusaurus/plugin-content-docs": "3.7.0", "@docusaurus/plugin-google-analytics": "^3.8.1", - "@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/plugin-ideal-image": "3.7.0", + "@docusaurus/preset-classic": "3.7.0", + "@docusaurus/theme-mermaid": "3.7.0", "@docusaurus/theme-search-algolia": "3.7.0", "@floating-ui/react": "^0.27.8", "@giscus/react": "^3.1.0", @@ -56,7 +53,6 @@ "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 3e4c2061..a5c46acd 100644 --- a/src/components/header/header.css +++ b/src/components/header/header.css @@ -1,321 +1,230 @@ .chh__header--body { - display: flex; - justify-content: center; - align-items: center; - transform-style: preserve-3d; - overflow: hidden; - padding: 3rem auto; - - } - .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; - } - - .chh__header-content p { - font-weight: 400; - font-size: 22px; - text-align: justify; - line-height: 30px; - margin-top: 1.5rem; - } - - .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; - } - - .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; - } + 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); } - @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; - } + 50% { + transform: translateY(-10px); } - - @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; - } + 100% { + transform: translateY(0); } +} + +.float-animation { + animation: float 2s ease-in-out infinite; +} + +/* ===== Responsive ===== */ +@media screen and (max-width: 1050px) { .chh__header { - display: flex; - flex-direction: row; + flex-direction: column; } - + .chh__header-content { - flex: 1; - display: flex; - justify-content: center; - align-items: flex-start; - flex-direction: column; - - margin-right: 5rem; + margin: 0 0 3rem; } - +} + +@media screen and (max-width: 768px) { + .gradient__text { + text-align: center; + } +} + +@media screen and (max-width: 650px) { .chh__header-content h1 { - line-height: 75px; - letter-spacing: -0.04em; + font-size: 48px; + line-height: 60px; } - + .chh__header-content p { - font-family: var(--font-family); - font-weight: 400; - font-size: 20px; - line-height: 28px; - - margin-top: 1.5rem; + font-size: 16px; + line-height: 24px; } - - .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 input, .chh__header-content__input button { - 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: 1050px) { - .chh__header { - flex-direction: column; - } - - .chh__header-content { - margin: 0 0 3rem; - } + font-size: 16px; + line-height: 24px; } - - @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; } - - @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-content p { + font-size: 14px; + line-height: 24px; } - - @keyframes float { - 0% { - transform: translateY(0); - } - - 50% { - transform: translateY(-10px); - } - - 100% { - transform: translateY(0); - } + + .chh__header-content__input input, + .chh__header-content__input button { + font-size: 12px; + line-height: 16px; } - - .float-animation { - animation: float 2s ease-in-out infinite; +} + +@media screen and (max-width: 350px) { + .anouncementBarContent, + .navbar__title { + font-size: medium; } +} +@media screen and (max-width: 280px) { + .navbar__title { + display: none; + } +} diff --git a/src/components/ui/FirebaseAuthGithub.tsx b/src/components/ui/FirebaseAuthGithub.tsx index ffc12197..eb8d80b3 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 deleted file mode 100644 index 8274791b..00000000 --- a/src/pages/blogs/Blogs.css +++ /dev/null @@ -1,84 +0,0 @@ -.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 7fd76142..b2df23a2 100644 --- a/src/pages/blogs/index.tsx +++ b/src/pages/blogs/index.tsx @@ -4,8 +4,6 @@ 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(); @@ -22,16 +20,15 @@ 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) => ( @@ -43,11 +40,10 @@ export default function Blogs(): React.JSX.Element { ); } -const BlogCard = ({ blog }) => { - const { colorMode } = useColorMode(); +const BlogCard = ({ blog }) => { 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 4a6949bb..77e6cf49 100644 --- a/src/pages/our-sponsors/Sponsors.css +++ b/src/pages/our-sponsors/Sponsors.css @@ -1,95 +1,55 @@ -: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; +.sponsor-page { + padding: 2rem; + max-width: 1200px; margin: 0 auto; - width: 100%; - min-height: 100vh; - background-color: var(--sponsor-bg-light); - color: var(--sponsor-text-light); - } - - /* Header section */ - .sponsor-header { +} + +.sponsor-page .sponsor-header { text-align: center; margin-bottom: 2rem; - } - - .TitleText { +} + +.TitleText { margin-top: 1rem; - background: linear-gradient(90deg, #9800ff, #f62929, #ffa908); + background: linear-gradient(90deg, + rgb(152 0 255) 0%, + rgb(246 41 41) 50%, + rgb(255 169 8) 100%); background-clip: text; - -webkit-background-clip: text; -webkit-text-fill-color: transparent; - color: transparent; - } - - /* Tabs */ - .tabs { +} + +/* Tabs Styling */ +.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: var(--sponsor-muted-light); + color: #6b7280; cursor: pointer; transition: all 0.3s ease; position: relative; + outline: none; display: flex; align-items: center; gap: 8px; - } - - .tab-button.active { - color: var(--tab-active-color-light); - } - - .tab-badge { +} + +.tab-button.active { + color: #4f46e5; +} + +.tab-badge { background-color: #e0e7ff; color: #4f46e5; border-radius: 9999px; @@ -98,14 +58,23 @@ padding: 2px 8px; min-width: 24px; text-align: center; - } - - .tab-button.active .tab-badge { - background-color: var(--tab-active-color-light); + transition: all 0.2s ease; +} + +.tab-button.active .tab-badge { + background-color: #4f46e5; color: white; - } - - .tab-button::after { +} + +.no-sponsors { + grid-column: 1 / -1; + text-align: center; + padding: 2rem; + color: #6b7280; + font-size: 1.1rem; +} + +.tab-button::after { content: ''; position: absolute; bottom: -0.5rem; @@ -114,96 +83,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; - } - - .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 { +} + +.sponsor-page .sponsors-list { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); + gap: 20px; + margin-top: 20px; +} + +.sponsor-page .sponsor-card { position: relative; border: 1px solid #e2e8f0; border-radius: 12px; padding: 20px; - background: var(--card-bg-light); - color: var(--text-primary-light); + background: #fff; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; align-items: center; - } - - .sponsor-card:hover { +} + +.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 { transform: translateY(-5px); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); - } - - .avatar-wrapper { +} + +.sponsor-page .sponsor-card img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.sponsor-page .sponsor-card .avatar-wrapper { width: 110px; height: 110px; margin-bottom: 12px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px #f9fafb; - } - - .sponsor-card img { - width: 100%; - height: 100%; - object-fit: cover; - } - - .sponsor-name { +} + +.sponsor-page .sponsor-card .sponsor-name { font-size: 1.2rem; font-weight: 600; margin-bottom: 4px; - color: var(--text-primary-light); - } - - .sponsor-desc { + color: #111827; +} + +.sponsor-page .sponsor-card .sponsor-desc { font-size: 0.95rem; - color: var(--text-muted-light); + color: #4b5563; margin-bottom: 10px; line-height: 1.4; - } - - /* Social links */ - .social-links { +} + +.sponsor-page .sponsor-card .social-links { display: flex; justify-content: center; gap: 10px; margin-top: 8px; - } - - .social-links a { +} + +.sponsor-page .sponsor-card .social-links a { display: flex; width: 36px; height: 36px; @@ -213,50 +182,53 @@ align-items: center; justify-content: center; transition: background-color 0.3s, transform 0.3s; - } - - .social-links a:hover { +} + + +.sponsor-page .sponsor-card .social-links a:hover { transform: scale(1.1); - } - - .social-links a.github:hover { +} + +.sponsor-page .sponsor-card .social-links a.github:hover { background-color: #333; - } - .social-links a.linkedin:hover { +} + +.sponsor-page .sponsor-card .social-links a.linkedin:hover { background-color: #0073b1; - } - .social-links a.twitter:hover { +} + +.sponsor-page .sponsor-card .social-links a.twitter:hover { background-color: #1da1f2; - } - .social-links a.instagram:hover { +} + +.sponsor-page .sponsor-card .social-links a.instagram:hover { background-color: #e4405f; - } - - /* 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 { +} + +.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 { content: ''; position: absolute; top: 0; @@ -264,26 +236,42 @@ 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; - } - - .empty-card:hover::before { +} + +.sponsor-page .sponsor-card.empty-card:hover::before { left: 100%; - } - - .empty-card h3, - .empty-card .join-icon { +} + +.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; z-index: 2; - } - - /* Modal / Scanner */ - .scanner-popup { + margin: 0; + padding: 0; +} + +.sponsor-page .scanner-popup { position: fixed; top: 0; left: 0; @@ -294,40 +282,34 @@ 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: 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: white; +} + +.sponsors-section { + margin-top: 2rem; +} + +.support-links { + margin-top: 5rem; + display: flex; + justify-content: center; + gap: 16px; + align-items: center; +} + +.scanner-button { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); color: white; - padding: 12px 28px; + padding: 12px 28px 12px 28px; /* Fixed padding to prevent jumping */ border-radius: 8px; cursor: pointer; border: none; @@ -335,17 +317,19 @@ font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; - transition: all 0.3s ease; + 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); display: inline-flex; align-items: center; justify-content: center; gap: 8px; - min-width: 200px; position: relative; overflow: hidden; - } - - .scanner-button::before { + min-width: 200px; + text-align: center; +} + +.scanner-button::before { content: ''; position: absolute; top: 0; @@ -355,27 +339,45 @@ 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%; - } - - /* Responsive */ - @media (max-width: 600px) { +} + +.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) { .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 85522223..15653ba4 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 SponsorCard from "./SponsorCard"; -import "./Sponsors.css"; -import { useColorMode } from "@docusaurus/theme-common"; +import { useHistory } from '@docusaurus/router'; -type TabType = "current" | "past"; +type TabType = 'current' | 'past'; const OurSponsors: React.FC = () => { - return ( - - -