properly handle links

site-new/src/components/Card.tsx

@@ -11,6 +11,7 @@ import JSMobile from "@site/assets/icons/JSMobile";
 import GoMobile from "@site/assets/icons/GoMobile";
 import KotlinMobile from "@site/assets/icons/KotlinMobile";
 import { IconButtonLink } from "./IconButton";
+import Link from "@docusaurus/Link";
 
 type CardProps = {
   icon?: React.ComponentType<{ className: string; fill?: string }>;
@@ -113,14 +114,12 @@ function Card({
   text,
   buttonText,
   url,
-  orientation = "vertical", // Default orientation is vertical
+  orientation = "vertical",
   size = "large",
   ...props
 }: CardProps) {
   const Image = image;
-
   const selectedTheme = theme || randomTheme();
-
   const isHoverEnabled =
     props.type === "buttonText" || props.type === "default" || !props.type;
 
@@ -165,11 +164,8 @@ function Card({
 
   const currentSize = sizeClasses[size];
 
-  return (
-    <div
-      className={`${className} group flex items-center justify-center ${orientation === "horizontal" ? "flex-col md:flex-row" : "flex-col"} w-full ${currentSize.container} ${themeClass} ${borderClass} mb-4 transition-all duration-300`}
-    >
-      {/* image  */}
+  const CardContent = (
+    <>
       {Image && (
         <img
           src={Image}
@@ -178,19 +174,15 @@ function Card({
         />
       )}
 
-      {/* card body container  */}
       <div className="grid h-full w-full grid-cols-1 gap-4 p-8">
-        {/* icon  */}
         {Icon && (
           <Icon
             className={`h-[126px] w-[84px] md:h-[150px] md:w-[100px] ${iconClass} transition-all duration-300`}
           />
         )}
 
-        {/* eyebrow for spotlight card  */}
         {eyebrow && <p className="my-0 text-sm md:text-lg">{eyebrow}</p>}
 
-        {/* card heading  */}
         <Heading
           as="h3"
           className={cn(
@@ -203,39 +195,49 @@ function Card({
           {title}
         </Heading>
 
-        {/* card text  */}
         {text && <p className="my-0 text-sm md:text-lg">{text}</p>}
 
-        {/* button text  */}
         {url && buttonText && (
           <Button text={buttonText} url={url} className="mt-2" />
         )}
 
-        {/* language icon buttons */}
-        <>
-          {props.type === "languageButton" &&
-            Object.keys(props.resources).some(
-              (key) => props.resources[key as Languages],
-            ) && (
-              <div className="flex gap-twist-core-spacing-8">
-                {Object.keys(props.resources).map((key) => {
-                  const value = props.resources[key as Languages];
-                  return (
-                    value && (
-                      <IconButtonLink
-                        key={key}
-                        href={value}
-                        className="leading-[0]"
-                      >
-                        {languageIconMap[key as Languages]}
-                      </IconButtonLink>
-                    )
-                  );
-                })}
-              </div>
-            )}
-        </>
+        {props.type === "languageButton" &&
+          Object.keys(props.resources).some(
+            (key) => props.resources[key as Languages],
+          ) && (
+            <div className="flex gap-twist-core-spacing-8">
+              {Object.keys(props.resources).map((key) => {
+                const value = props.resources[key as Languages];
+                return (
+                  value && (
+                    <IconButtonLink
+                      key={key}
+                      href={value}
+                      className="leading-[0]"
+                    >
+                      {languageIconMap[key as Languages]}
+                    </IconButtonLink>
+                  )
+                );
+              })}
+            </div>
+          )}
       </div>
+    </>
+  );
+
+  return url && !buttonText ? (
+    <Link
+      href={url}
+      className={`${className} group flex items-center justify-center ${orientation === "horizontal" ? "flex-col md:flex-row" : "flex-col"} w-full ${currentSize.container} ${themeClass} ${borderClass} mb-4 transition-all duration-300`}
+    >
+      {CardContent}
+    </Link>
+  ) : (
+    <div
+      className={`${className} group flex items-center justify-center ${orientation === "horizontal" ? "flex-col md:flex-row" : "flex-col"} w-full ${currentSize.container} ${themeClass} ${borderClass} mb-4 transition-all duration-300`}
+    >
+      {CardContent}
     </div>
   );
 }

site-new/src/components/Hero.tsx

@@ -15,9 +15,9 @@ function Hero({ subject, title, description, url }: HeroProps): JSX.Element {
   return (
     <BlockBg
       className="flex justify-center bg-tbd-gray-shade-2 pt-twist-core-spacing-30"
-      maxSize={150}
-      minSize={50}
-      columns={12}
+      maxSize={200}
+      minSize={100}
+      columns={24}
       rows={36}
       secondaryClassName="bg-tbd-gray-shade-1"
     >

site-new/src/page-components/community/index.tsx

@@ -19,17 +19,17 @@ const features = [
 const explore = [
   {
     title: "Code of Conduct",
-    url: "/open-source/code-of-conduct",
+    url: "/community/code-of-conduct",
     text: "We’re building open protocols, standards, and libraries. Our projects are open source because we want everyone in the economy to benefit: individuals, businesses, institutions, and government.",
   },
   {
     title: "Governance",
-    url: "/open-source/governance",
+    url: "/community/governance",
     text: "We’re building open protocols, standards, and libraries. Our projects are open source because we want everyone in the economy to benefit: individuals, businesses, institutions, and government.",
   },
   {
     title: "Monthly Spotlight",
-    url: "/open-source/monthly-spotlight",
+    url: "/community/spotlight",
     text: "We’re building open protocols, standards, and libraries. Our projects are open source because we want everyone in the economy to benefit: individuals, businesses, institutions, and government.",
   },
   {