Skip to content

Commit

Permalink
Merge pull request #16 from One-Click-Auth/feat/collate-landing-page
Browse files Browse the repository at this point in the history 
Collate landing page
  • Loading branch information
@moonlightnexus
moonlightnexus authored Sep 22, 2023
2 parents bdeb578 + c2d4281 commit 088fd59
Show file tree
Hide file tree
Showing 10 changed files with 430 additions and 455 deletions.
5 changes: 1 addition & 4 deletions src/pages/authlite.tsx → src/components/Authlite.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Link from 'next/link'
import { buttonVariants } from '@/components/ui/button'
import { cn } from '@/lib/utils'

function authlite() {
export default function Authlite() {
return (
<div
style={{ background: "radial-gradient(161.01% 103.41% at -1.12% 6.78%, #434343 0%, #000 88.95%, #000 100%)" }}
Expand Down Expand Up @@ -47,9 +47,6 @@ function authlite() {
)
}

export default authlite


const PlusSvg = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="29" viewBox="0 0 28 29" fill="none">
Expand Down
336 changes: 336 additions & 0 deletions src/components/Customize.tsx
View file

Large diffs are not rendered by default.

3 changes: 1 addition & 2 deletions src/components/Dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import Image from 'next/image';
import { ChevronDown, LogOut, PersonStanding } from "lucide-react";
import * as React from "react";

Expand All @@ -15,7 +14,7 @@ export function AccountDropdown() {
<div>
<div className=" showcase-9-dropdown-shadow mt-2 w-96 max-w-[80vw] cursor-pointer overflow-hidden rounded-2xl bg-white py-6">
<div className="sticky top-0 flex items-center gap-1 bg-white px-6 pb-4">
<Image
<img
src="https://github.com/shadcn.png"
className="h-10 w-10 rounded-full"
alt="@shadcn"
Expand Down
38 changes: 38 additions & 0 deletions src/components/GradientPlatform.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import ArrowIcon from './ArrowIcon'
import AnimatedGradient from './gradients/AnimatedGradient'
import React from 'react'

export default function GradientPlatform () {
return (
<div className="-z-20 w-[97vw] m-auto mt-5 rounded-3xl bg-black py-24 text-gray-200 lg:rounded-[90px]">
<div className="flex flex-col items-center px-4">
<div className="ml-36 flex max-h-[738px] w-full max-w-[1240px] flex-col flex-wrap gap-14 rounded-3xl px-4">
<div className=" text-4xl font-semibold">
TrustAuthx is the world’s most Easiest and
<br />
completely Managed Auth platform
</div>

<div className="flex items-center gap-2">
<button className="flex items-center justify-center gap-2 rounded-full border border-white px-3 py-1">
Get started <ArrowIcon />
</button>

<button className="flex items-center justify-center gap-2 rounded-full border-white px-3 py-1">
Schedule a demo <ArrowIcon />
</button>
</div>
</div>
</div>

<div className="relative">
<div className="flex items-center justify-center px-4">
<div className=" relative z-10 mt-6 h-full max-h-[738px] w-2/3 rounded-3xl border border-white border-opacity-25 bg-white bg-opacity-5 p-12 shadow-inner">
<img src="/page3.png" alt="imagetrustauthx" className="bg-cover" />
</div>
</div>
<AnimatedGradient />
</div>
</div>
);
}
21 changes: 10 additions & 11 deletions src/components/Showcase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import {
RedirectButton,
ShowcaseSocialConnectionCard,
} from "./showcase/Components";
import Image from 'next/image';
import CodeTabs from "./showcase/CodeTabs";

function Showcase() {
Expand Down Expand Up @@ -54,7 +53,7 @@ function Showcase() {
className="showcase-1 w-full "
>
<div className="relative mt-10 flex h-[300px] w-full items-center justify-center bg-transparent ">
<Image
<img
src="/showcase/1.png"
alt=""
className="absolute bottom-0 left-0 bg-cover"
Expand Down Expand Up @@ -102,7 +101,7 @@ function Showcase() {
</div>

<div className="relative hidden h-[205px] w-full items-center justify-center bg-transparent sm:flex ">
<Image
<img
src="/showcase/2.png"
alt=""
className="absolute bottom-0 left-0 w-full bg-cover"
Expand Down Expand Up @@ -170,12 +169,12 @@ function Showcase() {
<p className="underline underline-offset-[12px]">Depl</p>
</div>

<Image
<img
src="/showcase/4.png"
alt=""
className="absolute -left-10 bottom-0 bg-cover"
/>
<Image
<img
src="/showcase/4-2.png"
alt=""
className="absolute bottom-0 right-20 bg-cover"
Expand Down Expand Up @@ -217,24 +216,24 @@ function Showcase() {
</div>

{/* things to make the background */}
<Image
<img
src="/showcase/code-section/cone.svg"
className="absolute bottom-[40%] left-0 "
alt=""
/>
<Image
<img
src="/showcase/code-section/circle-1.svg"
className="absolute bottom-0 left-0 "
alt=""
/>

<Image
<img
src="/showcase/code-section/circle-2.svg"
className="absolute bottom-28 left-20 "
alt=""
/>

<Image
<img
src="/showcase/code-section/circle-3.svg"
className="absolute right-0 top-1/2 -translate-y-1/2 "
alt=""
Expand Down Expand Up @@ -265,7 +264,7 @@ function Showcase() {
<div className="hidden items-center gap-14 sm:flex">
<p>ValidityDate</p>
<p>Logo</p>
<p>Image</p>
<p>img</p>
</div>
</div>

Expand Down Expand Up @@ -383,7 +382,7 @@ function Showcase() {
className=" relative -mx-10 hidden h-[325px] w-full items-center
justify-center bg-transparent sm:flex "
>
<Image
<img
src="/showcase/9.svg"
alt=""
className="absolute -bottom-8 left-0 w-full max-w-[95%] bg-cover"
Expand Down
61 changes: 30 additions & 31 deletions src/pages/timeline.tsx → src/components/Timeline.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,31 +3,30 @@ import {
PercentageSVG,
PercentageSVGThird,
PercentageSVGSecondTimeline,
} from "../components/timeline/Components";
import { TimelineCard } from "../components/timeline/TimelineCard";
import { Information } from "../components/timeline/Information";
import Carousel from "../components/timeline/CarouselSlider";
import ArrowIcon from "../components/ArrowIcon";
import Image from 'next/image';
} from "./timeline/Components";
import { TimelineCard } from "./timeline/TimelineCard";
import { Information } from "./timeline/Information";
import Carousel from "./timeline/CarouselSlider";
import ArrowIcon from "./ArrowIcon";

function Timeline() {
return (
<>
<div className="flex px-12 py-12 2xl:py-0 2xl:pl-44 2xl:pr-[130px]">
<div className="flex max-w-[160px] flex-col items-center justify-center">
<Image src="/timeline/first.svg" alt="" />
<img src="/timeline/first.svg" alt="" />

<Image src="/timeline/8-icon.svg" alt="" />
<img src="/timeline/8-icon.svg" alt="" />

<Image src="/timeline/8.svg" alt="" />
<img src="/timeline/8.svg" alt="" />

<Image src="/timeline/7-icon.svg" alt="" />
<img src="/timeline/7-icon.svg" alt="" />

<Image src="/timeline/7.svg" alt="" />
<img src="/timeline/7.svg" alt="" />

<Image src="/timeline/6-icon.svg" alt="" />
<img src="/timeline/6-icon.svg" alt="" />

<Image src="/timeline/6.svg" alt="" />
<img src="/timeline/6.svg" alt="" />
</div>

<div className="mt-[750px] flex-1">
Expand Down Expand Up @@ -163,24 +162,24 @@ function Timeline() {
<div className="timeline-radial-gradient flex flex-1 px-12 py-12 2xl:py-0 2xl:pl-44 2xl:pr-[130px]">
<div className="flex max-w-[160px] flex-col items-center justify-center">
<div className="relative ">
<Image src="/timeline/glow.svg" className=" " alt="" />
<img src="/timeline/glow.svg" className=" " alt="" />

<Image
<img
src="/timeline/5-icon.svg"
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
alt=""
/>
</div>
<Image src="/timeline/4.svg" alt="" />
<img src="/timeline/4.svg" alt="" />

<Image src="/timeline/3-icon.svg" alt="" />
<img src="/timeline/3-icon.svg" alt="" />

<Image src="/timeline/3.svg" alt="" />
<img src="/timeline/3.svg" alt="" />

<Image src="/timeline/2-icon.svg" alt="" />
<Image src="/timeline/2.svg" alt="" />
<Image src="/timeline/1-icon.svg" alt="" />
<Image src="/timeline/1.svg" alt="" />
<img src="/timeline/2-icon.svg" alt="" />
<img src="/timeline/2.svg" alt="" />
<img src="/timeline/1-icon.svg" alt="" />
<img src="/timeline/1.svg" alt="" />
</div>
{/* required
*/}
Expand Down Expand Up @@ -332,15 +331,15 @@ function Timeline() {
</div>

<div className="flex flex-col gap-3 pb-6">
<Image src="/timeline/speedCard/1.svg" alt="" />
<Image src="/timeline/speedCard/2.svg" alt="" />
<Image src="/timeline/speedCard/3.svg" alt="" />
<Image src="/timeline/speedCard/4.svg" alt="" />
<img src="/timeline/speedCard/1.svg" alt="" />
<img src="/timeline/speedCard/2.svg" alt="" />
<img src="/timeline/speedCard/3.svg" alt="" />
<img src="/timeline/speedCard/4.svg" alt="" />
</div>
</div>

<div className="shad rounded-2xl bg-black shadow-lg shadow-zinc-800 ">
<Image src="/timeline/lastcard.svg" className="" alt="" />
<img src="/timeline/lastcard.svg" className="" alt="" />

<div className=" rounded-b-2xl bg-[#1A1A1A] px-12 py-7">
<div className=" w-96 text-lg font-bold leading-loose text-neutral-50">
Expand All @@ -364,8 +363,8 @@ function Timeline() {

<div className="flex px-12 2xl:pl-44 2xl:pr-[130px]">
<div className="flex max-w-[160px] flex-col items-center ">
<Image src="/timeline/last-icon.svg" alt="" />
<Image src="/timeline/last.svg" alt="" />
<img src="/timeline/last-icon.svg" alt="" />
<img src="/timeline/last.svg" alt="" />
</div>

<div className=" mt-40 flex flex-1 flex-col gap-9">
Expand Down Expand Up @@ -471,7 +470,7 @@ function GradientCard({
return (
<div className="timeline-gradientcard-gradient rounded-2xl p-10">
<div className="flex items-center justify-between">
<Image
<img
src="https://s3-alpha-sig.figma.com/img/9d6d/cfc1/fb8cd40116ca161e463af1ee400a729e?Expires=1694995200&Signature=h1x8zYIEcksM6fh5RDvQ4ECeihTfQdeHloWbzDadukMpZBhws9lPBpMFh-9XIsh2k3CKZCczKPLoIxMJ89vpq8As2DCiADJsSbOXBta1gsOFEXhmuZIO638pHgvaiGW-T-tD4RQEWmWp9Q~rhQYxDM7EuRFbVF6nim-zphAKrdfJXTsqypezfRZonQvppbMt35BOVo81-yGeDBtfmg1FJln3jr-AwlpSa95SZHA4~M4nd-FcwqDG00g5NDx~koYZpLylO-J2UTHAlxnHN6QGkuVfhCmGTvCOb9gAo9Nrp-Hw9Vsgz6gYT8WQYKeIP-3TWBZnTLX5mFgaiCfEks2u4Q__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4"
className="h-16 w-16 rounded-full"
alt=""
Expand All @@ -481,7 +480,7 @@ function GradientCard({
</div>

<div className="mt-14 flex flex-col gap-4">
<Image src={logo} className="max-w-[240px]" alt="" />
<img src={logo} className="max-w-[240px]" alt="" />

<div className=" text-5xl font-bold text-white">{header}</div>

Expand Down
26 changes: 10 additions & 16 deletions src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,23 @@
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import InteractivePrism from "../components/interactivePrism";
import { CanvasPart } from './new';
import Timeline from "./timeline";
import { TrustAuthXLogo } from "../components/svgs/TrustAuthXLogo";
import { Vector } from "../components/svgs/Vector";
import { VectorRight } from "../components/svgs/VectorRight";
import { GithubLogo } from "../components/svgs/Github";
import { TrustAuthXText } from "../components/svgs/TrustAuthXText";
import { LowCode } from "../components/svgs/low-code";
import Footer from "../components/Footer";
import Customize from '../components/Customize'
import Showcase from '../components/Showcase'
import Authlite from '../components/Authlite'
import Timeline from '../components/Timeline'
import GradientPlatform from '../components/GradientPlatform'


export default function LandingPageCompoent() {
export default function LandingPage() {
return (
<>
<Menu />
<InteractivePrism bgColor='black' height="1400px" />
<TrustAuthXText />
<LowCode />
<CanvasPart />
<GradientPlatform />
<Timeline />
{/* <Framer /> */}
{/* <Customization /> */}
<Authlite />
<Showcase />
<Customize />
<Footer />
</>
)
Expand Down
Loading

0 comments on commit 088fd59

Please sign in to comment.