feat: revamped the landing page

apps/web/app/globals.css

@@ -78,58 +78,49 @@
 }
 
 :root {
-  --background: hsl(0 0% 100%);
-  --foreground: hsl(0 0% 3.9%);
-  --card: hsl(0 0% 100%);
-  --card-foreground: hsl(0 0% 3.9%);
-  --popover: hsl(0 0% 100%);
-  --popover-foreground: hsl(0 0% 3.9%);
-  --primary: hsl(0 0% 9%);
-  --primary-foreground: hsl(0 0% 98%);
-  --secondary: hsl(0 0% 96.1%);
-  --secondary-foreground: hsl(0 0% 9%);
-  --muted: hsl(0 0% 96.1%);
-  --muted-foreground: hsl(0 0% 45.1%);
-  --accent: hsl(0 0% 96.1%);
-  --accent-foreground: hsl(0 0% 9%);
-  --destructive: hsl(0 84.2% 60.2%);
-  --destructive-foreground: hsl(0 0% 98%);
-  --border: hsl(0 0% 89.8%);
-  --input: hsl(0 0% 89.8%);
-  --ring: hsl(0 0% 3.9%);
-  --chart-1: hsl(12 76% 61%);
-  --chart-2: hsl(173 58% 39%);
-  --chart-3: hsl(197 37% 24%);
-  --chart-4: hsl(43 74% 66%);
-  --chart-5: hsl(27 87% 67%);
+  --background: hsl(292 0% 100%);
+  --foreground: hsl(292 0% 10%);
+  --card: hsl(292 0% 100%);
+  --card-foreground: hsl(292 0% 15%);
+  --popover: hsl(292 0% 100%);
+  --popover-foreground: hsl(292 95% 10%);
+  --primary: hsl(292 72% 59%);
+  --primary-foreground: hsl(0 0% 100%);
+  --secondary: hsl(292 10% 90%);
+  --secondary-foreground: hsl(0 0% 0%);
+  --muted: hsl(254 10% 95%);
+  --muted-foreground: hsl(292 0% 40%);
+  --accent: hsl(0, 0%, 95%);
+  --accent-foreground: hsl(292 0% 15%);
+  --destructive: hsl(0 50% 50%);
+  --destructive-foreground: hsl(292 0% 100%);
+  --border: hsl(285, 6%, 87%);
+  --input: hsl(292 20% 50%);
+  --ring: hsl(292 72% 59%);
   --radius: 0.6rem;
 }
 
 .dark {
-  --background: hsl(0 0% 3.9%);
-  --foreground: hsl(0 0% 98%);
-  --card: hsl(0 0% 3.9%);
-  --card-foreground: hsl(0 0% 98%);
-  --popover: hsl(0 0% 3.9%);
-  --popover-foreground: hsl(0 0% 98%);
-  --primary: hsl(0 0% 98%);
-  --primary-foreground: hsl(0 0% 9%);
-  --secondary: hsl(0 0% 14.9%);
-  --secondary-foreground: hsl(0 0% 98%);
-  --muted: hsl(0 0% 14.9%);
-  --muted-foreground: hsl(0 0% 63.9%);
-  --accent: hsl(0 0% 14.9%);
-  --accent-foreground: hsl(0 0% 98%);
-  --destructive: hsl(0 62.8% 30.6%);
-  --destructive-foreground: hsl(0 0% 98%);
-  --border: hsl(0 0% 14.9%);
-  --input: hsl(0 0% 14.9%);
-  --ring: hsl(0 0% 83.1%);
-  --chart-1: hsl(220 70% 50%);
-  --chart-2: hsl(160 60% 45%);
-  --chart-3: hsl(30 80% 55%);
-  --chart-4: hsl(280 65% 60%);
-  --chart-5: hsl(340 75% 55%);
+  --background: hsl(292 10% 7%);
+  --foreground: hsl(292 0% 90%);
+  --card: hsl(292 0% 7%);
+  --card-foreground: hsl(292 0% 90%);
+  --popover: hsl(292 10% 5%);
+  --popover-foreground: hsl(292 0% 90%);
+  --primary: hsl(292 72% 59%);
+  --primary-foreground: 0 0% 100%;
+  --secondary: hsl(292 10% 10%);
+  --secondary-foreground: 0 0% 100%;
+  --muted: hsl(254 10% 15%);
+  --muted-foreground: hsl(292 0% 60%);
+  --accent: hsl(254 10% 15%);
+  --accent-foreground: hsl(292 0% 90%);
+  --destructive: hsl(0 50% 30%);
+  --destructive-foreground: hsl(292 0% 90%);
+  --border: hsl(300, 6%, 13%);
+  --input: hsl(292 20% 18%);
+  --ring: hsl(292 72% 59%);
+  --radius: 0.6rem;
 }
 
 @theme inline {
@@ -172,6 +163,11 @@
   }
 }
 
+@theme {
+  --font-primary: "Manrope", sans-serif;
+  --font-secondary: "Instrument Serif", serif;
+}
+
 @layer base {
   :root {
     --sidebar-background: 0 0% 98%;
@@ -195,3 +191,51 @@
     --sidebar-ring: 217.2 91.2% 59.8%;
   }
 }
+
+/* Animations */
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.rotate-circle {
+  animation: rotate 60s linear infinite;
+}
+
+.counter-rotate {
+  animation: spin 60s linear infinite reverse;
+}
+
+/* Accordion */
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* Animation classes you can apply to your elements */
+.animate-accordion-down {
+  animation: accordion-down 0.2s ease-out;
+}
+
+.animate-accordion-up {
+  animation: accordion-up 0.2s ease-out;
+}

apps/web/app/layout.tsx

@@ -1,18 +1,20 @@
 import type { Metadata } from "next";
-import localFont from "next/font/local";
+import { Instrument_Serif, Manrope } from "next/font/google";
 import "./globals.css";
 import { Appbar } from "@/components/Appbar";
 import { Providers } from "@/components/providers/Providers";
-import { Footer } from "@/components/Footer";
+import Footer from "@/components/landing/footer";
 
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
+const manrope = Manrope({
+  subsets: ["latin"],
+  variable: "--font-manrope",
+  weight: ["300", "400", "500", "600", "700"],
 });
 
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
+const instrumental_serif = Instrument_Serif({
+  subsets: ["latin"],
+  variable: "--font-instrumental-serif",
+  weight: ["400"],
 });
 
 export const metadata: Metadata = {
@@ -36,7 +38,7 @@ export default function RootLayout({
         />
       </head>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} min-h-screen bg-background font-sans antialiased`}
+        className={`${manrope.variable} ${instrumental_serif.variable} min-h-screen bg-background font-sans antialiased`}
       >
         <Providers>
           <div className="relative flex min-h-screen flex-col">

apps/web/app/page.tsx

@@ -1,9 +1,14 @@
-import { Hero } from "@/components/home/Hero";
+import Features from "@/components/landing/features";
+import FAQ from "@/components/landing/faq";
+import Footer from "@/components/landing/footer";
+import Hero from "@/components/landing/hero";
 
 export default function Home() {
   return (
     <div>
       <Hero />
+      <Features />
+      <FAQ />
     </div>
   );
 }