Merge remote-tracking branch 'refs/remotes/origin/main'

AdityaInnovates · AdityaInnovates · commit 6066cb428689 · 2025-09-15T18:40:19.000+05:30
diff --git a/src/components/Contact/Contact.jsx b/src/components/Contact/Contact.jsx
@@ -4,8 +4,8 @@ import Button from "../ui/Button/Button";
 import { motion } from "framer-motion";
 
 export default function Contact() {
-  const whatsappNumber = "918208689558";
-  const whatsappMessage = "Hello! I’m interested in connecting with DCODE.";
+  
+  const whatsappCommunityLink = "https://chat.whatsapp.com/KJNLA2R4hDE3M6FK4PK801";
 
   return (
     <motion.div
@@ -15,101 +15,62 @@ export default function Contact() {
       transition={{ duration: 0.5 }}
     >
       <section className="w-full pt-4 pb-8 md:py-24 bg-[#121212] relative overflow-hidden px-4 sm:px-6">
-        {/* Background glow - smaller on mobile */}
+  
         <div className="absolute w-[300px] h-[210px] md:w-[600px] md:h-[420px] bg-[#01FF80] opacity-10 blur-[50px] md:blur-[100px] rounded-full z-0 -bottom-20 md:bottom-auto md:top-1/2 left-1/2 transform -translate-x-1/2 md:-translate-y-1/2" />
 
-        {/* Main container */}
+  
         <div className="w-full max-w-4xl lg:max-w-6xl xl:max-w-7xl mx-auto h-auto md:h-[300px] lg:h-[367px] bg-[#151515] border border-[rgba(25,221,113,0.3)] rounded-xl lg:rounded-[20px] relative z-10 overflow-hidden flex flex-col md:flex-row">
-          {/* Tech tags section */}
+  
           <div className="hidden md:flex md:w-[40%] h-full items-center justify-center relative">
             <div className="absolute w-[70px] h-[70px] bg-[rgba(1,153,77,0.2)] border border-[rgba(25,221,113,0.3)] rounded-[15px] flex items-center justify-center z-10">
               <Code className="text-lime-400 w-6 h-6" />
             </div>
-
-            {/* Tech tags */}
-            <span className="absolute top-[20%] left-[10%] px-2 py-0.5 text-[#01994D] text-[15px] bg-[rgba(25,221,113,0.05)] border border-[rgba(118,133,41,0.3)] rounded-full">
-              React
-            </span>
-            <span className="absolute top-[20%] right-[18%] px-2 py-0.5 text-[#01994D] text-[15px] bg-[rgba(25,221,113,0.05)] border border-[rgba(118,133,41,0.3)] rounded-full">
-              AI/ML
-            </span>
-            <span className="absolute top-[50%] left-[5%] px-2 py-0.5 text-[#01994D] text-[15px] bg-[rgba(25,221,113,0.05)] border border-[rgba(118,133,41,0.3)] rounded-full">
-              Open Source
-            </span>
-            <span className="absolute top-[50%] right-[15%] px-2 py-0.5 text-[#01994D] text-[15px] bg-[rgba(25,221,113,0.05)] border border-[rgba(118,133,41,0.3)] rounded-full">
-              JavaScript
-            </span>
-            <span className="absolute bottom-[25%] left-[25%] px-2 py-0.5 text-[#01994D] text-[15px] bg-[rgba(25,221,113,0.05)] border border-[rgba(118,133,41,0.3)] rounded-full">
-              Node.js
-            </span>
-            <span className="absolute bottom-[25%] right-[25%] px-2 py-0.5 text-[#01994D] text-[15px] bg-[rgba(25,221,113,0.05)] border border-[rgba(118,133,41,0.3)] rounded-full">
-              Python
-            </span>
-            <span className="absolute bottom-[5%] left-[15%] px-2 py-0.5 text-[#01994D] text-[15px] bg-[rgba(25,221,113,0.05)] border border-[rgba(118,133,41,0.3)] rounded-full">
-              Vue.js
-            </span>
-            <span className="absolute bottom-[5%] right-[15%] px-2 py-0.5 text-[#01994D] text-[15px] bg-[rgba(25,221,113,0.05)] border border-[rgba(118,133,41,0.3)] rounded-full">
-              Angular
-            </span>
+  
+            <span className="absolute top-[20%] left-[10%] px-2 py-0.5 text-[#01994D] text-[15px] bg-[rgba(25,221,113,0.05)] border border-[rgba(118,133,41,0.3)] rounded-full">React</span>
+            <span className="absolute top-[20%] right-[18%] px-2 py-0.5 text-[#01994D] text-[15px] bg-[rgba(25,221,113,0.05)] border border-[rgba(118,133,41,0.3)] rounded-full">AI/ML</span>
+            <span className="absolute top-[50%] left-[5%] px-2 py-0.5 text-[#01994D] text-[15px] bg-[rgba(25,221,113,0.05)] border border-[rgba(118,133,41,0.3)] rounded-full">Open Source</span>
+            <span className="absolute top-[50%] right-[15%] px-2 py-0.5 text-[#01994D] text-[15px] bg-[rgba(25,221,113,0.05)] border border-[rgba(118,133,41,0.3)] rounded-full">JavaScript</span>
+            <span className="absolute bottom-[25%] left-[25%] px-2 py-0.5 text-[#01994D] text-[15px] bg-[rgba(25,221,113,0.05)] border border-[rgba(118,133,41,0.3)] rounded-full">Node.js</span>
+            <span className="absolute bottom-[25%] right-[25%] px-2 py-0.5 text-[#01994D] text-[15px] bg-[rgba(25,221,113,0.05)] border border-[rgba(118,133,41,0.3)] rounded-full">Python</span>
           </div>
 
-          {/* Contact content section */}
+          
           <div className="w-full md:w-[60%] h-full flex items-center justify-center text-white p-4 md:p-12">
             <div className="w-full max-w-md lg:max-w-lg">
               <h1 className="text-3xl sm:text-4xl md:text-4xl font-semibold text-white mb-3 md:mb-6 leading-tight">
-                Ready to boost your{" "}
-                <span className="text-[#01FF80]">development?</span>
+                Ready to boost your <span className="text-[#01FF80]">development?</span>
               </h1>
-
               <p className="text-gray-300 text-sm sm:text-base md:text-lg mb-4 md:mb-8 leading-relaxed">
-                Interested in becoming a{" "}
-                <span className="text-green-400 font-medium">
-                  Campus Ambassador
-                </span>{" "}
-                or featuring your repository on{" "}
-                <span className="text-green-400 font-medium">DCODE</span>? Feel
-                free to reach out!
+                Interested in becoming a <span className="text-green-400 font-medium">Campus Ambassador</span> or featuring your repository on <span className="text-green-400 font-medium">DCODE</span>? Feel free to reach out!
               </p>
-
               <div className="flex items-center flex-wrap gap-2 md:gap-3">
-                {/* Contact Us (WhatsApp) */}
-                {/* <a
-                href={`https://wa.me/${whatsappNumber}?text=${encodeURIComponent(whatsappMessage)}`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="bg-[#BCDD19] hover:bg-[#a8c516] text-black font-medium px-4 py-2 md:px-5 md:py-3 rounded text-xs md:text-sm transition-colors duration-200 flex items-center gap-2"
-              >
-                Contact us
-              </a> */}
-                <div className="flex flex-col sm:flex-row">
-                  <Button className="w-full sm:w-auto !py-2 !px-4">
-                    <a
-                      
-                      rel="noopener noreferrer"
-                      href={"/contact"}
-                    >
-                      Contact us
-                    </a>
-                  </Button>
-                </div>
+                {/* --- UPDATED: Join Community Button --- */}
+                <Button className="w-full sm:w-auto !py-2 !px-4">
+                  <a
+                    href={whatsappCommunityLink}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Join Community
+                  </a>
+                </Button>
 
-                {/* Email */}
+                {/* Email Button */}
                 <a
-                  href="mailto:contact@dcode.codes@gmail.com"
-                  // className="text-white pt-3 md:p-4 rounded border border-[#D5D5D533] flex items-center justify-center hover:bg-[#ffffff08] transition-colors"
+                  href="mailto:dcode.codes@gmail.com"
                   className="text-white h-fit w-fit !py-2 !px-4 rounded border border-[#D5D5D533] flex items-center justify-center hover:bg-[#ffffff08] transition-colors"
                 >
-                  <Mail className="w-4 h-4 md:w-5 md:h-5" />
+                  <Mail className="w-4 h-4 md:w-5 md-h-5" />
                 </a>
 
-                {/* WhatsApp icon */}
+                {/* --- UPDATED: WhatsApp Icon Button --- */}
                 <a
-                  href={`https://wa.me/${whatsappNumber}?text=${encodeURIComponent(whatsappMessage)}`}
+                  href={whatsappCommunityLink}
                   target="_blank"
                   rel="noopener noreferrer"
                   className="text-white h-fit w-fit !py-2 !px-4 rounded border border-[#D5D5D533] flex items-center justify-center hover:bg-[#ffffff08] transition-colors"
                 >
-                  <FaWhatsapp className="w-4 h-4 md:w-5 md:h-5" />
+                  <FaWhatsapp className="w-4 h-4 md:w-5 md-h-5" />
                 </a>
               </div>
             </div>
@@ -118,4 +79,4 @@ export default function Contact() {
       </section>
     </motion.div>
   );
-}
+}
diff --git a/src/pages/Repositories/repositoriesListing.jsx b/src/pages/Repositories/repositoriesListing.jsx
@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useMemo, useCallback } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { useRepositoriesStore } from "../../store/useRepositoriesStore";
-import { Link, useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import {
   Star,
   Cpu,
@@ -11,6 +11,8 @@ import {
   BookOpen,
   Calendar,
   Tag,
+  ChevronDown,
+  ChevronUp,
 } from "lucide-react";
 import { motion, AnimatePresence } from "framer-motion";
 import DashboardFooter from "../../components/dashboard/DashboardFooter";
@@ -60,13 +62,11 @@ const RepositoriesListing = () => {
     projects,
     pagination,
     filters,
-    sort,
     loadingList,
     error,
     fetchProjects,
     setSearch,
     setFilter,
-    setSort,
     goToPage,
     clearFiltersAndSearch,
   } = useRepositoriesStore();
@@ -77,10 +77,21 @@ const RepositoriesListing = () => {
   const [showFilters, setShowFilters] = useState(false);
   const [activeFilterType, setActiveFilterType] = useState("category");
 
+  // --- NEW STATE for showing all filters ---
+  const [showAllTags, setShowAllTags] = useState(false);
+  const [showAllTech, setShowAllTech] = useState(false);
+
   useEffect(() => {
     fetchProjects();
   }, []);
 
+  // --- NEW EFFECT to reset view when switching tabs ---
+  useEffect(() => {
+    setShowAllTags(false);
+    setShowAllTech(false);
+  }, [activeFilterType]);
+
+
   const handleRepoClick = (id, event) => {
     if (event.target.tagName === "A" || event.target.closest("a")) {
       return;
@@ -183,7 +194,7 @@ const RepositoriesListing = () => {
                   <List size={20} />
                 </button>
               </div>
-              {/* <button
+              <button
                 onClick={() => setShowFilters(!showFilters)}
                 className="flex w-full md:w-auto items-center justify-center gap-2 bg-transparent border border-[#3A3A3A] text-white px-4 py-3 rounded-lg hover:bg-[#2A2A2A] transition-colors relative"
               >
@@ -193,17 +204,16 @@ const RepositoriesListing = () => {
                     {activeFiltersCount}
                   </span>
                 )}
-              </button> */}
+              </button>
             </div>
           </div>
 
-          {/* --- MODIFIED ANIMATION --- */}
           <AnimatePresence>
             {showFilters && (
               <motion.div
                 className="overflow-hidden mt-6 pt-6 border-t border-[#23252B]"
                 initial={{ opacity: 0, maxHeight: 0 }}
-                animate={{ opacity: 1, maxHeight: "500px" }} // Animate to a height large enough for the content
+                animate={{ opacity: 1, maxHeight: "500px" }}
                 exit={{ opacity: 0, maxHeight: 0 }}
                 transition={{ duration: 0.4, ease: "easeInOut" }}
               >
@@ -233,14 +243,14 @@ const RepositoriesListing = () => {
                 </div>
 
                 {activeFilterType === "category" && (
-                  <div className="flex flex-wrap gap-2">
+                  <div className="flex flex-wrap gap-2 items-center">
                     <button
                       onClick={() => setFilter("tags", [])}
                       className={`px-3 py-1 text-xs rounded-full ${filters.tags.length === 0 ? "bg-[#C6FF3D] text-black" : "bg-[#2A2A2A] text-[#A1A1AA]"}`}
                     >
                       All Categories
                     </button>
-                    {allTags.map((tag) => (
+                    {(showAllTags ? allTags : allTags.slice(0, 10)).map((tag) => (
                       <button
                         key={tag}
                         onClick={() => setFilter("tags", [tag])}
@@ -249,17 +259,26 @@ const RepositoriesListing = () => {
                         {tag}
                       </button>
                     ))}
+                    {allTags.length > 10 && (
+                      <button
+                        onClick={() => setShowAllTags(!showAllTags)}
+                        className="text-xs text-[#C6FF3D] hover:underline flex items-center gap-1"
+                      >
+                        {showAllTags ? "Show Less" : "Show More"}
+                        {showAllTags ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+                      </button>
+                    )}
                   </div>
                 )}
                 {activeFilterType === "tech" && (
-                  <div className="flex flex-wrap gap-2">
+                  <div className="flex flex-wrap gap-2 items-center">
                     <button
                       onClick={() => setFilter("tech", [])}
                       className={`px-3 py-1 text-xs rounded-full ${filters.tech.length === 0 ? "bg-[#C6FF3D] text-black" : "bg-[#2A2A2A] text-[#A1A1AA]"}`}
                     >
                       All Technologies
                     </button>
-                    {allTechStacks.map((tech) => (
+                    {(showAllTech ? allTechStacks : allTechStacks.slice(0, 10)).map((tech) => (
                       <button
                         key={tech}
                         onClick={() => setFilter("tech", [tech])}
@@ -268,6 +287,15 @@ const RepositoriesListing = () => {
                         {tech}
                       </button>
                     ))}
+                    {allTechStacks.length > 10 && (
+                      <button
+                        onClick={() => setShowAllTech(!showAllTech)}
+                        className="text-xs text-[#C6FF3D] hover:underline flex items-center gap-1"
+                      >
+                        {showAllTech ? "Show Less" : "Show More"}
+                        {showAllTech ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+                      </button>
+                    )}
                   </div>
                 )}
               </motion.div>
@@ -340,6 +368,8 @@ const RepositoriesListing = () => {
   );
 };
 
+// --- Child Components (No changes needed below this line) ---
+
 const ProjectCardGrid = ({ project, onClick, formatDate }) => (
   <motion.div
     onClick={onClick}
@@ -459,4 +489,4 @@ const EmptyState = ({ onClear }) => (
   </motion.div>
 );
 
-export default RepositoriesListing;
+export default RepositoriesListing;
