Feat landind page starfinder (Shonen-Labs#86)

* chore: add images to the landing page * chore: add icons to the landing page * feat: add external link component * feat: add font to landing page * chore: add text and color settings * feat: add new button variation * feat: add landing page section components * chore: image optimization for better quality * chore: add accordion package * feat: create accordion component for landing page * chore: Add configurations for new components * feat: create question component * refactor: reuse part of sections in new component * refactor: change padding in footer * chore: created components to main page * chore: add new icons for modal * chore: add new image * feat: add new variant for modal * feat: add new component modal * refactor: add modal to landing page * chore: images optimized in quality and weight * chore: add new particles package * feat: add anchor to sections * chore: add metada for Seo * refactor: change ExternalLink to Link * feat: create section-background component * feat: add background to landing page * refactor: change ExternalLink to Link * chore: add background to landing page * chore: use lighter tsparticles package * chore: add new colors * chore: add new images * refactor: add responsive text * feat: create animated box * feat: add Box-motion to sections * refactor: add new text for seo * refactor: add media query for responsive * refactor: new structure * fix: width for mobile * refactor: use loadSlim loading and color settings
tosoham · Feb 1, 2025 · 6799ce4 · 6799ce4
1 parent e796d72
commit 6799ce4
Show file tree

Hide file tree

Showing 50 changed files with 1,137 additions and 17 deletions.
diff --git a/client/app/favicon.ico b/client/app/favicon.ico
diff --git a/client/app/globals.css b/client/app/globals.css
@@ -2,8 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
+html {
+  scroll-behavior: smooth;
+}
+
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: 'Satoshi', sans-serif;
 }
 
 @layer utilities {
@@ -88,4 +92,4 @@ body {
   to {
     opacity: 1;
   }
-}
+}
diff --git a/client/app/layout.tsx b/client/app/layout.tsx
@@ -8,8 +8,8 @@ import { Analytics } from "@vercel/analytics/react";
 
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+title: "Stark Finder",
+description: "The only platform you need for all things Starknet. Discover and interact with Starknet applications effortlessly",
 };
 
 export default function RootLayout({
@@ -20,6 +20,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <head>
+      <link href="https://fonts.cdnfonts.com/css/satoshi" rel="stylesheet" />
         <Script
           src="https://telegram.org/js/telegram-web-app.js"
           strategy="beforeInteractive"

diff --git a/client/app/page.tsx b/client/app/page.tsx
@@ -1,15 +1,23 @@
-import { BentoDemo } from "@/components/landing/BentoGrid";
-import { Background } from "@/components/landing/DotPattern";
-import { GridPatternDemo } from "@/components/landing/gridbackground";
+import {
+  Hero,
+  Header,
+  Feature,
+  Footer,
+  Offer,
+  Question,
+} from '@/components/landing/home'
 
-import { NavbarDemo } from "@/components/landing/Navbar";
-
-export default function Home() {
+export default function HomePage() {
   return (
-    <div>
-      <Background />
-      <BentoDemo />
-      <NavbarDemo />
-      <GridPatternDemo />
-    </div>);
+    <>
+      <Header />
+      <main>
+        <Hero />
+        <Feature />
+        <Offer />
+        <Question />
+      </main>
+      <Footer />
+    </>
+  )
 }
diff --git a/client/components/base/external-link.tsx b/client/components/base/external-link.tsx
@@ -0,0 +1,17 @@
+type ExternalLinkProps = {
+  children: React.ReactNode
+  className?: string
+  href: string
+}
+export function ExternalLink({ children, className, href }: ExternalLinkProps) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={className}
+    >
+      {children}
+    </a>
+  )
+}
diff --git a/client/components/base/index.ts b/client/components/base/index.ts
@@ -0,0 +1 @@
+export * from './external-link'
diff --git a/client/components/icons/calendar.icon.tsx b/client/components/icons/calendar.icon.tsx
@@ -0,0 +1,24 @@
+export function CalendarIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="17" height="18" viewBox="0 0 17 18" fill="none" {...props}>
+      <path
+        d="M16.7615 8.69286V15.2014C16.7615 15.6946 16.5656 16.1676 16.2169 16.5163C15.8681 16.8651 15.3951 17.061 14.9019 17.061H1.8848C1.3916 17.061 0.918609 16.8651 0.569869 16.5163C0.221128 16.1676 0.0252075 15.6946 0.0252075 15.2014V8.69286H16.7615ZM12.1125 0.324707C12.3591 0.324707 12.5956 0.422667 12.77 0.597038C12.9444 0.771408 13.0423 1.0079 13.0423 1.2545V2.1843H14.9019C15.3951 2.1843 15.8681 2.38022 16.2169 2.72896C16.5656 3.0777 16.7615 3.55069 16.7615 4.04389V6.83327H0.0252075V4.04389C0.0252075 3.55069 0.221128 3.0777 0.569869 2.72896C0.918609 2.38022 1.3916 2.1843 1.8848 2.1843H3.74439V1.2545C3.74439 1.0079 3.84235 0.771408 4.01672 0.597038C4.19109 0.422667 4.42758 0.324707 4.67418 0.324707C4.92078 0.324707 5.15727 0.422667 5.33165 0.597038C5.50602 0.771408 5.60398 1.0079 5.60398 1.2545V2.1843H11.1827V1.2545C11.1827 1.0079 11.2807 0.771408 11.4551 0.597038C11.6294 0.422667 11.8659 0.324707 12.1125 0.324707Z"
+        fill="url(#paint0_linear_39_3205)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_39_3205"
+          x1="8.39336"
+          y1="0.324707"
+          x2="8.39336"
+          y2="17.061"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#4AC7B1" />
+          <stop offset="0.485" stopColor="#4DB0B3" />
+          <stop offset="1" stopColor="#4C79A0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
diff --git a/client/components/icons/chat.icon.tsx b/client/components/icons/chat.icon.tsx
@@ -0,0 +1,10 @@
+export function ChatIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="17" height="18" viewBox="0 0 17 18" fill="none" {...props}>
+      <path
+        d="M7.66663 10.6667H9.33329V8.16669H11.8333V6.50002H9.33329V4.00002H7.66663V6.50002H5.16663V8.16669H7.66663V10.6667ZM0.166626 17.3334V2.33335C0.166626 1.87502 0.32982 1.48266 0.656209 1.15627C0.982598 0.829881 1.37496 0.666687 1.83329 0.666687H15.1666C15.625 0.666687 16.0173 0.829881 16.3437 1.15627C16.6701 1.48266 16.8333 1.87502 16.8333 2.33335V12.3334C16.8333 12.7917 16.6701 13.184 16.3437 13.5104C16.0173 13.8368 15.625 14 15.1666 14H3.49996L0.166626 17.3334ZM2.79163 12.3334H15.1666V2.33335H1.83329V13.2709L2.79163 12.3334Z"
+        fill="#1C1B1F"
+      />
+    </svg>
+  )
+}
diff --git a/client/components/icons/contract.icon.tsx b/client/components/icons/contract.icon.tsx
@@ -0,0 +1,10 @@
+export function ContractIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="15" height="18" viewBox="0 0 15 18" fill="none" {...props}>
+      <path
+        d="M2.5 17.3334C1.80556 17.3334 1.21528 17.0903 0.729167 16.6042C0.243056 16.1181 0 15.5278 0 14.8334V12.3334H2.5V0.666687H15V14.8334C15 15.5278 14.7569 16.1181 14.2708 16.6042C13.7847 17.0903 13.1944 17.3334 12.5 17.3334H2.5ZM12.5 15.6667C12.7361 15.6667 12.934 15.5868 13.0938 15.4271C13.2535 15.2674 13.3333 15.0695 13.3333 14.8334V2.33335H4.16667V12.3334H11.6667V14.8334C11.6667 15.0695 11.7465 15.2674 11.9062 15.4271C12.066 15.5868 12.2639 15.6667 12.5 15.6667ZM5 6.50002V4.83335H12.5V6.50002H5ZM5 9.00002V7.33335H12.5V9.00002H5ZM2.5 15.6667H10V14H1.66667V14.8334C1.66667 15.0695 1.74653 15.2674 1.90625 15.4271C2.06597 15.5868 2.26389 15.6667 2.5 15.6667ZM2.5 15.6667H1.66667H10H2.5Z"
+        fill="#1C1B1F"
+      />
+    </svg>
+  )
+}
diff --git a/client/components/icons/file.icon.tsx b/client/components/icons/file.icon.tsx
@@ -0,0 +1,26 @@
+export function FileIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="19" height="20" viewBox="0 0 19 20" fill="none" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M0.160133 3.87571C0.0950469 4.21787 0.095047 4.62884 0.095047 5.44892V12.004C0.095047 15.5102 0.0950469 17.2638 1.18477 18.3526C2.27449 19.4414 4.02715 19.4423 7.53341 19.4423H11.2526C14.7588 19.4423 16.5124 19.4423 17.6012 18.3526C18.69 17.2629 18.6909 15.5102 18.6909 12.004V9.95656C18.6909 7.50935 18.6909 6.28481 17.975 5.48983C17.9093 5.41647 17.8398 5.34664 17.7667 5.28063C16.9718 4.56561 15.7472 4.56561 13.3 4.56561H12.9522C11.8802 4.56561 11.3437 4.56561 10.8435 4.42336C10.569 4.34489 10.3044 4.23507 10.055 4.09607C9.60127 3.84409 9.22191 3.46381 8.4632 2.70603L7.95181 2.19464C7.69705 1.93987 7.5706 1.81342 7.43671 1.70185C6.86085 1.22453 6.15446 0.931925 5.40975 0.862242C5.23681 0.846436 5.05643 0.846436 4.69753 0.846436C3.87652 0.846436 3.46648 0.846435 3.12432 0.911521C2.38963 1.05027 1.71382 1.40723 1.18505 1.93583C0.656283 2.46443 0.299111 3.14106 0.160133 3.87571ZM13.3753 1.77623C13.7147 1.77623 13.8848 1.77623 14.028 1.79483C14.9746 1.925 15.7277 2.67162 15.9006 3.63582C15.759 3.60404 15.616 3.57891 15.472 3.56051C14.8769 3.4824 14.1256 3.4824 13.194 3.4824H12.8834C12.0076 3.4824 11.6747 3.47776 11.3725 3.38849C11.1966 3.33642 11.0274 3.2637 10.8686 3.17185C10.5934 3.01379 10.3553 2.7739 9.73609 2.13234L9.39299 1.77623H13.3753ZM10.3228 7.58745C10.1378 7.58745 9.96047 7.66092 9.82969 7.7917C9.69891 7.92247 9.62544 8.09985 9.62544 8.28479C9.62544 8.46974 9.69891 8.64711 9.82969 8.77789C9.96047 8.90867 10.1378 8.98214 10.3228 8.98214H14.9718C15.1567 8.98214 15.3341 8.90867 15.4649 8.77789C15.5956 8.64711 15.6691 8.46974 15.6691 8.28479C15.6691 8.09985 15.5956 7.92247 15.4649 7.7917C15.3341 7.66092 15.1567 7.58745 14.9718 7.58745H10.3228Z"
+        fill="url(#paint0_linear_39_3181)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_39_3181"
+          x1="9.39299"
+          y1="0.846436"
+          x2="9.39299"
+          y2="19.4423"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#4AC7B1" />
+          <stop offset="0.485" stopColor="#4DB0B3" />
+          <stop offset="1" stopColor="#4C79A0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
diff --git a/client/components/icons/github.icon.tsx b/client/components/icons/github.icon.tsx
@@ -0,0 +1,12 @@
+export function GithubIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.9518 1.20757C10.7451 0.485529 9.4289 0.124512 7.99939 0.124512C6.5711 0.124512 5.25365 0.485529 4.04645 1.20757C2.84107 1.92898 1.88523 2.90826 1.18138 4.14478C0.476315 5.38256 0.125 6.73231 0.125 8.19713C0.125 9.95569 0.625929 11.5369 1.62719 12.9419C2.62845 14.3446 3.92167 15.3194 5.50806 15.8571C5.6922 15.8923 5.82909 15.8678 5.91752 15.7835C6.00657 15.6987 6.05078 15.5949 6.05078 15.4691L6.04594 14.8999C6.04231 14.5427 6.03988 14.2313 6.03988 13.9646L5.80487 14.0062C5.65464 14.0345 5.46444 14.0464 5.23548 14.0426C5.00713 14.0395 4.76908 14.0149 4.52315 13.969C4.27905 13.9238 4.05069 13.8194 3.83868 13.6546C3.62669 13.4898 3.47646 13.274 3.38742 13.0081L3.28445 12.7653C3.21661 12.6042 3.10879 12.4256 2.9622 12.2306C2.81501 12.0331 2.66661 11.8998 2.51639 11.83L2.4437 11.7778C2.39647 11.7425 2.35285 11.701 2.31045 11.652C2.26987 11.6029 2.23957 11.5539 2.21959 11.5048C2.19899 11.4544 2.21535 11.4148 2.26987 11.3834C2.32437 11.3507 2.42371 11.3362 2.56667 11.3362L2.77261 11.3677C2.9083 11.3954 3.0779 11.4796 3.2796 11.6192C3.48131 11.7602 3.64727 11.9419 3.7763 12.1664C3.93379 12.4533 4.12337 12.6721 4.34567 12.8231C4.56797 12.9741 4.7921 13.0495 5.01803 13.0495C5.24214 13.0495 5.43779 13.0307 5.60194 12.9967C5.76549 12.9615 5.91995 12.9086 6.06229 12.8394C6.12529 12.3689 6.29246 12.0079 6.56504 11.7557C6.17617 11.713 5.82606 11.6501 5.51533 11.5658C5.20398 11.4821 4.88295 11.3456 4.55222 11.1557C4.21908 10.9671 3.94469 10.7331 3.72602 10.4513C3.50797 10.1733 3.32807 9.80349 3.18875 9.35064C3.04943 8.89338 2.97856 8.36947 2.97856 7.77322C2.97856 6.92602 3.2475 6.20398 3.78781 5.60773C3.53462 4.96997 3.55763 4.25548 3.86049 3.463C4.05735 3.4001 4.35113 3.44727 4.74121 3.60451C5.13069 3.76175 5.41538 3.89698 5.59649 4.0083C5.7782 4.12152 5.92359 4.21586 6.03261 4.29259C6.66681 4.11397 7.3222 4.02403 7.99939 4.02403C8.6766 4.02403 9.33199 4.11523 9.968 4.297L10.3574 4.04415C10.624 3.87622 10.9389 3.72339 11.3012 3.58188C11.6646 3.44224 11.942 3.40388 12.1335 3.46678C12.4406 4.25925 12.4684 4.97312 12.2153 5.6115C12.7544 6.2065 13.0245 6.92854 13.0245 7.77636C13.0245 8.37136 12.9542 8.89906 12.8143 9.35819C12.6749 9.81732 12.4933 10.1871 12.2704 10.4633C12.0487 10.7399 11.7725 10.9727 11.4405 11.1626C11.1092 11.3514 10.7863 11.4878 10.4774 11.5714C10.1661 11.6558 9.81717 11.7187 9.42587 11.7602C9.78143 12.0746 9.95891 12.5716 9.95891 13.2526V15.471C9.95891 15.5968 10.0013 15.7012 10.0873 15.7855C10.1721 15.8692 10.3071 15.8942 10.492 15.859C12.0789 15.3181 13.3715 14.347 14.3728 12.9407C15.374 11.5381 15.875 9.95506 15.875 8.19713C15.875 6.73293 15.5224 5.38256 14.8186 4.14541C14.1142 2.90889 13.1589 1.92961 11.9536 1.20819L11.9518 1.20757Z"
+        fill="#8A8F98"
+      />
+    </svg>
+  )
+}
diff --git a/client/components/icons/index.ts b/client/components/icons/index.ts
@@ -0,0 +1,14 @@
+export * from './rocket-launch.icon'
+export * from './starkfinder-hub.icon'
+
+export * from './x.icon'
+export * from './github.icon'
+export * from './telegram.icon'
+
+export * from './file.icon'
+export * from './notification.icon'
+export * from './calendar.icon'
+export * from './integration.icon'
+
+export * from './chat.icon'
+export * from './contract.icon'
diff --git a/client/components/icons/integration.icon.tsx b/client/components/icons/integration.icon.tsx
diff --git a/client/components/icons/notification.icon.tsx b/client/components/icons/notification.icon.tsx
@@ -0,0 +1,24 @@
+export function NotificationIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="17" height="18" viewBox="0 0 17 18" fill="none" {...props}>
+      <path
+        d="M8.53563 0.311279C6.80945 0.311279 5.15398 0.997001 3.93338 2.21759C2.71279 3.43819 2.02707 5.09366 2.02707 6.81984V10.1002C2.0272 10.2444 1.99378 10.3867 1.92944 10.5158L0.332983 13.7078C0.254998 13.8637 0.218174 14.037 0.226009 14.2112C0.233844 14.3854 0.286077 14.5546 0.377748 14.703C0.469419 14.8513 0.597484 14.9737 0.749779 15.0586C0.902075 15.1435 1.07354 15.188 1.2479 15.188H15.8234C15.9977 15.188 16.1692 15.1435 16.3215 15.0586C16.4738 14.9737 16.6018 14.8513 16.6935 14.703C16.7852 14.5546 16.8374 14.3854 16.8453 14.2112C16.8531 14.037 16.8163 13.8637 16.7383 13.7078L15.1428 10.5158C15.0781 10.3868 15.0443 10.2445 15.0442 10.1002V6.81984C15.0442 5.09366 14.3585 3.43819 13.1379 2.21759C11.9173 0.997001 10.2618 0.311279 8.53563 0.311279ZM8.53563 17.9774C7.95855 17.9777 7.39559 17.799 6.92431 17.4659C6.45304 17.1329 6.09667 16.6619 5.90431 16.1178H11.167C10.9746 16.6619 10.6182 17.1329 10.1469 17.4659C9.67568 17.799 9.11271 17.9777 8.53563 17.9774Z"
+        fill="url(#paint0_linear_39_3193)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_39_3193"
+          x1="8.53563"
+          y1="0.311279"
+          x2="8.53563"
+          y2="17.9774"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#4AC7B1" />
+          <stop offset="0.485" stopColor="#4DB0B3" />
+          <stop offset="1" stopColor="#4C79A0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
diff --git a/client/components/icons/rocket-launch.icon.tsx b/client/components/icons/rocket-launch.icon.tsx
@@ -0,0 +1,22 @@
+export function RocketLaunchIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" {...props}>
+      <mask
+        id="mask0_39_3259"
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+      >
+        <rect width="24" height="24" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_39_3259)">
+        <path
+          d="M5.64999 10.025L7.59999 10.85C7.83332 10.3833 8.07499 9.93332 8.32499 9.49998C8.57499 9.06665 8.84999 8.63332 9.14999 8.19998L7.74999 7.92498L5.64999 10.025ZM9.19999 12.1L12.05 14.925C12.75 14.6583 13.5 14.25 14.3 13.7C15.1 13.15 15.85 12.525 16.55 11.825C17.7167 10.6583 18.6292 9.36248 19.2875 7.93748C19.9458 6.51248 20.2333 5.19998 20.15 3.99998C18.95 3.91665 17.6333 4.20415 16.2 4.86248C14.7667 5.52082 13.4667 6.43332 12.3 7.59998C11.6 8.29998 10.975 9.04998 10.425 9.84998C9.87499 10.65 9.46665 11.4 9.19999 12.1ZM13.65 10.475C13.2667 10.0917 13.075 9.62082 13.075 9.06248C13.075 8.50415 13.2667 8.03332 13.65 7.64998C14.0333 7.26665 14.5083 7.07498 15.075 7.07498C15.6417 7.07498 16.1167 7.26665 16.5 7.64998C16.8833 8.03332 17.075 8.50415 17.075 9.06248C17.075 9.62082 16.8833 10.0917 16.5 10.475C16.1167 10.8583 15.6417 11.05 15.075 11.05C14.5083 11.05 14.0333 10.8583 13.65 10.475ZM14.125 18.5L16.225 16.4L15.95 15C15.5167 15.3 15.0833 15.5708 14.65 15.8125C14.2167 16.0542 13.7667 16.2916 13.3 16.525L14.125 18.5ZM21.95 2.17498C22.2667 4.19165 22.0708 6.15415 21.3625 8.06248C20.6542 9.97082 19.4333 11.7916 17.7 13.525L18.2 16C18.2667 16.3333 18.25 16.6583 18.15 16.975C18.05 17.2916 17.8833 17.5666 17.65 17.8L13.45 22L11.35 17.075L7.07499 12.8L2.14999 10.7L6.32499 6.49998C6.55832 6.26665 6.83749 6.09998 7.16249 5.99998C7.48749 5.89998 7.81665 5.88332 8.14999 5.94998L10.625 6.44998C12.3583 4.71665 14.175 3.49165 16.075 2.77498C17.975 2.05832 19.9333 1.85832 21.95 2.17498ZM3.92499 15.975C4.50832 15.3917 5.22082 15.0958 6.06249 15.0875C6.90415 15.0792 7.61665 15.3667 8.19999 15.95C8.78332 16.5333 9.07082 17.2458 9.06249 18.0875C9.05415 18.9292 8.75832 19.6416 8.17499 20.225C7.75832 20.6416 7.06249 21 6.08749 21.3C5.11249 21.6 3.76665 21.8666 2.04999 22.1C2.28332 20.3833 2.54999 19.0375 2.84999 18.0625C3.14999 17.0875 3.50832 16.3917 3.92499 15.975ZM5.34999 17.375C5.18332 17.5417 5.01665 17.8458 4.84999 18.2875C4.68332 18.7292 4.56665 19.175 4.49999 19.625C4.94999 19.5583 5.39582 19.4458 5.83749 19.2875C6.27915 19.1292 6.58332 18.9667 6.74999 18.8C6.94999 18.6 7.05832 18.3583 7.07499 18.075C7.09165 17.7916 6.99999 17.55 6.79999 17.35C6.59999 17.15 6.35832 17.0542 6.07499 17.0625C5.79165 17.0708 5.54999 17.175 5.34999 17.375Z"
+          fill="white"
+        />
+      </g>
+    </svg>
+  )
+}