Merge pull request #187 from amanbairagi30/bento

feat: add bento cards at landing pages
plura-ai · Jan 13, 2025 · 306a349 · 306a349
2 parents 19eb0d8 + 7df761f
commit 306a349
Show file tree

Hide file tree

Showing 9 changed files with 160 additions and 14 deletions.
diff --git a/apps/www/app/(routes)/page.tsx b/apps/www/app/(routes)/page.tsx
@@ -58,11 +58,17 @@ export default function Home() {
         <AboutSection />
       </section>
 
-      <section id="agents" className="flex flex-1 items-center justify-center">
+      <section
+        id="agents"
+        className="flex w-full flex-1 items-center justify-center"
+      >
         <AgentsSec />
       </section>
 
-      <section id="widgets" className="flex flex-1 items-center justify-center">
+      <section
+        id="widgets"
+        className="flex w-full flex-1 items-center justify-center"
+      >
         <WidgetsSec />
       </section>
     </div>

diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
@@ -19,7 +19,7 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning suppressContentEditableWarning>
       <PosthogProvider>
         <body
-          className={` bg-background font-sans min-h-screen min-w-80 ${GeistSans.variable} antialiased`}
+          className={`bg-background min-h-screen min-w-80 ${GeistSans.variable} font-sans antialiased`}
         >
           <ThemeProvider
             attribute="class"

diff --git a/apps/www/assests/ai-assistant.ts.png b/apps/www/assests/ai-assistant.ts.png
diff --git a/apps/www/components/custom/hero/about.sec.tsx b/apps/www/components/custom/hero/about.sec.tsx
@@ -10,7 +10,7 @@ import { siteConfig } from "@/config/site.config";
 
 export default function AboutSection() {
   return (
-    <div className="relative flex-col items-center justify-center">
+    <div className="relative mx-auto w-full max-w-full flex-col items-center justify-center">
       <div className="absolute inset-0 mx-auto h-full w-full bg-[radial-gradient(circle,rgba(211,211,211,0.1),rgba(18,20,22,0.05),rgba(18,20,22,0))] opacity-60" />
       <div className="px-8 md:px-12">
         <SectionHeader>

diff --git a/apps/www/components/custom/hero/agents.sec.tsx b/apps/www/components/custom/hero/agents.sec.tsx
@@ -1,26 +1,99 @@
 import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import {
+  IconBrain,
+  IconRobot,
+  IconCode,
+  IconArrowRight,
+} from "@tabler/icons-react";
 import {
   SectionHeader,
   SectionHeaderDescription,
   SectionHeaderHeading,
 } from "../text-wrappers";
 import { siteConfig } from "@/config/site.config";
-// import AgentsBento from "../bentos/agents-bento";
+import { cn } from "@/lib/utils";
+import { aiCode } from "@/images/image";
+
+const agentCards = [
+  {
+    title: "AI Assistant",
+    description:
+      "Intelligent coding companion that understands your needs. It helps streamline your coding process and enhances productivity.",
+    icon: IconBrain,
+    href: "/features/ai-assistant",
+    class: "md:col-span-2 md:row-span-2 h-[40rem]",
+    image: aiCode,
+  },
+  {
+    title: "Smart Automation",
+    description:
+      "Automate repetitive tasks with intelligent workflows. This feature allows you to focus on more important aspects of your projects.",
+    icon: IconRobot,
+    href: "/features/automation",
+    class: "",
+    image: null,
+  },
+  {
+    title: "Code Generation",
+    description:
+      "Generate high-quality code snippets instantly. This tool saves time and reduces the likelihood of errors in your code.",
+    icon: IconCode,
+    href: "/features/code-gen",
+    class: "",
+    image: "",
+  },
+];
 
 export default function AgentsSec() {
   return (
-    <div className="relative flex-col w-screen items-center justify-center mt-40">
+    <div className="relative w-full items-center justify-center mt-40">
       <div className="absolute inset-0 mx-auto h-full w-full bg-[linear-gradient(to_bottom,rgba(18,20,22,1),rgba(18,20,22,0.8),rgba(18,20,22,0))]" />
-      <div className="px-8 md:px-12">
-        <SectionHeader className="flex flex-col z-50">
+      <div className="px-8 md:px-14">
+        <SectionHeader className="flex flex-col z-50 mb-16">
           <SectionHeaderHeading>
             {siteConfig.homePage.sections.agents.heading}
           </SectionHeaderHeading>
           <SectionHeaderDescription>
             {siteConfig.homePage.sections.agents.description}
           </SectionHeaderDescription>
         </SectionHeader>
-        {/* <AgentsBento/> */}
+
+        <div className="grid grid-cols-1 px-8 md:px-14 max-w-[86rem] mx-auto md:grid-cols-3 gap-4">
+          {agentCards.map((card, index) => (
+            <div
+              key={index}
+              className={cn(
+                card.class,
+                "relative group overflow-hidden backdrop-blur-sm rounded-3xl p-8 hover:bg-accent/10 transition-all duration-300 border-2 border-accent/50"
+              )}
+            >
+              {/* <card.icon className="w-10 h-10 text-primary mb-4" /> */}
+              {card.image && (
+                <div className="w-full absolute bottom-[-10rem] right-[-10rem] h-auto mb-4 rounded-lg">
+                  <Image
+                    src={card.image}
+                    alt={card.title}
+                    className="h-[35rem] object-contain mb-4 rounded-lg"
+                    width={800}
+                    height={800}
+                  />
+                </div>
+              )}
+              <h3 className="text-2xl font-semibold mb-2">{card.title}</h3>
+              <p className="text-gray-400">{card.description}</p>
+              <div className="md:bottom-[-25rem] left-[30%] group-hover:opacity-100 opacity-0 z-[-1] absolute bg-gradient-to-t from-primary/50 to-accent/90 blur-[6em] rounded-xl transition-all translate-x-[-50%] duration-500 ease-out w-[10rem] md:w-[30rem] h-[20rem] md:h-[32rem] rotate-[0deg]" />
+              <Link
+                href={card.href}
+                className="text-primary group w-fit flex items-center gap-1 bg-accent text-xs border border-accent rounded-full px-3 mt-4 py-1 transition-all duration-300 hover:bg-primary hover:text-background"
+              >
+                <span className="font-semibold text-xs">Read More</span>{" "}
+                <IconArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-all duration-300" />
+              </Link>
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );

diff --git a/apps/www/components/custom/hero/widgets.sec.tsx b/apps/www/components/custom/hero/widgets.sec.tsx
@@ -1,24 +1,85 @@
 import React from "react";
+import Link from "next/link";
+import {
+  IconPuzzle,
+  IconBolt,
+  IconStack,
+  IconTools,
+  IconArrowRight,
+} from "@tabler/icons-react";
 import {
   SectionHeader,
   SectionHeaderDescription,
   SectionHeaderHeading,
 } from "../text-wrappers";
 import { siteConfig } from "@/config/site.config";
+import { cn } from "@/lib/utils";
+
+const widgetCards = [
+  {
+    title: "Customizable Widgets",
+    description:
+      "Build and customize widgets that fit your workflow perfectly. Enjoy the flexibility to adapt them as your needs evolve.",
+    icon: IconPuzzle,
+    href: "/features/widgets",
+  },
+  {
+    title: "Quick Actions",
+    description:
+      "Execute common tasks with lightning-fast shortcuts. Save time and increase productivity with every click.",
+    icon: IconBolt,
+    href: "/features/quick-actions",
+  },
+  {
+    title: "Widget Library",
+    description:
+      "Access a growing collection of pre-built widgets. Easily integrate them into your projects for rapid development.",
+    icon: IconStack,
+    href: "/features/library",
+  },
+  {
+    title: "Developer Tools",
+    description:
+      "Essential tools to boost your development workflow. Streamline your processes and enhance collaboration with your team.",
+    icon: IconTools,
+    href: "/features/tools",
+  },
+];
 
 export default function WidgetsSec() {
   return (
-    <div className="relative flex-col w-screen items-center justify-center mt-40">
+    <div className="relative w-full items-center justify-center my-40">
       <div className="absolute inset-0 mx-auto h-full w-full bg-[linear-gradient(to_bottom,rgba(18,20,22,1),rgba(18,20,22,0.8),rgba(18,20,22,0))]" />
-      <div className="px-8 md:px-12">
-        <SectionHeader className="flex flex-col z-50">
+      <div className="px-8 md:px-14">
+        <SectionHeader className="flex flex-col z-50 mb-16">
           <SectionHeaderHeading>
             {siteConfig.homePage.sections.widgets.heading}
           </SectionHeaderHeading>
           <SectionHeaderDescription>
             {siteConfig.homePage.sections.widgets.description}
           </SectionHeaderDescription>
         </SectionHeader>
+
+        <div className="grid grid-cols-1 px-8 md:px-14 max-w-[86rem] mx-auto md:grid-cols-2 gap-4">
+          {widgetCards.map((card, index) => (
+            <div
+              key={index}
+              className="relative group h-[30rem] overflow-hidden backdrop-blur-sm rounded-3xl p-8 hover:bg-accent/10 transition-all duration-300 border border-accent/50"
+            >
+              {/* <card.icon className="w-10 h-10 text-primary mb-4" /> */}
+              <h3 className="text-2xl font-semibold mb-2">{card.title}</h3>
+              <p className="text-gray-400">{card.description}</p>
+              <div className="md:bottom-[-29rem] left-[50%] group-hover:opacity-100 opacity-0 z-[-1] absolute bg-gradient-to-t from-primary to-accent/90 blur-[6em] rounded-xl transition-all translate-x-[-50%] duration-500 ease-out w-[10rem] md:w-[30rem] h-[20rem] md:h-[32rem] rotate-[0deg]" />
+              <Link
+                href={card.href}
+                className="text-primary group w-fit flex items-center gap-1 bg-accent text-xs border border-accent rounded-full px-3 mt-4 py-1 transition-all duration-300 hover:bg-primary hover:text-background"
+              >
+                <span className="font-semibold text-xs">Read More</span>{" "}
+                <IconArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-all duration-300" />
+              </Link>
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );

diff --git a/apps/www/config/site.config.ts b/apps/www/config/site.config.ts
@@ -17,7 +17,7 @@ What started as a simple issue tracker, has since evolved into a powerful projec
     },
   },
   homePage: {
-    heading: "Integrate Ai services in your products with own Ai agents",
+    heading: "Integrate AI services in your products with own AI agents",
     description: `Empower your SAAS support service with your own AI agent. Let our
           intelligent assistant handle your customer queries, provide instant
           solutions, and enhance your customer satisfaction.`,
@@ -29,7 +29,7 @@ What started as a simple issue tracker, has since evolved into a powerful projec
         description: `Linear is shaped by the practices and principles that distinguish world-class product teams from the rest: relentless focus, fast execution, and a commitment to the quality of craft.`,
       },
       agents: {
-        heading: "Build your own Ai agents",
+        heading: "Build your own AI agents",
         description: `Linear is shaped by the practices and principles that distinguish world-class product teams from the rest: relentless focus, fast execution, and a commitment to the quality of craft.`,
       },
       widgets: {

diff --git a/apps/www/images/image.ts b/apps/www/images/image.ts
@@ -0,0 +1,3 @@
+import aiCode from "../assests/ai-assistant.ts.png";
+
+export { aiCode };
diff --git a/apps/www/tailwind.config.ts b/apps/www/tailwind.config.ts
@@ -9,6 +9,9 @@ const config: Config = {
   ],
   theme: {
     extend: {
+      fontFamily: {
+        inter: ["var(--font-inter)", "sans-serif"],
+      },
       colors: {
         background: "hsl(var(--background))",
         foreground: "hsl(var(--foreground))",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import aiCode from "../assests/ai-assistant.ts.png";

		export { aiCode };