// Generated by Framer (9cea56c)

import * as React from "react";
import { motion, LayoutGroup } from "framer-motion";
import { useOnVariantChange, useActiveVariantCallback, Image, transformTemplate, addFonts, withCSS, addPropertyControls, ControlType, cx, useVariantState, CycleVariantState, RichText, Container, getFonts, useHydratedBreakpointVariants, removeHiddenBreakpointLayers, PropertyOverrides, GeneratedComponentContext } from "framer";
import Topbar from "../canvasComponent/pQWsMWkcK";
import FormSpark from "https://framerusercontent.com/modules/vkHAj2Yk0mTnbM6ZdN5c/PlLMu0V3HsBupvdXeFrH/FormSpark.js";
import metadataProvider from "../webPageMetadata/oSqiE1i1k";
import * as sharedStyle from "../css/YAP816Y5n";
import * as sharedStyle1 from "../css/xZndidUCt";
const TopbarFonts = getFonts(Topbar);
const FormSparkFonts = getFonts(FormSpark);

const cycleOrder = ["wiMMFlXIG"];

const breakpoints = {}

const isBrowser = typeof document !== "undefined";

const variantClassNames = {wiMMFlXIG: "framer-v-2iyou3"};

if (isBrowser) {
                    removeHiddenBreakpointLayers("wiMMFlXIG", breakpoints, variantClassNames);
            }

const humanReadableVariantMap = {};

const transitions = {default: {duration: 0}};

const BASE62 = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz"

const useRandomID = () => {const ref = React.useRef(null);
if (ref.current === null) {
ref.current = Array(5).fill(0).map(() => BASE62[Math.floor(Math.random() * BASE62.length)]).join("");
}
return ref.current;}

export interface Props extends React.HTMLAttributes<HTMLDivElement> { layoutId?: string | null; width?: number; height?: number; layoutDependency?: string | number; variant?: keyof typeof humanReadableVariantMap; }

const Component = React.forwardRef<HTMLDivElement, Props>(function({ id, style: externalStyle = {}, className, width, height, layoutId, variant: outerVariant = "wiMMFlXIG", ...restProps }, ref) {

const outerVariantId = humanReadableVariantMap[outerVariant];

const variant = outerVariantId || outerVariant;

React.useLayoutEffect(() => {
const metadata = metadataProvider();
document.title = metadata.title || "";
if (metadata.viewport) { document.querySelector('meta[name="viewport"]')?.setAttribute("content", metadata.viewport) }
}, [])

const [baseVariant, hydratedBaseVariant] = useHydratedBreakpointVariants(variant, breakpoints, false);
const gestureVariant = undefined;
const transition = transitions.default;

const defaultLayoutId = useRandomID();

const { pointerEvents, ...style } = externalStyle

return (<GeneratedComponentContext.Provider value={{primaryVariantId: "wiMMFlXIG", variantClassNames}}>
<LayoutGroup id={layoutId ?? defaultLayoutId}>
<motion.div data-framer-generated className={cx("framer-DdkWZ", sharedStyle.className, sharedStyle1.className)} style={{display: "contents", pointerEvents: pointerEvents ?? undefined}}>
<motion.div {...restProps} className={cx("framer-2iyou3", className)} style={{...style}} name={"Desktop"} ref={ref}><motion.div className={"framer-1dnwg2b"} transformTemplate={(_, t) => `translateX(-50%) ${t}`} name={"Content"} background={null} data-framer-name={"Content"}><RichText className={"framer-1sldg9c"} style={{whiteSpace: "pre", "--framer-link-text-color": "rgb(0, 153, 255)", "--framer-link-text-decoration": "underline", "--framer-paragraph-spacing": "0px"}} fonts={[]} withExternalLayout={true} verticalAlignment={"top"} __fromCanvasComponent={true} initial={{x: 0, y: 40, scale: 1, opacity: 0, transformPerspective: 1200, rotate: 0, rotateX: 0, rotateY: 0}} animate={{x: 0, y: 0, scale: 1, opacity: 1, transformPerspective: 1200, rotate: 0, rotateX: 0, rotateY: 0, transition: {type: "spring", stiffness: 400, damping: 32, mass: 1, delay: 0}}} exit={{x: 0, y: 40, scale: 1, opacity: 0, transformPerspective: 1200, rotate: 0, rotateX: 0, rotateY: 0, transition: {type: "spring", stiffness: 400, damping: 32, mass: 1, delay: 0}}} __htmlStructure={"<h1 class=\"framer-styles-preset-3nqyhf\" data-styles-preset=\"YAP816Y5n\" style=\"--framer-text-alignment:left;\">{{ text-placeholder }}</h1>"} htmlFromDesign={"<h1 class=\"framer-styles-preset-3nqyhf\" data-styles-preset=\"YAP816Y5n\" style=\"--framer-text-alignment:left;\">Contact</h1>"}/><RichText className={"framer-19ht66e"} style={{whiteSpace: "pre-wrap", wordWrap: "break-word", wordBreak: "break-word", "--framer-link-text-color": "rgb(0, 153, 255)", "--framer-link-text-decoration": "underline", "--framer-paragraph-spacing": "0px"}} fonts={[]} withExternalLayout={true} verticalAlignment={"top"} __fromCanvasComponent={true} initial={{x: 0, y: 40, scale: 1, opacity: 0, transformPerspective: 1200, rotate: 0, rotateX: 0, rotateY: 0}} animate={{x: 0, y: 0, scale: 1, opacity: 1, transformPerspective: 1200, rotate: 0, rotateX: 0, rotateY: 0, transition: {type: "spring", stiffness: 400, damping: 32, mass: 1, delay: 0.1}}} exit={{x: 0, y: 40, scale: 1, opacity: 0, transformPerspective: 1200, rotate: 0, rotateX: 0, rotateY: 0, transition: {type: "spring", stiffness: 400, damping: 32, mass: 1, delay: 0.1}}} __htmlStructure={"<p class=\"framer-styles-preset-21ogod\" data-styles-preset=\"xZndidUCt\" style=\"--framer-text-alignment:left;\">{{ text-placeholder }}</p>"} htmlFromDesign={"<p class=\"framer-styles-preset-21ogod\" data-styles-preset=\"xZndidUCt\" style=\"--framer-text-alignment:left;\">Pineapple salsa golden cayenne pepper coconut chocolate spiced pumpkin chili ghost pepper citrusy sesame soba noodles extra crispy green onions almond milk. Chili scotch bonnet pepper balsamic vinaigrette tart bananas Caribbean red habanero cherries blueberries salted walnut pesto flakes.</p>"}/><Container className={"framer-1nnvffn-container"} name={"Form"} data-framer-name={"Form"} exit={{x: 0, y: 40, scale: 1, opacity: 0, transformPerspective: 1200, rotate: 0, rotateX: 0, rotateY: 0, transition: {type: "spring", stiffness: 400, damping: 32, mass: 1, delay: 0.2}}} initial={{x: 0, y: 40, scale: 1, opacity: 0, transformPerspective: 1200, rotate: 0, rotateX: 0, rotateY: 0}} animate={{x: 0, y: 0, scale: 1, opacity: 1, transformPerspective: 1200, rotate: 0, rotateX: 0, rotateY: 0, transition: {type: "spring", stiffness: 400, damping: 32, mass: 1, delay: 0.2}}}><FormSpark width={"100%"} height={"100%"} layoutId={"SEGD5XtwK"} id={"SEGD5XtwK"} name={"Form"} formId={""} withName={true} nameField={{placeholder: "Name", value: ""}} withEmail={true} email={{placeholder: "Email", value: ""}} withMessage={true} message={{placeholder: "Message", value: ""}} layout={"vertical"} inputs={{fill: "rgb(250, 250, 250)", color: "rgb(0, 0, 0)", placeholderColor: "rgba(0, 0, 0, 0.5)", error: "rgb(238, 68, 68)"}} button={{label: "Send message", fontWeight: 600, fill: "rgb(17, 17, 17)", color: "rgb(255, 255, 255)"}} font={true} fontFamily={"Manrope"} fontWeight={500} fontSize={16} padding={12} paddingPerSide={false} paddingTop={12} paddingRight={12} paddingBottom={12} paddingLeft={12} borderRadius={10} isMixedBorderRadius={false} topLeftRadius={10} topRightRadius={10} bottomRightRadius={10} bottomLeftRadius={10} gap={10} style={{width: "100%", height: "100%"}}/></Container></motion.div><Container className={"framer-grs4af-container"}><Topbar width={"100%"} height={"100%"} layoutId={"FWOFMC219"} id={"FWOFMC219"} variant={"eoTXJYY6N"} style={{width: "100%"}}/></Container></motion.div>
<div id="overlay"/>
</motion.div>
</LayoutGroup>
</GeneratedComponentContext.Provider>)

});

const css = [".framer-DdkWZ [data-border=\"true\"]::after { content: \"\"; border-width: var(--border-top-width, 0) var(--border-right-width, 0) var(--border-bottom-width, 0) var(--border-left-width, 0); border-color: var(--border-color, none); border-style: var(--border-style, none); width: 100%; height: 100%; position: absolute; box-sizing: border-box; left: 0; top: 0; border-radius: inherit; pointer-events: none;}", "@supports (aspect-ratio: 1) { body { --framer-aspect-ratio-supported: auto; } }", ".framer-DdkWZ .framer-2iyou3 { position: relative; overflow: hidden; width: 1200px; height: 1000px; background-color: #ffffff; }", ".framer-DdkWZ .framer-1dnwg2b { position: absolute; overflow: visible; max-width: 100%; width: 600px; height: min-content; left: 50%; top: 160px; flex: none; transform: translateX(-50%); display: flex; flex-direction: column; justify-content: flex-start; align-content: flex-start; align-items: flex-start; flex-wrap: nowrap; gap: 40px; padding: 0px 20px 0px 20px; }", ".framer-DdkWZ .framer-1sldg9c { position: relative; width: auto; height: auto; flex: none; white-space: pre; --framer-paragraph-spacing: 0px; --framer-link-text-color: #0099ff; --framer-link-text-decoration: underline; }", ".framer-DdkWZ .framer-19ht66e { position: relative; width: 100%; height: auto; flex: none; white-space: pre-wrap; word-wrap: break-word; word-break: break-word; --framer-paragraph-spacing: 0px; --framer-link-text-color: #0099ff; --framer-link-text-decoration: underline; }", ".framer-DdkWZ .framer-1nnvffn-container { position: relative; width: 100%; height: 300px; flex: none; }", ".framer-DdkWZ .framer-grs4af-container { position: absolute; height: auto; right: 0px; left: 0px; top: 0px; flex: none; }", "@supports (background: -webkit-named-image(i)) and (not (scale:1)) { .framer-DdkWZ framer-1dnwg2b > * { margin: 0px; margin-top: calc(40px / 2); margin-bottom: calc(40px / 2); } .framer-DdkWZ framer-1dnwg2b > :first-child { margin-top: 0px; } .framer-DdkWZ framer-1dnwg2b > :last-child { margin-bottom: 0px; } }", ...sharedStyle.css, ...sharedStyle1.css]

/**
 * This is a generated Framer component.
 * @framerIntrinsicHeight 1000
 * @framerIntrinsicWidth 1200
 * @framerCanvasComponentVariantDetails {"propertyName":"variant","data":{"default":{"layout":["fixed","fixed"]}}}
 * @framerResponsiveScreen
 */
const FrameroSqiE1i1k: React.ComponentType<Props> = withCSS(Component, css) as typeof Component;
export default FrameroSqiE1i1k;

FrameroSqiE1i1k.displayName = "Contact";

FrameroSqiE1i1k.defaultProps = {width: 1200, height: 1000};

addFonts(FrameroSqiE1i1k, [...TopbarFonts, ...FormSparkFonts, ...sharedStyle.fonts, ...sharedStyle1.fonts]);