Setup Vite dev environment and overhaul SupportUsButton UI

Shweta-281 · Shweta-281 · commit 2a117ef0d436 · 2026-03-28T20:18:12.000+05:30
diff --git a/demo/main.tsx b/demo/main.tsx
@@ -5,9 +5,14 @@ import "../src/styles/style.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <div className="min-h-screen bg-gray-950 text-white flex justify-center">
-      <div className="w-full max-w-6xl px-6 py-10">
-       <h1>SupportUsButton Demo</h1>
+    <div className="min-h-screen bg-black">
+      
+      {/* 2. Optional: A more subtle, modern header for the demo */}
+      <header className="absolute top-0 left-0 z-50 p-6">
+        <h1 className="text-sm font-mono tracking-widest text-white/30 uppercase">
+          Project: SupportUsButton / Demo
+        </h1>
+      </header>
 
       <SupportUsButton
         Theme="AOSSIE"
@@ -50,7 +55,6 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
           ],
         }}
       />
-      </div>
     </div>
   </React.StrictMode>
 );
diff --git a/index.html b/index.html
@@ -1,10 +1,13 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <title>Support Button Demo</title>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/demo/main.tsx"></script>
   </body>
-</html>
+</html>
diff --git a/src/components/SupportUsButton.tsx b/src/components/SupportUsButton.tsx
@@ -12,18 +12,40 @@ function getLogoSrc(logo?: string | { src?: string }) {
 }
 
 function SupportUsButton({
+  Theme = "dark",
+  pattern = "none",
   hero,
   organizationInformation,
   sponsors,
   ctaSection,
+  classNames = {},
+  buttonVariant = "AOSSIE",
 }: supportUsButtonProps) {
   const logo = getLogoSrc(organizationInformation.logo);
 
-  return (
-    <div className="relative min-h-screen bg-black text-white overflow-hidden">
+  // Dynamic Theme Logic
+  const isDark = Theme === "dark" || Theme === "AOSSIE";
+  const bgClass = isDark ? "bg-black text-white" : "bg-gray-50 text-gray-900";
+  const cardClass = isDark 
+    ? "bg-white/5 border-white/10 backdrop-blur-2xl" 
+    : "bg-white border-gray-200 shadow-xl";
+  const subTextClass = isDark ? "text-gray-400" : "text-gray-600";
 
-      {/* 🔥 Background Glow */}
-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(255,215,0,0.15),_transparent_60%)]"></div>
+  return (
+    <div className={`relative min-h-screen overflow-hidden transition-colors duration-500 ${bgClass} ${classNames.container || ""}`}>
+      
+      {/* Background Glow (Adjusts based on Theme) */}
+      <div className={`absolute inset-0 ${isDark 
+        ? "bg-[radial-gradient(circle_at_top,_rgba(255,215,0,0.15),_transparent_60%)]" 
+        : "bg-[radial-gradient(circle_at_top,_rgba(255,215,0,0.05),_transparent_60%)]"}`} 
+      />
+
+      {/* Pattern Overlay (Supporting the pattern prop) */}
+      {pattern !== "none" && (
+        <div className="absolute inset-0 opacity-10 pointer-events-none" 
+             style={{ backgroundImage: `url('/patterns/${pattern}.svg')` }} 
+        />
+      )}
 
       <div className="relative z-10 max-w-7xl mx-auto px-6 py-20">
 
@@ -32,12 +54,12 @@ function SupportUsButton({
           initial={{ opacity: 0, y: 40 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
-          className="text-center mb-24"
+          className={`text-center mb-24 ${classNames.Hero || ""}`}
         >
           <motion.div
             animate={{ scale: [1, 1.1, 1] }}
             transition={{ repeat: Infinity, duration: 2 }}
-            className="w-16 h-16 mx-auto mb-6 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-600 flex items-center justify-center shadow-lg"
+            className="w-16 h-16 mx-auto mb-6 rounded-full bg-gradient-to-r from-yellow-400 to-yellow-600 flex items-center justify-center shadow-lg text-2xl"
           >
             ❤️
           </motion.div>
@@ -46,7 +68,7 @@ function SupportUsButton({
             {hero.title}
           </h1>
 
-          <p className="text-gray-400 text-lg max-w-xl mx-auto">
+          <p className={`${subTextClass} text-lg max-w-xl mx-auto`}>
             {hero.description}
           </p>
         </motion.div>
@@ -56,49 +78,51 @@ function SupportUsButton({
           initial={{ opacity: 0, y: 60 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.2 }}
-          className="relative bg-white/5 backdrop-blur-2xl border border-white/10 rounded-3xl p-10 mb-24 shadow-[0_0_80px_rgba(255,215,0,0.15)]"
+          className={`relative border rounded-3xl p-10 mb-24 shadow-[0_0_80px_rgba(255,215,0,0.1)] ${cardClass} ${classNames.organizationInformation || ""}`}
         >
           {hero.sponsorLabel && (
-            <p className="text-yellow-400 text-xs uppercase tracking-widest mb-4">
+            <p className="text-yellow-500 font-bold text-xs uppercase tracking-widest mb-4">
               {hero.sponsorLabel}
             </p>
           )}
 
           <div className="flex items-center gap-6 flex-wrap">
-            {/* Logo */}
             {logo ? (
               <img
                 src={logo}
                 alt={organizationInformation.name}
-                className="w-20 h-20 rounded-xl object-cover bg-white"
+                className="w-20 h-20 rounded-xl object-cover bg-white shadow-sm"
               />
             ) : (
-              <div className="w-20 h-20 rounded-xl bg-gray-700 flex items-center justify-center">
-                <span className="text-xs">No Logo</span>
+              <div className={`w-20 h-20 rounded-xl flex items-center justify-center border-2 border-dashed ${
+                isDark 
+                  ? "bg-white/5 border-white/10 text-gray-500" 
+                  : "bg-gray-100 border-gray-300 text-gray-400"
+              }`}>
+                <span className="text-[10px] uppercase font-bold tracking-tighter">No Logo</span>
               </div>
             )}
 
-            {/* Org Info */}
+
             <div>
               <h2 className="text-3xl font-bold">
                 {organizationInformation.name}
               </h2>
-              <p className="text-gray-400">
+              <p className={subTextClass}>
                 {organizationInformation.description}
               </p>
             </div>
           </div>
 
-          {/* PROJECT */}
           {organizationInformation.projectInformation && (
-            <div className="mt-8 p-6 bg-black/40 rounded-xl border border-white/10">
-              <p className="text-yellow-400 text-sm mb-1">
+            <div className={`mt-8 p-6 rounded-xl border ${isDark ? "bg-black/40 border-white/10" : "bg-gray-50 border-gray-100"}`}>
+              <p className="text-yellow-500 text-sm font-semibold mb-1">
                 About Project
               </p>
               <h3 className="font-semibold">
                 {organizationInformation.projectInformation.name}
               </h3>
-              <p className="text-gray-400 italic">
+              <p className={`${subTextClass} italic`}>
                 "{organizationInformation.projectInformation.description}"
               </p>
             </div>
@@ -107,7 +131,7 @@ function SupportUsButton({
 
         {/* ================= SPONSORS ================= */}
         {sponsors && sponsors.length > 0 && (
-          <div className="mb-24">
+          <div className={`mb-24 ${classNames.sponsors || ""}`}>
             <h2 className="text-4xl font-bold text-center mb-12">
               Our Sponsors
             </h2>
@@ -120,30 +144,25 @@ function SupportUsButton({
                   target="_blank"
                   rel="noopener noreferrer"
                   whileHover={{ scale: 1.05 }}
-                  className="group relative bg-white/5 border border-white/10 rounded-2xl p-6 overflow-hidden"
+                  className={`group relative border rounded-2xl p-6 overflow-hidden transition-all ${cardClass}`}
                 >
-                  {/* Glow */}
-                  <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition bg-gradient-to-r from-yellow-400/20 to-transparent blur-xl"></div>
+                  <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition bg-gradient-to-r from-yellow-400/10 to-transparent blur-xl"></div>
 
                   <div className="relative z-10 text-center">
                     {s.logo ? (
                       <img
                         src={s.logo}
                         alt={s.name}
-                        className="h-24 mx-auto object-contain mb-4"
+                        className="h-20 mx-auto object-contain mb-4 filter drop-shadow-sm"
                       />
                     ) : (
-                      <div className="h-24 flex items-center justify-center bg-gray-700 rounded">
-                        <span>No Logo</span>
+                      <div className={`h-20 flex items-center justify-center rounded mb-4 ${isDark ? "bg-gray-800" : "bg-gray-100"}`}>
+                        <span className="text-sm opacity-50">No Logo</span>
                       </div>
                     )}
-
                     <h3 className="font-semibold">{s.name}</h3>
-
                     {s.sponsorshipTier && (
-                      <p className="text-gray-400 text-sm">
-                        {s.sponsorshipTier}
-                      </p>
+                      <p className={`${subTextClass} text-sm`}>{s.sponsorshipTier}</p>
                     )}
                   </div>
                 </motion.a>
@@ -157,13 +176,13 @@ function SupportUsButton({
           initial={{ opacity: 0, y: 60 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.3 }}
-          className="text-center"
+          className={`text-center ${classNames.ctaSection || ""}`}
         >
           <h2 className="text-4xl font-bold mb-4">
             {ctaSection.title}
           </h2>
 
-          <p className="text-gray-400 mb-8">
+          <p className={`${subTextClass} mb-8`}>
             {ctaSection.description}
           </p>
 
@@ -174,9 +193,13 @@ function SupportUsButton({
                 href={link.url}
                 target={link.newTab ? "_blank" : "_self"}
                 rel="noopener noreferrer"
-                whileHover={{ scale: 1.1 }}
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
               >
-                <button className="px-6 py-3 rounded-xl bg-gradient-to-r from-yellow-400 to-yellow-600 text-black font-bold shadow-lg hover:shadow-yellow-500/30 transition">
+                <button className={`px-8 py-4 rounded-xl font-bold shadow-lg transition-all 
+                  ${buttonVariant === "AOSSIE" 
+                    ? "bg-gradient-to-r from-yellow-400 to-yellow-600 text-black hover:shadow-yellow-500/40" 
+                    : "bg-blue-600 text-white hover:bg-blue-700"}`}>
                   {link.name}
                 </button>
               </motion.a>
@@ -189,4 +212,4 @@ function SupportUsButton({
   );
 }
 
-export default SupportUsButton;
+export default SupportUsButton;
diff --git a/src/styles/style.css b/src/styles/style.css
@@ -1,7 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
+@import "tailwindcss";
 /* Your custom theme */
 :root {
   --color-primary: #FFD700;
@@ -25,11 +22,10 @@
 }
 
 /* Sponsor Patterns */
-.sponsor-pattern-AOSSIE {
-  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2391c44a' fill-opacity='0.6'%3E%3Ccircle cx='15' cy='20' r='10'/%3E%3Crect x='5' y='40' width='20' height='20' rx='5'/%3E%3C/g%3E%3C/svg%3E");
+@utility sponsor-pattern-AOSSIE {
+  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org fill='%23fbbf24' fill-opacity='0.05' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3C/g%3E%3C/svg%3E");
 }
 
-/* Grid Pattern */
-.sponsor-pattern-grid {
- background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2391c44a' stroke-opacity='0.4' stroke-width='1'%3E%3Cpath d='M0 0H100M0 20H100M0 40H100M0 60H100M0 80H100M0 100H100'/%3E%3Cpath d='M0 0V100M20 0V100M40 0V100M60 0V100M80 0V100M100 0V100'/%3E%3C/g%3E%3C/svg%3E");
+@utility sponsor-pattern-grid {
+  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org d='M0 40L40 0H20L0 20M40 40V20L20 40' fill='%23fbbf24' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
 }
