Skip to content

Commit

Permalink
feat: footer responsive.
Browse files Browse the repository at this point in the history
  • Loading branch information
@spiritanand
spiritanand committed Sep 28, 2023
1 parent c8cc4d7 commit 4036031
Showing 1 changed file with 58 additions and 92 deletions.
150 changes: 58 additions & 92 deletions src/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import HomePageGradient from "../../public/svgs/HomePageGradient.svg";
import Grid from "../../public/svgs/Grid.svg";
import Logo from "../../public/svgs/Logo.svg";

export default function Footer() {
return (
<div className="flex min-h-screen flex-col items-center justify-center py-12 ">
<div className="flex min-h-screen flex-col items-center justify-center py-12">
<PricingPart />

<SubscribePart />
Expand All @@ -16,27 +17,25 @@ export default function Footer() {

function PricingPart() {
return (
<div className="relative flex w-[850px] flex-col items-center justify-center">
<div className="relative flex flex-col items-center justify-center md:w-[850px]">
<div className="DivSectionHeader inline-flex flex-col items-center justify-start gap-2.5">
<div className="gradientbg flex h-7 w-24 items-center justify-center rounded-3xl bg-gradient-to-r text-center">
<div className=" text-sm font-medium leading-none text-stone-900 text-opacity-40">
Get access
</div>
</div>

<div className="flex flex-col items-center justify-center ">
<p className="text-center text-4xl font-medium leading-10 text-black">
We like keeping things simple
<br />
Two plan Two price.
</p>
</div>
<p className="text-center text-4xl font-medium leading-10 text-black">
We like keeping things simple
<br />
Two plan Two price.
</p>
</div>

<div className="mt-16 flex gap-24">
<div className="mt-16 flex flex-col gap-24 md:flex-row">
<div className="flex flex-col gap-8">
<div className=" flex items-center gap-5">
<div className="flex ">
<div className="flex">
<p className="textgradient text-6xl font-medium text-transparent ">
$20
</p>
Expand Down Expand Up @@ -83,7 +82,7 @@ function PricingPart() {
</div>
</div>

<ul dir="rtl" className=" flex list-disc flex-col gap-5">
<ul dir="rtl" className=" flex list-disc flex-col gap-5">
<li className="items-start justify-start">
For Freelancers & Students{" "}
</li>
Expand Down Expand Up @@ -114,49 +113,45 @@ function PricingPart() {
alt="trustAuthX-ball"
width={800}
height={800}
className="absolute -top-36 -z-20"
className="-top-36 -z-20 hidden md:absolute md:block"
/>
</div>
);
}

function SubscribePart() {
return (
<div className="relative mt-40 h-screen w-full">
<div className="relative h-screen w-full md:mt-40">
<Image
width={900}
height={630}
src={"./svgs/HomePageGradient.svg"}
className="absolute left-0 top-32 -z-10"
src={HomePageGradient}
className="absolute left-0 top-96 -z-10 h-full w-full"
alt="trustauthx_gradient"
/>

<Image
src={"./svgs/Grid.svg"}
src={Grid}
alt="trustauthx_grid"
className="absolute right-0 top-20 -z-10"
width={1100}
height={1100}
className="absolute right-0 top-96 -z-10 h-full w-full"
/>

<div className="flex h-full items-center justify-center">
<div className="Frame824636 inline-flex flex-col items-center justify-start gap-2">
<Image alt="logo" width={123} height={123} src={"./svgs/logo.svg"} />
<Image alt="logo" src={Logo} />
<div className=" mt-12 text-6xl font-semibold text-black">
TrustAuthX
</div>
<div className=" text-3xl font-normal text-black">
<div className=" text-center text-3xl font-normal text-black">
Subscribe to our newsletter
</div>

<div className="mt-12 flex flex-col">
<div className=" mb-2 text-black">
<div className=" mb-2 text-center text-black">
Get product updates, company news, and more.
</div>
<div className="flex items-center gap-6">
<div className="flex flex-col items-center gap-6 md:flex-row">
<input
type="text"
className="h-12 w-[335px] rounded-md border bg-transparent"
className="h-12 rounded-md border border-black bg-transparent md:w-[335px]"
/>
<button className=" w- rounded-md bg-black p-3 text-white">
Start your 14-day trial
Expand All @@ -171,7 +166,7 @@ function SubscribePart() {

export function CopyrightInfo() {
return (
<div className="Group12456 mt-10 flex flex-wrap gap-20 lg:gap-60">
<div className="mt-10 flex flex-col flex-wrap gap-20 md:flex-row lg:gap-60">
<div className="flex w-full flex-col items-center justify-center gap-7 lg:w-auto lg:items-start lg:justify-normal">
<div className="Frame824639 inline-flex flex-col items-start justify-start gap-5">
<div className="Frame824627 flex flex-col items-start justify-start gap-0.5 self-stretch">
Expand Down Expand Up @@ -213,79 +208,50 @@ export function CopyrightInfo() {
<Image width={44} height={44} src={"./svgs/Discord.svg"} alt="icon" />
</div>

<div className="2023Trustauthx w-36 text-base font-normal text-zinc-800">
<div className="2023Trustauthx text-base font-normal text-zinc-800">
© 2023 Trustauthx.
</div>
</div>

<div>
<div className="Frame824623 inline-flex flex-wrap items-start justify-end gap-28">
<div className="Frame824626 inline-flex shrink grow basis-0 flex-col items-start justify-start gap-5 self-stretch">
<div className="Platform w-40 text-base font-semibold text-black">
Platform
</div>
<div className="AccessManagement text-base font-normal text-black">
Access Management{" "}
</div>
<div className="Partners text-base font-normal text-black">
Partners
</div>
<div className="Electron text-base font-normal text-black">
Electron
</div>
<div className="GithubDesktop text-base font-normal text-black">
GitHub Desktop
</div>
<div className="flex flex-col gap-28 md:flex-row">
<div className="flex flex-col gap-5">
<div className="Platform w-40 text-base font-semibold text-black">
Platform
</div>

<div className="Frame824623 inline-flex shrink grow basis-0 flex-col items-start justify-start gap-5 self-stretch">
<div className="Product text-base font-semibold text-black">
Product
</div>
<div className="Features text-base font-normal text-black">
Features
</div>
<div className="Security text-base font-normal text-black">
Security
</div>
<div className="Team text-base font-normal text-black">Team</div>
<div className="Enterprice text-base font-normal text-black">
Enterprice
</div>
<div className="text-base font-normal text-black">
Access Management
</div>
<div className="text-base font-normal text-black">Partners</div>
<div className="text-base font-normal text-black">Electron</div>
<div className="text-base font-normal text-black">GitHub Desktop</div>
</div>

<div className="Frame824624 inline-flex shrink grow basis-0 flex-col items-start justify-start gap-5 self-stretch">
<div className="Developers text-base font-semibold text-black">
Developers{" "}
</div>
<div className="Docs text-base font-normal text-black">Docs</div>
<div className="CommunityForum text-base font-normal text-black">
Community Forum
</div>
<div className="Apis text-base font-normal text-black">APIs</div>
<div className="PremiumSupport text-base font-normal text-black">
Premium Support
</div>
</div>
<div className="flex flex-col gap-5">
<div className="text-base font-semibold text-black">Product</div>
<div className="text-base font-normal text-black">Features</div>
<div className="text-base font-normal text-black">Security</div>
<div className="text-base font-normal text-black">Team</div>
<div className="text-base font-normal text-black">Enterprice</div>
</div>

<div className="Frame824625 inline-flex shrink grow basis-0 flex-col items-start justify-start gap-5 self-stretch">
<div className="Company w-32 text-base font-semibold text-black">
Company
</div>
<div className="About text-base font-normal text-black">About</div>
<div className="Blog text-base font-normal text-black">Blog</div>
<div className="Careers text-base font-normal text-black">
Careers
</div>
<div className="TermsOfUse text-base font-normal text-zinc-800">
Terms of Use
</div>
<div className="flex flex-col gap-5">
<div className="text-base font-semibold text-black">Developers</div>
<div className="text-base font-normal text-black">Docs</div>
<div className="w-fit text-base font-normal">Community Forum</div>
<div className="text-base font-normal text-black">APIs</div>
<div className="text-base font-normal text-black">
Premium Support
</div>
</div>

<div className="Frame824630 inline-flex flex-col items-start justify-start gap-8">
<div className="Frame824627 shrink grow basis-0 self-stretch" />
<div className="Frame824628" />
<div className="flex flex-col gap-5">
<div className="text-base font-semibold text-black">Company</div>
<div className="text-base font-normal text-black">About</div>
<div className="text-base font-normal text-black">Blog</div>
<div className="text-base font-normal text-black">Careers</div>
<div className="text-base font-normal text-zinc-800">
Terms of Use
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 4036031

Please sign in to comment.