From cf012b921f2da830971860cec9002a3e9aeee857 Mon Sep 17 00:00:00 2001 From: "Builder.io" Date: Fri, 8 Aug 2025 14:20:32 +0000 Subject: [PATCH 01/13] Add accordion section to PanelSections cgen-b89dcee2748d46f5b78ae5c5ef4b8735 --- src/examples/PanelSections.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/examples/PanelSections.tsx b/src/examples/PanelSections.tsx index ae5e16bf..ed86e76e 100644 --- a/src/examples/PanelSections.tsx +++ b/src/examples/PanelSections.tsx @@ -1,7 +1,7 @@ import { Hero, Panel } from "compositions"; import { useMediaQuery } from "hooks"; import { Flex, FlexItem, Section } from "layout"; -import { Image, Text, TextContentHeading, TextContentTitle } from "primitives"; +import { Accordion, AccordionItem, Image, Text, TextContentHeading, TextContentTitle } from "primitives"; export function PanelSections() { const { isMobile } = useMediaQuery(); From 7abba1b0a575ea3023a5081edb1ad7bd79d566cb Mon Sep 17 00:00:00 2001 From: "Builder.io" Date: Fri, 8 Aug 2025 14:20:42 +0000 Subject: [PATCH 02/13] Add accordion section after line 99 cgen-217f4b76c826417db3db47f3474a5f50 --- src/examples/PanelSections.tsx | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/src/examples/PanelSections.tsx b/src/examples/PanelSections.tsx index ed86e76e..ed0fbb23 100644 --- a/src/examples/PanelSections.tsx +++ b/src/examples/PanelSections.tsx @@ -97,6 +97,37 @@ export function PanelSections() { +
+ + + + + + + Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. + + + Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. + + + Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. + + + Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. + + + Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. + + + + + +
+ Date: Fri, 8 Aug 2025 14:23:18 +0000 Subject: [PATCH 03/13] Revert import changes cgen-e0a3742cf4134422a37c9b669ca1adad --- src/examples/PanelSections.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/examples/PanelSections.tsx b/src/examples/PanelSections.tsx index ed0fbb23..58dbc5fc 100644 --- a/src/examples/PanelSections.tsx +++ b/src/examples/PanelSections.tsx @@ -1,7 +1,7 @@ import { Hero, Panel } from "compositions"; import { useMediaQuery } from "hooks"; import { Flex, FlexItem, Section } from "layout"; -import { Accordion, AccordionItem, Image, Text, TextContentHeading, TextContentTitle } from "primitives"; +import { Image, Text, TextContentHeading, TextContentTitle } from "primitives"; export function PanelSections() { const { isMobile } = useMediaQuery(); From a75d15d6676b83d2811727f4591121bd35e6c41e Mon Sep 17 00:00:00 2001 From: "Builder.io" Date: Fri, 8 Aug 2025 14:23:28 +0000 Subject: [PATCH 04/13] Revert accordion section addition cgen-f6565c30a9304aa28a931b1a37f6b908 --- src/examples/PanelSections.tsx | 31 ------------------------------- 1 file changed, 31 deletions(-) diff --git a/src/examples/PanelSections.tsx b/src/examples/PanelSections.tsx index 58dbc5fc..ae5e16bf 100644 --- a/src/examples/PanelSections.tsx +++ b/src/examples/PanelSections.tsx @@ -97,37 +97,6 @@ export function PanelSections() { -
- - - - - - - Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. - - - Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. - - - Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. - - - Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. - - - Answer the frequently asked question in a simple sentence, a longish paragraph, or even in a list. - - - - - -
- Date: Mon, 11 Aug 2025 08:42:55 +0000 Subject: [PATCH 05/13] Create About page component based on Figma design cgen-a24fa7a5e6b94498afe13c66d2a16e2f --- src/examples/About.tsx | 191 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 191 insertions(+) create mode 100644 src/examples/About.tsx diff --git a/src/examples/About.tsx b/src/examples/About.tsx new file mode 100644 index 00000000..589c6585 --- /dev/null +++ b/src/examples/About.tsx @@ -0,0 +1,191 @@ +import { Footer, Header } from "compositions"; +import { useMediaQuery } from "hooks"; +import { Flex, FlexItem, Grid, Section } from "layout"; +import { + Button, + Image, + Text, + TextContentHeading, + TextContentTitle, +} from "primitives"; +import { Card } from "compositions"; + +export function About() { + const { isMobile, isTabletDown } = useMediaQuery(); + const flexGap = isMobile ? "600" : "1200"; + const sectionPadding = isMobile ? "600" : "1600"; + const heroTitleSize = isMobile ? "2400" : "4000"; + + return ( + <> + {/* Header */} +
+ + {/* Hero Section */} +
+ + + +
+ + {/* Image Panel Section */} +
+ + About us image 1 + About us image 2 + +
+ + {/* Card Grid Content List Section */} +
+ + + + + } + > + + + + Title + + + Body text for whatever you'd like to say. Add main takeaway + points, quotes, anecdotes, or even a very very short story. + + + + + + + + } + > + + + + Title + + + Body text for whatever you'd like to say. Add main takeaway + points, quotes, anecdotes, or even a very very short story. + + + + + + + + } + > + + + + Title + + + Body text for whatever you'd like to say. Add main takeaway + points, quotes, anecdotes, or even a very very short story. + + + + + + + +
+ + {/* Card Grid Image Section */} +
+ + + + {Array.from({ length: 6 }, (_, i) => ( + + } + > + + + Title + + + Body text for whatever you'd like to say. Add main takeaway + points, quotes, anecdotes, or even a very very short story. + + + + ))} + + +
+ + {/* Footer */} +