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: Mobile responsiveness #23

Merged
merged 7 commits into from
Sep 28, 2023
Merged

Feat: Mobile responsiveness #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8790608
feat: navbar responsive.
spiritanand Sep 28, 2023
28b2662
feat: AI CLI responsive.
spiritanand Sep 28, 2023
2d715ce
feat: gradient platform responsive.
spiritanand Sep 28, 2023
7676900
feat: authlite responsive.
spiritanand Sep 28, 2023
c8cc4d7
feat: showcase responsive.
spiritanand Sep 28, 2023
4036031
feat: footer responsive.
spiritanand Sep 28, 2023
2d2256d
feat: cta.
spiritanand Sep 28, 2023
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
18 changes: 18 additions & 0 deletions package-lock.json
View file
Open in desktop

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

2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,9 @@
"lint": "next lint"
},
"dependencies": {
"@mantine/hooks": "^7.0.2",
"@radix-ui/react-dropdown-menu": "^2.0.5",
"@radix-ui/react-icons": "^1.3.0",
"@react-three/drei": "9.32.4",
"@react-three/fiber": "8.8.7",
"@react-three/postprocessing": "2.6.2",
Expand Down
71 changes: 49 additions & 22 deletions public/svgs/TrustAuthXLogo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,51 @@
import React from 'react';
import React from "react";

export const TrustAuthXLogo = () => {

return (
<svg width="47" height="47" viewBox="0 0 47 47" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Group 852">
<circle id="Ellipse 203" cx="23.7272" cy="23.2521" r="22.9732" fill="black" />
<g id="Group 837">
<g id="Group 835">
<path id="v" d="M23.8782 39.1812C23.7603 39.2212 23.6448 39.2206 23.5273 39.1796C22.016 38.6523 11.2383 34.4751 11.2383 22.5813V11.8298C11.2383 11.5454 11.4329 11.2974 11.7103 11.2284L23.5513 8.28365C23.6506 8.25897 23.7544 8.25897 23.8536 8.28365C23.9529 8.30833 35.6946 11.2284 35.6946 11.2284C35.9721 11.2974 36.1667 11.5454 36.1667 11.8298V22.5813C36.1667 34.5951 25.3913 38.6684 23.8782 39.1812Z" fill="white" />
</g>
<path id="Ellipse 202" d="M31.177 15.646C30.2233 14.6001 29.0604 13.7663 27.7638 13.1987C26.4671 12.6311 25.0656 12.3424 23.6502 12.3513C22.2348 12.3602 20.837 12.6664 19.5476 13.2503C18.2581 13.8341 17.1058 14.6824 16.1653 15.7402L23.7136 22.4514L31.177 15.646Z" fill="url(#paint0_radial_252_6321)" />
</g>
</g>
<defs>
<radialGradient id="paint0_radial_252_6321" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(23.7136 22.4514) rotate(-89.9555) scale(22.2943)">
<stop offset="0.220303" />
<stop offset="0.995966" stopOpacity="0" />
</radialGradient>
</defs>
</svg>);
}

return (
<svg
width="50"
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">
<circle
id="Ellipse 203"
cx="23.7272"
cy="23.2521"
r="22.9732"
fill="black"
/>
<g id="Group 837">
<g id="Group 835">
<path
id="v"
d="M23.8782 39.1812C23.7603 39.2212 23.6448 39.2206 23.5273 39.1796C22.016 38.6523 11.2383 34.4751 11.2383 22.5813V11.8298C11.2383 11.5454 11.4329 11.2974 11.7103 11.2284L23.5513 8.28365C23.6506 8.25897 23.7544 8.25897 23.8536 8.28365C23.9529 8.30833 35.6946 11.2284 35.6946 11.2284C35.9721 11.2974 36.1667 11.5454 36.1667 11.8298V22.5813C36.1667 34.5951 25.3913 38.6684 23.8782 39.1812Z"
fill="white"
/>
</g>
<path
id="Ellipse 202"
d="M31.177 15.646C30.2233 14.6001 29.0604 13.7663 27.7638 13.1987C26.4671 12.6311 25.0656 12.3424 23.6502 12.3513C22.2348 12.3602 20.837 12.6664 19.5476 13.2503C18.2581 13.8341 17.1058 14.6824 16.1653 15.7402L23.7136 22.4514L31.177 15.646Z"
fill="url(#paint0_radial_252_6321)"
/>
</g>
</g>
<defs>
<radialGradient
id="paint0_radial_252_6321"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(23.7136 22.4514) rotate(-89.9555) scale(22.2943)"
>
<stop offset="0.220303" />
<stop offset="0.995966" stopOpacity="0" />
</radialGradient>
</defs>
</svg>
);
};
24 changes: 13 additions & 11 deletions src/components/AiInCLI.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,26 @@
import React from "react";
import CodeTabs from "./showcase/CodeTabs";
import { useMediaQuery } from "@mantine/hooks";

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

return (
<div
className="py-14"
className="p-4 md:py-14"
style={{
background:
"linear-gradient(78deg, #000 49.2%, #0E0E0E 52.62%, rgba(255, 255, 255, 0.00) 52.66%)",
background: isMobile
? "black"
: "linear-gradient(78deg, #000 49.2%, #0E0E0E 52.62%, rgba(255, 255, 255, 0.00) 52.66%)",
}}
>
<h2 className="mb-14 ml-[24rem] text-center text-[5rem] font-extralight tracking-widest text-black">
<h2 className="mb-10 text-center text-4xl font-extralight tracking-widest text-white md:mb-14 md:ml-[24rem] md:text-[5rem] md:text-black">
<span className="text-[#9EFE00]">See. </span>
<span className="text-white" style={{ mixBlendMode: "difference" }}>
THE
</span>{" "}
<span className="text-white mix-blend-difference">THE</span>{" "}
<span className="font-bold">AI </span>
in ACTION
</h2>
<div className="flex items-center justify-center gap-28">
<div className="flex flex-wrap items-center justify-center gap-12 md:gap-28">
<p className="flex flex-col text-[#9DFD00]">
<span className="text-[1.5rem] font-light">
<span className="mr-2 text-white">{"-> "}</span>
Expand All @@ -31,7 +33,7 @@ function AiInCli() {
</p>
<div>
<CodeTabs
pyFileName="py - cli"
pyFileName="py (cli)"
pyCode={
<div className="text-base font-normal text-white">
<p>
Expand Down Expand Up @@ -72,8 +74,8 @@ function AiInCli() {
</p>
</div>
}
jsFileName="js - cli"
goFileName="go - cli"
jsFileName="js (cli)"
goFileName="go (cli)"
/>
<button className="mt-8 flex w-full items-center justify-center gap-2 text-xs">
<svg
Expand Down
6 changes: 3 additions & 3 deletions src/components/Authlite.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ export default function Authlite() {
background:
"radial-gradient(161.01% 103.41% at -1.12% 6.78%, #434343 0%, #000 88.95%, #000 100%)",
}}
className="m-auto max-w-[1400px] rounded-lg px-8 py-12 text-white"
className="m-auto max-w-[1400px] px-4 py-12 text-white md:rounded-lg"
>
<div className="flex items-center gap-6 ">
<div className="flex flex-col items-center gap-0 md:flex-row md:gap-6">
<p className="border-l-4 border-red-600 py-2 pl-3 text-3xl font-semibold">
Auth-lite
</p>
Expand All @@ -25,7 +25,7 @@ export default function Authlite() {
alt="connect"
className="mt-3"
/>
<p className="text-xl font-semibold">
<p className="text-center text-xl font-semibold">
Designed, <br /> To save Time
</p>
</div>
Expand Down
Loading