From 59b23ea396153b3abd36fffdd8f2d5ca2130818b Mon Sep 17 00:00:00 2001 From: Craig Condon Date: Fri, 8 Mar 2024 16:05:53 -0600 Subject: [PATCH] clean up --- libs/figma-plugin/code.ts | 190 +- libs/figma-plugin/test/global.css | 4 + libs/figma-plugin/test/ui.pc | 20281 +++++++++++++++++++++++++++- libs/figma-plugin/ui.html | 21 +- 4 files changed, 20304 insertions(+), 192 deletions(-) diff --git a/libs/figma-plugin/code.ts b/libs/figma-plugin/code.ts index 47381b483..1a9ad22f4 100644 --- a/libs/figma-plugin/code.ts +++ b/libs/figma-plugin/code.ts @@ -18,9 +18,7 @@ const copySelected = async () => { context = await writeNode(node, context); } - console.log(context.content); - - return context.content; + return context; }; const writeNode = async (node: SceneNode, context: Context) => { @@ -35,23 +33,112 @@ const writeNode = async (node: SceneNode, context: Context) => { return writeRectangle(node, context); case "INSTANCE": return writeInstance(node, context); + case "VECTOR": + return writeVector(node, context); } + // console.log(node.type, "CONT"); + + return context; +}; + +const writeVector = async (node: VectorNode, context: Context) => { + const resource = await node.exportAsync(); + const resourceName = getVectorName(node.name, context); + + context = addResource(resourceName, resource.buffer, context); + context = addBuffer(`div`, context); + const style = { + // "background-image": `url(${resourceName})`, + "background-repeat": "no-repeat", + "background-size": "100%", + width: node.width + "px", + height: node.height + "px", + }; + + context = await writeBlock(async (context) => { + return writeStyle(style, context); + }, context); + + context = addBuffer("\n", context); + return context; }; const writeText = async (node: TextNode, context: Context) => { - context = addBuffer(`text ${JSON.stringify(node.characters)}`, context); + context = addBuffer("span", context); context = await writeBlock(async (context) => { - context = await writeStyle(node, context); + const textSegments = node.getStyledTextSegments([ + "fontSize", + "fontName", + "fontWeight", + "textDecoration", + "textCase", + "lineHeight", + "letterSpacing", + "fills", + "textStyleId", + "fillStyleId", + "listOptions", + "indentation", + "hyperlink", + ]); + + for (const segment of textSegments) { + const lines = segment.characters.split("\n"); + + for (let i = 0; i < lines.length; i++) { + const line = lines[i]; + + if (line.trim() !== "") { + context = addBuffer(`text ${JSON.stringify(line)}`, context); + context = await writeBlock(async (context) => { + context = await writeStyle(getTextSegmentStyle(segment), context); + return context; + }, context); + + context = addBuffer("\n", context); + } + + if (i < line.length - 1) { + context = addBuffer("br\n", context); + } + } + } return context; }, context); - context = addBuffer(`\n`, context); return context; }; +const getTextSegmentStyle = (segment: Partial) => { + const style = {}; + + if (segment.fontName) { + style["font-family"] = segment.fontName.family; + style["font-style"] = segment.fontName.style; + } + + if (segment.fontSize) { + style["font-size"] = segment.fontSize + "px"; + } + + if (segment.fontWeight) { + style["font-weight"] = segment.fontWeight; + } + + if (segment.letterSpacing) { + // style["letter-spacing"] = segment.letterSpacing.value + (segment.letterSpacing.unit === "PIXELS" ? "px" : "%"); + } + + if (segment.lineHeight?.unit !== "AUTO") { + // style["line-height"] = segment.lineHeight.value + (segment.letterSpacing.unit === "PIXELS" ? "px" : "%"); + } + + return style; +}; + const writeBlock = async ( write: (context: Context) => Promise, context: Context @@ -85,15 +172,14 @@ const writeGroup = async ( node: GroupNode | FrameNode | InstanceNode, context: Context ) => { - if (node.parent.type === "PAGE") { + if (context.isRoot) { context = writeFrameBounds(node, context); } context = addBuffer(`div ${camelCase(node.name)}`, context); context = await writeBlock(async (context) => { - context = await writeStyle(node, context); - + context = await writeNodeStyle(node, context); return writeChildren(node.children, context); }, context); @@ -112,14 +198,15 @@ const writeFrameBounds = (node: SceneNode, context: Context) => { return context; }; -const writeStyle = async (node: SceneNode, context: Context) => { +const writeNodeStyle = async (node: SceneNode, context: Context) => { const parent = node.parent; const style = await node.getCSSAsync(); const allStyles = { ...style }; - context = addBuffer(`style {\n`, context); - context = startBlock(context); + if (!node.visible) { + allStyles.display = "none"; + } // relative so that all children are positioned correctly if (node.type === "GROUP") { @@ -127,22 +214,46 @@ const writeStyle = async (node: SceneNode, context: Context) => { } // GROUP's don't have auto layout, so - if (parent.type === "GROUP") { - allStyles.position = "absolute"; - allStyles.left = `${node.x}px`; - allStyles.top = `${node.y}px`; + if (!context.isRoot) { + if ( + parent.type === "GROUP" || + (parent.type === "FRAME" && parent.layoutMode === "NONE") + ) { + const x = node.absoluteBoundingBox.x - parent.absoluteBoundingBox.x; + const y = node.absoluteBoundingBox.y - parent.absoluteBoundingBox.y; + // const [[_1, _2, x], [_3, _4, y]] = node.relativeTransform; + allStyles.position = "absolute"; + allStyles.left = `${x}px`; + allStyles.top = `${y}px`; + } } - for (const key in allStyles) { - context = addBuffer(`${key}: ${stripComments(allStyles[key])}\n`, context); + context = await writeStyle(allStyles, context); + + return context; +}; + +const writeStyle = async (style: Record, context: Context) => { + context = addBuffer(`style {\n`, context); + context = startBlock(context); + + for (const key in style) { + const value = style[key]; + if (/path\-to\-image/.test(value)) { + continue; + } + + context = addBuffer(`${key}: ${stripComments(value)}\n`, context); } + context = endBlock(context); context = addBuffer(`}\n`, context); + return context; }; const stripComments = (value: string) => { - return value.replace(/\/\*.*?\*\//g, ""); + return String(value).replace(/\/\*.*?\*\//g, ""); }; const camelCase = (value: string) => { @@ -162,17 +273,28 @@ const writeChildren = async ( children: readonly SceneNode[], context: Context ) => { + context = { ...context, isRoot: false }; + // for (let i = children.length; i--;) { for (const node of children) { + // const node = children[i]; context = await writeNode(node, context); } + + // timeout so that the app doesn't freeze + await timeout(0); return context; }; +const timeout = async (ms: number) => + new Promise((resolve) => setTimeout(resolve, ms)); + type Context = { indent: string; content: string; line: number; isNewLine: boolean; + resources: Record; + isRoot: boolean; }; const createContext = (): Context => ({ @@ -180,6 +302,8 @@ const createContext = (): Context => ({ content: "", line: 0, isNewLine: false, + resources: {}, + isRoot: true, }); const addBuffer = (value: string, context: Context): Context => ({ @@ -200,3 +324,31 @@ const endBlock = (context: Context): Context => ({ ...context, line: context.line - 1, }); + +const getResourceName = (name: string, ext: string, context: Context) => { + const baseName = camelCase(name); + + let newName = baseName + "." + ext; + let i = 1; + while (context.resources[newName]) { + newName = baseName + i + "." + ext; + i++; + } + + return newName; +}; + +const getVectorName = (name: string, context: Context) => { + return getResourceName(name, "svg", context); +}; + +const addResource = (name: string, content: ArrayBuffer, context: Context) => { + const resources = { ...context.resources }; + + resources[name] = content; + + return { + ...context, + resources, + }; +}; diff --git a/libs/figma-plugin/test/global.css b/libs/figma-plugin/test/global.css index 1236d8edf..cf7a0995a 100644 --- a/libs/figma-plugin/test/global.css +++ b/libs/figma-plugin/test/global.css @@ -1,3 +1,7 @@ * { box-sizing: border-box; } + +body { + background: white; +} diff --git a/libs/figma-plugin/test/ui.pc b/libs/figma-plugin/test/ui.pc index fa8bf39a7..9f9509855 100644 --- a/libs/figma-plugin/test/ui.pc +++ b/libs/figma-plugin/test/ui.pc @@ -1,227 +1,20168 @@ - -public component Button { - render div group5 { +/** +* @frame(x:-2513, y: 573, width: 1792, height: 8967) +*/ +div listingPage { + style { + width: 1792px + height: 8967px + flex-shrink: 0 + background: #FFF + } + div navbar { + style { + width: 1790px + height: 1580px + flex-shrink: 0 + display: none + position: absolute + left: 1px + top: -2px + } + div group18 { + style { + width: 1790px + height: 1580px + flex-shrink: 0 + position: absolute + left: 0px + top: 0px + } + div button { + style { + display: inline-flex + padding: 16px + justify-content: center + align-items: center + gap: 10px + border-radius: 6px + border: 3px solid #EDEEF3 + position: absolute + left: 1371px + top: 1528px + } + span { + text "Become a member" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div button { style { + display: inline-flex + padding: 16px + justify-content: center + align-items: center + gap: 10px + border-radius: 6px + border: 3px solid #EDEEF3 + position: absolute + left: 1197px + top: 1528px + } + span { + text "List your property" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div nav { + style { + width: 464px + height: 52px + flex-shrink: 0 + position: absolute + left: 663px + top: 0px + } + div navItems { + style { + width: 349px + height: 4px + flex-shrink: 0 + position: absolute + left: 111.5px + top: 48px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 7px + height: 4px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 7px + height: 4px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 7px + height: 4px + } + } + } + div text { + style { display: inline-flex - padding: var(--spacing-05, 16px) + padding: 12px 16px + justify-content: center + align-items: center + gap: 70px + border-radius: 6px + position: absolute + left: 0px + top: 0px + } + span { + text "Membership" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }span { + text "Communities" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }span { + text "Opportunities" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div dropdowns { + style { + width: 0px + height: 0px + flex-shrink: 0 + position: absolute + left: 0px + top: 27px + } + div opportunties { + style { + width: 894px + height: 340px + flex-shrink: 0 + filter: drop-shadow(0px 7px 12px rgba(0, 0, 0, 0.12)) + display: none + position: absolute + left: -191px + top: 64px + } + div callout { + style { + width: 347px + height: 340px + flex-shrink: 0 + position: absolute + left: 547px + top: 0px + } + div frame2 { + style { + display: none + padding: 8px 12px + justify-content: center + align-items: center + gap: 10px + border-radius: 5px + border: 1px solid #EDEEF3 + background: #FFF + position: absolute + left: 45px + top: 270px + } + span { + text "List your property " { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + div listYourProperty { + style { + display: inline-flex + padding: 10px 12px + justify-content: center + align-items: center + gap: 5px + border-radius: 5px + border: 1px solid #EDEEF3 + background: #FFF + position: absolute + left: 45px + top: 264px + } + span { + text "List your property" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + span { + text "Unlock the full potential of your property" { + style { + font-family: THICCCBOI + font-style: Bold + font-size: 16px + font-weight: 700 + } + } + br + text "Are you a property owner looking to activate your space? Our coliving partnership program provides an opportunity to turn your property into a thriving coliving community supported by our trusted members." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 12px + font-weight: 400 + } + } + br + }div maskGroup { + style { + width: 282px + height: 97px + flex-shrink: 0 + position: absolute + left: 32px + top: 20px + } + } + } + div liveYourPurpose { + style { + width: 481px + height: 288px + flex-shrink: 0 + position: absolute + left: 33px + top: 25px + } + div cta { + style { + width: 481px + height: 23px + flex-shrink: 0 + position: absolute + left: 0px + top: 265px + } + span { + text "Find a Workshare™ opportunity →" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 10px + font-weight: 500 + } + } + br + }} + div listItems { + style { + display: inline-flex + flex-direction: column + align-items: flex-start + gap: 16px + position: absolute + left: 2px + top: 52px + } + div environment { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Care for Environment" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Live in right relations with our planet" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div humanity { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Care for Humanity " { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Provide service to one another" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div home { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Care for Home" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Practice good stewardship" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div community { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Care for Community" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Take care of your neighbors" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + } + div listItems { + style { + display: inline-flex + flex-direction: column + align-items: flex-start + gap: 16px + position: absolute + left: 256px + top: 52px + } + div environment { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Care for Environment" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Live in right relations with our planet" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div humanity { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Care for Humanity " { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Provide service to one another" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div home { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Care for Home" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Practice good stewardship" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div community { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Care for Community" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Take care of your neighbors" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + } + div header { + style { + width: 411px + height: 35px + flex-shrink: 0 + position: absolute + left: 0px + top: 0px + } + span { + text "Live your purpose" { + style { + font-family: THICCCBOI + font-style: Semi Bold + font-size: 15px + font-weight: 600 + } + } + br + }span { + text "Be in service to your community and gain financial security for living your best life." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + } + } + div communties { + style { + width: 894px + height: 340px + flex-shrink: 0 + filter: drop-shadow(0px 7px 12px rgba(0, 0, 0, 0.12)) + display: none + position: absolute + left: -191px + top: 64px + } + div callout { + style { + width: 347px + height: 340px + flex-shrink: 0 + position: absolute + left: 547px + top: 0px + } + div learnMore { + style { + display: inline-flex + padding: 10px 12px + justify-content: center + align-items: center + gap: 10px + border-radius: 5px + background: #FFF + position: absolute + left: 197px + top: 264px + } + span { + text "Learn more" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + div listYourProperty { + style { + display: inline-flex + padding: 10px 12px + justify-content: center + align-items: center + gap: 5px + border-radius: 5px + border: 1px solid #EDEEF3 + background: #FFF + position: absolute + left: 45px + top: 264px + } + span { + text "List your property" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + span { + text "Unlock the full potential of your property" { + style { + font-family: THICCCBOI + font-style: Bold + font-size: 16px + font-weight: 700 + } + } + br + text "Are you a property owner looking to activate your space? Our coliving partnership program provides an opportunity to turn your property into a thriving coliving community supported by our trusted members." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 12px + font-weight: 400 + } + } + br + }div maskGroup { + style { + width: 282px + height: 97px + flex-shrink: 0 + position: absolute + left: 32px + top: 20px + } + } + } + div liveYourPurpose { + style { + width: 226px + height: 296px + flex-shrink: 0 + display: none + position: absolute + left: 283px + top: 24px + } + div cta { + style { + width: 225px + height: 25px + flex-shrink: 0 + position: absolute + left: 1px + top: 271px + } + span { + text "Find a Workshare™ opportunity →" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 10px + font-weight: 500 + } + } + br + }} + div listItems { + style { + display: inline-flex + flex-direction: column + align-items: flex-start + gap: 16px + position: absolute + left: 0px + top: 59px + } + div environment { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Care for Environment" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Live in right relations with our planet" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div humanity { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Care for Humanity " { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Provide service to one another" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div home { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Care for Home" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Practice good stewardship" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div community { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Care for Community" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Take care of your neighbors" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + } + div header { + style { + width: 225px + height: 47px + flex-shrink: 0 + position: absolute + left: 0px + top: 0px + } + span { + text "Live your purpose" { + style { + font-family: THICCCBOI + font-style: Semi Bold + font-size: 15px + font-weight: 600 + } + } + br + }span { + text "Gain financial security for living your best life" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + } + div findYourHome { + style { + width: 487px + height: 298px + flex-shrink: 0 + position: absolute + left: 27px + top: 25px + } + div cta { + style { + width: 481px + height: 23px + flex-shrink: 0 + position: absolute + left: 6px + top: 275px + } + span { + text "View all communities →" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 10px + font-weight: 500 + } + } + br + }} + div newest { + style { + width: 225px + height: 215px + flex-shrink: 0 + position: absolute + left: 262px + top: 45px + } + div listItems { + style { + display: inline-flex + flex-direction: column + align-items: flex-end + gap: 16px + position: absolute + left: 0px + top: 23px + } + div portal { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Portal" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Austin, Texas, USA" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div wildseeds { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Wildseeds" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Dulzura, California, USA" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div moos { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Moos" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Berlin, Germany" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div amar { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Amar" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Bahia, Brazil" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + } + span { + text "Newest communities" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 10px + font-weight: 500 + } + } + br + }} + div featured { + style { + width: 228px + height: 215px + flex-shrink: 0 + position: absolute + left: 7px + top: 45px + } + div listItems { + style { + display: inline-flex + flex-direction: column + align-items: flex-end + gap: 16px + position: absolute + left: 1px + top: 23px + } + div wildseeds { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Wildseeds" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Dulzura, California, USA" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }div featuredIcon { + style { + width: 10px + height: 10px + flex-shrink: 0 + position: absolute + left: 2px + top: 3px + } + } + } + div amar { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Amar" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Bahia, Brazil" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }div featuredIcon { + style { + width: 10px + height: 10px + flex-shrink: 0 + position: absolute + left: 2px + top: 3px + } + } + } + div portal { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Portal" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Austin, Texas, USA" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }div featuredIcon { + style { + width: 10px + height: 10px + flex-shrink: 0 + position: absolute + left: 2px + top: 3px + } + } + } + div moos { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Moos" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Berlin, Germany" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }div featuredIcon { + style { + width: 10px + height: 10px + flex-shrink: 0 + position: absolute + left: 2px + top: 3px + } + } + } + } + span { + text "Featured communities" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 10px + font-weight: 500 + } + } + br + }} + div header { + style { + width: 318px + height: 35px + flex-shrink: 0 + position: absolute + left: 7px + top: 0px + } + span { + text "We curate communities that align with your values and lifestyle." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }span { + text "Find your home" { + style { + font-family: THICCCBOI + font-style: Semi Bold + font-size: 15px + font-weight: 600 + } + } + br + }} + } + } + } + } + } + } + div footer { + style { + display: flex + width: 1789px + padding: 120px 250px + justify-content: space-between + align-items: center + background: #171930 + position: absolute + left: 0.5px + top: 8333px + } + div frame81 { + style { + display: flex + height: 394px + flex-direction: column + align-items: center + gap: 80px + flex: 1 0 0 + } + div columns { + style { + display: flex + align-items: flex-start + gap: 50px + flex: 1 0 0 + align-self: stretch + } + div col2 { + style { + display: flex + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + } + div frame78 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 20px + flex: 1 0 0 + } + span { + text "Members" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 24px + font-weight: 500 + } + } + br + }span { + text "Membership benefits" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Find your home" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Equity opportunities" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Community hub" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Refer a friend and save" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + }} + } + div col3 { + style { + display: flex + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + } + div frame77 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 20px + flex: 1 0 0 + } + span { + text "Communities" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 24px + font-weight: 500 + } + } + br + }span { + text "Benefits of listing" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "List your property" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Promote your community" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Hire a certified operator" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Community resources" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + }} + } + div col4 { + style { + display: flex + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + } + div frame79 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 20px + flex: 1 0 0 + } + span { + text "Company" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 24px + font-weight: 500 + } + } + br + }span { + text "Purpose statement" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "How we’re different" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Collaborate with us" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Partnership opportunities " { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + }} + } + div col1 { + style { + display: flex + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + } + div frame79 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 20px + flex: 1 0 0 + } + span { + text "Support" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 24px + font-weight: 500 + } + } + br + }span { + text "Knowledge base" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Damage Contro" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "l" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + text "™" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + text "Dispute resolution" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Report a concern" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + }} + div logo { + style { + width: 214px + height: 46px + display: none + position: relative + } + div clip_1 { + style { + width: 214px + height: 46px + flex-shrink: 0 + position: absolute + left: 0px + top: 0px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 214px + height: 46px + } + } + } + div linear { + style { + width: 214px + height: 214px + flex-shrink: 0 + position: absolute + left: 0px + top: -84px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 214px + height: 214px + } + } + div group { + style { + width: 214px + height: 47.023px + flex-shrink: 0 + position: absolute + left: 0px + top: 83.4599609375px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 159.15907287597656px + height: 37.08757781982422px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 47.023075103759766px + height: 47.023075103759766px + } + } + } + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 50px + height: 50px + } + } + } + } + div bottomBar { + style { + display: flex + width: 1289px + align-items: center + gap: 50px + } + div logo { + style { + display: flex + align-items: center + gap: 20px + flex: 1 0 0 + } + div logo { + style { + width: 176.783px + height: 38px + position: relative + } + div clip_1 { + style { + width: 176.783px + height: 38px + flex-shrink: 0 + position: absolute + left: 0px + top: 0px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 176.78260803222656px + height: 38px + } + } + } + div linear { + style { + width: 176.783px + height: 176.783px + flex-shrink: 0 + position: absolute + left: 0px + top: -69.3916015625px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 176.78260803222656px + height: 176.78260803222656px + } + } + div group { + style { + width: 176.783px + height: 38.845px + flex-shrink: 0 + position: absolute + left: 0px + top: 68.9453125px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 131.47923278808594px + height: 30.637563705444336px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 38.84514617919922px + height: 38.84514617919922px + } + } + } + } + } + div logomarktagline { + style { + width: 304px + height: 44px + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 40px + height: 40px + } + } + span { + text "Coliving with a purpose." { + style { + font-family: Cera Pro + font-style: Bold + font-size: 22px + font-weight: 700 + } + } + br + }} + } + div copyright { + style { + display: flex + align-items: center + gap: 20px + } + span { + text "© 2024 Cohere Network Ltd. · Terms" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text " · " { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Sitemap" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text " · " { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Privacy" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + }} + div frame80 { + style { + display: flex + justify-content: flex-end + align-items: center + gap: 24px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 24.000019073486328px + height: 24px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 26.400001525878906px + height: 24px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 24px + height: 24px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 30.000030517578125px + height: 24px + } + } + } + } + div bottomBar { + style { + display: none + height: 44px + align-items: flex-start + gap: 50px + flex-shrink: 0 + align-self: stretch + } + } + } + } + div footer { + style { + display: none + width: 1789px + padding: 150px 250px + justify-content: space-between + align-items: center + background: #171930 + position: absolute + left: 0px + top: 8097px + } + div frame81 { + style { + display: flex + height: 570px + flex-direction: column + justify-content: space-between + align-items: center + flex: 1 0 0 + } + div columns { + style { + display: flex + align-items: flex-start + gap: 50px + align-self: stretch + } + div col2 { + style { + display: flex + align-items: flex-start + gap: 10px + flex: 1 0 0 + } + div frame78 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 20px + flex: 1 0 0 + } + span { + text "Members" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 24px + font-weight: 500 + } + } + br + }span { + text "Membership benefits" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Find your home" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Equity opportunities" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Community hub" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + }} + } + div col3 { + style { + display: flex + align-items: flex-start + gap: 10px + flex: 1 0 0 + } + div frame77 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 20px + flex: 1 0 0 + } + span { + text "Communities" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 24px + font-weight: 500 + } + } + br + }span { + text "List your property" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Community handbook" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Hosting benefits" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Airbnb-friendly apartments" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Join a free Hosting class" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + }} + } + div col4 { + style { + display: flex + align-items: flex-start + gap: 10px + flex: 1 0 0 + } + div frame79 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 20px + flex: 1 0 0 + } + span { + text "Company" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 24px + font-weight: 500 + } + } + br + }span { + text "Purpose statement" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "How we’re different" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Collaborate with us" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Investment brief" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + }} + } + div col1 { + style { + display: flex + align-items: flex-start + gap: 10px + flex: 1 0 0 + } + div frame79 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 20px + flex: 1 0 0 + } + span { + text "Support" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 24px + font-weight: 500 + } + } + br + }span { + text "Knowledge base" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Damage Contro" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "l" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + text "™" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + text "Dispute resolution" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Report a concern" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Contact support" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + }} + div logo { + style { + width: 214px + height: 46px + display: none + position: relative + } + div clip_1 { + style { + width: 214px + height: 46px + flex-shrink: 0 + position: absolute + left: 0px + top: 0px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 214px + height: 46px + } + } + } + div linear { + style { + width: 214px + height: 214px + flex-shrink: 0 + position: absolute + left: 0px + top: -84px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 214px + height: 214px + } + } + div group { + style { + width: 214px + height: 47.023px + flex-shrink: 0 + position: absolute + left: 0px + top: 83.4599609375px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 159.15907287597656px + height: 37.08757781982422px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 47.023075103759766px + height: 47.023075103759766px + } + } + } + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 50px + height: 50px + } + } + } + } + div bottomBar { + style { + display: flex + align-items: flex-start + gap: 50px + align-self: stretch + } + div col1 { + style { + display: flex + align-items: flex-start + gap: 10px + flex: 1 0 0 + } + div frame79 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 20px + flex: 1 0 0 + } + span { + text "Support" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 24px + font-weight: 500 + } + } + br + }span { + text "Knowledge base" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Damage Contro" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "l" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + text "™" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + text "Dispute resolution" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Report a concern" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + text "Contact support" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + }} + div logo { + style { + width: 214px + height: 46px + display: none + position: relative + } + div clip_1 { + style { + width: 214px + height: 46px + flex-shrink: 0 + position: absolute + left: 0px + top: 0px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 214px + height: 46px + } + } + } + div linear { + style { + width: 214px + height: 214px + flex-shrink: 0 + position: absolute + left: 0px + top: -84px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 214px + height: 214px + } + } + div group { + style { + width: 214px + height: 47.023px + flex-shrink: 0 + position: absolute + left: 0px + top: 83.4599609375px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 159.15907287597656px + height: 37.08757781982422px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 47.023075103759766px + height: 47.023075103759766px + } + } + } + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 50px + height: 50px + } + } + } + } + } + } + div contents { + style { + width: 1294px + height: 7897px + flex-shrink: 0 + position: absolute + left: 249px + top: 109px + } + div mainFrame { + style { + display: flex + width: 1294px + flex-direction: column + align-items: flex-start + gap: 40px + position: absolute + left: 0px + top: 662px + } + div propertyInfo { + style { + display: flex + width: 872px + flex-direction: column + align-items: flex-start + gap: 40px + } + div snapshot { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 20px + align-self: stretch + } + div callouts { + style { + display: none + align-items: flex-start + gap: 40px + flex: 1 0 0 + align-self: stretch + } + div propertyType { + style { + display: flex + padding: 40px 0px + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + background: #FFF + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + align-self: stretch + border-right: 1px solid rgba(172, 174, 191, 0.35) + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 30px + height: 30px + } + } + div browserbuildstreamlinecoresvg { + style { + width: 27.857px + height: 30px + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27.85714340209961px + height: 30px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27.85714340209961px + height: 0px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 16.153846740722656px + } + } + } + div layoutwindow8streamlinecoresvg { + style { + width: 27.857px + height: 30px + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27.85714340209961px + height: 30px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27.85714340209961px + height: 0px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 23.076923370361328px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27.85714340209961px + height: 0px + } + } + } + div layoutwindow16streamlinecoresvg { + style { + width: 25.714px + height: 30px + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 25.71428680419922px + height: 30px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 25.71428680419922px + height: 0px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 15px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 15px + } + } + } + div layoutwindow28streamlinecoresvg { + style { + width: 25.714px + height: 30px + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 25.71428680419922px + height: 30px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.85714340209961px + height: 0.00002288818359375px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.85714340209961px + height: 0.00002193450927734375px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 30px + } + } + } + div group4471 { + style { + width: 27px + height: 30px + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27px + height: 30px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27px + height: 0px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 20px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27px + height: 0px + } + } + } + span { + text "Community" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "Shared homes, private homes, camper parking, tent sites" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 16px + font-weight: 400 + } + } + br + }} + } + div residents { + style { + display: flex + padding: 40px 0px + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + background: #FFF + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + align-self: stretch + border-right: 1px solid rgba(172, 174, 191, 0.35) + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 30px + height: 30px + } + } + div nopovertystreamlinecoresvg { + style { + width: 27px + height: 30px + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 7.714284896850586px + height: 8.572856903076172px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.849157333374023px + height: 8.573046684265137px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 7.7142863273620605px + height: 8.572856903076172px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.84921932220459px + height: 8.573046684265137px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 7.714284896850586px + height: 8.572856903076172px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 11.571663856506348px + height: 6.4296417236328125px + } + } + } + span { + text "Members" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "6 men, 5 women, 1 non-binary
" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 16px + font-weight: 400 + } + } + br + text "2 member connections" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 16px + font-weight: 400 + } + } + br + }} + } + div availability { + style { + display: flex + padding: 40px 0px + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + background: #FFF + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + align-self: stretch + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 33.590240478515625px + height: 30px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27px + height: 30px + } + } + span { + text "Opportunities" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "4 active projects
1 matches your skillsets" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 16px + font-weight: 400 + } + } + br + }} + } + } + div callouts { + style { + display: none + align-items: flex-start + gap: 40px + flex: 1 0 0 + align-self: stretch + } + div propertyType { + style { + display: flex + padding: 40px 0px + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + background: #FFF + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + align-self: stretch + border-right: 1px solid rgba(172, 174, 191, 0.35) + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 30px + height: 30px + } + } + div browserbuildstreamlinecoresvg { + style { + width: 27.857px + height: 30px + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27.85714340209961px + height: 30px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27.85714340209961px + height: 0px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 16.153846740722656px + } + } + } + div layoutwindow8streamlinecoresvg { + style { + width: 27.857px + height: 30px + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27.85714340209961px + height: 30px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27.85714340209961px + height: 0px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 23.076923370361328px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27.85714340209961px + height: 0px + } + } + } + div layoutwindow16streamlinecoresvg { + style { + width: 25.714px + height: 30px + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 25.71428680419922px + height: 30px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 25.71428680419922px + height: 0px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 15px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 15px + } + } + } + div layoutwindow28streamlinecoresvg { + style { + width: 25.714px + height: 30px + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 25.71428680419922px + height: 30px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.85714340209961px + height: 0.00002288818359375px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.85714340209961px + height: 0.00002193450927734375px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 30px + } + } + } + div group4471 { + style { + width: 27px + height: 30px + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27px + height: 30px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27px + height: 0px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 20px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27px + height: 0px + } + } + } + span { + text "Property" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "Shared homes, private homes, camper parking, tent sites" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 16px + font-weight: 400 + } + } + br + }} + } + div residents { + style { + display: flex + padding: 40px 0px + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + background: #FFF + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + align-self: stretch + border-right: 1px solid rgba(172, 174, 191, 0.35) + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 30px + height: 30px + } + } + div nopovertystreamlinecoresvg { + style { + width: 27px + height: 30px + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 7.714284896850586px + height: 8.572856903076172px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.849157333374023px + height: 8.573046684265137px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 7.7142863273620605px + height: 8.572856903076172px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.84921932220459px + height: 8.573046684265137px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 7.714284896850586px + height: 8.572856903076172px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 11.571663856506348px + height: 6.4296417236328125px + } + } + } + span { + text "Residents" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "6 men, 5 women, 1 non-binary" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 16px + font-weight: 400 + } + } + br + }} + } + div availability { + style { + display: flex + padding: 40px 0px + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + background: #FFF + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + align-self: stretch + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 33.590240478515625px + height: 30px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27px + height: 30px + } + } + span { + text "Availability" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "2 private rooms, 1 detached unit" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 16px + font-weight: 400 + } + } + br + }} + } + } + div callouts { + style { + display: flex + align-items: flex-start + gap: 40px + align-self: stretch + } + div propertyType { + style { + display: flex + padding: 20px 0px + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + background: #FFF + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + align-self: stretch + border-right: 1px solid rgba(172, 174, 191, 0.35) + } + div dashboard3streamlinecoresvg { + style { + width: 30px + height: 30px + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 11.53846263885498px + height: 16.153846740722656px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 11.53846263885498px + height: 6.94615364074707px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 11.538461685180664px + height: 16.153846740722656px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 11.538461685180664px + height: 6.946154594421387px + } + } + } + div layoutwindow8streamlinecoresvg { + style { + width: 27.857px + height: 30px + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27.85714340209961px + height: 30px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27.85714340209961px + height: 0px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 23.076923370361328px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27.85714340209961px + height: 0px + } + } + } + div layoutwindow16streamlinecoresvg { + style { + width: 25.714px + height: 30px + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 25.71428680419922px + height: 30px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 25.71428680419922px + height: 0px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 15px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 15px + } + } + } + div layoutwindow28streamlinecoresvg { + style { + width: 25.714px + height: 30px + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 25.71428680419922px + height: 30px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.85714340209961px + height: 0.00002288818359375px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.85714340209961px + height: 0.00002193450927734375px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 30px + } + } + } + div group4471 { + style { + width: 27px + height: 30px + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27px + height: 30px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27px + height: 0px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 20px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27px + height: 0px + } + } + } + span { + text "Community" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "Shared homes, private homes, camper parking, tent sites" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 16px + font-weight: 400 + } + } + br + }} + } + div residents { + style { + display: flex + padding: 20px 0px + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + background: #FFF + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + align-self: stretch + border-right: 1px solid rgba(172, 174, 191, 0.35) + } + div pagesettingstreamlinecoresvg { + style { + width: 30px + height: 30px + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 11.538461685180664px + height: 11.538460731506348px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 11.538460731506348px + height: 0px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 11.538460731506348px + height: 0px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 11.538460731506348px + height: 0px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.69230842590332px + height: 12.692307472229004px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 11.538461685180664px + height: 11.53846263885498px + } + } + } + div nopovertystreamlinecoresvg { + style { + width: 27px + height: 30px + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 7.714284896850586px + height: 8.572856903076172px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.849157333374023px + height: 8.573046684265137px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 7.7142863273620605px + height: 8.572856903076172px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.84921932220459px + height: 8.573046684265137px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 7.714284896850586px + height: 8.572856903076172px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 11.571663856506348px + height: 6.4296417236328125px + } + } + } + span { + text "Members" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "6 men, 5 women, 1 non-binary
" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 16px + font-weight: 400 + } + } + br + text "2 member connections" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 16px + font-weight: 400 + } + } + br + }} + } + div availability { + style { + display: flex + padding: 20px 0px + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + background: #FFF + } + div contents { + style { + display: flex + height: 133px + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 33.590240478515625px + height: 30px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27px + height: 30px + } + } + div pacmanstreamlinecoresvg { + style { + width: 27.772px + height: 30px + flex-shrink: 0 + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27.77167320251465px + height: 30px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 2.4489800930023193px + height: 2.4489800930023193px + } + } + } + div coinsharestreamlinecoresvg { + style { + width: 30px + height: 30px + flex-shrink: 0 + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18.461538314819336px + height: 18.461538314819336px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 4.615384578704834px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 25.384614944458008px + height: 5.76923131942749px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.83228588104248px + height: 8.216885566711426px + } + } + } + div goldstreamlinecoresvg { + style { + width: 38.999px + height: 30px + flex-shrink: 0 + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 17.999561309814453px + height: 15.000367164611816px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 17.999561309814453px + height: 15.000367164611816px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 17.999561309814453px + height: 15.000244140625px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 13.919661521911621px + height: 0px + } + } + } + div colorpalettestreamlinecoresvg { + style { + width: 32.5px + height: 30px + flex-shrink: 0 + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 20px + height: 20px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 20px + height: 20px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 20px + height: 20.000001907348633px + } + } + } + div textflowrowsstreamlinecoresvg { + style { + width: 27.933px + height: 30px + flex-shrink: 0 + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 7.366153717041016px + height: 7.366153717041016px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 7.366153717041016px + height: 7.366153717041016px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 7.366153717041016px + height: 7.366153717041016px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 4.752691745758057px + height: 9.505707740783691px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 20.56696128845215px + height: 0px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 13.201223373413086px + height: 0px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 14.149707794189453px + height: 14.149616241455078px + } + } + } + div flash2streamlinecoresvg { + style { + width: 20.769px + height: 30px + flex-shrink: 0 + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 20.769229888916016px + height: 30px + } + } + } + div businesshandshakestreamlinecoresvg { + style { + width: 41.81px + height: 30px + flex-shrink: 0 + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 19.51008415222168px + height: 4.4145426750183105px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 34.91450500488281px + height: 12.98598861694336px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 28.33257293701172px + height: 21.817214965820312px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 7.8523430824279785px + height: 2.087390661239624px + } + } + } + div targetstreamlinecoresvg { + style { + width: 30px + height: 30px + flex-shrink: 0 + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 29.952709197998047px + height: 29.963943481445312px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 13.376220703125px + height: 13.3697509765625px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 5.769234657287598px + height: 5.769233226776123px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.384620666503906px + height: 10.384621620178223px + } + } + } + div browserbuildstreamlinecoresvg { + style { + width: 27.857px + height: 30px + flex-shrink: 0 + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27.85714340209961px + height: 30px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 27.85714340209961px + height: 0px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 16.153846740722656px + } + } + } + span { + text "Opportunities" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "4 active projects
1 matches your skillsets" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 16px + font-weight: 400 + } + } + br + }} + } + } + div compatabilityScore { + style { + display: flex + padding: 25px 30px + align-items: center + gap: 30px + align-self: stretch + border-radius: 10px + border: 1px solid rgba(172, 174, 191, 0.35) + } + div score { + style { + display: flex + width: 60px + height: 70px + flex-direction: column + justify-content: center + align-items: flex-start + border-right: 1px solid rgba(172, 174, 191, 0.35) + } + span { + text "94" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 30px + font-weight: 500 + } + } + br + }} + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 5px + flex: 1 0 0 + } + div frame80 { + style { + display: flex + align-items: center + gap: 5px + } + span { + text "Compatibility Score" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 23px + font-weight: 500 + } + } + br + }div information2line { + style { + width: 22px + height: 22px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18.333332061767578px + height: 18.333332061767578px + } + } + } + } + span { + text "Based on your lifestyle preferences, we believe this property is a good match for you." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + div about { + style { + display: flex + align-items: flex-start + gap: 10px + align-self: stretch + } + span { + text "We are a Native American owned large acreage working sheep ranch and off grid B&B offering guests a unique stay at our ranch utilizing quality canvas bell tents, covered wagons, a cabin, and traditional Hogans on the Navajo Nation. In all there are 7 accommodations. Nicely spaced in a general area. Our ranch is beautifully located very near all areas of attraction - Antelope Canyon, the town of Page and Lake Powell are 15 minutes drive. Horseshoe Bend is only 5 minutes drive from the ranch. Both the north and south rims of the Grand Canyon are 2 hours. Monument Valley, Bryce, Zion, and Marble Canyon are well within driving distance." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div amenities { + style { + display: flex + flex-direction: column + align-items: flex-start + align-self: stretch + } + div header { + style { + display: none + width: 873px + padding-top: 50px + flex-direction: column + justify-content: flex-end + align-items: flex-start + gap: 50px + border-top: 1px solid #EDEEF3 + background: #FFF + } + span { + text "Community highlights" { + style { + font-family: THICCCBOI + font-style: Semi Bold + font-size: 24px + font-weight: 600 + } + } + br + }} + div grid { + style { + display: flex + width: 873px + justify-content: space-between + align-items: flex-start + } + div col1 { + style { + display: flex + width: 161px + flex-direction: column + align-items: flex-start + gap: 30px + flex-shrink: 0 + } + div frame59 { + style { + display: flex + justify-content: center + align-items: center + gap: 10px + } + div shutdownfill { + style { + display: none + width: 24px + height: 24px + padding: 2.049px 2px 2px 2px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 20px + height: 19.950620651245117px + } + } + } + span { + text "Renewable energy" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div frame59 { + style { + display: flex + align-items: center + gap: 10px + } + div roadsterfill { + style { + display: none + width: 24px + padding: 4px 0px 2px 0px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 24px + height: 18px + } + } + } + span { + text "Shared workspaces" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div frame60 { + style { + display: flex + justify-content: center + align-items: center + gap: 10px + } + span { + text "Outdoor grill" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + div col2 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 30px + } + div frame59 { + style { + display: flex + align-items: center + gap: 10px + } + div plantfill { + style { + width: 24px + height: 24px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18.999948501586914px + height: 20px + } + } + } + span { + text "Organic garden" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div frame59 { + style { + display: flex + justify-content: center + align-items: center + gap: 10px + } + div dropfill { + style { + width: 24px + height: 24px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18.000024795532227px + height: 21.727903366088867px + } + } + } + span { + text "Well water" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div frame60 { + style { + display: flex + justify-content: center + align-items: center + gap: 10px + } + span { + text "EV charger" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + div col3 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 30px + } + div frame59 { + style { + display: flex + align-items: center + gap: 10px + } + span { + text "Seasonal creek" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div frame59 { + style { + display: flex + justify-content: center + align-items: center + gap: 10px + } + div wififill { + style { + width: 24px + height: 24px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 22.620946884155273px + height: 18px + } + } + } + span { + text "Highspeed wi-fi" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div frame60 { + style { + display: flex + justify-content: center + align-items: center + gap: 10px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 22px + height: 22px + } + } + div carfill { + style { + display: none + width: 24px + padding: 4px 2px 2px 2px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 20px + height: 18px + } + } + } + span { + text "Private parking" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + div col4 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 30px + } + div frame59 { + style { + display: flex + align-items: center + gap: 10px + } + div treefill { + style { + width: 24px + height: 24px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18px + height: 21px + } + } + } + span { + text "Natural setting" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div frame59 { + style { + display: flex + justify-content: center + align-items: center + gap: 10px + } + span { + text "Onsite laundry" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div frame60 { + style { + display: flex + justify-content: center + align-items: center + gap: 10px + } + span { + text "Fully furnished" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + } + div stickyNav { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 40px + align-self: stretch + border-top: 1px solid #EDEEF3 + border-bottom: 1px solid #EDEEF3 + background: #FFF + } + div navLinks { + style { + display: flex + width: 873px + padding: 0px 30px + justify-content: space-between + align-items: center + } + span { + text "Community" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + }span { + text "Spaces" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + }span { + text "Commons" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + }div activeLink { + style { + display: flex + width: 126px + padding: 30px 0px + justify-content: space-between + align-items: center + flex-shrink: 0 + border-bottom: 3px solid #171930 + } + span { + text "Opportunities" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + }} + span { + text "Location" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + }} + } + div stickySections { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 75px + align-self: stretch + } + div community { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 20px + align-self: stretch + } + div headerWrapper { + style { + display: flex + flex-direction: column + justify-content: flex-end + align-items: flex-start + gap: 10px + } + div header { + style { + display: flex + width: 873px + justify-content: flex-end + align-items: flex-start + gap: 5px + background: #FFF + } + div text { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 3px + flex: 1 0 0 + } + span { + text "Meet the Wildseeds community" { + style { + font-family: THICCCBOI + font-style: Medium + font-size: 30px + font-weight: 500 + } + } + br + }span { + text "Live the change, while being supported by a network of changemakers" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div tertiaryText { + style { + display: flex + justify-content: center + align-items: center + gap: 5px + } + span { + text "13 members" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + div content { + style { + display: flex + width: 872px + flex-direction: column + align-items: center + gap: 30px + } + span { + text "We are a Native American owned large acreage working sheep ranch and off grid B&B offering guests a unique stay at our ranch utilizing quality canvas bell tents, covered wagons, a cabin, and traditional Hogans on the Navajo Nation. In all there are 7 accommodations. Nicely spaced in a general area. Our ranch is beautifully located very near all areas of attraction - Antelope Canyon, the town of Page and Lake Powell are 15 minutes drive. Horseshoe Bend is only 5 minutes drive from the ranch. Both the north and south rims of the Grand Canyon are 2 hours. Monument Valley, Bryce, Zion, and Marble Canyon are well within driving distance." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div callouts { + style { + display: flex + width: 872px + align-items: flex-start + gap: 10px + } + div item4 { + style { + display: flex + width: 265px + padding: 40px 30px + align-items: flex-start + gap: 10px + flex-shrink: 0 + align-self: stretch + border-radius: 10px + border: 1px solid #EDEEF3 + background: #FFF + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 30px + height: 24px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 33.590240478515625px + height: 30px + } + } + span { + text "Community values" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "The Kumeyaay are the original inhabitants of San Diego County" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }} + } + div item5 { + style { + display: flex + width: 265px + padding: 40px 30px + align-items: flex-start + gap: 10px + flex-shrink: 0 + align-self: stretch + border-radius: 10px + border: 1px solid #EDEEF3 + background: #FFF + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 30px + height: 24px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 33.590240478515625px + height: 30px + } + } + span { + text "Shared intentions" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "Get to know the local flora and fauna within the San Diego watershed" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }} + } + div item6 { + style { + display: flex + width: 265px + padding: 40px 30px + align-items: flex-start + gap: 10px + flex-shrink: 0 + align-self: stretch + border-radius: 10px + border: 1px solid #EDEEF3 + background: #FFF + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 30px + height: 24px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 33.590240478515625px + height: 30px + } + } + span { + text "Guidelines" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "This is a bit of descriptive text that highlights the culture of the region" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }} + } + div item7 { + style { + display: flex + width: 265px + padding: 40px 30px + align-items: flex-start + gap: 10px + flex-shrink: 0 + align-self: stretch + border-radius: 10px + border: 1px solid #EDEEF3 + background: #FFF + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 30px + height: 24px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 33.590240478515625px + height: 30px + } + } + span { + text "Resources" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "This is a bit of descriptive text that highlights the culture of the region" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }} + } + } + div cardGridcircle { + style { + display: flex + height: 395px + flex-direction: column + align-items: center + gap: 15px + align-self: stretch + box-shadow: 0px -6px 20px 0px #FFF inset + } + div leadership { + style { + display: flex + align-items: flex-start + gap: 15px + align-self: stretch + } + div host { + style { + display: flex + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + flex: 1 0 0 + align-self: stretch + } + div name { + style { + display: flex + align-items: center + gap: 3px + } + span { + text "RiAnn" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + width: 18px + height: 18px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined September 2022" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }} + } + } + div owner { + style { + display: flex + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + flex: 1 0 0 + align-self: stretch + } + div name { + style { + display: flex + align-items: center + gap: 3px + } + span { + text "Jordan" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + width: 18px + height: 18px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Property Owner" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined March 2020" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }} + } + } + div member { + style { + display: flex + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + flex: 1 0 0 + align-self: stretch + } + div name { + style { + display: flex + align-items: center + gap: 3px + align-self: stretch + } + span { + text "Devin" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + width: 18px + height: 18px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Operations Manager" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + } + div membersnotLoggedIn { + style { + display: flex + height: 345px + flex-direction: column + justify-content: space-between + align-items: center + align-content: space-between + flex-shrink: 0 + align-self: stretch + } + div alert { + style { + display: flex + padding: 20px 30px + justify-content: center + align-items: center + border-radius: 5px + border: 1px solid #EDEEF3 + background: #FFF + } + span { + text "You must " { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + text "login" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + text " to view the community members" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + }} + div members { + style { + display: flex + flex-direction: column + align-items: center + gap: 15px + align-self: stretch + filter: blur(2.5px) + } + div row2 { + style { + display: flex + align-items: flex-start + gap: 15px + align-self: stretch + } + div member { + style { + display: flex + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + align-self: stretch + } + div name { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 3px + } + span { + text "Joshua" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Member" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + div member { + style { + display: flex + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + align-self: stretch + } + div name { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 3px + } + span { + text "Mile" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Member" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + div member { + style { + display: flex + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + align-self: stretch + } + div name { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 3px + } + span { + text "Malena" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Member" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + } + div row3 { + style { + display: flex + align-items: flex-start + gap: 15px + align-self: stretch + } + div member { + style { + display: flex + width: 278px + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + align-self: stretch + } + div name { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 3px + } + span { + text "Amelia" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Member" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + div member { + style { + display: flex + width: 278px + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + align-self: stretch + } + div name { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 3px + } + span { + text "Alistair" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Member" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + div member { + style { + display: flex + width: 278px + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + align-self: stretch + } + div name { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 3px + } + span { + text "Audrey" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Member" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + } + div row4 { + style { + display: flex + align-items: flex-start + gap: 15px + align-self: stretch + } + div member { + style { + display: flex + width: 278px + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + align-self: stretch + } + div name { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 3px + } + span { + text "Nick" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Member" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + div member { + style { + display: flex + width: 278px + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + align-self: stretch + } + div name { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 3px + } + span { + text "Maximilian" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Member" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + div member { + style { + display: flex + width: 278px + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + align-self: stretch + } + div name { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 3px + } + span { + text "Jakob" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Member" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + } + } + } + } + div cardGridrounded { + style { + display: none + height: 395px + flex-direction: column + align-items: center + gap: 15px + align-self: stretch + box-shadow: 0px -6px 20px 0px #FFF inset + } + div leadership { + style { + display: flex + align-items: flex-start + gap: 15px + align-self: stretch + } + div host { + style { + display: flex + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + flex: 1 0 0 + align-self: stretch + } + div name { + style { + display: flex + align-items: center + gap: 3px + } + span { + text "RiAnn" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: flex + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined September 2022" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }} + } + } + div owner { + style { + display: flex + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + flex: 1 0 0 + align-self: stretch + } + div name { + style { + display: flex + align-items: center + gap: 3px + } + span { + text "Jordan" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: flex + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Property Owner" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined March 2020" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }} + } + } + div member { + style { + display: flex + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + flex: 1 0 0 + align-self: stretch + } + div name { + style { + display: flex + align-items: center + gap: 3px + align-self: stretch + } + span { + text "Devin" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: flex + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Operations Manager" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + } + div membersnotLoggedIn { + style { + display: flex + height: 345px + flex-direction: column + justify-content: space-between + align-items: center + align-content: space-between + flex-shrink: 0 + align-self: stretch + } + div alert { + style { + display: flex + padding: 20px 30px + justify-content: center + align-items: center + border-radius: 5px + border: 1px solid #EDEEF3 + background: #FFF + } + span { + text "You must " { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + text "login" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + text " to view the community" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + }} + div members { + style { + display: flex + flex-direction: column + align-items: center + gap: 15px + align-self: stretch + filter: blur(2.5px) + } + div row2 { + style { + display: flex + align-items: flex-start + gap: 15px + align-self: stretch + } + div member { + style { + display: flex + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + align-self: stretch + } + div name { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 3px + } + span { + text "Joshua" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Member" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + div member { + style { + display: flex + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + align-self: stretch + } + div name { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 3px + } + span { + text "Mile" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Member" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + div member { + style { + display: flex + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + align-self: stretch + } + div name { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 3px + } + span { + text "Malena" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Member" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + } + div row3 { + style { + display: flex + align-items: flex-start + gap: 15px + align-self: stretch + } + div member { + style { + display: flex + width: 278px + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + align-self: stretch + } + div name { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 3px + } + span { + text "Amelia" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Member" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + div member { + style { + display: flex + width: 278px + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + align-self: stretch + } + div name { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 3px + } + span { + text "Alistair" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Member" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + div member { + style { + display: flex + width: 278px + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + align-self: stretch + } + div name { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 3px + } + span { + text "Audrey" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Member" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + } + div row4 { + style { + display: flex + align-items: flex-start + gap: 15px + align-self: stretch + } + div member { + style { + display: flex + width: 278px + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + align-self: stretch + } + div name { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 3px + } + span { + text "Nick" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Member" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + div member { + style { + display: flex + width: 278px + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + align-self: stretch + } + div name { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 3px + } + span { + text "Maximilian" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Member" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + div member { + style { + display: flex + width: 278px + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + align-self: stretch + } + div name { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 3px + } + span { + text "Jakob" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Member" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + } + } + } + } + div seeAll { + style { + display: flex + padding: 10px 20px + align-items: center + gap: 10px + border-radius: 90px + border: 1px solid #EDEEF3 + background: #FFF + filter: blur(2px) + } + span { + text "See all" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div guidelines { + style { + display: none + flex-direction: column + align-items: center + gap: 10px + } + div text { + style { + display: flex + width: 872px + height: 61px + flex-direction: column + align-items: flex-start + gap: 3px + } + span { + text "Community guidelines" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 24px + font-weight: 700 + } + } + br + }span { + text "Here are some helpful tips for you to integrate smoothly into the community" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + } + div availability { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 20px + align-self: stretch + } + div headerWrapper { + style { + display: flex + height: 100px + flex-direction: column + justify-content: flex-end + align-items: flex-start + gap: 10px + align-self: stretch + border-top: 1px solid #EDEEF3 + } + div header { + style { + display: flex + width: 873px + flex-direction: column + align-items: flex-start + gap: 5px + background: #FFF + } + div primaryText { + style { + display: flex + width: 873px + justify-content: space-between + align-items: flex-start + } + span { + text "Available spaces" { + style { + font-family: THICCCBOI + font-style: Medium + font-size: 30px + font-weight: 500 + } + } + br + }div subtext { + style { + display: flex + justify-content: center + align-items: center + gap: 5px + } + span { + text "3 of 15 available" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + span { + text "Our spaces have been curated to meet all of your needs, and most of your wants" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + div content { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 40px + align-self: stretch + } + div filters { + style { + display: flex + justify-content: space-between + align-items: flex-start + align-self: stretch + } + div dates { + style { + display: flex + padding: 20px 30px + align-items: flex-start + gap: 10px + border-radius: 8px + border: 4px solid #EDEEF3 + background: #FFF + } + div contents { + style { + display: flex + align-items: flex-start + gap: 21px + } + div dates { + style { + display: flex + width: 175px + height: 37px + flex-direction: column + align-items: flex-start + gap: 4px + border-right: 1px solid #D9D9D9 + } + div frame35 { + style { + display: flex + align-items: center + gap: 3px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12px + height: 12px + } + } + span { + text "Arrival" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + span { + text "Enter arrival date" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div dates { + style { + display: flex + width: 175px + height: 37px + flex-direction: column + align-items: flex-start + gap: 4px + } + div frame35 { + style { + display: flex + align-items: center + gap: 3px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12px + height: 12px + } + } + span { + text "Departure" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + span { + text "Flexible stay" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + div budget { + style { + display: flex + padding: 20px 30px + align-items: flex-start + gap: 10px + border-radius: 8px + border: 4px solid #EDEEF3 + background: #FFF + } + div contents { + style { + display: flex + align-items: flex-start + gap: 21px + } + div dates { + style { + display: flex + height: 37px + flex-direction: column + align-items: flex-start + gap: 4px + } + div frame35 { + style { + display: flex + align-items: center + gap: 3px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 14.000005722045898px + height: 12px + } + } + span { + text "Budget" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + span { + text "Enter max amount" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + div guest { + style { + display: none + padding: 20px 30px + align-items: flex-start + gap: 10px + border-radius: 8px + border: 4px solid #EDEEF3 + background: #FFF + } + div contents { + style { + display: flex + align-items: flex-start + gap: 21px + } + div dates { + style { + display: flex + height: 37px + flex-direction: column + align-items: flex-start + gap: 4px + } + div frame35 { + style { + display: flex + align-items: center + gap: 3px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12px + height: 12px + } + } + span { + text "Guests" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + span { + text "Number of guests" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div dates { + style { + display: none + width: 200px + height: 37px + flex-direction: column + align-items: flex-start + gap: 4px + } + div frame35 { + style { + display: flex + align-items: center + gap: 3px + } + div calendarscheduleline { + style { + display: flex + width: 12px + height: 12px + padding: 0.5px 0.5px 1px 1px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.5px + height: 10.5px + } + } + } + span { + text "Departure" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + span { + text "Flexible stay" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + div type { + style { + display: flex + padding: 20px 30px + align-items: flex-start + gap: 10px + border-radius: 8px + border: 4px solid #EDEEF3 + background: #FFF + } + div contents { + style { + display: flex + align-items: flex-start + gap: 21px + } + div dates { + style { + display: flex + height: 37px + flex-direction: column + align-items: flex-start + gap: 4px + } + div frame35 { + style { + display: flex + align-items: center + gap: 3px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12px + height: 12px + } + } + span { + text "Type" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + span { + text "Accommodations" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div dates { + style { + display: none + width: 200px + height: 37px + flex-direction: column + align-items: flex-start + gap: 4px + } + div frame35 { + style { + display: flex + align-items: center + gap: 3px + } + div calendarscheduleline { + style { + display: flex + width: 12px + height: 12px + padding: 0.5px 0.5px 1px 1px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.5px + height: 10.5px + } + } + } + span { + text "Departure" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + span { + text "Flexible stay" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + } + div room1 { + style { + display: flex + width: 873px + align-items: flex-start + gap: 30px + } + div image { + style { + display: flex + width: 425px + height: 300px + padding: 10px 0px + flex-direction: column + justify-content: flex-end + align-items: center + flex-shrink: 0 + border-radius: 10px + } + div carousel { + style { + display: flex + padding: 10px + align-items: flex-start + gap: 6px + } + } + } + div content { + style { + display: flex + flex-direction: column + align-items: flex-start + flex: 1 0 0 + align-self: stretch + } + div description { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 3px + flex: 1 0 0 + align-self: stretch + } + div header { + style { + display: flex + justify-content: space-between + align-items: flex-start + align-self: stretch + } + span { + text "Tiny Home" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "Detached unit with private entrance" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }span { + text "$" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 30px + font-weight: 700 + } + } + text "1" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 30px + font-weight: 500 + } + } + text "600" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 30px + font-weight: 500 + } + } + br + text "/mo" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 14px + font-weight: 700 + } + } + br + }} + div accommodations { + style { + display: flex + width: 428px + padding: 20px 0px + align-items: flex-start + gap: 10px + border-bottom: 1px solid #EDEEF3 + } + div col1 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + } + div item1 { + style { + display: flex + padding: 8px 12px + align-items: center + gap: 5px + border-radius: 50px + border: 1px solid #EDEEF3 + } + span { + text "2 Beds" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + div col2 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + } + div item2 { + style { + display: flex + padding: 8px 12px + align-items: center + gap: 5px + border-radius: 50px + border: 1px solid #EDEEF3 + } + span { + text "1 Bath" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + div col3 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + } + div item3 { + style { + display: flex + padding: 8px 12px + align-items: center + gap: 5px + border-radius: 50px + border: 1px solid #EDEEF3 + } + span { + text "Family friendly" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + } + div amenities { + style { + display: flex + padding: 20px 0px + align-items: flex-start + gap: 10px + align-self: stretch + } + div col1 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + flex: 1 0 0 + } + div item1 { + style { + display: none + align-items: center + gap: 5px + align-self: stretch + } + span { + text "2 Beds" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div item5 { + style { + display: flex + align-items: center + gap: 5px + align-self: stretch + } + span { + text "440 ft²" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div item5 { + style { + display: flex + align-items: center + gap: 5px + align-self: stretch + } + span { + text "Privacy" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + div col2 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + flex: 1 0 0 + } + div item5 { + style { + display: flex + align-items: center + gap: 5px + align-self: stretch + } + span { + text "Heat/AC" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div item3 { + style { + display: flex + align-items: center + gap: 5px + align-self: stretch + } + span { + text "Full beds" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + div col3 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + flex: 1 0 0 + } + div item3 { + style { + display: flex + align-items: center + gap: 5px + align-self: stretch + } + span { + text "Kitchen" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div item4 { + style { + display: flex + align-items: center + gap: 5px + align-self: stretch + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 20px + height: 15.914453506469727px + } + } + span { + text "Wi-fi" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + div col4 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + flex: 1 0 0 + } + div item4 { + style { + display: flex + align-items: center + gap: 5px + align-self: stretch + } + span { + text "Laundry" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div item5 { + style { + display: none + align-items: center + gap: 5px + align-self: stretch + } + span { + text "Laundry" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + } + } + div buttons { + style { + display: flex + justify-content: flex-end + align-items: center + gap: 8px + } + div button { + style { + display: none + padding: 15px 20px + justify-content: center + align-items: center + gap: 10px + border-radius: 5px + background: #1457FF + } + div arrowupdashedsquarestreamlinecoresvg { + style { + display: flex + width: 20px + height: 20px + padding: 0.714px + justify-content: center + align-items: center + } + div arrowupdashedsquarestreamlinecoresvg { + style { + width: 18.572px + height: 18.571px + flex-shrink: 0 + position: absolute + left: 0.7142333984375px + top: 0.71435546875px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 2.957122325897217px + height: 2.857621192932129px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 2.957141876220703px + height: 2.857621192932129px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 2.8571434020996094px + height: 18.571426391601562px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0.0000017285346984863281px + height: 2.8571434020996094px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 2.8571434020996094px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 2.957122325897217px + height: 2.8575706481933594px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 2.957141876220703px + height: 2.8575706481933594px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 8.571426391601562px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 5.714286804199219px + height: 2.857142925262451px + } + } + } + } + span { + text "Select this space" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div button { + style { + display: flex + padding: 15px 20px + justify-content: center + align-items: center + gap: 10px + border-radius: 5px + background: #171930 + } + div calendarsearchstreamlinemicrosvg { + style { + width: 24px + height: 24px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 21.599998474121094px + height: 19.19999885559082px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 2.3999998569488525px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 2.3999998569488525px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 9.283201217651367px + height: 9.283201217651367px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 2.2079992294311523px + height: 2.2080001831054688px + } + } + } + span { + text "Check availability" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div button { + style { + display: flex + padding: 15px 20px + justify-content: center + align-items: center + gap: 8px + border-radius: 5px + border: 1px solid #EDEEF3 + background: rgba(237, 238, 243, 0.35) + } + div select3dstreamlineultimatesvg { + style { + width: 20px + height: 20px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 19.711666107177734px + height: 19.710830688476562px + } + } + } + span { + text "Tour this space" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + } + } + div room2 { + style { + display: flex + width: 873px + align-items: flex-start + gap: 30px + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 20px + flex: 1 0 0 + align-self: stretch + } + div description { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + flex: 1 0 0 + align-self: stretch + } + div header { + style { + display: flex + justify-content: space-between + align-items: flex-start + align-self: stretch + } + span { + text "Falcon’s Den" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "Attached unit with private entrance" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }span { + text "$" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 30px + font-weight: 700 + } + } + text "138" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 30px + font-weight: 500 + } + } + br + text "0" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 30px + font-weight: 500 + } + } + text "/mo" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 14px + font-weight: 700 + } + } + br + }} + div accommodations { + style { + display: flex + padding: 20px 0px + align-items: flex-start + gap: 10px + border-bottom: 1px solid #EDEEF3 + } + div col1 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + } + div item1 { + style { + display: flex + padding: 8px 12px + align-items: center + gap: 5px + border-radius: 50px + border: 1px solid #EDEEF3 + } + span { + text "1 Bed" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + div col2 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + } + div item2 { + style { + display: flex + padding: 8px 12px + align-items: center + gap: 5px + border-radius: 50px + border: 1px solid #EDEEF3 + } + span { + text "1 Bath" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + div col3 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + } + div item3 { + style { + display: flex + padding: 8px 12px + align-items: center + gap: 5px + border-radius: 50px + border: 1px solid #EDEEF3 + } + span { + text "Couple friendly" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + } + div amenities { + style { + display: flex + padding: 20px 0px + align-items: flex-start + gap: 30px + align-self: stretch + } + div col1 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + } + div item5 { + style { + display: flex + align-items: center + gap: 5px + } + span { + text "310 ft²" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div item4 { + style { + display: flex + align-items: center + gap: 5px + align-self: stretch + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 20px + height: 15.914453506469727px + } + } + span { + text "Wi-fi" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + div col2 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + } + div item5 { + style { + display: flex + align-items: center + gap: 5px + } + span { + text "Heat/AC" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + div col4 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + } + div item3 { + style { + display: flex + height: 24px + align-items: center + gap: 5px + } + span { + text "King bed" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + div col3 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + } + div item3 { + style { + display: flex + align-items: center + gap: 5px + } + span { + text "Sofa" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + } + } + div buttons { + style { + display: flex + justify-content: flex-end + align-items: center + gap: 8px + } + div button { + style { + display: flex + padding: 15px 20px + justify-content: center + align-items: center + gap: 10px + border-radius: 5px + background: #1457FF + } + div arrowupdashedsquarestreamlinecoresvg { + style { + width: 20px + height: 20px + } + div arrowupdashedsquarestreamlinecoresvg { + style { + width: 18.572px + height: 18.571px + flex-shrink: 0 + position: absolute + left: 0.7142333984375px + top: 0.71435546875px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 2.957122325897217px + height: 2.857621192932129px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 2.957141876220703px + height: 2.857621192932129px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 2.8571434020996094px + height: 18.571426391601562px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0.0000017285346984863281px + height: 2.8571434020996094px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 2.8571434020996094px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 2.957122325897217px + height: 2.8575706481933594px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 2.957141876220703px + height: 2.8575706481933594px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 8.571426391601562px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 5.714286804199219px + height: 2.857142925262451px + } + } + } + } + span { + text "Select this space" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div button { + style { + display: flex + padding: 15px 20px + justify-content: center + align-items: center + gap: 8px + border-radius: 5px + border: 1px solid #EDEEF3 + background: rgba(237, 238, 243, 0.35) + } + div select3dstreamlineultimatesvg { + style { + width: 20px + height: 20px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 19.711666107177734px + height: 19.710830688476562px + } + } + } + span { + text "Tour this space" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + } + } + div room3 { + style { + display: flex + width: 873px + align-items: flex-start + gap: 30px + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + flex: 1 0 0 + align-self: stretch + } + div description { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + gap: 3px + flex: 1 0 0 + align-self: stretch + } + div header { + style { + display: flex + justify-content: space-between + align-items: flex-start + align-self: stretch + } + span { + text "Crow’s Nest" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "Private bedroom in shared house" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }span { + text "$" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 30px + font-weight: 700 + } + } + text "125" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 30px + font-weight: 500 + } + } + br + text "0" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 30px + font-weight: 500 + } + } + text "/mo" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 14px + font-weight: 700 + } + } + br + }} + div accommodations { + style { + display: flex + padding: 20px 0px + align-items: flex-start + gap: 10px + border-bottom: 1px solid #EDEEF3 + } + div col1 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + } + div item1 { + style { + display: flex + padding: 8px 12px + align-items: center + gap: 5px + border-radius: 50px + border: 1px solid #EDEEF3 + } + span { + text "2 Beds" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + div col2 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + } + div item2 { + style { + display: flex + padding: 8px 12px + align-items: center + gap: 5px + border-radius: 50px + border: 1px solid #EDEEF3 + } + span { + text "1 Bath" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + div col3 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + } + div item3 { + style { + display: flex + padding: 8px 12px + align-items: center + gap: 5px + border-radius: 50px + border: 1px solid #EDEEF3 + } + span { + text "Couple friendly" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + } + div amenities { + style { + display: flex + padding: 20px 0px + align-items: flex-start + gap: 30px + align-self: stretch + } + div col1 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + } + div item5 { + style { + display: flex + align-items: center + gap: 5px + } + span { + text "400 ft²" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + div col2 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + } + div item5 { + style { + display: flex + align-items: center + gap: 5px + } + span { + text "Heat/AC" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + div col3 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + } + div item3 { + style { + display: flex + height: 24px + align-items: center + gap: 5px + } + span { + text "Full bed" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + div col4 { + style { + display: none + width: 57px + height: 48px + flex-direction: column + align-items: flex-start + gap: 15px + } + div item3 { + style { + display: none + align-items: center + gap: 5px + } + span { + text "Sofa" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + } + div amenities { + style { + display: none + padding: 20px 0px + align-items: flex-start + gap: 10px + align-self: stretch + } + div col1 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + flex: 1 0 0 + } + div item1 { + style { + display: none + align-items: center + gap: 5px + align-self: stretch + } + span { + text "2 Beds" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div item5 { + style { + display: flex + align-items: center + gap: 5px + align-self: stretch + } + span { + text "400 ft²" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div item5 { + style { + display: none + align-items: center + gap: 5px + align-self: stretch + } + span { + text "Privacy" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + div col2 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + flex: 1 0 0 + } + div item2 { + style { + display: none + align-items: center + gap: 5px + align-self: stretch + } + span { + text "1 Bath" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div item5 { + style { + display: flex + align-items: center + gap: 5px + align-self: stretch + } + span { + text "Heat/AC" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + div col3 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + flex: 1 0 0 + } + div item3 { + style { + display: flex + align-items: center + gap: 5px + align-self: stretch + } + span { + text "Full bed" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + div col4 { + style { + display: flex + height: 24px + flex-direction: column + align-items: flex-start + gap: 15px + flex: 1 0 0 + } + div item4 { + style { + display: none + align-items: center + gap: 5px + align-self: stretch + } + span { + text "Laundry" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div item5 { + style { + display: none + align-items: center + gap: 5px + align-self: stretch + } + span { + text "Laundry" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + } + } + div buttons { + style { + display: flex + justify-content: flex-end + align-items: center + gap: 8px + } + div button { + style { + display: flex + padding: 15px 20px + justify-content: center + align-items: center + gap: 10px + border-radius: 5px + background: #1457FF + } + div arrowupdashedsquarestreamlinecoresvg { + style { + width: 20px + height: 20px + } + div arrowupdashedsquarestreamlinecoresvg { + style { + width: 18.572px + height: 18.571px + flex-shrink: 0 + position: absolute + left: 0.7142333984375px + top: 0.71435546875px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 2.957122325897217px + height: 2.857621192932129px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 2.957141876220703px + height: 2.857621192932129px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 2.8571434020996094px + height: 18.571426391601562px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0.0000017285346984863281px + height: 2.8571434020996094px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 2.8571434020996094px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 2.957122325897217px + height: 2.8575706481933594px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 2.957141876220703px + height: 2.8575706481933594px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0px + height: 8.571426391601562px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 5.714286804199219px + height: 2.857142925262451px + } + } + } + } + span { + text "Select this space" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div button { + style { + display: flex + padding: 15px 20px + justify-content: center + align-items: center + gap: 8px + border-radius: 5px + border: 1px solid #EDEEF3 + background: rgba(237, 238, 243, 0.35) + } + div select3dstreamlineultimatesvg { + style { + width: 20px + height: 20px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 19.711666107177734px + height: 19.710830688476562px + } + } + } + span { + text "Tour this space" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + } + } + div captionCopy { + style { + display: flex + align-items: flex-start + gap: 5px + align-self: stretch + } + div information2line { + style { + width: 20px + height: 20px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 16.666664123535156px + height: 16.666664123535156px + } + } + } + span { + text "Due to the nature of communal living, it’s possible that the layout and decor of these spaces may differ from the photos" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }} + } + } + div commons { + style { + display: flex + flex-direction: column + align-items: flex-start + align-self: stretch + } + div content { + style { + display: flex + width: 873px + flex-direction: column + align-items: flex-start + gap: 30px + } + div headerWrapper { + style { + display: flex + height: 100px + flex-direction: column + justify-content: flex-end + align-items: flex-start + gap: 10px + border-top: 1px solid #EDEEF3 + } + div header { + style { + display: flex + width: 873px + justify-content: flex-end + align-items: flex-start + gap: 5px + background: #FFF + } + div text { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 3px + flex: 1 0 0 + } + span { + text "Commons areas" { + style { + font-family: THICCCBOI + font-style: Medium + font-size: 30px + font-weight: 500 + } + } + br + }span { + text "All the comforts you would expect, and the charm you would hope for" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div viewAll { + style { + display: flex + padding: 20px + justify-content: center + align-items: center + gap: 6px + border-radius: 5px + border: 1px solid rgba(172, 174, 191, 0.35) + background: #FFF + } + div imageline { + style { + width: 22px + height: 22px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18.333332061767578px + height: 16.5px + } + } + } + span { + text "View all " { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div tertiaryText { + style { + display: none + justify-content: center + align-items: center + gap: 5px + } + span { + text "3 of 15 available" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div viewAll { + style { + display: none + padding: 20px + justify-content: center + align-items: center + gap: 8px + border-radius: 5px + border: 1px solid rgba(172, 174, 191, 0.35) + background: #FFF + } + div imageline { + style { + display: flex + width: 24px + height: 24px + padding: 3px 2px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 20px + height: 18px + } + } + } + span { + text "View all" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + }} + } + } + div listItems { + style { + display: none + flex-direction: column + align-items: flex-start + } + div grid { + style { + display: flex + width: 873px + align-items: flex-start + gap: 20px + } + div col1 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + flex: 1 0 0 + } + div frame59 { + style { + display: flex + align-items: center + gap: 10px + } + div roadsterfill { + style { + display: flex + width: 24px + padding: 4px 0px 2px 0px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 24px + height: 18px + } + } + } + span { + text "Fully furnished" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div frame59 { + style { + display: flex + justify-content: center + align-items: center + gap: 10px + } + div shutdownfill { + style { + display: none + width: 24px + height: 24px + padding: 2.049px 2px 2px 2px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 20px + height: 19.950620651245117px + } + } + } + span { + text "Another amenity" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + div col2 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + flex: 1 0 0 + } + div frame59 { + style { + display: flex + align-items: center + gap: 10px + } + div plantfill { + style { + display: flex + width: 24px + height: 24px + padding: 2px 3.002px 2px 1.998px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18.999948501586914px + height: 20px + } + } + } + span { + text "Equipped kitchen" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div frame59 { + style { + display: flex + justify-content: center + align-items: center + gap: 10px + } + div dropfill { + style { + display: flex + width: 24px + height: 24px + padding: 0.269px 3px 2.003px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18.000024795532227px + height: 21.727903366088867px + } + } + } + span { + text "Another amenity" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + div col3 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + flex: 1 0 0 + } + div frame59 { + style { + display: flex + align-items: center + gap: 10px + } + span { + text "Lounge areas" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div frame59 { + style { + display: flex + justify-content: center + align-items: center + gap: 10px + } + div wififill { + style { + display: flex + width: 24px + height: 24px + padding: 3px 0.69px 3px 0.689px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 22.620946884155273px + height: 18px + } + } + } + span { + text "Wi-fi" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + div col4 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + flex: 1 0 0 + } + div frame59 { + style { + display: flex + align-items: center + gap: 10px + } + div treefill { + style { + display: flex + width: 24px + height: 24px + padding: 1px 3px 2px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18px + height: 21px + } + } + } + span { + text "Outdoor areas" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div frame59 { + style { + display: none + justify-content: center + align-items: center + gap: 10px + } + span { + text "Outdoor grill" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + } + div imageCarousel { + style { + display: flex + width: 923px + justify-content: flex-end + align-items: center + gap: 15px + } + div item1 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + flex: 1 0 0 + align-self: stretch + } + span { + text "Community garden" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + text "10 images" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }} + div item2 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + flex: 1 0 0 + align-self: stretch + } + span { + text "Dining room" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + text "3 images" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }} + div item3 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + flex: 1 0 0 + align-self: stretch + } + span { + text "Living room" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + text "5 images" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }} + div item5 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + flex: 1 0 0 + align-self: stretch + } + div frame74 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + align-self: stretch + } + div item4 { + style { + display: flex + justify-content: center + align-items: center + flex: 1 0 0 + align-self: stretch + border-radius: 10px + } + div button { + style { + display: flex + width: 50px + height: 50px + padding: 10px + justify-content: center + align-items: center + border-radius: 90px + background: #FFF + box-shadow: 0px 0px 15px 0px rgba(23, 25, 48, 0.20) + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 15.39600944519043px + height: 8px + } + } + } + span { + text "Food gardens" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div button { + style { + display: none + width: 50px + height: 50px + padding: 10px + justify-content: center + align-items: center + border-radius: 90px + background: #FFF + box-shadow: 0px 0px 15px 0px rgba(23, 25, 48, 0.20) + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 15.39600944519043px + height: 8px + } + } + } + } + span { + text "Kitchen" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + text "8 images" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }} + } + div space1 { + style { + display: none + width: 300px + flex-direction: column + align-items: flex-start + gap: 10px + } + span { + text "Tiny Home" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 18px + font-weight: 700 + } + } + br + text "Detached Private Unit 
" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + text "2 Bed • 1 Bath • Laundry • Kitchen •" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 16px + font-weight: 400 + } + } + br + text "440 ft²" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 16px + font-weight: 400 + } + } + br + text "$" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + text "1600" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + text "/mo" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + } + } + div opportunities { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 20px + align-self: stretch + } + div headerWrapper { + style { + display: flex + height: 100px + flex-direction: column + justify-content: flex-end + align-items: flex-start + gap: 10px + border-top: 1px solid #EDEEF3 + } + div header { + style { + display: flex + width: 873px + justify-content: flex-end + align-items: flex-start + gap: 5px + border: 0px solid #EDEEF3 + background: #FFF + } + div text { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 3px + flex: 1 0 0 + } + span { + text "Opportunities to earn" { + style { + font-family: THICCCBOI + font-style: Medium + font-size: 30px + font-weight: 500 + } + } + br + }span { + text "Build the future you desire and get compensated in equity for your contributions" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div tertiaryText { + style { + display: none + justify-content: center + align-items: center + gap: 5px + } + span { + text "3 of 15 available" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + div content { + style { + display: flex + width: 872px + flex-direction: column + align-items: center + gap: 40px + } + span { + text "We are a Native American owned large acreage working sheep ranch and off grid B&B offering guests a unique stay at our ranch utilizing quality canvas bell tents, covered wagons, a cabin, and traditional Hogans on the Navajo Nation. In all there are 7 accommodations. Nicely spaced in a general area. Our ranch is beautifully located very near all areas of attraction - Antelope Canyon, the town of Page and Lake Powell are 15 minutes drive. Horseshoe Bend is only 5 minutes drive from the ranch. Both the north and south rims of the Grand Canyon are 2 hours. Monument Valley, Bryce, Zion, and Marble Canyon are well within driving distance." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div listItems { + style { + display: flex + flex-direction: column + align-items: center + gap: -1px + align-self: stretch + } + div leadership { + style { + display: none + align-items: flex-start + gap: 15px + align-self: stretch + } + div host { + style { + display: flex + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + border-radius: 14px + border: 1px solid #EEEFF2 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + flex: 1 0 0 + align-self: stretch + } + div name { + style { + display: flex + align-items: center + gap: 3px + } + span { + text "RiAnn" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: flex + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined September 2022" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }} + } + } + div owner { + style { + display: flex + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + border-radius: 14px + border: 1px solid #EEEFF2 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + flex: 1 0 0 + align-self: stretch + } + div name { + style { + display: flex + align-items: center + gap: 3px + } + span { + text "Jordan" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: flex + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Property Owner" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined March 2020" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }} + } + } + div member { + style { + display: flex + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + border-radius: 14px + border: 1px solid #EEEFF2 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + flex: 1 0 0 + align-self: stretch + } + div name { + style { + display: flex + align-items: center + gap: 3px + align-self: stretch + } + span { + text "Devin" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: flex + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Operations Manager" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + } + div membersnotLoggedIn { + style { + display: flex + height: 511px + flex-direction: column + align-items: center + align-content: space-between + gap: -1px + align-self: stretch + } + div alert { + style { + display: none + padding: 20px 30px + justify-content: center + align-items: center + border-radius: 5px + border: 1px solid #EDEEF3 + background: #FFF + } + span { + text "You must " { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + text "login" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + text " to view the community" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + }} + div listItem1 { + style { + display: flex + padding: 30px 0px + flex-direction: column + align-items: flex-start + gap: 10px + align-self: stretch + border-top: 1px solid #EEEFF2 + border-bottom: 1px solid #EEEFF2 + background: #FFF + } + div content { + style { + display: flex + align-items: flex-start + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + width: 130px + height: 130px + align-items: flex-start + gap: 10px + } + } + div text { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + } + div header { + style { + display: flex + width: 732px + justify-content: space-between + align-items: flex-start + } + div col1 { + style { + display: flex + flex-direction: column + align-items: flex-start + } + div name { + style { + display: flex + align-items: center + gap: 3px + } + span { + text "Earthen shelter" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Construction project" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }} + div col2 { + style { + display: flex + flex-direction: column + align-items: flex-end + } + div badge { + style { + display: flex + padding: 8px 10px + justify-content: flex-end + align-items: center + gap: 3px + border-radius: 5px + background: #F5F5F5 + } + span { + text "Spring 2024" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + } + span { + text "Cob house construction is an ancient building technique mixing lumps of earth with sand, straw, and water. You can utilize these structures for homes, chicken coops, barns, and more. Cob building is easy to learn, requires no special equipment, and uses sustainable materials." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + div listItem2 { + style { + display: flex + padding: 30px 0px + flex-direction: column + align-items: flex-start + gap: 10px + align-self: stretch + border-top: 1px solid #EEEFF2 + border-bottom: 1px solid #EEEFF2 + background: #FFF + } + div content { + style { + display: flex + align-items: flex-start + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + width: 130px + height: 130px + align-items: flex-start + gap: 10px + } + } + div text { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + } + div header { + style { + display: flex + width: 732px + justify-content: space-between + align-items: flex-start + } + div col1 { + style { + display: flex + flex-direction: column + align-items: flex-start + } + div name { + style { + display: flex + align-items: center + gap: 3px + } + span { + text "Rainwater diversion and catchment systems" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Construction project" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }} + div col2 { + style { + display: flex + flex-direction: column + align-items: flex-end + } + div badge { + style { + display: flex + padding: 8px 10px + justify-content: flex-end + align-items: center + gap: 3px + border-radius: 5px + background: #F5F5F5 + } + span { + text "Spring 2024" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + } + span { + text "Cob house construction is an ancient building technique mixing lumps of earth with sand, straw, and water. You can utilize these structures for homes, chicken coops, barns, and more. Cob building is easy to learn, requires no special equipment, and uses sustainable materials." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + div listItem4 { + style { + display: flex + padding: 30px 0px + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + border-top: 1px solid #EEEFF2 + border-bottom: 1px solid #EEEFF2 + background: #FFF + box-shadow: 0px -15px 25px 0px #FFF inset + } + div content { + style { + display: flex + align-items: flex-start + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + width: 130px + height: 130px + align-items: flex-start + gap: 10px + } + } + div text { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + } + div header { + style { + display: flex + width: 732px + justify-content: space-between + align-items: flex-start + } + div col1 { + style { + display: flex + flex-direction: column + align-items: flex-start + } + div name { + style { + display: flex + align-items: center + gap: 3px + } + span { + text "Stream water recycling" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Construction project" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }} + div col2 { + style { + display: flex + flex-direction: column + align-items: flex-end + } + div badge { + style { + display: flex + padding: 8px 10px + justify-content: flex-end + align-items: center + gap: 3px + border-radius: 5px + background: #F5F5F5 + } + span { + text "Summer 2024" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + } + span { + text "Cob house construction is an ancient building technique mixing lumps of earth with sand, straw, and water. You can utilize these structures for homes, chicken coops, barns, and more. Cob building is easy to learn, requires no special equipment, and uses sustainable materials." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + div listItem3 { + style { + display: none + padding: 30px 0px + flex-direction: column + align-items: flex-start + gap: 10px + align-self: stretch + border-top: 1px solid #EEEFF2 + border-bottom: 1px solid #EEEFF2 + background: #FFF + } + div content { + style { + display: flex + align-items: flex-start + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + width: 130px + height: 130px + align-items: flex-start + gap: 10px + } + } + div text { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + } + div header { + style { + display: flex + width: 732px + justify-content: space-between + align-items: flex-start + } + div col1 { + style { + display: flex + flex-direction: column + align-items: flex-start + } + div name { + style { + display: flex + align-items: center + gap: 3px + } + span { + text "Earthen shelter" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Construction project" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }} + div col2 { + style { + display: flex + flex-direction: column + align-items: flex-end + } + div badge { + style { + display: flex + padding: 8px 10px + justify-content: flex-end + align-items: center + gap: 3px + border-radius: 5px + background: #F5F5F5 + } + span { + text "Spring 2024" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + } + span { + text "Cob house construction is an ancient building technique mixing lumps of earth with sand, straw, and water. You can utilize these structures for homes, chicken coops, barns, and more. Cob building is easy to learn, requires no special equipment, and uses sustainable materials." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + } + } + div seeAll { + style { + display: flex + padding: 15px 20px + align-items: center + gap: 10px + border-radius: 70px + border: 1px solid #EDEEF3 + background: #FFF + } + span { + text "View more" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + }} + } + } + div location { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 20px + align-self: stretch + } + div headerWrapper { + style { + display: flex + height: 100px + flex-direction: column + justify-content: flex-end + align-items: flex-start + gap: 10px + border-top: 1px solid #EDEEF3 + } + div header { + style { + display: flex + width: 873px + justify-content: flex-end + align-items: flex-start + gap: 5px + border: 0px solid #EDEEF3 + background: #FFF + } + div text { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 3px + flex: 1 0 0 + } + span { + text "Get to know the area" { + style { + font-family: THICCCBOI + font-style: Medium + font-size: 30px + font-weight: 500 + } + } + br + }span { + text "Experience the natural wonders and local flavors of the region" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }span { + text "Become a good steward of the place you call home by getting to know its history" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div tertiaryText { + style { + display: flex + justify-content: center + align-items: center + gap: 5px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 15.000019073486328px + height: 18.106584548950195px + } + } + span { + text "Dulzura, California, USA" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + div callouts { + style { + display: flex + justify-content: space-between + align-items: flex-start + align-self: stretch + } + div item1 { + style { + display: none + width: 275px + height: 187px + padding: 40px 30px + align-items: flex-start + gap: 10px + border-radius: 10px + border: 1px solid #EDEEF3 + background: #FFF + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 30px + height: 30px + } + } + span { + text "Quality of life" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "Shared homes, private homes, camper parking, tent sites" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 15px + font-weight: 500 + } + } + br + }} + div chat4line { + style { + display: flex + width: 24px + height: 24px + padding: 3px 2px 1.5px 2px + justify-content: center + align-items: center + flex-shrink: 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 20px + height: 19.5px + } + } + } + } + div item2 { + style { + display: none + width: 275px + height: 187px + padding: 40px 30px + align-items: flex-start + gap: 10px + border-radius: 10px + border: 1px solid #EDEEF3 + background: #FFF + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 30px + height: 30px + } + } + span { + text "Peace of mind" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "6 men, 5 women, 1 non-binary" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 15px + font-weight: 500 + } + } + br + }} + } + div item3 { + style { + display: none + width: 275px + height: 187px + padding: 40px 30px + align-items: flex-start + gap: 10px + border-radius: 10px + border: 1px solid #EDEEF3 + background: #FFF + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 30px + height: 24px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 33.590240478515625px + height: 30px + } + } + span { + text "Cost of living" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "2 private rooms, 1 detached unit" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 15px + font-weight: 500 + } + } + br + }} + } + div item4 { + style { + display: flex + width: 275px + padding: 40px 30px + align-items: flex-start + gap: 10px + align-self: stretch + border-radius: 10px + border: 1px solid #EDEEF3 + background: #FFF + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 30px + height: 24px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 33.590240478515625px + height: 30px + } + } + span { + text "Indigenous peoples" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "The Kumeyaay are the original inhabitants of San Diego County" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }} + } + div item5 { + style { + display: flex + width: 275px + padding: 40px 30px + align-items: flex-start + gap: 10px + align-self: stretch + border-radius: 10px + border: 1px solid #EDEEF3 + background: #FFF + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 30px + height: 24px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 33.590240478515625px + height: 30px + } + } + span { + text "Native species" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "Get to know the local flora and fauna within the San Diego watershed" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }} + } + div item6 { + style { + display: flex + width: 275px + padding: 40px 30px + align-items: flex-start + gap: 10px + align-self: stretch + border-radius: 10px + border: 1px solid #EDEEF3 + background: #FFF + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 30px + height: 24px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 33.590240478515625px + height: 30px + } + } + span { + text "Local culture" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 22px + font-weight: 500 + } + } + br + text "This is a bit of descriptive text that highlights the culture of the region" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }} + } + } + } + div guidelines { + style { + display: none + flex-direction: column + align-items: flex-start + gap: 40px + align-self: stretch + } + div headerWrapper { + style { + display: flex + height: 100px + flex-direction: column + justify-content: flex-end + align-items: flex-start + gap: 10px + align-self: stretch + border-top: 1px solid #EDEEF3 + } + div header { + style { + display: flex + justify-content: flex-end + align-items: flex-start + gap: 5px + align-self: stretch + border: 0px solid #EDEEF3 + background: #FFF + } + div text { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 3px + flex: 1 0 0 + } + span { + text "Community guidelines" { + style { + font-family: THICCCBOI + font-style: Medium + font-size: 30px + font-weight: 500 + } + } + br + }span { + text "Here are some helpful tips for you to integrate smoothly into the community" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div tertiaryText { + style { + display: none + justify-content: center + align-items: center + gap: 5px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 15.000019073486328px + height: 18.106584548950195px + } + } + span { + text "Dulzura, California, USA" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + span { + text "Body copy" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div events { + style { + display: none + flex-direction: column + align-items: flex-start + gap: 20px + align-self: stretch + } + div headerWrapper { + style { + display: flex + height: 100px + flex-direction: column + justify-content: flex-end + align-items: flex-start + gap: 10px + border-top: 1px solid #EDEEF3 + } + div header { + style { + display: flex + width: 873px + justify-content: flex-end + align-items: flex-start + gap: 5px + border: 0px solid #EDEEF3 + background: #FFF + } + div text { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 3px + flex: 1 0 0 + } + span { + text "Upcoming events" { + style { + font-family: THICCCBOI + font-style: Medium + font-size: 30px + font-weight: 500 + } + } + br + }span { + text "Build the future you desire and get compensated in equity for your contributions" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div tertiaryText { + style { + display: none + justify-content: center + align-items: center + gap: 5px + } + span { + text "3 of 15 available" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + div content { + style { + display: flex + width: 872px + flex-direction: column + align-items: center + gap: 40px + } + span { + text "We are a Native American owned large acreage working sheep ranch and off grid B&B offering guests a unique stay at our ranch utilizing quality canvas bell tents, covered wagons, a cabin, and traditional Hogans on the Navajo Nation. In all there are 7 accommodations. Nicely spaced in a general area. Our ranch is beautifully located very near all areas of attraction - Antelope Canyon, the town of Page and Lake Powell are 15 minutes drive. Horseshoe Bend is only 5 minutes drive from the ranch. Both the north and south rims of the Grand Canyon are 2 hours. Monument Valley, Bryce, Zion, and Marble Canyon are well within driving distance." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div listItems { + style { + display: flex + flex-direction: column + align-items: center + gap: -1px + align-self: stretch + } + div leadership { + style { + display: none + align-items: flex-start + gap: 15px + align-self: stretch + } + div host { + style { + display: flex + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + border-radius: 14px + border: 1px solid #EEEFF2 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + flex: 1 0 0 + align-self: stretch + } + div name { + style { + display: flex + align-items: center + gap: 3px + } + span { + text "RiAnn" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: flex + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined September 2022" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }} + } + } + div owner { + style { + display: flex + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + border-radius: 14px + border: 1px solid #EEEFF2 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + flex: 1 0 0 + align-self: stretch + } + div name { + style { + display: flex + align-items: center + gap: 3px + } + span { + text "Jordan" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: flex + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Property Owner" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined March 2020" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }} + } + } + div member { + style { + display: flex + padding: 15px + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + border-radius: 14px + border: 1px solid #EEEFF2 + background: #FFF + } + div content { + style { + display: flex + align-items: center + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 18px + height: 18px + padding: 3px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div text { + style { + display: flex + flex-direction: column + justify-content: center + align-items: flex-start + flex: 1 0 0 + align-self: stretch + } + div name { + style { + display: flex + align-items: center + gap: 3px + align-self: stretch + } + span { + text "Devin" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: flex + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Operations Manager" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }span { + text "Joined October 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame57 { + style { + display: none + height: 40px + flex-direction: column + align-items: flex-start + gap: 6px + } + span { + text "Certified Operator since 2023" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }div frame58 { + style { + display: flex + align-items: flex-start + gap: 3px + } + span { + text "Community Host" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div awardline { + style { + display: none + width: 16px + height: 16px + padding: 0.667px 2.667px 0.922px 2.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.666666984558105px + height: 14.411333084106445px + } + } + } + } + } + } + } + } + } + div membersnotLoggedIn { + style { + display: flex + height: 511px + flex-direction: column + align-items: center + align-content: space-between + gap: -1px + align-self: stretch + } + div alert { + style { + display: none + padding: 20px 30px + justify-content: center + align-items: center + border-radius: 5px + border: 1px solid #EDEEF3 + background: #FFF + } + span { + text "You must " { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + text "login" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + text " to view the community" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + }} + div listItem1 { + style { + display: flex + padding: 30px 0px + flex-direction: column + align-items: flex-start + gap: 10px + align-self: stretch + border-top: 1px solid #EEEFF2 + border-bottom: 1px solid #EEEFF2 + background: #FFF + } + div content { + style { + display: flex + align-items: flex-start + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + width: 130px + height: 130px + align-items: flex-start + gap: 10px + } + } + div text { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + } + div header { + style { + display: flex + width: 732px + justify-content: space-between + align-items: flex-start + } + div col1 { + style { + display: flex + flex-direction: column + align-items: flex-start + } + div name { + style { + display: flex + align-items: center + gap: 3px + } + span { + text "Cob construction workshop" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Open to the public" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }} + div col2 { + style { + display: flex + flex-direction: column + align-items: flex-end + } + div badge { + style { + display: flex + padding: 8px 10px + justify-content: flex-end + align-items: center + gap: 3px + border-radius: 5px + background: #F5F5F5 + } + span { + text "Spring 2024" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + } + span { + text "Cob house construction is an ancient building technique mixing lumps of earth with sand, straw, and water. You can utilize these structures for homes, chicken coops, barns, and more. Cob building is easy to learn, requires no special equipment, and uses sustainable materials." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + div listItem2 { + style { + display: flex + padding: 30px 0px + flex-direction: column + align-items: flex-start + gap: 10px + align-self: stretch + border-top: 1px solid #EEEFF2 + border-bottom: 1px solid #EEEFF2 + background: #FFF + } + div content { + style { + display: flex + align-items: flex-start + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + width: 130px + height: 130px + align-items: flex-start + gap: 10px + } + } + div text { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + } + div header { + style { + display: flex + width: 732px + justify-content: space-between + align-items: flex-start + } + div col1 { + style { + display: flex + flex-direction: column + align-items: flex-start + } + div name { + style { + display: flex + align-items: center + gap: 3px + } + span { + text "Permaculture design certification (72 hour)" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Open to the public" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }} + div col2 { + style { + display: flex + flex-direction: column + align-items: flex-end + } + div badge { + style { + display: flex + padding: 8px 10px + justify-content: flex-end + align-items: center + gap: 3px + border-radius: 5px + background: #F5F5F5 + } + span { + text "Spring 2024" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + } + span { + text "Cob house construction is an ancient building technique mixing lumps of earth with sand, straw, and water. You can utilize these structures for homes, chicken coops, barns, and more. Cob building is easy to learn, requires no special equipment, and uses sustainable materials." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + div listItem4 { + style { + display: flex + padding: 30px 0px + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + border-top: 1px solid #EEEFF2 + border-bottom: 1px solid #EEEFF2 + background: #FFF + box-shadow: 0px -15px 25px 0px #FFF inset + } + div content { + style { + display: flex + align-items: flex-start + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + width: 130px + height: 130px + align-items: flex-start + gap: 10px + } + } + div text { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + } + div header { + style { + display: flex + width: 732px + justify-content: space-between + align-items: flex-start + } + div col1 { + style { + display: flex + flex-direction: column + align-items: flex-start + } + div name { + style { + display: flex + align-items: center + gap: 3px + } + span { + text "Summer Social ‘24" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Open to members and guests" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }} + div col2 { + style { + display: flex + flex-direction: column + align-items: flex-end + } + div badge { + style { + display: flex + padding: 8px 10px + justify-content: flex-end + align-items: center + gap: 3px + border-radius: 5px + background: #F5F5F5 + } + span { + text "Summer 2024" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + } + span { + text "Cob house construction is an ancient building technique mixing lumps of earth with sand, straw, and water. You can utilize these structures for homes, chicken coops, barns, and more. Cob building is easy to learn, requires no special equipment, and uses sustainable materials." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + div listItem3 { + style { + display: none + padding: 30px 0px + flex-direction: column + align-items: flex-start + gap: 10px + align-self: stretch + border-top: 1px solid #EEEFF2 + border-bottom: 1px solid #EEEFF2 + background: #FFF + } + div content { + style { + display: flex + align-items: flex-start + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + width: 130px + height: 130px + align-items: flex-start + gap: 10px + } + } + div text { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + align-self: stretch + } + div header { + style { + display: flex + width: 732px + justify-content: space-between + align-items: flex-start + } + div col1 { + style { + display: flex + flex-direction: column + align-items: flex-start + } + div name { + style { + display: flex + align-items: center + gap: 3px + } + span { + text "Earthen shelter" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div awardline { + style { + display: none + width: 18px + height: 18px + padding: 0.75px 3px 1.037px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12.000000953674316px + height: 16.212749481201172px + } + } + } + } + span { + text "Construction project" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 17px + font-weight: 400 + } + } + br + }} + div col2 { + style { + display: flex + flex-direction: column + align-items: flex-end + } + div badge { + style { + display: flex + padding: 8px 10px + justify-content: flex-end + align-items: center + gap: 3px + border-radius: 5px + background: #F5F5F5 + } + span { + text "Spring 2024" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + } + } + span { + text "Cob house construction is an ancient building technique mixing lumps of earth with sand, straw, and water. You can utilize these structures for homes, chicken coops, barns, and more. Cob building is easy to learn, requires no special equipment, and uses sustainable materials." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + } + } + div seeAll { + style { + display: flex + padding: 15px 20px + align-items: center + gap: 10px + border-radius: 5px + border: 1px solid #EDEEF3 + background: #FFF + } + span { + text "View more" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + }} + } + } + } + } + div generalInfo { + style { + display: flex + width: 1294px + flex-direction: column + align-items: flex-start + gap: 40px + } + div callouts { + style { + display: flex + padding: 90px 60px + flex-direction: column + align-items: center + gap: 30px + align-self: stretch + border-radius: 10px + } + div header { + style { + display: flex + align-items: center + gap: 5px + align-self: stretch + } + div text { + style { + display: flex + width: 1294px + flex-direction: column + justify-content: center + align-items: flex-start + gap: 12px + } + span { + text "Being different is what makes a difference." { + style { + font-family: THICCCBOI + font-style: Medium + font-size: 40px + font-weight: 500 + } + } + br + }span { + text "This is a bit of descriptive text that describes how we differentiate ourselves from the others." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 22px + font-weight: 400 + } + } + br + }} + div tertiaryText { + style { + display: none + justify-content: center + align-items: center + gap: 5px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 15.000019073486328px + height: 18.106584548950195px + } + } + span { + text "Dulzura, California, USA" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + div horizontalGrid { + style { + display: flex + padding: 20px 0px + align-items: flex-start + gap: 30px + align-self: stretch + } + div item1 { + style { + display: flex + justify-content: space-between + align-items: center + flex: 1 0 0 + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + } + div toiletsignmanwoman2streamlinecoresvg { + style { + width: 35.001px + height: 35px + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.769402503967285px + height: 10.769405364990234px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 13.46175479888916px + height: 18.84645652770996px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.769402503967285px + height: 10.769405364990234px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 13.461753845214844px + height: 18.84645652770996px + } + } + } + div nopovertystreamlinecoresvg { + style { + width: 35.005px + height: 35px + display: none + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.001712799072266px + height: 10.001715660095215px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 14.066130638122559px + height: 10.001935005187988px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.001713752746582px + height: 10.001715660095215px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 14.066211700439453px + height: 10.001935005187988px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.001712799072266px + height: 10.001715660095215px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 15.002874374389648px + height: 7.501285076141357px + } + } + } + span { + text "Curated community" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 24px + font-weight: 500 + } + } + br + text "Members are curated to ensure supportive community and meaningful connections" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + div item2 { + style { + display: flex + justify-content: space-between + align-items: center + flex: 1 0 0 + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 30px + height: 30px + } + } + div piggybankstreamlinecoresvg { + style { + width: 35.554px + height: 35px + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 3.514799118041992px + height: 4.460630416870117px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 5.307458877563477px + height: 0px + } + } + div group4470 { + style { + width: 1.431px + height: 1.431px + flex-shrink: 0 + position: absolute + left: 24.855712890625px + top: 14.36279296875px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0.7152970433235168px + height: 1.4305980205535889px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 0.7152995467185974px + height: 1.4305980205535889px + } + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 34.64250564575195px + height: 35px + } + } + } + span { + text "Financial freedom" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 24px + font-weight: 500 + } + } + br + text "Get rewarded in equity for your contributions and gain financial security for living your best life" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + div item3 { + style { + display: flex + justify-content: space-between + align-items: center + flex: 1 0 0 + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + } + div locationcompass1streamlinecoresvg { + style { + width: 35px + height: 35px + position: relative + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 35px + height: 35px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 16.153846740722656px + height: 16.153844833374023px + } + } + } + span { + text "Location independence" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 24px + font-weight: 500 + } + } + br + text "Members are able to travel freely between a continually evolving network of coliving communities" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + div item4 { + style { + display: flex + justify-content: space-between + align-items: center + flex: 1 0 0 + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 33.590240478515625px + height: 30px + } + } + div aigeneratevariationsparkstreamlinecoresvg { + style { + width: 35px + height: 35px + position: relative + } + div group631 { + style { + width: 35px + height: 35px + flex-shrink: 0 + position: absolute + left: 0px + top: 0px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 14.111395835876465px + height: 14.111363410949707px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 14.111251831054688px + height: 14.111363410949707px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 14.111395835876465px + height: 14.111400604248047px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 14.966882705688477px + height: 14.718725204467773px + } + } + } + } + span { + text "Remote connections" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 24px + font-weight: 500 + } + } + br + text "Gain access to our private online community and connect with members around the world" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + div horizontalGrid { + style { + display: none + padding: 20px 0px + align-items: flex-start + gap: 30px + align-self: stretch + } + div item1 { + style { + display: flex + justify-content: space-between + align-items: center + flex: 1 0 0 + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 30px + height: 30px + } + } + span { + text "Quality of life" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 24px + font-weight: 500 + } + } + br + text "Shared homes, private homes, camper parking, tent sites" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + div item2 { + style { + display: flex + justify-content: space-between + align-items: center + flex: 1 0 0 + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 30px + height: 30px + } + } + span { + text "Peace of mind" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 24px + font-weight: 500 + } + } + br + text "6 men, 5 women, 1 non-binary" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + div item3 { + style { + display: flex + justify-content: space-between + align-items: center + flex: 1 0 0 + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 33.590240478515625px + height: 30px + } + } + span { + text "Cost of living" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 24px + font-weight: 500 + } + } + br + text "2 private rooms, 1 detached unit" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + div item4 { + style { + display: flex + justify-content: space-between + align-items: center + flex: 1 0 0 + } + div contents { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 16px + flex: 1 0 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 33.590240478515625px + height: 30px + } + } + span { + text "Sense of belonging" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 24px + font-weight: 500 + } + } + br + text "2 private rooms, 1 detached unit" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + } + div frame75 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 20px + align-self: stretch + } + div headerWrapper { + style { + display: flex + height: 100px + flex-direction: column + justify-content: flex-end + align-items: flex-start + gap: 10px + align-self: stretch + } + div header { + style { + display: flex + justify-content: flex-end + align-items: flex-start + gap: 5px + align-self: stretch + border: 0px solid #EDEEF3 + background: #FFF + } + div text { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 3px + flex: 1 0 0 + } + span { + text "These listings might interest you" { + style { + font-family: THICCCBOI + font-style: Medium + font-size: 30px + font-weight: 500 + } + } + br + }span { + text "Experience the natural wonders and local flavors of the region" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }span { + text "Experience the natural wonders and local flavors of the region" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div tertiaryText { + style { + display: none + justify-content: center + align-items: center + gap: 5px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 15.000019073486328px + height: 18.106584548950195px + } + } + span { + text "Dulzura, California, USA" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + } + } + div imageCarousel { + style { + display: flex + align-items: center + gap: 15px + align-self: stretch + } + div space1 { + style { + display: flex + width: 300px + flex-direction: column + align-items: flex-start + gap: 10px + } + span { + text "Goddess Lair" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 18px + font-weight: 700 + } + } + br + text "Portal • Austin, Texas, United States" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div amenities { + style { + display: flex + align-items: flex-start + gap: 15px + } + div item1 { + style { + display: flex + align-items: center + gap: 3px + border-radius: 50px + } + span { + text "2 Beds" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 13px + font-weight: 400 + } + } + br + }} + div item2 { + style { + display: flex + align-items: center + gap: 3px + border-radius: 50px + } + span { + text "1 Bath" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 13px + font-weight: 400 + } + } + br + }} + div item3 { + style { + display: flex + align-items: center + gap: 3px + border-radius: 50px + } + span { + text "Couple friendly" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 13px + font-weight: 400 + } + } + br + }} + } + span { + text "$" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + text "1600" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + text "/mo" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + div space2 { + style { + display: flex + width: 300px + flex-direction: column + align-items: flex-start + gap: 10px + } + span { + text "Geoship" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 18px + font-weight: 700 + } + } + br + text "The Home • San Salvador, Costa Rica" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div amenities { + style { + display: flex + align-items: flex-start + gap: 15px + } + div item1 { + style { + display: flex + align-items: center + gap: 3px + border-radius: 50px + } + span { + text "2 Beds" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 13px + font-weight: 400 + } + } + br + }} + div item2 { + style { + display: flex + align-items: center + gap: 3px + border-radius: 50px + } + span { + text "1 Bath" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 13px + font-weight: 400 + } + } + br + }} + div item3 { + style { + display: flex + align-items: center + gap: 3px + border-radius: 50px + } + span { + text "Family friendly" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 13px + font-weight: 400 + } + } + br + }} + } + span { + text "$" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + text "2800" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + text "/mo" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + div space3 { + style { + display: flex + width: 300px + flex-direction: column + align-items: flex-start + gap: 10px + } + span { + text "Cozy Cabin" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 18px + font-weight: 700 + } + } + br + text "DBR • Tempe, Arizona, United States" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div amenities { + style { + display: flex + align-items: flex-start + gap: 15px + } + div item1 { + style { + display: flex + align-items: center + gap: 3px + border-radius: 50px + } + span { + text "2 Beds" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 13px + font-weight: 400 + } + } + br + }} + div item2 { + style { + display: flex + align-items: center + gap: 3px + border-radius: 50px + } + span { + text "1 Bath" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 13px + font-weight: 400 + } + } + br + }} + div item3 { + style { + display: flex + align-items: center + gap: 3px + border-radius: 50px + } + span { + text "Family friendly" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 13px + font-weight: 400 + } + } + br + }} + } + span { + text "$" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + text "2800" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + text "/mo" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + div space4 { + style { + display: flex + width: 300px + flex-direction: column + align-items: flex-start + gap: 10px + } + span { + text "Earthen Dwelling" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 18px + font-weight: 700 + } + } + br + text "The Rez • Taos, New Mexico, United States" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div amenities { + style { + display: flex + align-items: flex-start + gap: 15px + } + div item1 { + style { + display: flex + align-items: center + gap: 3px + border-radius: 50px + } + span { + text "2 Beds" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 13px + font-weight: 400 + } + } + br + }} + div item2 { + style { + display: flex + align-items: center + gap: 3px + border-radius: 50px + } + span { + text "1 Bath" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 13px + font-weight: 400 + } + } + br + }} + div item3 { + style { + display: flex + align-items: center + gap: 3px + border-radius: 50px + } + span { + text "Family friendly" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 13px + font-weight: 400 + } + } + br + }} + } + span { + text "$" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + text "2800" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + text "/mo" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + div space5 { + style { + display: flex + width: 300px + flex-direction: column + align-items: flex-start + gap: 10px + } + span { + text "Modern Bedroom" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 18px + font-weight: 700 + } + } + br + text "The Home • San Salvador, Costa Rica" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div amenities { + style { + display: flex + align-items: flex-start + gap: 15px + } + div item1 { + style { + display: flex + align-items: center + gap: 3px + border-radius: 50px + } + span { + text "2 Beds" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 13px + font-weight: 400 + } + } + br + }} + div item2 { + style { + display: flex + align-items: center + gap: 3px + border-radius: 50px + } + span { + text "1 Bath" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 13px + font-weight: 400 + } + } + br + }} + div item3 { + style { + display: flex + align-items: center + gap: 3px + border-radius: 50px + } + span { + text "Family friendly" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 13px + font-weight: 400 + } + } + br + }} + } + span { + text "$" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + text "2800" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + text "/mo" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + div item5 { + style { + display: none + flex-direction: column + align-items: flex-start + gap: 15px + flex: 1 0 0 + align-self: stretch + } + div frame74 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + align-self: stretch + } + div item4 { + style { + display: flex + justify-content: center + align-items: center + flex: 1 0 0 + align-self: stretch + border-radius: 10px + } + div button { + style { + display: flex + width: 50px + height: 50px + padding: 10px + justify-content: center + align-items: center + border-radius: 90px + background: #FFF + box-shadow: 0px 0px 15px 0px rgba(23, 25, 48, 0.20) + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 15.39600944519043px + height: 8px + } + } + } + span { + text "Food gardens" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div button { + style { + display: none + width: 50px + height: 50px + padding: 10px + justify-content: center + align-items: center + border-radius: 90px + background: #FFF + box-shadow: 0px 0px 15px 0px rgba(23, 25, 48, 0.20) + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 15.39600944519043px + height: 8px + } + } + } + } + span { + text "Kitchen" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + text "8 images" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }} + } + } + div faq { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 40px + align-self: stretch + } + div headerWrapper { + style { + display: flex + height: 100px + flex-direction: column + justify-content: flex-end + align-items: flex-start + gap: 10px + align-self: stretch + } + div header { + style { + display: flex + justify-content: flex-end + align-items: flex-start + gap: 5px + align-self: stretch + border: 0px solid #EDEEF3 + background: #FFF + } + div text { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 3px + flex: 1 0 0 + } + span { + text "Common questions" { + style { + font-family: THICCCBOI + font-style: Medium + font-size: 30px + font-weight: 500 + } + } + br + }span { + text "Here are some frequently asked questions that might be on your mind" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div tertiaryText { + style { + display: none + justify-content: center + align-items: center + gap: 5px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 15.000019073486328px + height: 18.106584548950195px + } + } + span { + text "Dulzura, California, USA" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }} + div viewAll { + style { + display: flex + padding: 20px + justify-content: center + align-items: center + gap: 8px + border-radius: 5px + border: 1px solid rgba(172, 174, 191, 0.35) + background: #FFF + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 22px + height: 22px + } + } + span { + text "Ask a question" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + }} + } + } + div listItems { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: -1px + align-self: stretch + } + div item1 { + style { + display: flex + padding: 32px 0px + align-items: flex-start + gap: 10px + align-self: stretch + border-bottom: 1px solid #EDEEF3 + } + div texticon { + style { + display: flex + justify-content: space-between + align-items: center + flex: 1 0 0 + } + span { + text "Do you require a security deposit?" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div { + style { + background-repeat: no-repeat + background-size: 100% + width: 14.846150398254395px + height: 6px + } + } + } + } + div item2 { + style { + display: flex + padding: 32px 0px + align-items: flex-start + gap: 10px + align-self: stretch + border-top: 1px solid #EDEEF3 + border-bottom: 1px solid #EDEEF3 + } + div texticon { + style { + display: flex + justify-content: space-between + align-items: center + flex: 1 0 0 + } + span { + text "Is maintenance provided onsite?" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div { + style { + background-repeat: no-repeat + background-size: 100% + width: 14.846150398254395px + height: 6px + } + } + } + } + div item3 { + style { + display: flex + padding: 32px 0px + align-items: flex-start + gap: 10px + align-self: stretch + border-top: 1px solid #EDEEF3 + border-bottom: 1px solid #EDEEF3 + } + div texticon { + style { + display: flex + justify-content: space-between + align-items: center + flex: 1 0 0 + } + span { + text "What is the cancellation policy?" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div { + style { + background-repeat: no-repeat + background-size: 100% + width: 14.846150398254395px + height: 6px + } + } + } + } + div item4 { + style { + display: flex + padding: 32px 0px + align-items: flex-start + gap: 10px + align-self: stretch + border-top: 1px solid #EDEEF3 + border-bottom: 1px solid #EDEEF3 + } + div texticon { + style { + display: flex + justify-content: space-between + align-items: center + flex: 1 0 0 + } + span { + text "Do I need my own renter's insurance?" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div { + style { + background-repeat: no-repeat + background-size: 100% + width: 14.846150398254395px + height: 6px + } + } + } + } + div item5 { + style { + display: flex + padding: 32px 0px + align-items: flex-start + gap: 10px + align-self: stretch + border-top: 1px solid #EDEEF3 + border-bottom: 1px solid #EDEEF3 + } + div texticon { + style { + display: flex + justify-content: space-between + align-items: center + flex: 1 0 0 + } + span { + text "Will I be locked into a rental contract?" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div { + style { + background-repeat: no-repeat + background-size: 100% + width: 14.846150398254395px + height: 6px + } + } + } + } + div item6 { + style { + display: flex + padding: 32px 0px + align-items: flex-start + gap: 10px + align-self: stretch + border-top: 1px solid #EDEEF3 + border-bottom: 1px solid #EDEEF3 + } + div texticon { + style { + display: flex + justify-content: space-between + align-items: center + flex: 1 0 0 + } + span { + text "What is your policy on pets?" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div { + style { + background-repeat: no-repeat + background-size: 100% + width: 14.846150398254395px + height: 6px + } + } + } + } + div item7 { + style { + display: flex + padding: 32px 0px + align-items: flex-start + gap: 10px + align-self: stretch + border-top: 1px solid #EDEEF3 + border-bottom: 1px solid #EDEEF3 + } + div texticon { + style { + display: flex + justify-content: space-between + align-items: center + flex: 1 0 0 + } + span { + text "Are your communities family friendly?" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div { + style { + background-repeat: no-repeat + background-size: 100% + width: 14.846150398254395px + height: 6px + } + } + } + } + div item8 { + style { + display: flex + padding: 32px 0px + align-items: flex-start + gap: 10px + align-self: stretch + border-top: 1px solid #EDEEF3 + border-bottom: 1px solid #EDEEF3 + } + div texticon { + style { + display: flex + justify-content: space-between + align-items: center + flex: 1 0 0 + } + span { + text "Why is there a minimum length of stay?" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div { + style { + background-repeat: no-repeat + background-size: 100% + width: 14.846150398254395px + height: 6px + } + } + } + } + div item9 { + style { + display: flex + padding: 32px 0px + align-items: flex-start + gap: 10px + align-self: stretch + border-top: 1px solid #EDEEF3 + } + div texticon { + style { + display: flex + justify-content: space-between + align-items: center + flex: 1 0 0 + } + span { + text "What does it mean when a community is in ‘beta’?" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }div { + style { + background-repeat: no-repeat + background-size: 100% + width: 14.846150398254395px + height: 6px + } + } + } + } + } + div seeAll { + style { + display: none + align-items: center + gap: 10px + border-radius: 70px + } + span { + text "View more FAQs →" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 20px + font-weight: 500 + } + } + br + }} + div seeAll { + style { + display: none + padding: 15px 20px + align-items: center + gap: 10px + border-radius: 70px + border: 1px solid #EDEEF3 + background: #FFF + } + span { + text "View more" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + }} + } + } + } + div imageGrid { + style { + display: flex + width: 874px + align-items: flex-start + gap: 14px + border-radius: 14px + position: absolute + left: 0px + top: 86px + } + div primaryImage { + style { + display: flex + width: 590px + height: 555px + padding: 15px + align-items: flex-end + gap: 10px + flex-shrink: 0 + border-radius: 14px 0px 0px 14px + } + div viewAll { + style { + display: flex + padding: 10px + justify-content: center + align-items: center + gap: 4px + border-radius: 5px + background: #FFF + } + div gridline { + style { + display: none + width: 20px + height: 20px + padding: 2.5px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 15px + height: 15px + } + } + } + div imageline { + style { + width: 20px + height: 20px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 16.666664123535156px + height: 15px + } + } + } + div landscapefill { + style { + display: none + width: 20px + height: 20px + padding: 2.5px 0.833px 2.5px 1.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 17.5px + height: 15px + } + } + } + div layoutgridline { + style { + display: none + width: 20px + height: 20px + padding: 2.5px 1.667px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 16.666664123535156px + height: 15px + } + } + } + span { + text "View all" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 14px + font-weight: 500 + } + } + br + }} + } + div secondaryImages { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 15px + } + } + } + div sidebar { + style { + display: flex + width: 389px + flex-direction: column + align-items: flex-start + gap: 20px + position: absolute + left: 905px + top: 86px + } + div bookingWidget { + style { + display: flex + padding: 30px 25px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.08) + } + div content { + style { + display: flex + width: 339px + align-items: flex-start + align-content: flex-start + gap: 19px 108px + flex-wrap: wrap + } + div header { + style { + display: flex + width: 339px + justify-content: space-between + align-items: flex-start + flex-shrink: 0 + } + div badge { + style { + display: flex + padding: 6px + justify-content: center + align-items: center + gap: 10px + border-radius: 3px + background: #EDEEF3 + } + span { + text "1 month minimum" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 13px + font-weight: 400 + } + } + br + }} + div frame52 { + style { + display: flex + flex-direction: column + align-items: flex-end + gap: 2px + } + span { + text "Starting a" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + text "t" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + text "$" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 30px + font-weight: 700 + } + } + text "125" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 30px + font-weight: 500 + } + } + br + text "0" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 30px + font-weight: 500 + } + } + text "/mo" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 15px + font-weight: 500 + } + } + br + }span { + text "$" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 30px + font-weight: 700 + } + } + text "1695" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 30px + font-weight: 500 + } + } + br + text "/mo" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 15px + font-weight: 500 + } + } + br + }span { + text "Utilities included" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 12px + font-weight: 400 + } + } + br + }} + } + div dates { + style { + display: flex + flex-direction: column + align-items: flex-end + gap: 10px + } + div button { + style { + display: none + align-items: flex-start + gap: 6px + align-self: stretch + } + div button { + style { + display: flex + padding: 10px 12px + align-items: center + gap: 5px + border-radius: 4px + background: #F5F5F5 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 15px + height: 15px + } + } + span { + text "Add a companion" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 13px + font-weight: 500 + } + } + br + }} + div button { + style { + display: flex + padding: 10px 12px + align-items: center + gap: 5px + border-radius: 4px + background: #F5F5F5 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 15px + height: 15px + } + } + span { + text "Add a pet" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 13px + font-weight: 500 + } + } + br + }} + } + div dates { + style { + display: flex + padding: 0px 10px + flex-direction: column + justify-content: center + align-items: flex-start + gap: 2px + position: absolute + left: 8px + bottom: 12px + } + div frame35 { + style { + display: flex + align-items: center + gap: 3px + } + div calendarschedulefill { + style { + width: 10px + height: 10px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 8.75px + height: 8.75px + } + } + } + span { + text "Arrival" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + }} + span { + text "Monday, Feb 10, 2024" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }} + div dates { + style { + display: flex + padding: 0px 10px + flex-direction: column + justify-content: center + align-items: flex-start + gap: 2px + position: absolute + right: 67.5px + bottom: 12px + } + div frame35 { + style { + display: flex + align-items: center + gap: 3px + } + div calendarscheduleline { + style { + width: 10px + height: 10px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 8.75px + height: 8.75px + } + } + } + span { + text "Departure" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + }} + span { + text "Flexible stay" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }} + } + div datesguests { + style { + width: 339px + height: 119px + flex-shrink: 0 + display: none + position: relative + } + } + div units { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 10px + } + div frame45 { + style { + display: flex + width: 339px + justify-content: space-between + align-items: center + } + span { + text "Choose your room" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 18px + font-weight: 500 + } + } + br + }span { + text "3 units available" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 12px + font-weight: 400 + } + } + br + }} + div unitGrid { + style { + display: flex + flex-direction: column + align-items: flex-start + } + div falconsDen { + style { + display: flex + width: 339px + justify-content: center + align-items: center + gap: 10px + border-radius: 10px 10px 0px 0px + border: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + width: 339px + padding: 12px + justify-content: space-between + align-items: center + flex-shrink: 0 + } + div frame44 { + style { + display: flex + width: 235px + align-items: center + gap: 10px + flex-shrink: 0 + } + span { + text "Falcon’s Den" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 14px + font-weight: 500 + } + } + br + text "Attached unit with private entrance" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 12px + font-weight: 400 + } + } + br + }} + span { + text "$" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + text "1380" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + text "/mo" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + }} + } + div tinyHome { + style { + display: flex + width: 339px + justify-content: center + align-items: center + border-right: 1px solid #EDEEF3 + border-bottom: 1px solid #EDEEF3 + border-left: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + width: 339px + padding: 12px + justify-content: space-between + align-items: center + flex-shrink: 0 + background: rgba(237, 238, 243, 0.35) + } + div frame44 { + style { + display: flex + align-items: center + gap: 10px + } + div image { + style { + display: flex + width: 50px + height: 50px + justify-content: center + align-items: center + gap: 10px + border-radius: 6px + } + div frame70 { + style { + display: flex + width: 24px + height: 24px + padding: 5px + flex-direction: column + justify-content: center + align-items: center + gap: 10px + flex-shrink: 0 + border-radius: 90px + background: #FFF + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 12px + height: 8.499977111816406px + } + } + } + } + span { + text "Tiny Home" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 14px + font-weight: 500 + } + } + br + text "Detached unit with private entrance" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 12px + font-weight: 400 + } + } + br + }} + span { + text "$" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + text "1600" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + text "/mo" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + }} + } + div crowsNest { + style { + display: flex + width: 339px + justify-content: center + align-items: center + gap: 10px + border-radius: 0px 0px 10px 10px + border-right: 1px solid #EDEEF3 + border-bottom: 1px solid #EDEEF3 + border-left: 1px solid #EDEEF3 + background: #FFF + } + div content { + style { + display: flex + width: 339px + padding: 12px + justify-content: space-between + align-items: center + flex-shrink: 0 + } + div frame44 { + style { + display: flex + width: 185.5px + align-items: center + gap: 10px + flex-shrink: 0 + } + span { + text "Crow’s Nest " { + style { + font-family: Cera Pro + font-style: Medium + font-size: 14px + font-weight: 500 + } + } + br + text "Private bedroom in shared house" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 12px + font-weight: 400 + } + } + br + }} + span { + text "$" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + text "1250" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + text "/mo" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + }} + } + } + } + div addACompanion { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + } + div header { + style { + display: flex + width: 191px + align-items: center + gap: 3px + } + span { + text "Select optional add-ons" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 17px + font-weight: 500 + } + } + br + }div information2line { + style { + display: none + width: 20px + height: 20px + padding: 1.667px + justify-content: center + align-items: center + flex-shrink: 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 16.66666603088379px + height: 16.66666603088379px + } + } + } + } + div listItems { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 13px + align-self: stretch + } + div addAPerson { + style { + display: flex + height: 17px + justify-content: space-between + align-items: flex-start + align-self: stretch + } + div icontext { + style { + display: flex + width: 196.5px + align-items: center + gap: 4px + } + div checkboxline { + style { + display: none + width: 24px + height: 24px + padding: 3px + justify-content: center + align-items: center + flex-shrink: 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18px + height: 18px + } + } + } + div checkboxblankline { + style { + width: 24px + height: 24px + flex-shrink: 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18px + height: 18px + } + } + } + div checkboxfill { + style { + display: none + width: 24px + height: 24px + padding: 3px + justify-content: center + align-items: center + flex-shrink: 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18px + height: 18px + } + } + } + span { + text "Add a companion" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 13px + font-weight: 400 + } + } + br + }} + span { + text "$" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 14px + font-weight: 700 + } + } + text "500" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 14px + font-weight: 500 + } + } + br + text "/mo" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 10px + font-weight: 500 + } + } + br + }} + div addAPet { + style { + display: flex + height: 17px + justify-content: space-between + align-items: flex-start + align-self: stretch + } + div icontext { + style { + display: flex + width: 196.5px + align-items: center + gap: 4px + } + div checkboxblankline { + style { + display: none + width: 24px + height: 24px + padding: 3px + justify-content: center + align-items: center + flex-shrink: 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18px + height: 18px + } + } + } + div checkboxfill { + style { + width: 24px + height: 24px + flex-shrink: 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18px + height: 18px + } + } + } + span { + text "Add a pet " { + style { + font-family: Cera Pro + font-style: Medium + font-size: 13px + font-weight: 500 + } + } + br + text "(dogs and cats permitted)" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 10px + font-weight: 500 + } + } + br + }} + span { + text "$" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 14px + font-weight: 700 + } + } + text "65" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 14px + font-weight: 500 + } + } + br + text "/mo" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 10px + font-weight: 500 + } + } + br + }} + div addParking { + style { + display: flex + height: 17px + justify-content: space-between + align-items: flex-start + align-self: stretch + } + div icontext { + style { + display: flex + width: 196.5px + align-items: center + gap: 4px + } + div checkboxblankline { + style { + width: 24px + height: 24px + flex-shrink: 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18px + height: 18px + } + } + } + div checkboxfill { + style { + display: none + width: 24px + height: 24px + padding: 3px + justify-content: center + align-items: center + flex-shrink: 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18px + height: 18px + } + } + } + span { + text "Add a parking space" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 13px + font-weight: 400 + } + } + br + }} + span { + text "$" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 14px + font-weight: 700 + } + } + text "50" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 14px + font-weight: 500 + } + } + br + text "/mo" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 10px + font-weight: 500 + } + } + br + }} + div addCarshare { + style { + display: flex + height: 17px + justify-content: space-between + align-items: flex-start + align-self: stretch + } + div icontext { + style { + display: flex + width: 196.5px + align-items: center + gap: 4px + } + div checkboxblankline { + style { + width: 24px + height: 24px + flex-shrink: 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18px + height: 18px + } + } + } + div checkboxfill { + style { + display: none + width: 24px + height: 24px + padding: 3px + justify-content: center + align-items: center + flex-shrink: 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18px + height: 18px + } + } + } + span { + text "Add a carshare allowance" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 13px + font-weight: 400 + } + } + br + }} + span { + text "$" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 14px + font-weight: 700 + } + } + text "125" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 14px + font-weight: 500 + } + } + br + text "/mo" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 10px + font-weight: 500 + } + } + br + }} + div addInsurance { + style { + display: flex + height: 17px + justify-content: space-between + align-items: flex-start + align-self: stretch + } + div icontext { + style { + display: flex + width: 196.5px + align-items: center + gap: 4px + } + div checkboxblankline { + style { + display: none + width: 24px + height: 24px + padding: 3px + justify-content: center + align-items: center + flex-shrink: 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18px + height: 18px + } + } + } + div checkboxfill { + style { + width: 24px + height: 24px + flex-shrink: 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18px + height: 18px + } + } + } + span { + text "Add Damage Control™ insurance" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 13px + font-weight: 500 + } + } + br + }} + span { + text "$" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 14px + font-weight: 700 + } + } + text "30" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 14px + font-weight: 500 + } + } + br + text "/mo" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 10px + font-weight: 500 + } + } + br + }} + } + div button { + style { + display: flex + height: 17px + align-items: flex-start + gap: 6px + align-self: stretch + } + div button { + style { + display: none + padding: 15px 12px + align-items: center + gap: 5px + align-self: stretch + border-radius: 4px + border: 1px solid rgba(172, 174, 191, 0.35) + background: rgba(237, 238, 243, 0.35) + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 15px + height: 15px + } + } + span { + text "Add a person" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 13px + font-weight: 500 + } + } + br + }} + div button { + style { + display: none + padding: 15px 12px + align-items: center + gap: 5px + align-self: stretch + border-radius: 4px + border: 1px solid rgba(172, 174, 191, 0.35) + background: rgba(237, 238, 243, 0.35) + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 15px + height: 15px + } + } + span { + text "Add a pet" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 13px + font-weight: 500 + } + } + br + }} + } + div selections { + style { + display: none + width: 339px + padding: 8px 25px + justify-content: space-between + align-items: center + border-radius: 10px + border: 1px solid rgba(172, 174, 191, 0.35) + background: rgba(237, 238, 243, 0.35) + } + div frame50 { + style { + display: flex + justify-content: center + align-items: center + gap: 10px + } + span { + text "3 months" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 14px + font-weight: 500 + } + } + br + text "Save 15%" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + }} + div frame49 { + style { + display: flex + justify-content: center + align-items: center + gap: 10px + } + span { + text "6 months" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 14px + font-weight: 500 + } + } + br + text "Save 18%" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + }} + div frame48 { + style { + display: flex + justify-content: center + align-items: center + gap: 10px + } + span { + text "12 months" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 14px + font-weight: 500 + } + } + br + text "Save 20%" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + }} + } + } + div extendedStay { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 10px + } + div header { + style { + display: flex + width: 191px + align-items: center + gap: 3px + } + span { + text "Extend your stay and save" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 17px + font-weight: 500 + } + } + br + }div information2line { + style { + width: 20px + height: 20px + flex-shrink: 0 + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 16.66666603088379px + height: 16.66666603088379px + } + } + } + } + div selections { + style { + display: flex + width: 339px + padding: 8px 25px + justify-content: space-between + align-items: center + border-radius: 10px + border: 1px solid rgba(172, 174, 191, 0.35) + background: rgba(237, 238, 243, 0.35) + } + div frame50 { + style { + display: flex + justify-content: center + align-items: center + gap: 10px + } + span { + text "3 months" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 14px + font-weight: 500 + } + } + br + text "Save 15%" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + }} + div frame49 { + style { + display: flex + justify-content: center + align-items: center + gap: 10px + } + span { + text "6 months" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 14px + font-weight: 500 + } + } + br + text "Save 18%" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + }} + div frame48 { + style { + display: flex + justify-content: center + align-items: center + gap: 10px + } + span { + text "12 months" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 14px + font-weight: 500 + } + } + br + text "Save 20%" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + }} + } + } + div button { + style { + display: flex + width: 339px + padding: 15px + justify-content: center + align-items: center + gap: 10px + flex-shrink: 0 + border-radius: 10px + background: #1457FF + } + span { + text "Send booking inquiry" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + span { + text "Thank you for your submission! You will be contacted by the community host for further details. " { + style { + font-family: Cera Pro + font-style: Regular + font-size: 10px + font-weight: 400 + } + } + br + }span { + text "By submitting this form you are placing a temporary hold on this room. The community host will contact you to complete your reservation." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 10px + font-weight: 400 + } + } + br + }} + } + div damageControl { + style { + display: flex + width: 389px + padding: 20px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 2px solid #EDEEF3 + background: #FFF + } + div frame41 { + style { + display: flex + width: 349px + align-items: center + gap: 13px + } + div frame40 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 7px + flex: 1 0 0 + } + div frame53 { + style { + display: flex + justify-content: center + align-items: center + gap: 5px + } + div shieldkeyholeline { + style { + width: 22px + height: 22px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 16.5px + height: 20.166667938232422px + } + } + } + span { + text "Damage Contro" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 17px + font-weight: 500 + } + } + br + text "l" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 17px + font-weight: 500 + } + } + text "™" { + style { + font-family: Cera Pro + font-style: Bold + font-size: 17px + font-weight: 700 + } + } + }} + span { + text "This community is protected by our no questions asked accident forgiveness guarantee. " { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + text "Learn more →" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 14px + font-weight: 500 + } + } + br + }} + } + } + div flexstay { + style { + display: none + width: 389px + padding: 20px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 2px solid #EDEEF3 + background: #FFF + } + div frame41 { + style { + display: flex + width: 349px + align-items: center + gap: 13px + } + div frame40 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 7px + flex: 1 0 0 + } + div frame53 { + style { + display: flex + justify-content: center + align-items: center + gap: 5px + } + div exchangefundsline { + style { + display: flex + width: 22px + height: 22px + padding: 1.834px 1.408px 1.829px 1.416px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 19.175365447998047px + height: 18.336395263671875px + } + } + } + span { + text "Flexstay™ " { + style { + font-family: Cera Pro + font-style: Medium + font-size: 17px + font-weight: 500 + } + } + br + }} + span { + text "Cancel your reservation up to 3 days before check-in for a full refund" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }} + } + } + div meetYourHost { + style { + display: flex + width: 389px + padding: 20px + flex-direction: column + align-items: flex-start + gap: 10px + border-radius: 14px + border: 1px solid #EDEEF3 + background: #FFF + } + div frame41 { + style { + display: flex + align-items: flex-start + gap: 15px + align-self: stretch + } + div image { + style { + display: flex + width: 75px + height: 75px + align-items: flex-start + gap: 10px + } + div badge { + style { + display: none + width: 14px + height: 14px + justify-content: center + align-items: center + gap: 10px + position: absolute + left: 7px + top: 7px + border-radius: 90px + background: #FFF + } + } + } + div frame40 { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 10px + flex: 1 0 0 + } + span { + text "Meet your community host" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 17px + font-weight: 500 + } + } + br + }div text { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: 4px + } + div frame64 { + style { + display: flex + align-items: center + gap: 5px + } + span { + text "RiAnn Holsonback" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 14px + font-weight: 500 + } + } + br + }div { + style { + background-repeat: no-repeat + background-size: 100% + width: 11.84253215789795px + height: 16px + } + } + } + div frame58 { + style { + display: flex + align-items: center + gap: 3px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 10.362215995788574px + height: 14px + } + } + span { + text "Joined September 2022" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 14px + font-weight: 400 + } + } + br + }} + } + div contactButton { + style { + display: none + width: 151px + padding: 10px 15px + justify-content: space-between + align-items: center + border-radius: 5px + background: rgba(237, 238, 243, 0.35) + } + div frame66 { + style { + display: flex + align-items: center + gap: 6px + } + div chat3line { + style { + display: none + width: 18px + height: 18px + padding: 1.5px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 14.999998092651367px + height: 14.999998092651367px + } + } + } + div chat1line { + style { + display: none + width: 18px + height: 18px + padding: 2.25px 1.5px 1.125px 1.5px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 15px + height: 14.625px + } + } + } + div chat4fill { + style { + display: none + width: 18px + height: 18px + padding: 2.25px 1.5px 1.125px 1.5px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 15px + height: 14.625px + } + } + } + div chat3fill { + style { + display: flex + width: 18px + height: 18px + padding: 1.5px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 15px + height: 15px + } + } + } + span { + text "Contact RiAnn" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 14px + font-weight: 500 + } + } + br + }} + } + } + } + } + } + div header { + style { + display: flex + width: 1294px + justify-content: space-between + align-items: center + position: absolute + left: 0px + top: 0px + } + div title { + style { + display: flex + flex-direction: column + align-items: flex-start + gap: -1px + } + div frame67 { + style { + display: flex + align-items: flex-start + gap: 10px + } + span { + text "Wildseeds" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 34px + font-weight: 500 + } + } + br + }div badge { + style { + display: flex + padding: 3px 6px + justify-content: center + align-items: center + gap: 10px + border-radius: 3px + background: #EDEEF3 + } + span { + text "Beta" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 13px + font-weight: 400 + } + } + br + }} + } + div location { + style { + display: flex justify-content: center align-items: center - gap: 10px - align-self: stretch - border-radius: 99px - background: var(--font-color, #E2E2E2) - } - text "Sign up" { + gap: 5px + } + div mappinline { style { - color: #000 - font-family: Inter - font-size: 16px - font-style: normal - font-weight: 600 - line-height: normal + width: 20px + height: 20px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 15.000019073486328px + height: 18.106584548950195px + } } + } + span { + text "Dulzura, California, United States" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 18px + font-weight: 400 + } + } + br + }div mappin2line { + style { + display: none + width: 24px + height: 24px + padding: 2px 3px 0.272px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18.000024795532227px + height: 21.7278995513916px + } + } + } + div mappin3line { + style { + display: none + width: 24px + padding: 2px 3px 0px 3px + justify-content: center + align-items: center + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 18px + height: 22px + } + } + } + } + } + div buttons { + style { + display: flex + height: 38px + justify-content: flex-end + align-items: flex-start + gap: 10px } + div favorite { + style { + display: flex + padding: 15px 12px + justify-content: center + align-items: center + gap: 4px + border-radius: 5px + border: 1px solid #F5F5F5 + background: rgba(237, 238, 243, 0.35) + } + div heartline { + style { + width: 18px + height: 18px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 15.000280380249023px + height: 13.863750457763672px + } + } + } + span { + text "Save to favorites" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 14px + font-weight: 500 + } + } + br + }} + div share { + style { + display: flex + padding: 15px 12px + justify-content: center + align-items: center + gap: 4px + border-radius: 5px + border: 1px solid #F5F5F5 + background: rgba(237, 238, 243, 0.35) + } + div share2line { + style { + width: 18px + height: 18px + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 13.5px + height: 13.81063461303711px + } + } + } + span { + text "Share this listing" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 14px + font-weight: 500 + } + } + br + }} + } } -} - -/** -* @frame(x: 1415, y: 560, width: 1717, height: 1174) -*/ -div logIn { + } + div navbar { style { - display: flex - width: 1717px - height: 1174px - align-items: flex-start - background: var(--bg-primary-02, #161616) + width: 1790px + height: 93px + flex-shrink: 0 + position: absolute + left: 1px + top: 0px } - div left { + div button { + style { + display: inline-flex + padding: 16px + justify-content: center + align-items: center + gap: 10px + border-radius: 6px + border: 3px solid #EDEEF3 + position: absolute + left: 1385px + top: 20px + } + span { + text "Become a member" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div button { + style { + display: inline-flex + padding: 16px + justify-content: center + align-items: center + gap: 10px + border-radius: 6px + border: 3px solid #EDEEF3 + position: absolute + left: 1211px + top: 20px + } + span { + text "List your property" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div nav { + style { + width: 464px + height: 44px + flex-shrink: 0 + position: absolute + left: 677px + top: 24px + } + div navItems { style { - width: 859px - height: 1174px - flex-shrink: 0 - position: relative + width: 464px + height: 44px + flex-shrink: 0 + position: absolute + left: 0px + top: 0px + } + div text { + style { + display: inline-flex + padding: 12px 16px + justify-content: center + align-items: center + gap: 70px + border-radius: 6px + position: absolute + left: 0px + top: 0px + } + span { + text "Membership" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }span { + text "Communities" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }span { + text "Opportunities" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 16px + font-weight: 500 + } + } + br + }} + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 7px + height: 4px + } } - div frame1 { + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 7px + height: 4px + } + } + div { + style { + background-repeat: no-repeat + background-size: 100% + width: 7px + height: 4px + } + } + } + div dropdowns { + style { + width: 0px + height: 0px + flex-shrink: 0 + position: absolute + left: 0px + top: 0px + } + div opportunties { + style { + width: 894px + height: 340px + flex-shrink: 0 + filter: drop-shadow(0px 7px 12px rgba(0, 0, 0, 0.12)) + display: none + position: absolute + left: -191px + top: 64px + } + div callout { + style { + width: 347px + height: 340px + flex-shrink: 0 + position: absolute + left: 547px + top: 0px + } + div frame2 { + style { + display: none + padding: 8px 12px + justify-content: center + align-items: center + gap: 10px + border-radius: 5px + border: 1px solid #EDEEF3 + background: #FFF + position: absolute + left: 45px + top: 270px + } + span { + text "List your property " { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + div listYourProperty { + style { + display: inline-flex + padding: 10px 12px + justify-content: center + align-items: center + gap: 5px + border-radius: 5px + border: 1px solid #EDEEF3 + background: #FFF + position: absolute + left: 45px + top: 264px + } + span { + text "List your property" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + span { + text "Unlock the full potential of your property" { + style { + font-family: THICCCBOI + font-style: Bold + font-size: 16px + font-weight: 700 + } + } + br + text "Are you a property owner looking to activate your space? Our coliving partnership program provides an opportunity to turn your property into a thriving coliving community supported by our trusted members." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 12px + font-weight: 400 + } + } + br + }div maskGroup { + style { + width: 282px + height: 97px + flex-shrink: 0 + position: absolute + left: 32px + top: 20px + } + } + } + div liveYourPurpose { style { + width: 481px + height: 288px + flex-shrink: 0 + position: absolute + left: 33px + top: 25px + } + div cta { + style { + width: 481px + height: 23px + flex-shrink: 0 + position: absolute + left: 0px + top: 265px + } + span { + text "Find a Workshare™ opportunity →" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 10px + font-weight: 500 + } + } + br + }} + div listItems { + style { display: inline-flex flex-direction: column align-items: flex-start - gap: var(--spacing-05, 16px) + gap: 16px position: absolute - left: 247px - top: 441px - } - text "Shaya" { + left: 2px + top: 52px + } + div environment { style { - color: #FFF - font-family: Judson - font-size: 60px - font-style: normal - font-weight: 700 - line-height: normal + width: 225px + height: 36px + position: relative + } + span { + text "Care for Environment" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Live in right relations with our planet" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div humanity { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Care for Humanity " { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Provide service to one another" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div home { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Care for Home" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Practice good stewardship" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div community { + style { + width: 225px + height: 36px + position: relative } + span { + text "Care for Community" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Take care of your neighbors" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} } - text "An anonymous place to share your reflections, see different perspectives, and relate to one another on a deep level." { + div listItems { + style { + display: inline-flex + flex-direction: column + align-items: flex-start + gap: 16px + position: absolute + left: 256px + top: 52px + } + div environment { style { - width: 363px - height: 108px - color: #FFF - font-family: Inter - font-size: 18px - font-style: normal - font-weight: 400 - line-height: 144.622% + width: 225px + height: 36px + position: relative + } + span { + text "Care for Environment" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Live in right relations with our planet" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div humanity { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Care for Humanity " { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Provide service to one another" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div home { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Care for Home" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Practice good stewardship" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div community { + style { + width: 225px + height: 36px + position: relative } + span { + text "Care for Community" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Take care of your neighbors" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} } + div header { + style { + width: 411px + height: 35px + flex-shrink: 0 + position: absolute + left: 0px + top: 0px + } + span { + text "Live your purpose" { + style { + font-family: THICCCBOI + font-style: Semi Bold + font-size: 15px + font-weight: 600 + } + } + br + }span { + text "Be in service to your community and gain financial security for living your best life." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + } } - } - div frame7 { - style { - display: flex - padding: 434px 255.5px 316px 254.5px - flex-direction: column - justify-content: flex-end - align-items: center - flex: 1 0 0 - align-self: stretch - background: var(--bg-primary, #171717) - } - div authForm { + div communties { + style { + width: 894px + height: 340px + flex-shrink: 0 + filter: drop-shadow(0px 7px 12px rgba(0, 0, 0, 0.12)) + display: none + position: absolute + left: -191px + top: 64px + } + div callout { style { - display: flex - flex-direction: column - align-items: flex-start - gap: var(--spacing-06, 24px) + width: 347px + height: 340px + flex-shrink: 0 + position: absolute + left: 547px + top: 0px } - text "Log in" { + div learnMore { + style { + display: inline-flex + padding: 10px 12px + justify-content: center + align-items: center + gap: 10px + border-radius: 5px + background: #FFF + position: absolute + left: 197px + top: 264px + } + span { + text "Learn more" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + div listYourProperty { + style { + display: inline-flex + padding: 10px 12px + justify-content: center + align-items: center + gap: 5px + border-radius: 5px + border: 1px solid #EDEEF3 + background: #FFF + position: absolute + left: 45px + top: 264px + } + span { + text "List your property" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 12px + font-weight: 500 + } + } + br + }} + span { + text "Unlock the full potential of your property" { style { - width: 348px - color: var(--font-color, #E2E2E2) - font-family: Inter - font-size: 24px - font-style: normal - font-weight: 600 - line-height: normal + font-family: THICCCBOI + font-style: Bold + font-size: 16px + font-weight: 700 + } + } + br + text "Are you a property owner looking to activate your space? Our coliving partnership program provides an opportunity to turn your property into a thriving coliving community supported by our trusted members." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 12px + font-weight: 400 } + } + br + }div maskGroup { + style { + width: 282px + height: 97px + flex-shrink: 0 + position: absolute + left: 32px + top: 20px + } + } + } + div liveYourPurpose { + style { + width: 226px + height: 296px + flex-shrink: 0 + display: none + position: absolute + left: 283px + top: 24px } - div group3 { + div cta { + style { + width: 225px + height: 25px + flex-shrink: 0 + position: absolute + left: 1px + top: 271px + } + span { + text "Find a Workshare™ opportunity →" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 10px + font-weight: 500 + } + } + br + }} + div listItems { + style { + display: inline-flex + flex-direction: column + align-items: flex-start + gap: 16px + position: absolute + left: 0px + top: 59px + } + div environment { style { - display: flex - width: 348px - padding: var(--spacing-05, 16px) var(--spacing-07, 32px) - align-items: center - gap: 10px - border-radius: 99px - border: 1px solid #818181 - background: #202020 + width: 225px + height: 36px + position: relative } - text "Email..." { + span { + text "Care for Environment" { style { - color: #7C7C7C - font-family: Inter - font-size: 16px - font-style: normal - font-weight: 600 - line-height: normal + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Live in right relations with our planet" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 } + } + br + }} + div humanity { + style { + width: 225px + height: 36px + position: relative } - } - div frame6 { + span { + text "Care for Humanity " { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Provide service to one another" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div home { style { - display: flex - flex-direction: column - align-items: flex-start - gap: var(--spacing-03, 8px) + width: 225px + height: 36px + position: relative } - div group2 { + span { + text "Care for Home" { style { - display: flex - width: 348px - padding: var(--spacing-05, 16px) var(--spacing-07, 32px) - align-items: center - gap: 10px - border-radius: 99px - border: 1px solid #818181 - background: #202020 + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 } - text "Password..." { - style { - color: #7C7C7C - font-family: Inter - font-size: 16px - font-style: normal - font-weight: 600 - line-height: normal - } + } + br + text "Practice good stewardship" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 } + } + br + }} + div community { + style { + width: 225px + height: 36px + position: relative } - text "Forgot password?" { + span { + text "Care for Community" { style { - width: 147px - color: #8C8C8C - text-align: right - font-family: Inter - font-size: 14px - font-style: normal - font-weight: 400 - line-height: normal + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Take care of your neighbors" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 } + } + br + }} + } + div header { + style { + width: 225px + height: 47px + flex-shrink: 0 + position: absolute + left: 0px + top: 0px + } + span { + text "Live your purpose" { + style { + font-family: THICCCBOI + font-style: Semi Bold + font-size: 15px + font-weight: 600 + } + } + br + }span { + text "Gain financial security for living your best life" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } } + br + }} + } + div findYourHome { + style { + width: 487px + height: 298px + flex-shrink: 0 + position: absolute + left: 27px + top: 25px } - div footer { + div cta { + style { + width: 481px + height: 23px + flex-shrink: 0 + position: absolute + left: 6px + top: 275px + } + span { + text "View all communities →" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 10px + font-weight: 500 + } + } + br + }} + div newest { + style { + width: 225px + height: 215px + flex-shrink: 0 + position: absolute + left: 262px + top: 45px + } + div listItems { style { - display: flex - flex-direction: column - align-items: flex-end - gap: 10px - align-self: stretch + display: inline-flex + flex-direction: column + align-items: flex-end + gap: 16px + position: absolute + left: 0px + top: 23px } - Button { - style { - display: flex - padding: var(--spacing-05, 16px) var(--spacing-09, 48px) - justify-content: center - align-items: center - gap: 10px - border-radius: 99px - border: 2px solid #D9D9D9 + div portal { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Portal" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } } - text "Log in" { - style { - color: #D9D9D9 - font-family: Inter - font-size: 16px - font-style: normal - font-weight: 600 - line-height: normal - } + br + text "Austin, Texas, USA" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div wildseeds { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Wildseeds" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } } + br + text "Dulzura, California, USA" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div moos { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Moos" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Berlin, Germany" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + div amar { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Amar" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Bahia, Brazil" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }} + } + span { + text "Newest communities" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 10px + font-weight: 500 + } } - } - div frame6 { + br + }} + div featured { + style { + width: 228px + height: 215px + flex-shrink: 0 + position: absolute + left: 7px + top: 45px + } + div listItems { style { - display: flex - flex-direction: column - justify-content: center - align-items: center - gap: var(--spacing-05, 16px) - align-self: stretch + display: inline-flex + flex-direction: column + align-items: flex-end + gap: 16px + position: absolute + left: 1px + top: 23px + } + div wildseeds { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Wildseeds" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Dulzura, California, USA" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }div featuredIcon { + style { + width: 10px + height: 10px + flex-shrink: 0 + position: absolute + left: 2px + top: 3px + } + } } - text "Already have an account?" { + div amar { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Amar" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Bahia, Brazil" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }div featuredIcon { style { - color: #8C8C8C - text-align: center - font-family: Inter - font-size: 16px - font-style: normal + width: 10px + height: 10px + flex-shrink: 0 + position: absolute + left: 2px + top: 3px + } + } + } + div portal { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Portal" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Austin, Texas, USA" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px font-weight: 400 - line-height: normal + } } + br + }div featuredIcon { + style { + width: 10px + height: 10px + flex-shrink: 0 + position: absolute + left: 2px + top: 3px + } + } } - Button - } + div moos { + style { + width: 225px + height: 36px + position: relative + } + span { + text "Moos" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 11px + font-weight: 500 + } + } + br + text "Berlin, Germany" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }div featuredIcon { + style { + width: 10px + height: 10px + flex-shrink: 0 + position: absolute + left: 2px + top: 3px + } + } + } + } + span { + text "Featured communities" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 10px + font-weight: 500 + } + } + br + }} + div header { + style { + width: 318px + height: 35px + flex-shrink: 0 + position: absolute + left: 7px + top: 0px + } + span { + text "We curate communities that align with your values and lifestyle." { + style { + font-family: Cera Pro + font-style: Regular + font-size: 11px + font-weight: 400 + } + } + br + }span { + text "Find your home" { + style { + font-family: THICCCBOI + font-style: Semi Bold + font-size: 15px + font-weight: 600 + } + } + br + }} + } } + } + } + } + span { + text "Listing Page" { + style { + font-family: Inter + font-style: Bold + font-size: 24px + font-weight: 700 + } + } + br + text "Basic booking widget, booking inquiries, basic details, static map, community guidelines" { + style { + font-family: Inter + font-style: Regular + font-size: 20px + font-weight: 400 + } + } + br + }span { + text "Additional Features" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 44px + font-weight: 500 + } + } + br + text "Centralized calendar:" { + style { + font-family: Cera Pro + font-style: Medium + font-size: 34px + font-weight: 500 + } + } + br + text " show availability, community events/workshops, workshare opportunities, local happenings" { + style { + font-family: Cera Pro + font-style: Regular + font-size: 34px + font-weight: 400 + } } -} - + br + }} diff --git a/libs/figma-plugin/ui.html b/libs/figma-plugin/ui.html index 543447792..9ad757782 100644 --- a/libs/figma-plugin/ui.html +++ b/libs/figma-plugin/ui.html @@ -1,8 +1,10 @@ - + +