Skip to content

Commit

Permalink
feat: showcase responsive.
Browse files Browse the repository at this point in the history
  • Loading branch information
@spiritanand
spiritanand committed Sep 28, 2023
1 parent 7676900 commit c8cc4d7
Show file tree
Hide file tree
Showing 7 changed files with 101 additions and 97 deletions.
1 change: 1 addition & 0 deletions public/svgs/TrustAuthXLogo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export const TrustAuthXLogo = () => {
height="50"
viewBox="0 0 47 47"
fill="none"
className="p-1 md:p-0"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Group 852">
Expand Down
2 changes: 1 addition & 1 deletion src/components/AiInCLI.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ function AiInCli() {

return (
<div
className="p-2 md:py-14"
className="p-4 md:py-14"
style={{
background: isMobile
? "black"
Expand Down
4 changes: 2 additions & 2 deletions src/components/LandingHero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ export default function LandingHero() {
<>
<InteractivePrism
bgColor="black"
height={isMobile ? "80vh" : "60rem"}
height={isMobile ? "50vh" : "60rem"}
isMobile={!!isMobile}
/>
{/*CTA*/}
<h1 className="left-10 top-52 z-10 w-fit p-0 text-left text-4xl text-white mix-blend-exclusion md:absolute md:left-20 md:top-64 md:text-7xl">
<h1 className="left-10 top-28 z-10 w-fit p-0 text-left text-4xl text-white mix-blend-exclusion md:absolute md:left-20 md:top-64 md:text-7xl">
TrustAuthX Light <br />
for Business, <br />
Delight for Devs.
Expand Down
4 changes: 2 additions & 2 deletions src/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ function Navbar() {

return (
<>
<div className="fixed z-[1000] flex w-full justify-between border-b-[0.5px] border-[#696C70] bg-[#00000068] px-6 py-2 text-white mix-blend-luminosity backdrop-blur-[75px] md:py-6">
<div className="fixed z-[1000] flex w-full justify-between border-b-[0.5px] border-[#696C70] bg-[#00000068] px-6 text-white mix-blend-luminosity backdrop-blur-[75px] md:py-3">
{/*Internal Links*/}
<div className="flex items-center gap-7">
<TrustAuthXLogo />
Expand Down Expand Up @@ -73,7 +73,7 @@ function Navbar() {

<DropdownMenu.Portal>
<DropdownMenu.Content
className="DropdownMenuContent z-[1000] flex h-screen w-screen flex-col items-center gap-4 bg-black p-4 font-medium text-white md:hidden"
className="DropdownMenuContent z-[1000] -mt-2 flex h-screen w-screen flex-col items-center gap-4 bg-black p-4 font-medium text-white md:hidden"
sideOffset={5}
>
{internalLinks.map((link) => (
Expand Down
169 changes: 88 additions & 81 deletions src/components/Showcase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,26 @@ import {
ShowcaseSocialConnectionCard,
} from "./showcase/Components";
import CodeTabs from "./showcase/CodeTabs";
import { useMediaQuery } from "@mantine/hooks";

function Showcase() {
const isMobile = useMediaQuery("(max-width: 768px)");

return (
<div className="flex flex-col items-center justify-center p-6 sm:p-12">
<div className="space-between flex max-w-[1110px] flex-col items-center gap-12 lg:flex-row xl:gap-48">
<div className="flex flex-col gap-6 ">
<p className="text-5xl sm:text-[80px] ">
<div className="flex flex-col gap-6">
<p className="text-3xl md:text-5xl ">
Powerful.Simple. And Sooo... Easy to Setup
</p>

<p className="text-[26px] text-[#777]">
<p className="text-xl text-[#777] md:text-[26px]">
We made building Auth for sites easy, fast and Scalable while
delivering best-in-class Security & performance
</p>
</div>

<p className="block rotate-90 text-[128px] leading-none lg:hidden">
<p className="block rotate-90 text-7xl leading-none md:text-[128px] lg:hidden">
;)
</p>

Expand Down Expand Up @@ -211,100 +214,104 @@ function Showcase() {
</span>
</div>

<CodeTabs
pyFileName="TrustAuthx.py"
pyCode={
<div className="text-base font-normal text-white">
<p>
<span className="mr-[10px] text-[#6E7681]">1</span>
<span className="text-[#FF7B72]">from </span>
<span className="text-white ">
trustauthx.authlite{" "}
</span>
<span className="text-[#FF7B72] ">import </span>
<span className="text-white ">AuthLiteClient</span>
</p>

<span className="mr-[10px] text-base font-normal text-[#6E7681]">
2
</span>

<p>
<span className="mr-[10px] text-base font-normal text-[#6E7681]">
3
</span>
<span className="text-sky-300 ">client</span>
<span className="text-white "> = </span>
<span className="text-[#FF7B72] ">AuthLiteClient</span>
<span className="text-white ">(</span>
</p>
{!isMobile ? (
<CodeTabs
pyFileName="TrustAuthx.py"
pyCode={
<div className="text-base font-normal text-white">
<p>
<span className="mr-[10px] text-[#6E7681]">1</span>
<span className="text-[#FF7B72]">from </span>
<span className="text-white ">
trustauthx.authlite{" "}
</span>
<span className="text-[#FF7B72] ">import </span>
<span className="text-white ">AuthLiteClient</span>
</p>

<div className="flex items-center">
<span className="mr-[10px] text-base font-normal text-[#6E7681]">
4
2
</span>

<div className="ml-10">
<span className="text-sky-300 ">api_key</span>
<p>
<span className="mr-[10px] text-base font-normal text-[#6E7681]">
3
</span>
<span className="text-sky-300 ">client</span>
<span className="text-white "> = </span>
<span className="text-[#FF7B72] ">
{"f28ffe7f2e..."}
AuthLiteClient
</span>
<span className="text-white ">,</span>
</div>
</div>
<span className="text-white ">(</span>
</p>

<div className="flex items-center">
<span className="mr-[10px] text-base font-normal text-[#6E7681]">
5
</span>

<div className="ml-10">
<span className="text-sky-300 ">secret_key</span>
<span className="text-white "> = </span>
<span className="text-[#FF7B72] ">
{"f28ffe7f2e..."}
<div className="flex items-center">
<span className="mr-[10px] text-base font-normal text-[#6E7681]">
4
</span>
<span className="text-white ">,</span>

<div className="ml-10">
<span className="text-sky-300 ">api_key</span>
<span className="text-white "> = </span>
<span className="text-[#FF7B72] ">
{"f28ffe7f2e..."}
</span>
<span className="text-white ">,</span>
</div>
</div>
</div>

<div className="flex items-center">
<span className="mr-[10px] text-base font-normal text-[#6E7681]">
6
</span>
<div className="flex items-center">
<span className="mr-[10px] text-base font-normal text-[#6E7681]">
5
</span>

<div className="ml-10">
<span className="text-sky-300 ">org_id</span>
<span className="text-white "> = </span>
<span className="text-[#FF7B72] ">
{"f28ffe7f2e..."}
<div className="ml-10">
<span className="text-sky-300 ">secret_key</span>
<span className="text-white "> = </span>
<span className="text-[#FF7B72] ">
{"f28ffe7f2e..."}
</span>
<span className="text-white ">,</span>
</div>
</div>

<div className="flex items-center">
<span className="mr-[10px] text-base font-normal text-[#6E7681]">
6
</span>
<span className="text-white ">,</span>

<div className="ml-10">
<span className="text-sky-300 ">org_id</span>
<span className="text-white "> = </span>
<span className="text-[#FF7B72] ">
{"f28ffe7f2e..."}
</span>
<span className="text-white ">,</span>
</div>
</div>
</div>

<div className="flex items-center">
<span className="mr-[10px] text-base font-normal text-[#6E7681]">
7
</span>
<div className="flex items-center">
<span className="mr-[10px] text-base font-normal text-[#6E7681]">
7
</span>

<div className="ml-44">)</div>
</div>
<div className="ml-44">)</div>
</div>

<p className="">
<span className="mr-[10px] text-base font-normal text-[#6E7681]">
8
</span>
<span className="text-white ">def </span>
<span className="text-[#FF7B72] ">get_auth_</span>
<span className="text-white ">():</span>
</p>
</div>
}
jsFileName="Auth.js"
goFileName="TrustAuthx.go"
/>
<p className="">
<span className="mr-[10px] text-base font-normal text-[#6E7681]">
8
</span>
<span className="text-white ">def </span>
<span className="text-[#FF7B72] ">get_auth_</span>
<span className="text-white ">():</span>
</p>
</div>
}
jsFileName="Auth.js"
goFileName="TrustAuthx.go"
/>
) : null}
</div>
</div>

Expand Down
13 changes: 3 additions & 10 deletions src/components/showcase/CodeTabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,18 +20,11 @@ const CodeTabs = ({
const getCode = () => {
switch (activeTab) {
case "javascript":
return <div>js</div>;
return "";
case "python":
return pyCode || "";
case "go":
return (
<div>
func TrustAuthX(){" "}
{
// Go code
}
</div>
);
return "";
}
};

Expand All @@ -40,7 +33,7 @@ const CodeTabs = ({
<div className="flex space-x-2 rounded-t-xl border-b border-b-[#30363D] bg-[#161B23] md:px-2 md:pr-24 md:pt-2">
{pyFileName ? (
<button
className={`flex items-center gap-7 rounded px-4 py-2 pr-10 text-[14px] ${
className={`flex items-center gap-7 rounded px-4 py-2 pr-10 text-[14px] ${
activeTab === "python"
? "border border-[#30363D] border-b-black bg-[#0D1117] text-white"
: "border border-transparent bg-transparent text-[#7D8590] "
Expand Down
5 changes: 4 additions & 1 deletion src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,15 +8,18 @@ import LandingHero from "../components/LandingHero";
import React from "react";
import AiInCLI from "../components/AiInCLI";
import Navbar from "../components/Navbar";
import { useMediaQuery } from "@mantine/hooks";

export default function LandingPage() {
const isMobile = useMediaQuery("(max-width: 768px)");

return (
<>
<Navbar />
<LandingHero />
<AiInCLI />
<GradientPlatform />
<Timeline />
{!isMobile ? <Timeline /> : null}
<Authlite />
<Showcase />
{/* <Customize /> */}
Expand Down

0 comments on commit c8cc4d7

Please sign in to comment.