Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: added bento cards at landing pages #187

Merged
merged 2 commits into from
Jan 13, 2025
Merged

feat: added bento cards at landing pages #187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3390698
feat: added bento cards at landing pages
amanbairagi30 Jan 13, 2025
7df761f
Update layout.tsx
SkidGod4444 Jan 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions apps/www/app/(routes)/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion apps/www/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Binary file added apps/www/assests/ai-assistant.ts.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion apps/www/components/custom/hero/about.sec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
83 changes: 78 additions & 5 deletions apps/www/components/custom/hero/agents.sec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down
67 changes: 64 additions & 3 deletions apps/www/components/custom/hero/widgets.sec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
Expand Down
4 changes: 2 additions & 2 deletions apps/www/config/site.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.`,
Expand All @@ -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: {
Expand Down
3 changes: 3 additions & 0 deletions apps/www/images/image.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import aiCode from "../assests/ai-assistant.ts.png";

export { aiCode };
3 changes: 3 additions & 0 deletions apps/www/tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))",
Expand Down
Loading