Skip to content

Commit

Permalink
blogs-page
Browse files Browse the repository at this point in the history
  • Loading branch information
@Neon-20
Neon-20 committed Dec 24, 2023
1 parent 7e6c6bd commit 66287ef
Show file tree
Hide file tree
Showing 5 changed files with 336 additions and 173 deletions.
26 changes: 26 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"@react-three/drei": "9.32.4",
"@react-three/fiber": "8.8.7",
"@react-three/postprocessing": "2.6.2",
"@tabler/icons-react": "^2.44.0",
"@types/node": "20.6.0",
"@types/react": "18.2.21",
"@types/react-dom": "18.2.7",
Expand Down
54 changes: 54 additions & 0 deletions src/app/blogs/_components/bento-grids.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { cn } from "@/lib/utils";

export const BentoGrid = ({
className,
children,
}: {
className?: string;
children?: React.ReactNode;
}) => {
return (
<div
className={cn(
"grid md:auto-rows-[18rem] grid-cols-1 md:grid-cols-3 gap-4 max-w-7xl mx-auto ",
className
)}
>
{children}
</div>
);
};

export const BentoGridItem = ({
className,
title,
description,
header,
icon,
}: {
className?: string;
title?: string | React.ReactNode;
description?: string | React.ReactNode;
header?: React.ReactNode;
icon?: React.ReactNode;
}) => {
return (
<div
className={cn(
"row-span-1 rounded-xl group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none p-4 dark:bg-black dark:border-white/[0.2] bg-white border border-transparent justify-between flex flex-col space-y-4",
className
)}
>
{header}
<div className="group-hover/bento:translate-x-2 transition duration-200">
{icon}
<div className="font-sans font-bold text-neutral-600 dark:text-neutral-200 mb-2 mt-2">
{title}
</div>
<div className="font-sans font-normal text-neutral-600 text-xs dark:text-neutral-300">
{description}
</div>
</div>
</div>
);
};
193 changes: 193 additions & 0 deletions src/app/blogs/auth0-pricing/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
"use client";
import React from "react";
// import { calsans } from "@/fonts/calsans";
import Image from "next/image";
import { twMerge } from "tailwind-merge";
import { TracingBeam } from "../_components/tracing-beam";
import Head from "next/head";

export default function TracingBeamDemo() {
return (
<TracingBeam>
<Head>
<meta name="keywords" content="auth0-pricing, authx, trustauthx" />
</Head>
<div className="max-w-2xl mx-auto antialiased pt-4 relative">
{dummyContent.map((item, index) => (
<div key={`content-${index}`} className="mb-10">
<h2 className="bg-black text-white rounded-full text-sm w-fit px-4 py-1 mb-4">
{item.badge}
</h2>
<p className={twMerge("text-xl mb-4")}>
{item.title}
</p>

<div className="text-sm prose prose-sm dark:prose-invert">
{item?.image && (
<Image
src={item.image}
alt="blog thumbnail"
height="1000"
width="1000"
className="rounded-lg mb-10 object-cover"
/>
)}
{item.description}
</div>
</div>
))}
</div>
</TracingBeam>
);
}

const dummyContent = [
{
title: "Lorem Ipsum Dolor Sit Amet",
description: (
<>
<p>
Sit duis est minim proident non nisi velit non consectetur. Esse
adipisicing laboris consectetur enim ipsum reprehenderit eu deserunt
Lorem ut aliqua anim do. Duis cupidatat qui irure cupidatat incididunt
incididunt enim magna id est qui sunt fugiat. Laboris do duis pariatur
fugiat Lorem aute sit ullamco. Qui deserunt non reprehenderit dolore
nisi velit exercitation Lorem qui do enim culpa. Aliqua eiusmod in
occaecat reprehenderit laborum nostrud fugiat voluptate do Lorem culpa
officia sint labore. Tempor consectetur excepteur ut fugiat veniam
commodo et labore dolore commodo pariatur.
</p>
<p>
Dolor minim irure ut Lorem proident. Ipsum do pariatur est ad ad
veniam in commodo id reprehenderit adipisicing. Proident duis
exercitation ad quis ex cupidatat cupidatat occaecat adipisicing.
</p>
<p>
Tempor quis dolor veniam quis dolor. Sit reprehenderit eiusmod
reprehenderit deserunt amet laborum consequat adipisicing officia qui
irure id sint adipisicing. Adipisicing fugiat aliqua nulla nostrud.
Amet culpa officia aliquip deserunt veniam deserunt officia
adipisicing aliquip proident officia sunt.
</p>
</>
),
badge: "React",
image:
"https://openauthx.s3.ap-south-1.amazonaws.com/a1ugkAjzRtpPrnusxI4adP6q4Q0.jpg.png",
},
{
title: "Lorem Ipsum Dolor Sit Amet",
description: (
<>
<p>
Ex irure dolore veniam ex velit non aute nisi labore ipsum occaecat
deserunt cupidatat aute. Enim cillum dolor et nulla sunt exercitation
non voluptate qui aliquip esse tempor. Ullamco ut sunt consectetur
sint qui qui do do qui do. Labore laborum culpa magna reprehenderit ea
velit id esse adipisicing deserunt amet dolore. Ipsum occaecat veniam
commodo proident aliqua id ad deserunt dolor aliquip duis veniam sunt.
</p>
<p>
In dolore veniam excepteur eu est et sunt velit. Ipsum sint esse
veniam fugiat esse qui sint ad sunt reprehenderit do qui proident
reprehenderit. Laborum exercitation aliqua reprehenderit ea sint
cillum ut mollit.
</p>
</>
),
badge: "Changelog",
image:
"https://openauthx.s3.ap-south-1.amazonaws.com/a1ugkAjzRtpPrnusxI4adP6q4Q0.jpg.png",
},
{
title: "Lorem Ipsum Dolor Sit Amet",
description: (
<>
<p>
Ex irure dolore veniam ex velit non aute nisi labore ipsum occaecat
deserunt cupidatat aute. Enim cillum dolor et nulla sunt exercitation
non voluptate qui aliquip esse tempor. Ullamco ut sunt consectetur
sint qui qui do do qui do. Labore laborum culpa magna reprehenderit ea
velit id esse adipisicing deserunt amet dolore. Ipsum occaecat veniam
commodo proident aliqua id ad deserunt dolor aliquip duis veniam sunt.
</p>
</>
),
badge: "Launch Week",
image:
"https://openauthx.s3.ap-south-1.amazonaws.com/a1ugkAjzRtpPrnusxI4adP6q4Q0.jpg.png",
},
{
title: "Lorem Ipsum Dolor Sit Amet",
description: (
<>
<p>
Ex irure dolore veniam ex velit non aute nisi labore ipsum occaecat
deserunt cupidatat aute. Enim cillum dolor et nulla sunt exercitation
non voluptate qui aliquip esse tempor. Ullamco ut sunt consectetur
sint qui qui do do qui do. Labore laborum culpa magna reprehenderit ea
velit id esse adipisicing deserunt amet dolore. Ipsum occaecat veniam
commodo proident aliqua id ad deserunt dolor aliquip duis veniam sunt.
</p>
</>
),
badge: "Launch Week",
image:
"https://openauthx.s3.ap-south-1.amazonaws.com/a1ugkAjzRtpPrnusxI4adP6q4Q0.jpg.png",
},
{
title: "Lorem Ipsum Dolor Sit Amet",
description: (
<>
<p>
Ex irure dolore veniam ex velit non aute nisi labore ipsum occaecat
deserunt cupidatat aute. Enim cillum dolor et nulla sunt exercitation
non voluptate qui aliquip esse tempor. Ullamco ut sunt consectetur
sint qui qui do do qui do. Labore laborum culpa magna reprehenderit ea
velit id esse adipisicing deserunt amet dolore. Ipsum occaecat veniam
commodo proident aliqua id ad deserunt dolor aliquip duis veniam sunt.
</p>
</>
),
badge: "Launch Week",
image:
"https://openauthx.s3.ap-south-1.amazonaws.com/a1ugkAjzRtpPrnusxI4adP6q4Q0.jpg.png",
},
{
title: "Lorem Ipsum Dolor Sit Amet",
description: (
<>
<p>
Ex irure dolore veniam ex velit non aute nisi labore ipsum occaecat
deserunt cupidatat aute. Enim cillum dolor et nulla sunt exercitation
non voluptate qui aliquip esse tempor. Ullamco ut sunt consectetur
sint qui qui do do qui do. Labore laborum culpa magna reprehenderit ea
velit id esse adipisicing deserunt amet dolore. Ipsum occaecat veniam
commodo proident aliqua id ad deserunt dolor aliquip duis veniam sunt.
</p>
</>
),
badge: "Launch Week",
image:
"https://openauthx.s3.ap-south-1.amazonaws.com/a1ugkAjzRtpPrnusxI4adP6q4Q0.jpg.png",
},
{
title: "Lorem Ipsum Dolor Sit Amet",
description: (
<>
<p>
Ex irure dolore veniam ex velit non aute nisi labore ipsum occaecat
deserunt cupidatat aute. Enim cillum dolor et nulla sunt exercitation
non voluptate qui aliquip esse tempor. Ullamco ut sunt consectetur
sint qui qui do do qui do. Labore laborum culpa magna reprehenderit ea
velit id esse adipisicing deserunt amet dolore. Ipsum occaecat veniam
commodo proident aliqua id ad deserunt dolor aliquip duis veniam sunt.
</p>
</>
),
badge: "Launch Week",
image:
"https://openauthx.s3.ap-south-1.amazonaws.com/a1ugkAjzRtpPrnusxI4adP6q4Q0.jpg.png",
},

];
Loading

0 comments on commit 66287ef

Please sign in to comment.