// 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 metadataProvider from "../webPageMetadata/fyxHY82ZH";
import * as sharedStyle from "../css/YAP816Y5n";
import * as sharedStyle1 from "../css/xZndidUCt";
const TopbarFonts = getFonts(Topbar);

const cycleOrder = ["olxJMbKTh"];

const breakpoints = {}

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

const variantClassNames = {olxJMbKTh: "framer-v-1l1gc90"};

if (isBrowser) {
                    removeHiddenBreakpointLayers("olxJMbKTh", 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 = "olxJMbKTh", ...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: "olxJMbKTh", variantClassNames}}>
<LayoutGroup id={layoutId ?? defaultLayoutId}>
<motion.div data-framer-generated className={cx("framer-3PNqn", sharedStyle.className, sharedStyle1.className)} style={{display: "contents", pointerEvents: pointerEvents ?? undefined}}>
<motion.div {...restProps} className={cx("framer-1l1gc90", className)} style={{...style}} name={"Desktop"} ref={ref}><motion.div className={"framer-wa4dwt"} transformTemplate={(_, t) => `translateX(-50%) ${t}`} name={"Content"} background={null} data-framer-name={"Content"}><RichText className={"framer-dp0qri"} 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;\">About</h1>"}/><motion.div className={"framer-n54pv4"} name={"Banner"} data-framer-name={"Banner"} 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}}}/><RichText className={"framer-1w6rwb7"} 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.2}}} 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}}} __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;\">Cool cucumbers cayenne red grapes eating together Indian banana bread and stormy ultimate vegan a delicious meal ginger carrot spiced morning smoothie bowl red amazon pepper green tea green tea cranberry spritzer blood orange smash. Thyme hummus cauliflower lemon lime minty dessert maple orange tempeh leek sweet potato black bean burrito smoothie earl grey latte cilantro seitan shallots portobello mushrooms lime instant pot cherry bomb apples sleepy morning tea Thai sun pepper bruschetta spicy peppermint blast green grapes springtime strawberry veggie burgers.</p>"}/></motion.div><Container className={"framer-1npnb0f-container"}><Topbar width={"100%"} height={"100%"} layoutId={"wKees_epW"} id={"wKees_epW"} variant={"eoTXJYY6N"} style={{width: "100%"}}/></Container></motion.div>
<div id="overlay"/>
</motion.div>
</LayoutGroup>
</GeneratedComponentContext.Provider>)

});

const css = [".framer-3PNqn [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-3PNqn .framer-1l1gc90 { position: relative; overflow: hidden; width: 1200px; height: 1000px; background-color: #ffffff; }", ".framer-3PNqn .framer-wa4dwt { 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-3PNqn .framer-dp0qri { 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-3PNqn .framer-n54pv4 { position: relative; overflow: hidden; will-change: transform; width: 100%; height: var(--framer-aspect-ratio-supported, 300px); flex: none; aspect-ratio: 1.8666666666666667 / 1; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border-top-right-radius: 10px; border-top-left-radius: 10px; background: linear-gradient(90deg, rgba(136, 85, 255, 0.1) 0%, rgba(0, 204, 255, 0.2) 100%); }", ".framer-3PNqn .framer-1w6rwb7 { 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-3PNqn .framer-1npnb0f-container { position: absolute; height: auto; right: 0px; left: 0px; top: 0px; flex: none; }", "@supports (background: -webkit-named-image(i)) and (not (scale:1)) { .framer-3PNqn framer-wa4dwt > * { margin: 0px; margin-top: calc(40px / 2); margin-bottom: calc(40px / 2); } .framer-3PNqn framer-wa4dwt > :first-child { margin-top: 0px; } .framer-3PNqn framer-wa4dwt > :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 FramerfyxHY82ZH: React.ComponentType<Props> = withCSS(Component, css) as typeof Component;
export default FramerfyxHY82ZH;

FramerfyxHY82ZH.displayName = "About";

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

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