Merge pull request #35 from Logging-Stuff/figma

Added RetroUI figma

Author: ariflogs

.github/workflows/deploy.yml

@@ -24,18 +24,18 @@ jobs:
 
       - name: Build and push to DockerHub
         run: |
-          docker build -t devarifhossain/retroui:1.0.11 ./
-          docker push devarifhossain/retroui:1.0.11
+          docker build -t devarifhossain/retroui:1.0.12 ./
+          docker push devarifhossain/retroui:1.0.12
     
-      - name: Set up SSH
-        uses: webfactory/ssh-agent@v0.9.0
-        with:
-          ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
+      # - name: Set up SSH
+      #   uses: webfactory/ssh-agent@v0.9.0
+      #   with:
+      #     ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }}
 
-      - name: Add VPS to known_hosts
-        run: |
-          ssh-keyscan -H ${{ secrets.VPS_HOST }} >> ~/.ssh/known_hosts
+      # - name: Add VPS to known_hosts
+      #   run: |
+      #     ssh-keyscan -H ${{ secrets.VPS_HOST }} >> ~/.ssh/known_hosts
 
-      - name: Deploy to VPS
-        run: |
-          ssh ${{ secrets.VPS_USERNAME }}@${{ secrets.VPS_HOST }} "cd /root/retroui && git pull && docker compose -f ./infra/docker-compose.prod.yml up web --build -d"
+      # - name: Deploy to VPS
+      #   run: |
+      #     ssh ${{ secrets.VPS_USERNAME }}@${{ secrets.VPS_HOST }} "cd /root/retroui && git pull && docker compose -f ./infra/docker-compose.prod.yml up web --build -d"

app/(marketing)/page.tsx

@@ -1,18 +1,31 @@
 "use server";
 
-import { Button, Text, Input, Textarea, Card, Avatar } from "@/packages/ui";
+import {
+  Button,
+  Text,
+  Input,
+  Textarea,
+  Card,
+  Avatar,
+  Badge,
+} from "@/packages/ui";
 import AccordionStyleDefault from "@/preview/components/accordion-style-default";
 import AlertStyleDefaultIcon from "@/preview/components/alert-style-with-icon";
 import AvatarStyleCircle from "@/preview/components/avatar-style-circle-sizes";
 import BadgeStyleVariants from "@/preview/components/badge-style-variants";
-import { GithubIcon, HeartIcon, MessageCircle } from "lucide-react";
+import {
+  ArrowRightIcon,
+  GithubIcon,
+  HeartIcon,
+  MessageCircle,
+} from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 
 async function getContributors(): Promise<
   { avatar: string; username: string; url: string }[]
 > {
-  let request = await fetch(
+  const request = await fetch(
     `https://api.github.com/repos/Logging-Stuff/RetroUI/contributors`,
     {
       method: "GET",
@@ -22,7 +35,7 @@ async function getContributors(): Promise<
     }
   );
 
-  let contributorsList = await request.json();
+  const contributorsList = await request.json();
   return [
     {
       avatar: "https://avatars.githubusercontent.com/u/58097221?v=4",
@@ -47,6 +60,19 @@ export default async function Home() {
       <div className="bg-[url('/images/banner_void_2.svg')] bg-cover bg-no-repeat bg-center flex flex-col items-center h-[1900px] lg:h-[1400px]">
         <section className="container max-w-6xl mx-auto px-4 lg:px-0 text-gray-900 flex justify-center items-center lg:gap-28 xl:gap-32 my-28">
           <div className="text-center lg:text-left w-full lg:w-2/3">
+            <Link
+              id="checkout-figma-kit"
+              data-umami-event="checkout-figma-kit"
+              href="https://buy.polar.sh/polar_cl_lDjYITXPX3VSsoGl2UfxIZqiinJ9xVn4y9YAP1ApYcJ"
+              target="_blank"
+              className="mb-6 inline-block"
+            >
+              <Badge>
+                Checkout Retro UI Figma Kit{" "}
+                <ArrowRightIcon className="ml-2 h-4 w-4 inline-block" />
+              </Badge>
+            </Link>
+
             <Text as="h1">Make your projects</Text>
             <Text as="h1" className="text-outlined">
               stand out!
@@ -155,7 +181,10 @@ export default async function Home() {
 
       <section className="container max-w-6xl mx-auto px-4 lg:px-0 flex flex-col lg:flex-row gap-12 lg:gap-16 lg:grid-cols-2 my-36">
         <div className="w-full lg:w-3/5">
-          <Text as="h2">Easily Customize to Your Own Needs! 🛠️</Text>
+          <Text as="h2">
+            Easily <span className="text-outlined">Customize</span> to Your Own
+            Needs! 🛠️
+          </Text>
           <div className="flex flex-col space-y-1 mt-6 mb-8 text-muted">
             <Text className="text-xl">
               Copy-Paste Ready: Components that you can just copy paste.
@@ -183,7 +212,8 @@ export default async function Home() {
 
       <section className="container max-w-6xl mx-auto bg-[url('/images/starts_bg.svg')] bg-cover bg-no-repeat py-12">
         <Text as="h2" className="text-center mb-28">
-          A Growing Community of <br /> Developers and Designers.
+          A <span className="text-outlined">Growing</span> Community of <br />{" "}
+          Developers and Designers.
         </Text>
 
         <div className="grid grid-cols-1 md:grid-cols-2 gap-12 max-w-2xl mx-auto">
@@ -192,7 +222,7 @@ export default async function Home() {
               Github Stars
             </Text>
             <Text as="h1" className="text-outlined text-7xl lg:text-8xl">
-              150+
+              230+
             </Text>
             <Image
               src="/images/shooting_star.svg"
@@ -220,6 +250,83 @@ export default async function Home() {
         </div>
       </section>
 
+      <section className="container max-w-6xl mx-auto px-4 lg:px-0 my-48">
+        <Text as="h2" className="text-center mb-28">
+          Works With Both <span className="text-outlined">SSR</span> and{" "}
+          <span className="text-outlined">SPA</span> Applications.
+        </Text>
+
+        <div className="grid grid-cols-5 lg:grid-cols-5 gap-8 lg:gap-6 max-w-2xl mx-auto items-center">
+          <Image
+            src="/images/logos/vite.png"
+            alt="vite"
+            width={60}
+            height={60}
+          />
+          <Image
+            src="/images/logos/nextjs.png"
+            alt="nextjs"
+            width={60}
+            height={60}
+          />
+          <Image
+            src="/images/logos/remix.png"
+            alt="remix"
+            width={55}
+            height={55}
+          />
+          <Image
+            src="/images/logos/astro.png"
+            alt="astro"
+            width={55}
+            height={55}
+          />
+          <Image
+            src="/images/logos/gatsby.png"
+            alt="gatsby"
+            width={60}
+            height={60}
+          />
+        </div>
+      </section>
+
+      <section className="container max-w-6xl mx-auto px-4 lg:px-0 grid grid-cols-1 lg:grid-cols-2 items-center my-36">
+        <div className="w-full">
+          <Text as="h2">
+            The <span className="text-outlined">Figma</span> UI Kit You Were
+            Looking For!
+          </Text>
+          <div className="flex flex-col space-y-1 mt-6 mb-8 text-muted">
+            <Text className="text-xl">
+              - Based on the design foundation of RetroUI.
+            </Text>
+            <Text className="text-xl">
+              - Comes with 60+ UI elements like cards, modals, stats, etc .
+            </Text>
+            <Text className="text-xl">
+              - Get Lifetime update of new versions.
+            </Text>
+          </div>
+
+          <Link
+            id="checkout-figma-kit"
+            data-umami-event="checkout-figma-kit"
+            href="https://buy.polar.sh/polar_cl_lDjYITXPX3VSsoGl2UfxIZqiinJ9xVn4y9YAP1ApYcJ"
+            target="_blank"
+          >
+            <Button>Checkout Now</Button>
+          </Link>
+        </div>
+        <div className="w-full">
+          <Image
+            src="/images/figma-banner.png"
+            width={800}
+            height={800}
+            alt="retroui code showcase"
+          />
+        </div>
+      </section>
+
       <section className="container max-w-6xl mx-auto border-2 bg-primary-400 border-black py-16 px-4 lg:p-16 my-36">
         <Text as="h2" className="text-center mb-2">
           Community Contributors

app/open-graph.png

@@ -1 +1,2 @@
 [ ] Add pre-commit hook to run build and lint
+[ ] Add CDN with Clouflare