// 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, Container, getFonts, useHydratedBreakpointVariants, removeHiddenBreakpointLayers, PropertyOverrides, GeneratedComponentContext } from "framer";
import Topbar from "../canvasComponent/pQWsMWkcK";
import metadataProvider from "../webPageMetadata/augiA20Il";
const TopbarFonts = getFonts(Topbar);

const cycleOrder = ["WQLkyLRf1"];

const breakpoints = {}

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

const variantClassNames = {WQLkyLRf1: "framer-v-72rtr7"};

if (isBrowser) {
                    removeHiddenBreakpointLayers("WQLkyLRf1", 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 = "WQLkyLRf1", ...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: "WQLkyLRf1", variantClassNames}}>
<LayoutGroup id={layoutId ?? defaultLayoutId}>
<motion.div data-framer-generated className={cx("framer-nQ21r")} style={{display: "contents", pointerEvents: pointerEvents ?? undefined}}>
<motion.div {...restProps} className={cx("framer-72rtr7", className)} style={{...style}} name={"Desktop"} ref={ref}><Container className={"framer-yri3j9-container"}><Topbar width={"100%"} height={"100%"} layoutId={"TcOo_Zk5d"} id={"TcOo_Zk5d"} variant={"eoTXJYY6N"} style={{width: "100%"}}/></Container></motion.div>
<div id="overlay"/>
</motion.div>
</LayoutGroup>
</GeneratedComponentContext.Provider>)

});

const css = [".framer-nQ21r [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-nQ21r .framer-72rtr7 { position: relative; overflow: hidden; width: 1200px; height: 1000px; background-color: #ffffff; }", ".framer-nQ21r .framer-yri3j9-container { position: absolute; height: auto; right: 0px; left: 0px; top: 0px; flex: none; }"]

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

FrameraugiA20Il.displayName = "Home";

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

addFonts(FrameraugiA20Il, [...TopbarFonts]);