update: overall ui in funding, community ,development,and token (#437)

* update: funding program page

* style: update mdx-card style

* Update dependencies, add new images, and enhance community pages

- Updated the "swiper" dependency in package.json and package-lock.json to allow for minor version updates.
- Added multiple new images to the public/images directory for use in community and educational sections.
- Introduced new components for community pages, including FeatureCard and Carousel, to improve the presentation of information.
- Enhanced existing community pages with new sections and improved layout for better user experience.
- Updated various markdown files to reflect new content and structure for the Akash Network community initiatives.

* Refactor community pages and remove outdated content

- Updated the swiper.d.ts file to uncomment and properly define React components for Swiper integration.
- Deleted multiple markdown files and associated images related to Akash EDU courses that are no longer relevant, including 'Akash Console 101' and 'Praetor 101'.
- Removed unused images from the community pages to clean up the project structure.
- Enhanced the community page layout by refining type definitions and improving code readability in the [...slug].astro file.
- Adjusted global CSS styles for better responsiveness and layout consistency across various screen sizes.

* Refactor card and hero-section components for improved layout and styling

- Updated card.astro to enhance layout responsiveness and simplify class structures.
- Adjusted hero-section.astro to improve heading styles for better readability.
- Modified funding-program index.mdx to clean up commented code and enhance heading styles.
- Refined global CSS for consistent container styling across components.
- Improved overall user experience by streamlining component structures and enhancing visual presentation.

* Update links in community and funding program pages for improved navigation

- Changed the Akash EDU sign-up link in the community page to direct users to the new URL.
- Updated links in the funding program page to point to specific GitHub resources for bounties and discussions, enhancing user access to relevant information.

* Enhance funding program page and card component

- Updated card.astro to conditionally render the ButtonLink based on the presence of a link, improving component logic.
- Added a new image (card4.png) to the funding program section.
- Modified index.mdx to include a new card for "Overclock Labs Based Grants," providing additional information on funding opportunities.
- Cleaned up whitespace and improved formatting for better readability.

* Update AKT features section with new SVG assets and improve image references

- Replaced PNG images with SVG format for better scalability in the AKT 2.0 Features section of the Token Homepage.
- Updated image paths in the index.md file to reflect the new SVG assets, enhancing visual quality and consistency across the platform.

* Replace card4.png with an updated version to enhance visual quality on the funding program page.

* Refactor token page assets and update image references

- Replaced existing image references in the hero-section and AKT features section with new paths to SVG assets for improved scalability and visual consistency.
- Removed outdated image files (akt-features.svg, akt-features.png, and akt-features-dark.svg) to streamline the asset management.
- Updated the schema definition for the token page to eliminate unused image properties, enhancing code clarity and maintainability.

* Update Homepage feature images to WebP format for improved performance

- Replaced PNG images with WebP format in the features section of the Homepage for better loading times and visual quality.
- Updated image paths in index.md to reflect the new WebP assets, enhancing consistency across the platform.
- Removed outdated PNG files to streamline asset management.

* Replace hero.png with hero.webp for improved performance and visual quality

- Deleted outdated PNG images and added new WebP format images to enhance loading times and visual consistency.
- Updated image references in the hero-section component to reflect the new WebP asset.

* Refactor AKT features SVG assets for improved performance and visual consistency

- Replaced the existing akt-features-image.svg with a new optimized SVG version, enhancing scalability and visual quality.
- Updated filter definitions and removed outdated filters to streamline the SVG structure.
- Cleaned up the SVG code for better maintainability and performance.
- Ensured all image references are consistent with the new SVG asset, improving overall asset management.

* Refactor AKT features SVG for improved performance and visual consistency

- Updated the akt-features-image.svg with optimized SVG code, enhancing scalability and visual quality.
- Introduced new filter definitions and removed outdated filters to streamline the SVG structure.
- Cleaned up the SVG code for better maintainability and performance.
- Ensured all image references are consistent with the new SVG asset, improving overall asset management.

* Replace outdated SVG asset with new PNG for AKT features section

- Added a new PNG image (akt-feat.png) to replace the previously used SVG (akt-features-image.svg) for improved performance and visual consistency.
- Updated image reference in the token page to reflect the new PNG asset, enhancing overall asset management.

* Refactor CTA and Footer Components for Improved Visibility and Consistency

- Introduced a utility function to conditionally hide the CTA based on the current pathname, enhancing user experience by preventing unnecessary visibility on specific pages.
- Updated the CTA component to dynamically adjust its content based on the current route, improving contextual relevance for users.
- Refactored the footer component to utilize the same visibility logic, ensuring a consistent user interface across the application.
- Enhanced the layout and styling of both components for better responsiveness and visual appeal.
- Added new SVG icons to the responsibilities section, enriching the visual representation of validator roles within the Akash Network.

* Enhance AKT Features Section and Update How It Works Content

- Refactored the AktFeatures component to include a clickable image that opens a new tab, improving user interaction and visual appeal.
- Updated the How It Works section to define a new structure with detailed cards for Security, Governance, Value Exchange, and Incentivization, enhancing content clarity and engagement.
- Removed outdated howItWorksSection data from the markdown file to streamline content management.
- Updated the card component to utilize dynamic HTML for icon rendering, improving flexibility and maintainability.
- Adjusted image references and added a URL prop to relevant components for better asset management and navigation.

* Remove outdated SVG assets from Token Homepage

- Deleted multiple SVG files including exchange.svg, governance.svg, hero-illustration-dark.svg, hero-illustration-mobile.svg, hero-illustration.svg, incentive.svg, and security.svg to streamline asset management and improve performance.
- This cleanup enhances the overall visual consistency and maintainability of the project by removing unused or redundant assets.

* Refactor layout and spacing for community and development pages

- Updated various components to improve layout consistency and responsiveness, particularly adjusting margin classes from 'md:mt-40' to 'lg:mt-40' for better visual alignment on larger screens.
- Enhanced the PointerSection component's styling to ensure full-width flexibility and improved layout on community pages.
- Adjusted card component's maximum width to maintain a cohesive design across different screen sizes.
- These changes aim to enhance user experience and visual consistency across the application.

* Refactor FAQ section and update image assets for funding program

- Updated the FAQ section to safely access the last updated date using optional chaining, improving code robustness.
- Replaced the outdated PNG asset (card3.png) with a new WebP format image (card3.webp) for better performance and visual quality.
- Adjusted image references in the funding program index file to reflect the new WebP asset, enhancing overall asset management.

* Refactor community and token page components for improved visuals and functionality

- Updated the responsibilities section with new SVG icons to enhance the visual representation of validator roles.
- Refactored the AktFeatures component to replace the ArrowUpRight icon with a custom SVG, improving user interaction and aesthetics.
- Enhanced the How It Works section by updating the icon for better clarity and engagement.
- Modified the Akash Insiders page to improve the Carousel component's loading behavior, ensuring a smoother user experience.
- These changes aim to enhance the overall user experience and visual consistency across the application.

* Update Akash Validator CTA link for improved user engagement

- Changed the link in the "Become an Akash Validator" button to a new Typeform URL, ensuring users are directed to the correct form for validator registration.
- This update enhances the user experience by providing accurate and up-to-date information for potential validators.

* Add new trading links for AKT on Token Homepage

package.json

@@ -59,7 +59,7 @@
     "remark-directive": "^3.0.0",
     "remark-smartypants": "^2.0.0",
     "shiki": "^0.14.5",
-    "swiper": "10.2.0",
+    "swiper": "^10.2.0",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.0.24",
     "tailwindcss-animate": "^1.0.7",
@@ -73,4 +73,4 @@
     "prettier-plugin-astro": "^0.12.0",
     "prettier-plugin-tailwindcss": "^0.5.4"
   }
-}
+}

src/components/CTA.astro

@@ -1,50 +1,69 @@
 ---
+import { shouldHideCta } from "@/utils/hideCta";
+import clsx from "clsx";
 import ButtonLink from "./ui/button-link.astro";
 
 const pathname = Astro.url.pathname;
 
-let title = "Experience the Supercloud.";
-let button = {
-  label: "Deploy Now",
-  link: "https://console.akash.network/",
-  id: "console-home",
+const defaultContent = {
+  title: "Experience the Supercloud.",
+  button: {
+    label: "Deploy Now",
+    link: "https://console.akash.network/",
+    id: "console-home",
+  },
 };
 
-if (pathname.startsWith("/about/providers")) {
-  title = "Join the Supercloud";
-  button = {
-    label: "Become a Provider",
-    link: "/providers",
-    id: "provider-home",
-  };
-}
+const pathContent = {
+  "/about/providers": {
+    title: "Join the Supercloud",
+    button: {
+      label: "Become a Provider",
+      link: "/providers",
+      id: "provider-home",
+    },
+  },
+  "/ecosystem/providers": {
+    title: "Join the Supercloud Provider Network",
+    button: {
+      label: "Become a Provider",
+      link: "/about/providers/",
+      id: "provider-ecosystem",
+    },
+  },
+};
+
+const content = pathname.startsWith("/about/providers")
+  ? pathContent["/about/providers"]
+  : pathname.startsWith("/ecosystem/providers")
+    ? pathContent["/ecosystem/providers"]
+    : defaultContent;
 
-if (pathname.startsWith("/ecosystem/providers")) {
-  title = "Join the Supercloud Provider Network";
-  button = {
-    label: "Become a Provider",
-    link: "/about/providers/",
-    id: "provider-ecosystem",
-  };
-}
+const { title, button } = content;
+
+const shouldHide = shouldHideCta(pathname);
 ---
 
 <section
-  class={`
-  ${
-    pathname.startsWith("/community/") ||
-    pathname.startsWith("/pricing/gpus") ||
-    pathname === "/akash-accelerate-2024"
-      ? "hidden"
-      : ""
-  }
-  mt-10 flex flex-col items-center justify-around bg-white border-y  px-[30px] py-[80px] text-center dark:bg-background2 md:mt-16 lg:py-[160px]`}
+  class={clsx(
+    shouldHide && "hidden",
+    "flex flex-col items-center justify-around",
+    "bg-white dark:bg-background2",
+    "border-y",
+    "px-[30px] py-[80px] lg:py-[160px]",
+    "mt-20",
+    "text-center"
+  )}
 >
-  <p
-    class="max-w-[1000px] font-instrument text-3xl text-foreground md:text-5xl md:leading-snug xl:text-6xl 2xl:text-[80px]"
+  <h2
+    class={clsx(
+      "max-w-[1000px] font-instrument text-foreground",
+      "text-3xl md:text-5xl xl:text-6xl 2xl:text-[80px]",
+      "md:leading-snug"
+    )}
   >
     {title}
-  </p>
+  </h2>
 
   <div class="mt-6 md:mt-10">
     <div class="hidden md:block">
@@ -63,6 +82,7 @@ if (pathname.startsWith("/ecosystem/providers")) {
         link={button.link}
         size="md"
         className="bg-primary text-white hover:bg-darkGray"
+        id={button.id}
       >
         {button.label}
       </ButtonLink>

src/components/cards/FeatureCard.astro

@@ -0,0 +1,45 @@
+---
+import clsx from "clsx";
+
+type Props = {
+  icon?: string;
+  card: {
+    image?: { src: string };
+    title: string;
+    description: string;
+  };
+  className?: string;
+  autoHeight?: boolean;
+};
+const { icon, card, className, autoHeight } = Astro.props as Props;
+---
+
+<div class={clsx("flex flex-col items-start", className)}>
+  <div
+    class={"flex-shrink-0 rounded-lg border border-paraDark bg-background2 p-3"}
+  >
+    {
+      icon ? (
+        <div set:html={icon} />
+      ) : card.image ? (
+        <svg class="h-6 w-6 " fill="currentColor" viewBox="0 0 24 24">
+          <use
+            xlink:href={`${card.image.src}#img`}
+            href={`${card.image.src}#img`}
+          />
+        </svg>
+      ) : null
+    }
+  </div>
+
+  <div class="mt-5 md:mt-6">
+    <h3
+      class={clsx("text-base font-semibold ", autoHeight ? "" : "md:h-14")}
+      set:html={card.title}
+    />
+    <p
+      set:html={card.description}
+      class="mt-2 flex-shrink-0 text-xs md:mt-4 md:text-sm"
+    />
+  </div>
+</div>

src/components/community-pages/carousel.tsx

@@ -0,0 +1,64 @@
+import { Autoplay } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/react";
+
+import "swiper/css";
+
+const images = [
+  "/images/slides/slide1.png",
+  "/images/slides/slide2.png",
+  "/images/slides/slide3.png",
+  "/images/slides/slide4.png",
+  "/images/slides/slide5.png",
+  "/images/slides/slide6.png",
+  "/images/slides/slide7.png",
+  "/images/slides/slide8.png",
+  "/images/slides/slide1.png",
+  "/images/slides/slide2.png",
+  "/images/slides/slide3.png",
+  "/images/slides/slide4.png",
+  "/images/slides/slide5.png",
+  "/images/slides/slide6.png",
+  "/images/slides/slide7.png",
+  "/images/slides/slide8.png",
+];
+
+const Carousel = () => {
+  return (
+    <div className="swiper-linear relative  w-full overflow-hidden bg-background ">
+      {/* disabled gradient for future use */}
+      {/* <div className="absolute inset-0 z-[2] hidden bg-gradient-to-r  from-background from-0%  to-transparent to-5% md:block "></div>
+      <div className="absolute inset-0 z-[2] hidden bg-gradient-to-l  from-background from-0%  to-transparent to-5% md:block "></div> */}
+      <Swiper
+        modules={[Autoplay]}
+        spaceBetween={5}
+        slidesPerView="auto"
+        loop={true}
+        centeredSlides={true}
+        speed={4000}
+        freeMode={true}
+        autoplay={{
+          delay: 0,
+          disableOnInteraction: false,
+          pauseOnMouseEnter: false,
+        }}
+        className="w-full"
+      >
+        {images.map((src, index) => (
+          <SwiperSlide key={index} className="!w-auto ">
+            <div className="mx-3  md:mx-5 lg:mx-[28px]">
+              <img
+                src={src}
+                alt={`Image ${index + 1}`}
+                height={380}
+                width={260}
+                className=" aspect-auto !max-h-[14rem] w-full md:h-full md:!max-h-[unset]  md:object-cover"
+              />
+            </div>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+    </div>
+  );
+};
+
+export default Carousel;

src/components/community-pages/pointer-section.astro

@@ -0,0 +1,80 @@
+---
+import clsx from "clsx";
+type Props = {
+  title: string;
+  description?: string;
+  items: {
+    title: string;
+    items?: string[];
+  }[];
+  image: string;
+  reverse?: boolean;
+  type?: "list" | "sublist" | "paragraph";
+};
+const {
+  title,
+  items,
+  image,
+  reverse,
+  type = "list",
+  description,
+} = Astro.props;
+---
+
+<section
+  class={clsx(
+    "not-prose mx-auto  w-full mt-0 flex max-w-[1155px] flex-col gap-8 text-base  lg:gap-14",
+    reverse ? "lg:flex-row-reverse" : "lg:flex-row"
+  )}
+>
+  <div class="flex flex-1 flex-col gap-4">
+    <h2 class="text-3xl font-semibold">{title}</h2>
+    {
+      description && (
+        <p class="text-sm font-semibold text-foreground md:text-base">
+          {description}
+        </p>
+      )
+    }
+
+    {
+      type === "list" && (
+        <ul class="list-disc space-y-0.5 pl-5 text-sm text-para md:text-base">
+          {items.map((item) => (
+            <li>{item.title}</li>
+          ))}
+        </ul>
+      )
+    }
+    {
+      type === "sublist" && (
+        <ul class="   mt-2 flex flex-col gap-4 text-sm   md:text-base">
+          {items.map((item) => (
+            <li>
+              <strong>{item.title}</strong>
+              {item.items && (
+                <ul class="list-disc pl-5 text-para">
+                  {item.items.map((i) => (
+                    <li>{i}</li>
+                  ))}
+                </ul>
+              )}
+            </li>
+          ))}
+        </ul>
+      )
+    }
+    {
+      type === "paragraph" && (
+        <div class="mt-2 flex flex-col gap-4 text-sm text-para md:text-base">
+          {items.map((item) => (
+            <p>{item.title}</p>
+          ))}
+        </div>
+      )
+    }
+  </div>
+  <div class="relative order-first flex-1 md:order-last">
+    <img src={image} alt={title} class="relative z-10 m-0 w-full max-w-full" />
+  </div>
+</section>