Community Card Component #23 (#27)

* Remove old card community component

* Add new community card component

* Fix import of community card component

* Add logos to public dir

* refactor!: Integrate `SocialLinks` into `Links` interface for improved maintainability

Originally, props were independently defined in both `communities.astro` page and `CommunityCard` component. While explicit prop definitions offer clarity, this approach introduced redundancy and made it harder to align with `Community` interface. As result, maintaining consistency across components became challenging, especially when passing nested props to child components like SocialLinks and Tags.

Now, `SocialLinks` interface has been properly nested inside `Links` interface (`Communities.ts`). This adjustment establishes a common structure across components, improving scalability and error traceability. It also simplifies prop propagation and reduces code duplication.

* refactor!: Implement `Community` and `SocialLinks` interfaces across `CommunityCard` and children components

Originally, props were declared explicitly in `CommunityCard` and its children components. While this approach offered clarity at the beginning, it also may cause   inconsistencies, especially as the application scales or interfaces evolve.
Now, `Community` and `SocialLinks` interfaces have been implemented consistently across `CommunityCard` and its children components. This refactor ensures a unified data structure, reduces code duplication, and simplifies maintenance.

* refactor!: Create svg files from icons and implement them in `SocialLinks.astro` component

At the beginning, social icons were implemented as svg tags directly in `SocialLinks.astro` component. Now, these icons are used to create svgs files as source for `<Fragment>` tags. This way, we have a more friendly and maintanable icon implementation

* fix: Change svg files content

Used a new source for svg icons to show them properly in website (credits: icons8.com)

* refactor: Update community links structure and integrate social links in CommunityCard

---------

Co-authored-by: nsandoya <[email protected]>
Co-authored-by: Iván Manzaba <[email protected]>

Author: 3 people

public/herux.png

@@ -2,36 +2,36 @@
     {
       "name": "Kernel Chaos",
       "description": "Kernel Chaos es un espacio hacker comunitario dedicado a fomentar la colaboración y el aprendizaje entre entusiastas de Linux y FOSS.",
-      "links": {"website": "https://kernelchaos.org", "social": "https://instagram.com/kernelchaosec"},
+      "links": {"website": "https://kernelchaos.org", "social": {"instagramUrl": "https://instagram.com/kernelchaosec", "githubUrl": "", "linkedinUrl": ""}},
       "tags": [
         "FOSS",
         "Open Source",
         "Programming"
       ],
-      "image": "https://images.unsplash.com/photo-1561070791-2526d30994b5?auto=format&fit=crop&q=80&w=300"
+      "image": "/kernel-chaos.png"
     },
     {
       "name": "Wordpress Guayaquil",
       "description": "Reuniones orientadas a hacer que WordPress sea abierto y accesible para quien esté interesadx en usarlo, desarrollarlo o hacer negocios con él.",
-      "links": {"website": "https://www.meetup.com/wordpress-guayaquil-meetup", "social": "https://instagram.com/wpguayaquil"},
+      "links": {"website": "https://www.meetup.com/wordpress-guayaquil-meetup", "social": {"instagramUrl": "https://instagram.com/wpguayaquil", "githubUrl": "", "linkedinUrl": ""}},
       "tags": [
         "Design",
         "UI",
         "UX",
         "Creative"
       ],
-      "image": "https://images.unsplash.com/photo-1561070791-2526d30994b5?auto=format&fit=crop&q=80&w=300"
+      "image": "/wordpress.png"
     },
     {
       "name": "HerUX",
       "description": "Primera comunidad de Mujeres Profesionales apasionadas por la Experiencia del Usuario de #guayaquil.",
-      "links": {"website": "https://ec.linkedin.com/company/her-ux", "social": "https://www.instagram.com/her.uxec"},
+      "links": {"website": "https://ec.linkedin.com/company/her-ux", "social": {"instagramUrl": "https://www.instagram.com/her.uxec", "githubUrl": "", "linkedinUrl": "https://www.linkedin.com/company/her-ux/"}},
       "tags": [
         "UX",
         "UI",
         "Creative"
       ],
-      "image": "https://images.unsplash.com/photo-1561070791-2526d30994b5?auto=format&fit=crop&q=80&w=300"
+      "image": "/herux.png"
     }
   ]
 

public/icons/github.svg

@@ -0,0 +1,16 @@
+---
+interface Props {
+  logoUrl: string;
+  title: string;
+}
+
+const { logoUrl, title } = Astro.props;
+---
+<div class="relative group items-center">
+  <div class="absolute -inset-0.5 bg-gradient-to-r rounded-full opacity-75 group-hover:opacity-100 blur transition duration-200"></div>
+  <img
+    src={logoUrl}
+    alt={title}
+    class="relative w-24 h-24 rounded-full object-cover bg-white"
+  />
+</div>

public/icons/instagram.svg

@@ -0,0 +1,37 @@
+---
+import SocialLinks from './SocialLinks.astro';
+import Tags from './Tags.astro';
+import Avatar from './Avatar.astro';
+import type {Community} from '../../interfaces/communities'
+
+const {
+  name,
+  description,
+  tags,
+  image="/path-to-default-logo.png",
+  links
+} = Astro.props as Community;
+---
+
+<div class="bg-white rounded-2xl p-6 max-w-lg drop-shadow-md">
+
+  <div class="flex items-start gap-4">
+    <Avatar logoUrl={image} title={name} />
+    <div class="flex-1 space-y-3">
+      <div>
+        <h3 class="text-xl font-semibold text-gray-900 mb-1">
+          <a href={links?.website}>{name}</a>
+        </h3>
+        <p class="text-gray-600 text-sm leading-relaxed">{description}</p>
+      </div>
+      
+      <Tags tags={tags} />
+      
+      <div class="pt-2 border-t border-gray-100">
+        <SocialLinks
+          {...links?.social}
+        />
+      </div>
+    </div>
+  </div>
+</div>