Skip to content

Commit

Permalink
fix: minor tweaks on nrf sections
Browse files Browse the repository at this point in the history
  • Loading branch information
0xHericles committed Jan 2, 2024
1 parent 9d515f6 commit 2de34d2
Show file tree
Hide file tree
Showing 9 changed files with 79 additions and 41 deletions.
40 changes: 6 additions & 34 deletions components/nrf/Faq.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,4 @@
import Icon from "deco-sites/starting/components/ui/Icon.tsx";

export interface Question {
question: string;
/**
* @format textarea
*/
answer: string;
}
import { FaqItem, Question } from "deco-sites/starting/islands/NRF/Faq.tsx";

export interface Props {
questions: Question[];
Expand All @@ -16,31 +8,11 @@ export default function Faq({ questions }: Props) {
return (
<section class="bg-black">
<div class="flex flex-col gap-10 px-6 md:pb-[120px] pt-[80px] md:px-[7rem] max-w-screen-2xl m-auto">
<h2 class="text-white text-[48px] leading-[120%]">FAQs</h2>
<div class="flex flex-col">
{questions.map((item) => {
return (
<details class="border-b first:border-t border-solid border-[#131614]">
<summary class="flex flex-row py-5 gap-[16px] group cursor-pointer">
<div class="flex-none pt-[6px]">
<Icon
class="text-white"
id="ChevronRight"
width={15}
height={15}
strokeWidth={"3"}
/>
</div>
<p class="font-normal not-italic text-[22px] leading-[1.3] text-white md:text-[32px] md:leading-[38.73px]">
{item.question}
</p>
</summary>
<p class="pl-[32px] pb-5 font-normal not-italic text-[16px] leading-[1.9] text-white md:text-[20px] md:leading-[30px]">
{item.answer}
</p>
</details>
);
})}
<h2 class="text-white text-[48px] leading-[120%]">FAQs</h2>
<div class="flex flex-col">
{questions.map((item) => {
return <FaqItem {...item} />;
})}
</div>
</div>
</section>
Expand Down
2 changes: 2 additions & 0 deletions fresh.gen.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import * as $HelpFaq from "./islands/HelpFaq.tsx";
import * as $ImpactCalculator from "./islands/ImpactCalculator.tsx";
import * as $LiveProjects from "./islands/LiveProjects.tsx";
import * as $NRF_Editor from "./islands/NRF/Editor.tsx";
import * as $NRF_Faq from "./islands/NRF/Faq.tsx";
import * as $NRF_Features from "./islands/NRF/Features.tsx";
import * as $NRF_Header from "./islands/NRF/Header.tsx";
import * as $NRF_HeroEditor from "./islands/NRF/HeroEditor.tsx";
Expand Down Expand Up @@ -70,6 +71,7 @@ const manifest = {
"./islands/ImpactCalculator.tsx": $ImpactCalculator,
"./islands/LiveProjects.tsx": $LiveProjects,
"./islands/NRF/Editor.tsx": $NRF_Editor,
"./islands/NRF/Faq.tsx": $NRF_Faq,
"./islands/NRF/Features.tsx": $NRF_Features,
"./islands/NRF/Header.tsx": $NRF_Header,
"./islands/NRF/HeroEditor.tsx": $NRF_HeroEditor,
Expand Down
33 changes: 33 additions & 0 deletions islands/NRF/Faq.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import Icon from "deco-sites/starting/components/ui/Icon.tsx";

export interface Question {
question: string;
/**
* @format textarea
*/
answer: string;
}

export function FaqItem({ question, answer }: Question) {
return (
<details class="border-b first:border-t border-solid border-[#131614]">
<summary class="flex flex-row py-5 gap-[16px] group cursor-pointer">
<div class="flex-none pt-[6px]">
<Icon
class="text-white"
id="ChevronRight"
width={15}
height={15}
strokeWidth={"3"}
/>
</div>
<p class="font-normal not-italic text-[22px] leading-[1.3] text-white md:text-[32px] md:leading-[38.73px]">
{question}
</p>
</summary>
<p class="pl-[32px] pb-5 font-normal not-italic text-[16px] leading-[1.9] text-white md:text-[20px] md:leading-[30px]">
{answer}
</p>
</details>
);
}
4 changes: 2 additions & 2 deletions islands/NRF/Features.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@ function FeatureCard({ icon, title, text }: Card) {
{icon && <Icon id={icon} size={32} />}
<div class="space-y-4">
<div
class="text-2xl font-bold"
class="text-2xl font-semibold leading-[110%]"
dangerouslySetInnerHTML={{ __html: title }}
/>
<p class="leading-[120%]" dangerouslySetInnerHTML={{ __html: text }} />
<p class="leading-[120%] text-zinc-400" dangerouslySetInnerHTML={{ __html: text }} />
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion islands/NRF/TextLines.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ function TextLines({ lines }: Props) {
<div>
{lines.map((line) => (
<>
<p class="inline text-[#131313]">{line}</p>{" "}
<p class="inline text-zinc-900">{line}</p>{" "}
</>
))}
</div>
Expand Down
2 changes: 1 addition & 1 deletion sections/NRF/CallToAction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export default function CallToAction({ text, cta }: Props) {
return (
<div class="bg-black py-16 md:py-28">
<section class="xl:container mx-auto flex flex-col items-center justify-center gap-8">
<h2 class="text-center text-[36px] md:text-[80px] leading-[100%] text-white max-w-4xl">
<h2 class="text-center text-[36px] md:text-[80px] leading-[100%] text-white font-medium max-w-4xl">
{text}
</h2>
<div class="flex flex-col lg:flex-row gap-4">
Expand Down
2 changes: 1 addition & 1 deletion sections/NRF/ImageSection.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export default function ImageSection({
loading="lazy"
/>
<div class="w-full lg:w-1/2 space-y-2 lg:space-y-4 lg:max-w-xl gap-4">
<p class="text-white text-[40px] leading-[120%] font-bold">{title}</p>
<p class="text-white text-[40px] leading-[110%] font-semibold">{title}</p>
<p class="text-zinc-400 text-[16px] md:text-[18px] leading-[150%]">
{description}
</p>
Expand Down
2 changes: 1 addition & 1 deletion static/tailwind.css

Large diffs are not rendered by default.

33 changes: 32 additions & 1 deletion tailwind.css
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,38 @@
}
}

@layer utilities {}
@layer utilities {
details > div {
overflow: hidden;
display: grid;
/* intentionally independent from .animation as Safari 16
would otherwise ignore the expansion animation. */
animation-duration: 0.2s;
}

details > .animation {
animation-name: grid-expand;
animation-timing-function: ease-out;
}

details > .collapsing {
animation-direction: reverse;
animation-timing-function: ease-in;
}

details > div > div {
min-height: 0;
}

@keyframes grid-expand {
0% {
grid-template-rows: 0fr;
}
100% {
grid-template-rows: 1fr;
}
}
}

.container, .right-container {
width: 100%
Expand Down

0 comments on commit 2de34d2

Please sign in to comment.