Skip to content

Commit

Permalink
update copy and animation homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
kalidiagne committed Apr 19, 2024
1 parent fa80328 commit 6b52b40
Show file tree
Hide file tree
Showing 25 changed files with 511 additions and 96 deletions.
32 changes: 28 additions & 4 deletions app/build/page.tsx
Original file line number Diff line number Diff line change
@@ -1,19 +1,43 @@
import { AlertBanner } from "@/components/AlertBanner";
import { AppContainer } from "@/components/AppContainer";
import { PageHeader } from "@/components/PageHeader";
import { Card } from "@/components/ui/Card";
import { BuildDescriptionSection } from "@/sections/buildPage/BuildDescriptionSection";
import { ToolsSection } from "@/sections/buildPage/ToolsSection";
import { LABELS } from "@/shared/labels";
import React from "react";

const Illustration = () => {
return (
<>
<div className="hidden md:flex relative w-full inset-0">
<div
className="right-0 top-0 ml-auto md:absolute md:-right-20 md:top-0 w-[330px] h-[330px] lg:w-[854px] md:h-[292px] md:w-[762px] lg:h-[507px] md:translate-x-40 lg:translate-x-32 xl:translate-x-5 bg-no-repeat"
style={{
backgroundImage: "url('illustrations/build-shape-big.svg')",
backgroundPosition: "top right",
}}
/>
</div>
<div className="flex md:hidden relative w-full inset-0">
<div
className="-right-40 top-0 ml-auto h-[134px] w-[411px] bg-no-repeat"
style={{
backgroundImage: "url('illustrations/build-shape.svg')",
backgroundPosition: "top right",
}}
></div>
</div>
</>
);
};

export default function BuildPage() {
return (
<main>
<PageHeader
title={LABELS.BUILD_PAGE.TITLE}
description={LABELS.BUILD_PAGE.DESCRIPTION}
/>
>
<Illustration />
</PageHeader>
<ToolsSection />
<BuildDescriptionSection />
</main>
Expand Down
5 changes: 5 additions & 0 deletions app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -54,4 +54,9 @@ body {
display: grid;
grid-template-columns: 1fr 300px;
gap: 1rem;
}

svg#homepage-svg path {
animation: all 2s ease-in-out forwards;
fill: transparent;
}
48 changes: 21 additions & 27 deletions app/learn/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,59 +4,53 @@ import { Accordion } from "@/components/ui/Accordion";
import { Label } from "@/components/ui/Label";
import { BlogSection } from "@/sections/learnPage/BlogSection";
import { WorkflowSection } from "@/sections/learnPage/WorkflowSection";
import { LABELS } from "@/shared/labels";
import React from "react";

const Illustration = () => {
return (
<div
className="w-full h-[375px] md:h-[470px] bg-[length:auto_375px] md:bg-[length:auto_470px] bg-repeat-x"
style={{
backgroundImage: `url('/illustrations/learn-shape.svg')`,
}}
></div>
);
};

export default function LearnPage() {
return (
<main>
<div className="flex justify-center text-center pb-14 pt-16 md:pt-32 lg:pt-56">
<Label.Title className="uppercase">
Anon aadhaar: private identity
{LABELS.LEARN_PAGE.TITLE}
</Label.Title>
</div>
<div className="flex flex-col gap-14 md:pb-14">
<div
className="w-full h-[375px] md:h-[470px] bg-[length:auto_375px] md:bg-[length:auto_470px] bg-repeat-x"
style={{
backgroundImage: `url('/illustrations/learn-shape.svg')`,
}}
></div>
<Illustration />
<WorkflowSection />
</div>

<div className="flex flex-col">
<AppContainer className="flex justify-center py-10">
<Label.Subtitle className="font-medium text-anon uppercase text-center">
Steps happening while generating the proof
{LABELS.LEARN_PAGE.DESCRIPTION}
</Label.Subtitle>
</AppContainer>
<div className="flex flex-col">
<Accordion
label="FIRST."
description="Extract and process the data from the QR code"
items={[
"Read the QR code and extract both the signature and the signed data",
"Verifying the signature",
"Fetching the official UIDAI public key",
"Hash the signal",
]}
label={LABELS.LEARN_PAGE.STEPS.FIRST.TITLE}
description={LABELS.LEARN_PAGE.STEPS.FIRST.DESCRIPTION}
items={LABELS.LEARN_PAGE.STEPS.FIRST.ITEMS}
/>
<div className="flex justify-center bg-white py-5">
<Icons.Logo color="#071631" size={90} />
</div>
<Accordion
label="SECOND."
description="Generate an anon-aadhaar proof"
label={LABELS.LEARN_PAGE.STEPS.SECOND.TITLE}
description={LABELS.LEARN_PAGE.STEPS.SECOND.DESCRIPTION}
variant="green"
items={[
"Hash the Signed Data",
"Verify the Signature of the Hashed Data",
"Extract the photo from the Signed Data",
"Extract Identity Fields if requested",
"Compute Nullifiers",
"Convert Timestamp from IST to UNIX UTC Format",
`"Signing" the SignalHash`,
]}
items={LABELS.LEARN_PAGE.STEPS.SECOND.ITEMS}
/>
</div>
</div>
Expand Down
41 changes: 32 additions & 9 deletions app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,27 +1,26 @@
"use client";

import { AppContainer } from "@/components/AppContainer";
import { Banner } from "@/components/elements/Banner";
import { Icons } from "@/components/Icons";
import { PageHeader } from "@/components/PageHeader";
import { Shapes } from "@/components/Shape";
import { Button } from "@/components/ui/Button";
import { Label } from "@/components/ui/Label";
import { LINKS } from "@/hooks/useSettings";
import { EventSection } from "@/sections/homePage/EventSection";
import { FeatureSection } from "@/sections/homePage/FeatureSection";
import { IntroSection } from "@/sections/homePage/IntroSection";
import { PointSection } from "@/sections/homePage/PointSection";
import { PainPointSection } from "@/sections/homePage/PainPointSection";
import { ProjectSection } from "@/sections/homePage/ProjectsSection";
import { LABELS } from "@/shared/labels";
import Link from "next/link";
import { motion } from "framer-motion";

export default function Home() {
return (
<main>
<PageHeader
preTitle="ANON AADHAAR"
title="ENSURING INDIVIDUAL PRIVACY"
preTitle={LABELS.HOME_PAGE.TITLE_LABEL}
title={LABELS.HOME_PAGE.TITLE}
actions={
<Link href={LINKS.WEBSITE_DEMO} target="_blank">
<Button icon={<Icons.ArrowRight />} className="uppercase">
Expand All @@ -30,15 +29,39 @@ export default function Home() {
</Link>
}
>
<div
<motion.div
onMouseMove={(e) => {
const clientX = e?.clientX;
const clientY = e?.clientY;

const el = document
.elementFromPoint(clientX, clientY)
?.closest("path");
if (!el) return;

const color = (el.attributes as any)?.stroke.value ?? "transparent";

const startingColor = `#00${color.replace("#", "")}`;

el.animate(
{
fill: [startingColor, color, startingColor],
},
{
duration: 1500,
iterations: 1,
easing: "ease-in-out",
}
);
}}
aria-label="Homepage shapes"
className="md:absolute top-0 right-0 w-[830px] h-[645px] translate-x-20 md:translate-x-52 lg:translate-x-10"
>
<Shapes.Homepage id="homepage-svg" />
</div>
</motion.div>
</PageHeader>
<IntroSection />
<PointSection />
<PainPointSection />
<ProjectSection />
<FeatureSection />
<EventSection />
Expand All @@ -49,7 +72,7 @@ export default function Home() {
variant="black"
className="uppercase"
icon={<Icons.Discord className="text-white" />}
iconPosition="left"
icon-position="left"
>
{LABELS.COMMON.DISCORD}
</Button>
Expand Down
33 changes: 19 additions & 14 deletions app/projects/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,14 @@ import { Section } from "@/components/Section";
import { Button } from "@/components/ui/Button";
import { Tag } from "@/components/ui/Tag";
import useProjects from "@/hooks/useProjects";
import { ProjectItem, PROJECTS } from "@/shared/content/projects";
import { ProjectItem } from "@/shared/content/projects";
import { LABELS } from "@/shared/labels";
import {
ProjectCategories,
ProjectSource,
ProjectsSources,
} from "@/shared/types";
import { classed } from "@tw-classed/react";
import Image from "next/image";
import React from "react";

const ProjectSourceMapping: Record<
Expand All @@ -41,6 +40,19 @@ const SectionTitle = classed.div(
"uppercase font-rajdhani text-baltic-sea-950 text-[22px] leading-[125%] font-semibold"
);

const Illustration = () => {
return (
<div className="relative w-full inset-0">
<div
className="right-0 ml-auto md:absolute md:top-0 w-[330px] h-[330px] md:right-[100px] md:w-[427px] md:h-[236px] lg:w-[854px] lg:h-[507px] lg:-right-[260px] xl:right-[-110px] lg:top-14 bg-no-repeat"
style={{
backgroundImage: "url('illustrations/projects-shape-big.svg')",
}}
></div>
</div>
);
};

export default function ProjectPage() {
const { projects, handleSource, source, categories, handleCategory } =
useProjects();
Expand All @@ -50,17 +62,10 @@ export default function ProjectPage() {
return (
<main>
<PageHeader
title="BUILT WITH ANON AADHAAR"
description="Discover a curated showcase of innovative projects and applications developed using the Anon Aadhaar Protocol."
title={LABELS.PROJECTS_PAGE.TITLE}
description={LABELS.PROJECTS_PAGE.DESCRIPTION}
>
<div className="relative w-full inset-0">
<div
className="right-0 ml-auto md:absolute md:right-0 md:top-0 w-[330px] h-[330px] lg:w-[854px] lg:h-[507px] lg:top-14 bg-no-repeat"
style={{
backgroundImage: "url('illustrations/projects-shape-big.svg')",
}}
></div>
</div>
<Illustration />
</PageHeader>
<AppContainer>
<Section.Wrapper className="!pt-14 grid grid-cols-1 gap-16 lg:grid-cols-[400px_1fr] ">
Expand Down Expand Up @@ -123,8 +128,8 @@ export default function ProjectPage() {
</Section.Wrapper>
</AppContainer>
<Banner
title="Show what you have built"
description="We are missing your project! Add your project to this page and show your awesomeness to the world."
title={LABELS.PROJECTS_PAGE.BANNER.TITLE}
description={LABELS.PROJECTS_PAGE.BANNER.DESCRIPTION}
className="lg:!text-left"
actions={
<Button className="uppercase" variant="black">
Expand Down
4 changes: 2 additions & 2 deletions components/Icons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -249,8 +249,8 @@ export const Icons: Record<string, any> = {
{...props}
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
fillRule="evenodd"
clipRule="evenodd"
d="M7.875 2.25537C5.45875 2.25537 3.5 4.21413 3.5 6.63037C3.5 9.04662 5.45875 11.0054 7.875 11.0054C10.2912 11.0054 12.25 9.04662 12.25 6.63037C12.25 4.21413 10.2912 2.25537 7.875 2.25537ZM7.875 4.00537C9.32475 4.00537 10.5 5.18062 10.5 6.63037C10.5 8.08012 9.32475 9.25537 7.875 9.25537C6.42525 9.25537 5.25 8.08012 5.25 6.63037C5.25 5.18062 6.42525 4.00537 7.875 4.00537ZM13.996 16.9406C13.8966 14.6124 11.9777 12.7554 9.625 12.7554H6.125L5.93522 12.7594C3.60702 12.8588 1.75 14.7777 1.75 17.1304V18.8804L1.75589 18.9824C1.80643 19.4176 2.17627 19.7554 2.625 19.7554C3.10825 19.7554 3.5 19.3636 3.5 18.8804V17.1304L3.50446 16.9761C3.5843 15.5982 4.72703 14.5054 6.125 14.5054H9.625L9.77924 14.5098C11.1572 14.5897 12.25 15.7324 12.25 17.1304V18.8804L12.2559 18.9824C12.3064 19.4176 12.6763 19.7554 13.125 19.7554C13.6082 19.7554 14 19.3636 14 18.8804V17.1304L13.996 16.9406ZM13.1523 3.02709C13.2722 2.55894 13.7489 2.2766 14.217 2.39646C16.1529 2.89212 17.5069 4.63646 17.5069 6.63475C17.5069 8.63304 16.1529 10.3774 14.217 10.873C13.7489 10.9929 13.2722 10.7106 13.1523 10.2424C13.0325 9.77426 13.3148 9.29758 13.783 9.17771C14.9445 8.88032 15.7569 7.83372 15.7569 6.63475C15.7569 5.43577 14.9445 4.38917 13.783 4.09178C13.3148 3.97191 13.0325 3.49523 13.1523 3.02709ZM15.9687 12.9144C15.5008 12.7936 15.0236 13.075 14.9028 13.5429C14.782 14.0108 15.0634 14.488 15.5313 14.6088C16.6848 14.9067 17.4932 15.944 17.5 17.1354L17.5 18.8804L17.5059 18.9824C17.5564 19.4176 17.9263 19.7554 18.375 19.7554C18.8582 19.7554 19.25 19.3636 19.25 18.8804V17.1304L19.2444 16.9322C19.1481 15.0258 17.8273 13.3942 15.9687 12.9144Z"
fill="currentColor"
/>
Expand Down
2 changes: 1 addition & 1 deletion components/PageHeader.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import type * as Classed from "@tw-classed/react";
const ContentHeaderWrapper = classed.div("", {
variants: {
contentFullWidth: {
false: "w-full md:w-[447px] lg:w-[828px]",
false: "w-full sm:max-w-[360px] md:max-w-[427px] lg:max-w-[828px]",
},
},
defaultVariants: {
Expand Down
45 changes: 45 additions & 0 deletions components/ui/Tabs.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { Tab } from "@headlessui/react";
import { Fragment, HTMLAttributes, ReactNode } from "react";
import { Button } from "./Button";
import { cn } from "@/shared/utils";

interface TabProps extends HTMLAttributes<HTMLDivElement> {
items: {
label: string;
children: ReactNode;
}[];
}

export const Tabs = ({ items, className }: TabProps) => {
return (
<Tab.Group as={Fragment}>
<div className={cn("flex flex-col", className)}>
<Tab.List className="inline-flex mx-auto border border-primary rounded-[11px] p-1 gap-4">
{items?.map(({ label }, index) => {
return (
<Tab as="div" key={index} className="outline-none">
{({ selected }) => (
/* Use the `selected` state to conditionally style the selected tab. */
<Button
variant={selected ? "green" : "transparent"}
className={cn(
"uppercase !py-2 !px-4",
!selected && "!text-primary"
)}
>
{label}
</Button>
)}
</Tab>
);
})}
</Tab.List>
<Tab.Panels className="pt-20">
{items?.map(({ children }, index) => {
return <Tab.Panel key={index}>{children}</Tab.Panel>;
})}
</Tab.Panels>
</div>
</Tab.Group>
);
};
Loading

0 comments on commit 6b52b40

Please sign in to comment.