fix: various fixes

* add missing dot
* make some images webp
* move lightning section
* fix some alignments
* do not show featured apps twice
* align footer

messages/en-US.json

@@ -54,7 +54,9 @@
     "pre": "Ink, the Ethereum L2 unleashed by Kraken, is live on the Superchain",
     "title": "Ink the future",
     "tagLine": "Simplified DeFi for|builders,degens,gigachads,institutions,normies,ALL",
-    "cta:exploreApps": "Explore Apps"
+    "cta:exploreApps": "Explore Apps",
+    "appsTitle": "Featured apps on Ink",
+    "appsCta": "View all apps"
   },
   "Community": {
     "title": "Join the Ink Community",
@@ -64,7 +66,7 @@
       "description": "Join the Ink community, vibe with fellow developers and get support"
     },
     "twitter": {
-      "title": "Follow us on Twitter",
+      "title": "Follow us on X",
       "description": "Stay tuned to receive all ink updates first hand"
     },
     "discord": {
@@ -87,7 +89,7 @@
   },
   "Verify": {
     "title": "Get Verified and Start Your On-Chain Journey Today",
-    "description": "Ink Verify — Seamlessly authenticate your activity, unlock rewards, and explore the limitless potential of Ink",
+    "description": "Ink Verify — Seamlessly authenticate your activity, unlock rewards, and explore the limitless potential of Ink.",
     "cta": "Connect to verify",
     "whatIsVerify": {
       "title": "What is Ink Verify?",
@@ -103,12 +105,12 @@
     },
     "haveASuggestion": {
       "title": "Have a suggestion?",
-      "description": "Ink Verify is a tool for both users and developers! Have a suggestion? Reach out to the Ink team to request additional categories here",
+      "description": "Ink Verify is a tool for both users and developers! Have a suggestion? Reach out to the Ink team to request additional categories here.",
       "contactTeam": "Contact Team"
     },
     "verifications": {
       "title": "Available verifications",
-      "description": "Discover the latest verifications on Ink"
+      "description": "Discover the latest verifications on Ink."
     }
   },
   "About": {

scripts/image-to-webp.js

@@ -9,29 +9,40 @@ const sharp = require("sharp");
 
 const ROOT = path.join(__dirname, "..");
 
+async function processImage(imagePath, file) {
+  if (file.endsWith(".webp")) {
+    return false;
+  }
+
+  const imagePathWithNewExtension = path.join(
+    imagePath,
+    `${file.split(".")[0]}.webp`
+  );
+  await sharp(path.join(imagePath, file))
+    .webp()
+    .toFile(imagePathWithNewExtension);
+  await fs.unlink(path.join(imagePath, file));
+}
+
 const run = async () => {
   const imagePath = path.join(__dirname, "..", imagePathArg);
-  const imagesInFolder = await fs.readdir(imagePath);
-
-  const processedImages = await Promise.all(
-    imagesInFolder.map(async (file) => {
-      if (file.endsWith(".webp")) {
-        return false;
-      }
-
-      const imagePathWithNewExtension = path.join(
-        imagePath,
-        `${file.split(".")[0]}.webp`
-      );
-      await sharp(path.join(imagePath, file))
-        .webp()
-        .toFile(imagePathWithNewExtension);
-      await fs.unlink(path.join(imagePath, file));
-      return true;
-    })
-  );
 
-  console.debug("Processed images:", processedImages.filter(Boolean).length);
+  if ((await fs.stat(imagePath)).isDirectory()) {
+    const imagesInFolder = await fs.readdir(imagePath);
+    const processedImages = await Promise.all(
+      imagesInFolder.map(async (file) => {
+        await processImage(imagePath, file);
+        return true;
+      })
+    );
+
+    console.debug("Processed images:", processedImages.filter(Boolean).length);
+  } else {
+    const path = imagePath.split("/").slice(0, -1).join("/");
+    const file = imagePath.split("/").pop();
+    await processImage(path, file);
+    console.debug("Processed image:", imagePath);
+  }
 };
 
 run();

src/app/[locale]/_components/Home/HomeApps.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { Button } from "@inkonchain/ink-kit";
+import { useTranslations } from "next-intl";
 
 import { ColoredText } from "@/components/ColoredText";
 import { newLayoutSectionClasses } from "@/components/styles/container";
@@ -10,15 +11,16 @@ import { AppsGrid } from "../../apps/_components/AppsGrid";
 import { inkHomeApps } from "../../apps/_components/InkApp";
 
 export const HomeApps = () => {
+  const t = useTranslations("Home");
   const query = useRouterQuery();
   return (
     <div className={newLayoutSectionClasses()}>
       <div className="flex justify-between">
         <ColoredText className="ink:text-h4" variant="purple">
-          Discover apps on Ink
+          {t("appsTitle")}
         </ColoredText>
         <Button asChild variant="secondary">
-          <Link href={{ pathname: "/apps", query }}>View all apps</Link>
+          <Link href={{ pathname: "/apps", query }}>{t("appsCta")}</Link>
         </Button>
       </div>
       <AppsGrid

src/app/[locale]/_components/Home/HomeSmallTag.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import Image from "next/image";
+import { useTranslations } from "next-intl";
+
+export const HomeSmallTag = () => {
+  const t = useTranslations("Home");
+  return (
+    <div className="flex flex-col items-start w-full ink:text-body-3-regular ink:text-text-default">
+      <div className="flex items-center justify-center ink:gap-1">
+        <Image
+          alt="a lightning bolt in a circle"
+          src="/icons/1s-block-times.svg"
+          width={20}
+          height={20}
+        />
+        <div>{t("pre")}</div>
+      </div>
+    </div>
+  );
+};

src/app/[locale]/_components/Home/HomeTagLine.tsx

@@ -9,7 +9,7 @@ export const HomeTagLine = () => {
     <Card>
       <CardContent.Tagline
         title={
-          <ColoredText variant="ink">
+          <ColoredText variant="ink" className="ink:text-h1">
             The future isn&apos;t written,
             <br />
             it&apos;s waiting to be inked.

src/app/[locale]/_components/Home/HomeTitle.tsx

@@ -1,6 +1,5 @@
 "use client";
 import { Button, InkIcon } from "@inkonchain/ink-kit";
-import Image from "next/image";
 import { useTranslations } from "next-intl";
 
 import { ColoredText } from "@/components/ColoredText";
@@ -16,17 +15,6 @@ export const HomeTitle = () => {
   return (
     <>
       <PageHeader
-        pre={
-          <div className="flex items-center justify-center ink:gap-1">
-            <Image
-              alt="a lighting bolt in a circle"
-              src="/icons/1s-block-times.svg"
-              width={20}
-              height={20}
-            />
-            <div>{t("pre")}</div>
-          </div>
-        }
         title="Ink the future"
         description={<TagLineWithHighlight text={t("tagLine")} />}
         cta={

src/app/[locale]/_components/InkLogo.tsx

@@ -31,14 +31,14 @@ export const InkLogoImage: React.FC = () => {
   return (
     <>
       <Image
-        src="/logo/ink-mark-light.png"
+        src="/logo/ink-mark-light.webp"
         alt="Ink Logo"
         width={40}
         height={40}
         className="dark:hidden"
       />
       <Image
-        src="/logo/ink-mark-dark.png"
+        src="/logo/ink-mark-dark.webp"
         alt="Ink Logo"
         width={40}
         height={40}

src/app/[locale]/_components/PageHeader.tsx

@@ -8,14 +8,12 @@ interface PageHeaderProps {
   description: React.ReactNode;
   cta?: React.ReactNode;
   size?: "default" | "home" | "section";
-  pre?: React.ReactNode;
 }
 
 export const PageHeader = ({
   title,
   description,
   cta,
-  pre,
   size = "default",
 }: PageHeaderProps) => {
   return (
@@ -32,11 +30,6 @@ export const PageHeader = ({
           "max-w-screen-2xl": size === "home",
         })}
       >
-        {pre && (
-          <div className="flex flex-col items-start w-full ink:text-body-3-regular ink:text-text-default">
-            {pre}
-          </div>
-        )}
         <ColoredText
           className={classNames({
             "ink:text-h2": size === "default",

src/app/[locale]/about/_components/InkTheFuture.tsx

@@ -13,7 +13,7 @@ export function InkTheFuture() {
       image={
         <CardContent.Image>
           <ParallaxedHoverImage
-            src="/ink-the-future.png"
+            src="/ink-the-future.webp"
             className="scale-150 object-[0px_80px] rotate-180 sm:object-[-80px_80px] sm:rotate-0 sm:scale-125"
             width={400}
             height={400}

src/app/[locale]/apps/_components/AppsContent.tsx

@@ -24,15 +24,27 @@ interface AppsContentProps {
   currentCategory?: string;
 }
 
+function hasActiveFilters(filters: InkAppFilters): boolean {
+  return (
+    (filters.network && filters.network !== "Mainnet") ||
+    (filters.categories && filters.categories.length > 0) ||
+    (filters.tags && filters.tags.length > 0)
+  );
+}
+
+function hasActiveFiltersOrSearch(filters: InkAppFilters): boolean {
+  return !!filters.search || hasActiveFilters(filters);
+}
+
 export function AppsContent({ currentCategory }: AppsContentProps) {
   const searchParams = useSearchParams();
   const network = getNetwork(searchParams.get("network"));
   const category = currentCategory || searchParams.get("category");
   const tags = searchParams.get("tags");
-
+  const search = searchParams.get("search");
   const [page, setPage] = useState(0);
-  const [search, setSearch] = useState<string>("");
-  const [filters, setFilters] = useState<Omit<InkAppFilters, "search">>({
+  const [filters, setFilters] = useState<InkAppFilters>({
+    search: search || "",
     categories: category ? category.split(",") : [],
     tags: tags ? tags.split(",") : [],
     network: network ? network : "Mainnet",
@@ -68,6 +80,14 @@ export function AppsContent({ currentCategory }: AppsContentProps) {
         )
           return false;
 
+        if (hasActiveFiltersOrSearch(filters)) {
+          if (
+            inkFeaturedApps.some((featuredApp) => featuredApp.id === app.id)
+          ) {
+            return true;
+          }
+        }
+
         return true;
       }),
     [filters]
@@ -76,7 +96,7 @@ export function AppsContent({ currentCategory }: AppsContentProps) {
   const filteredApps = useMemo(
     () =>
       filteredAppsWithoutSearchTerms.filter((app) => {
-        const searchTerm = search.toLowerCase();
+        const searchTerm = filters.search.toLowerCase();
         if (
           searchTerm &&
           !app.name.toLowerCase().includes(searchTerm) &&
@@ -89,14 +109,18 @@ export function AppsContent({ currentCategory }: AppsContentProps) {
           return false;
         return true;
       }),
-    [filteredAppsWithoutSearchTerms, search]
+    [filteredAppsWithoutSearchTerms, filters.search]
   );
 
   const updateSearchParams = useCallback(
     (newParams: Record<string, string>) => {
-      const { network, category, tags, ...params } = Object.fromEntries(
-        searchParams.entries()
-      );
+      const {
+        network,
+        category,
+        tags,
+        search: _search,
+        ...params
+      } = Object.fromEntries(searchParams.entries());
       const { category: newCategory, ...newParamsToUpdate } = newParams;
       const queryParams = new URLSearchParams({
         ...params,
@@ -126,6 +150,9 @@ export function AppsContent({ currentCategory }: AppsContentProps) {
           ...(mergedFilters.categories && mergedFilters.categories.length > 0
             ? { category: mergedFilters.categories[0] }
             : {}),
+          ...(mergedFilters.search && mergedFilters.search.length > 0
+            ? { search: mergedFilters.search }
+            : {}),
         });
 
         setPage(0);
@@ -135,15 +162,6 @@ export function AppsContent({ currentCategory }: AppsContentProps) {
     [updateSearchParams]
   );
 
-  const hasActiveFilters = (filters: InkAppFilters): boolean => {
-    return (
-      !!search ||
-      (filters.network && filters.network !== "Mainnet") ||
-      (filters.categories && filters.categories.length > 0) ||
-      (filters.tags && filters.tags.length > 0)
-    );
-  };
-
   const appsToDisplay = useMemo(
     () => filteredApps.slice(0, (page + 1) * 10),
     [filteredApps, page]
@@ -163,8 +181,10 @@ export function AppsContent({ currentCategory }: AppsContentProps) {
           <SearchInput
             className="max-w-md"
             placeholder="Search"
-            value={search}
-            onValueChange={setSearch}
+            value={filters.search}
+            onValueChange={(value) => {
+              updateFilters({ search: value });
+            }}
           />
         </div>
 
@@ -208,11 +228,13 @@ export function AppsContent({ currentCategory }: AppsContentProps) {
             >
               <AppsGrid
                 apps={appsToDisplay}
-                featuredApps={!hasActiveFilters(filters) ? inkFeaturedApps : []}
+                featuredApps={
+                  !hasActiveFiltersOrSearch(filters) ? inkFeaturedApps : []
+                }
                 noAppsFound={
                   <NoAppsFound
-                    hasSearch={!!search}
-                    resetSearch={() => setSearch("")}
+                    hasSearch={!!filters.search}
+                    resetSearch={() => updateFilters({ search: "" })}
                     hasActiveFilters={hasActiveFilters(filters)}
                     resetFilters={() => {
                       updateFilters({
@@ -255,10 +277,10 @@ function NoAppsFound({
   return (
     <div className="flex flex-col gap-8">
       <div className="flex flex-col items-center gap-6">
-        <div className="text-h5 font-bold text-blackMagic dark:text-whiteMagic">
+        <div className="ink:text-h5 font-bold ink:text-text-default">
           No matches found
         </div>
-        <div className="text-body-2 text-blackMagic/50 dark:text-whiteMagic/50 text-center">
+        <div className="ink:text-body-2-regular ink:text-text-muted text-center">
           {`Please change your keywords${
             hasActiveFilters ? " or reset your filters" : ""
           } and try again`}