landing update

Author: AykutSarac

src/containers/Landing/HeroSection.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { Plus_Jakarta_Sans } from "next/font/google";
 import Link from "next/link";
-import { Stack, Flex, Button, Badge } from "@mantine/core";
+import { Stack, Flex, Button, Image } from "@mantine/core";
 import styled from "styled-components";
-import { FaChevronRight, FaFire } from "react-icons/fa6";
+import { FaChevronRight } from "react-icons/fa6";
 
 const plusJakartaSans = Plus_Jakarta_Sans({
   subsets: ["latin-ext"],
@@ -105,28 +105,10 @@ export const HeroSection = () => {
       <StyledHeroSectionBody>
         <Stack flex="1" miw={250} mx="auto" align="center">
           <Link href="https://todiagram.com?ref=jsoncrack.com">
-            <Badge
-              fw={600}
-              size="lg"
-              variant="outline"
-              color="red.5"
-              leftSection={<FaFire />}
-              tt="unset"
-              visibleFrom="xs"
-            >
-              NEW: Now faster & more powerful — ToDiagram.com
-            </Badge>
-            <Badge
-              fw={600}
-              size="sm"
-              variant="outline"
-              color="red.5"
-              leftSection={<FaFire />}
-              tt="unset"
-              hiddenFrom="xs"
-            >
-              NEW: Now faster & more powerful — ToDiagram.com
-            </Badge>
+            <Flex fz="sm" c="gray.8" gap="8" align="center">
+              built by
+              <Image src="/assets/todiagram_logo.png" alt="Todiagram Logo" h={14} />
+            </Flex>
           </Link>
           <StyledHeroTitle>Visualize JSON into interactive graphs</StyledHeroTitle>
           <StyledHeroText>

src/containers/Landing/LovedBy.tsx

@@ -1,8 +1,8 @@
 import React from "react";
-import { Container, Flex, Text } from "@mantine/core";
+import { Button, Container, Flex, Text, Image } from "@mantine/core";
 import styled from "styled-components";
 import CountUp from "react-countup";
-import { FaGithub, FaHackerNews, FaProductHunt } from "react-icons/fa6";
+import { FaGithub, FaHackerNews, FaLinkedin, FaProductHunt, FaXTwitter } from "react-icons/fa6";
 
 interface LovedByProps {
   stars: number;
@@ -63,6 +63,42 @@ export const LovedBy = ({ stars }: LovedByProps) => {
   return (
     <Container pos="relative" mx="auto" p={30} fluid>
       <Featured stars={stars} />
+      <Flex wrap="wrap" justify="center" gap="md" mt="md">
+        <Button
+          component="a"
+          href="https://twitter.com/intent/post?text=Looking%20to%20understand%20or%20explore%20some%20JSON%3F%20Just%20paste%20or%20upload%20to%20visualize%20it%20as%20a%20graph%20with%20https%3A%2F%2Fjsoncrack.com%20%F0%9F%98%8D%20"
+          target="_blank"
+          rel="noreferrer"
+          color="black"
+          leftSection={<FaXTwitter />}
+        >
+          Share on X
+        </Button>
+        <Button
+          component="a"
+          href="https://www.linkedin.com/feed/?shareActive=true&text=Looking%20to%20understand%20or%20explore%20some%20JSON%3F%20Just%20paste%20or%20upload%20to%20visualize%20it%20as%20a%20graph%20with%20https%3A%2F%2Fjsoncrack.com%20%F0%9F%98%8D%20"
+          target="_blank"
+          color="#0077B5"
+          leftSection={<FaLinkedin />}
+        >
+          Share on LinkedIn
+        </Button>
+        <Button
+          component="a"
+          href="https://todiagram.com"
+          color="#fe5e49"
+          leftSection={
+            <Image
+              src="https://todiagram.com/logo.svg"
+              alt="Todiagram Logo"
+              h={14}
+              style={{ filter: "brightness(0) saturate(100%) invert(100%)" }}
+            />
+          }
+        >
+          ToDiagram
+        </Button>
+      </Flex>
     </Container>
   );
 };

src/layout/Navbar.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Link from "next/link";
-import { Button, Flex, Image, Stack } from "@mantine/core";
+import { Button } from "@mantine/core";
 import styled from "styled-components";
 import { JSONCrackLogo } from "./JsonCrackLogo";
 
@@ -55,13 +55,7 @@ export const Navbar = () => {
     <StyledNavbarWrapper className="navbar">
       <StyledNavbar>
         <Left>
-          <Stack gap="0">
-            <JSONCrackLogo fontSize="1.2rem" />
-            <Flex justify="right" align="center" gap="4" fz="8" fw="500" c="black">
-              from
-              <Image src="/assets/todiagram_logo.png" alt="Todiagram Logo" w={60} />
-            </Flex>
-          </Stack>
+          <JSONCrackLogo fontSize="1.2rem" />
         </Left>
         <Center>
           <Button

src/pages/index.tsx

@@ -1,15 +1,17 @@
 import React from "react";
+import type { InferGetStaticPropsType, GetStaticProps } from "next";
 import { NextSeo, SoftwareAppJsonLd } from "next-seo";
 import { SEO } from "src/constants/seo";
 import { FAQ } from "src/containers/Landing/FAQ";
 import { Features } from "src/containers/Landing/Features";
 import { HeroPreview } from "src/containers/Landing/HeroPreview";
 import { HeroSection } from "src/containers/Landing/HeroSection";
+import { LovedBy } from "src/containers/Landing/LovedBy";
 import { Section1 } from "src/containers/Landing/Section1";
 import { SeePremium } from "src/containers/Landing/SeePremium";
 import Layout from "src/layout/Layout";
 
-export const HomePage = () => {
+export const HomePage = (props: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
     <Layout>
       <NextSeo {...SEO} canonical="https://jsoncrack.com" />
@@ -27,9 +29,21 @@ export const HomePage = () => {
       <Section1 />
       <Features />
       <SeePremium />
+      <LovedBy stars={props.stars} />
       <FAQ />
     </Layout>
   );
 };
 
 export default HomePage;
+
+export const getStaticProps = (async () => {
+  const res = await fetch("https://api.github.com/repos/AykutSarac/jsoncrack.com");
+  const data = await res.json();
+
+  return {
+    props: {
+      stars: data.stargazers_count,
+    },
+  };
+}) satisfies GetStaticProps<{ stars: number }>;