\n {isHovered ?
\n \n );\n};\n\nexport default SocialButton;\n","const NaverIconHere = () => {\n return (\n \n
\n );\n};\n\nexport default ContactBlock;\n","import React from \"react\";\n\nconst PinkStartIcon = () => {\n return (\n \n
\n\n Get in Touch
\n\n We'd love to hear from you! Whether you have a question about our\n products, need assistance with an order, or simply want to share your\n Yul7 experience, we're here to help!\n
\n\n
\n\n \n
\n \n
\n Phone: +82-10-9158-7856
\n\n
\n Email: yul7_official@naver.com
\n\n >;\n }\n>();\n\nconst RootIds: WeakMap = new WeakMap();\nlet rootId = 0;\n\nlet unsupportedValue: boolean | undefined = undefined;\n\n/**\n * What should be the default behavior if the IntersectionObserver is unsupported?\n * Ideally the polyfill has been loaded, you can have the following happen:\n * - `undefined`: Throw an error\n * - `true` or `false`: Set the `inView` value to this regardless of intersection state\n * **/\nexport function defaultFallbackInView(inView: boolean | undefined) {\n unsupportedValue = inView;\n}\n\n/**\n * Generate a unique ID for the root element\n * @param root\n */\nfunction getRootId(root: IntersectionObserverInit[\"root\"]) {\n if (!root) return \"0\";\n if (RootIds.has(root)) return RootIds.get(root);\n rootId += 1;\n RootIds.set(root, rootId.toString());\n return RootIds.get(root);\n}\n\n/**\n * Convert the options to a string Id, based on the values.\n * Ensures we can reuse the same observer when observing elements with the same options.\n * @param options\n */\nexport function optionsToId(options: IntersectionObserverInit) {\n return Object.keys(options)\n .sort()\n .filter(\n (key) => options[key as keyof IntersectionObserverInit] !== undefined,\n )\n .map((key) => {\n return `${key}_${\n key === \"root\"\n ? getRootId(options.root)\n : options[key as keyof IntersectionObserverInit]\n }`;\n })\n .toString();\n}\n\nfunction createObserver(options: IntersectionObserverInit) {\n // Create a unique ID for this observer instance, based on the root, root margin and threshold.\n const id = optionsToId(options);\n let instance = observerMap.get(id);\n\n if (!instance) {\n // Create a map of elements this observer is going to observe. Each element has a list of callbacks that should be triggered, once it comes into view.\n const elements = new Map>();\n // biome-ignore lint/style/useConst: It's fine to use let here, as we are going to assign it later\n let thresholds: number[] | readonly number[];\n\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n // While it would be nice if you could just look at isIntersecting to determine if the component is inside the viewport, browsers can't agree on how to use it.\n // -Firefox ignores `threshold` when considering `isIntersecting`, so it will never be false again if `threshold` is > 0\n const inView =\n entry.isIntersecting &&\n thresholds.some((threshold) => entry.intersectionRatio >= threshold);\n\n // @ts-ignore support IntersectionObserver v2\n if (options.trackVisibility && typeof entry.isVisible === \"undefined\") {\n // The browser doesn't support Intersection Observer v2, falling back to v1 behavior.\n // @ts-ignore\n entry.isVisible = inView;\n }\n\n elements.get(entry.target)?.forEach((callback) => {\n callback(inView, entry);\n });\n });\n }, options);\n\n // Ensure we have a valid thresholds array. If not, use the threshold from the options\n thresholds =\n observer.thresholds ||\n (Array.isArray(options.threshold)\n ? options.threshold\n : [options.threshold || 0]);\n\n instance = {\n id,\n observer,\n elements,\n };\n\n observerMap.set(id, instance);\n }\n\n return instance;\n}\n\n/**\n * @param element - DOM Element to observe\n * @param callback - Callback function to trigger when intersection status changes\n * @param options - Intersection Observer options\n * @param fallbackInView - Fallback inView value.\n * @return Function - Cleanup function that should be triggered to unregister the observer\n */\nexport function observe(\n element: Element,\n callback: ObserverInstanceCallback,\n options: IntersectionObserverInit = {},\n fallbackInView = unsupportedValue,\n) {\n if (\n typeof window.IntersectionObserver === \"undefined\" &&\n fallbackInView !== undefined\n ) {\n const bounds = element.getBoundingClientRect();\n callback(fallbackInView, {\n isIntersecting: fallbackInView,\n target: element,\n intersectionRatio:\n typeof options.threshold === \"number\" ? options.threshold : 0,\n time: 0,\n boundingClientRect: bounds,\n intersectionRect: bounds,\n rootBounds: bounds,\n });\n return () => {\n // Nothing to cleanup\n };\n }\n // An observer with the same options can be reused, so lets use this fact\n const { id, observer, elements } = createObserver(options);\n\n // Register the callback listener for this element\n const callbacks = elements.get(element) || [];\n if (!elements.has(element)) {\n elements.set(element, callbacks);\n }\n\n callbacks.push(callback);\n observer.observe(element);\n\n return function unobserve() {\n // Remove the callback from the callback list\n callbacks.splice(callbacks.indexOf(callback), 1);\n\n if (callbacks.length === 0) {\n // No more callback exists for element, so destroy it\n elements.delete(element);\n observer.unobserve(element);\n }\n\n if (elements.size === 0) {\n // No more elements are being observer by this instance, so destroy it\n observer.disconnect();\n observerMap.delete(id);\n }\n };\n}\n","import * as React from \"react\";\nimport type { IntersectionObserverProps, PlainChildrenProps } from \"./index\";\nimport { observe } from \"./observe\";\n\ntype State = {\n inView: boolean;\n entry?: IntersectionObserverEntry;\n};\n\nfunction isPlainChildren(\n props: IntersectionObserverProps | PlainChildrenProps,\n): props is PlainChildrenProps {\n return typeof props.children !== \"function\";\n}\n\n/**\n ## Render props\n\n To use the `` component, you pass it a function. It will be called\n whenever the state changes, with the new value of `inView`. In addition to the\n `inView` prop, children also receive a `ref` that should be set on the\n containing DOM element. This is the element that the IntersectionObserver will\n monitor.\n\n If you need it, you can also access the\n [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)\n on `entry`, giving you access to all the details about the current intersection\n state.\n\n ```jsx\n import { InView } from 'react-intersection-observer';\n\n const Component = () => (\n \n {({ inView, ref, entry }) => (\n \n );\n\n export default Component;\n ```\n\n ## Plain children\n\n You can pass any element to the `` will be\n passed to the HTML element, allowing you set the `className`, `style`, etc.\n\n ```jsx\n import { InView } from 'react-intersection-observer';\n\n const Component = () => (\n console.log('Inview:', inView)}>\n \n );\n\n export default Component;\n ```\n */\nexport class InView extends React.Component<\n IntersectionObserverProps | PlainChildrenProps,\n State\n> {\n node: Element | null = null;\n _unobserveCb: (() => void) | null = null;\n\n constructor(props: IntersectionObserverProps | PlainChildrenProps) {\n super(props);\n this.state = {\n inView: !!props.initialInView,\n entry: undefined,\n };\n }\n\n componentDidMount() {\n this.unobserve();\n this.observeNode();\n }\n\n componentDidUpdate(prevProps: IntersectionObserverProps) {\n // If a IntersectionObserver option changed, reinit the observer\n if (\n prevProps.rootMargin !== this.props.rootMargin ||\n prevProps.root !== this.props.root ||\n prevProps.threshold !== this.props.threshold ||\n prevProps.skip !== this.props.skip ||\n prevProps.trackVisibility !== this.props.trackVisibility ||\n prevProps.delay !== this.props.delay\n ) {\n this.unobserve();\n this.observeNode();\n }\n }\n\n componentWillUnmount() {\n this.unobserve();\n }\n\n observeNode() {\n if (!this.node || this.props.skip) return;\n const {\n threshold,\n root,\n rootMargin,\n trackVisibility,\n delay,\n fallbackInView,\n } = this.props;\n\n this._unobserveCb = observe(\n this.node,\n this.handleChange,\n {\n threshold,\n root,\n rootMargin,\n // @ts-ignore\n trackVisibility,\n // @ts-ignore\n delay,\n },\n fallbackInView,\n );\n }\n\n unobserve() {\n if (this._unobserveCb) {\n this._unobserveCb();\n this._unobserveCb = null;\n }\n }\n\n handleNode = (node?: Element | null) => {\n if (this.node) {\n // Clear the old observer, before we start observing a new element\n this.unobserve();\n\n if (!node && !this.props.triggerOnce && !this.props.skip) {\n // Reset the state if we get a new node, and we aren't ignoring updates\n this.setState({ inView: !!this.props.initialInView, entry: undefined });\n }\n }\n\n this.node = node ? node : null;\n this.observeNode();\n };\n\n handleChange = (inView: boolean, entry: IntersectionObserverEntry) => {\n if (inView && this.props.triggerOnce) {\n // If `triggerOnce` is true, we should stop observing the element.\n this.unobserve();\n }\n if (!isPlainChildren(this.props)) {\n // Store the current State, so we can pass it to the children in the next render update\n // There's no reason to update the state for plain children, since it's not used in the rendering.\n this.setState({ inView, entry });\n }\n if (this.props.onChange) {\n // If the user is actively listening for onChange, always trigger it\n this.props.onChange(inView, entry);\n }\n };\n\n render() {\n const { children } = this.props;\n if (typeof children === \"function\") {\n const { inView, entry } = this.state;\n return children({ inView, entry, ref: this.handleNode });\n }\n\n const {\n as,\n triggerOnce,\n threshold,\n root,\n rootMargin,\n onChange,\n skip,\n trackVisibility,\n delay,\n initialInView,\n fallbackInView,\n ...props\n } = this.props as PlainChildrenProps;\n\n return React.createElement(\n as || \"div\",\n { ref: this.handleNode, ...props },\n children,\n );\n }\n}\n","import * as React from \"react\";\nimport type { InViewHookResponse, IntersectionOptions } from \"./index\";\nimport { observe } from \"./observe\";\n\ntype State = {\n inView: boolean;\n entry?: IntersectionObserverEntry;\n};\n\n/**\n * React Hooks make it easy to monitor the `inView` state of your components. Call\n * the `useInView` hook with the (optional) [options](#options) you need. It will\n * return an array containing a `ref`, the `inView` status and the current\n * [`entry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry).\n * Assign the `ref` to the DOM element you want to monitor, and the hook will\n * report the status.\n *\n * @example\n * ```jsx\n * import React from 'react';\n * import { useInView } from 'react-intersection-observer';\n *\n * const Component = () => {\n * const { ref, inView, entry } = useInView({\n * threshold: 0,\n * });\n *\n * return (\n * (null);\n const callback = React.useRef();\n const [state, setState] = React.useState({\n inView: !!initialInView,\n entry: undefined,\n });\n\n // Store the onChange callback in a `ref`, so we can access the latest instance\n // inside the `useEffect`, but without triggering a rerender.\n callback.current = onChange;\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: threshold is not correctly detected as a dependency\n React.useEffect(\n () => {\n // Ensure we have node ref, and that we shouldn't skip observing\n if (skip || !ref) return;\n\n let unobserve: (() => void) | undefined;\n unobserve = observe(\n ref,\n (inView, entry) => {\n setState({\n inView,\n entry,\n });\n if (callback.current) callback.current(inView, entry);\n\n if (entry.isIntersecting && triggerOnce && unobserve) {\n // If it should only trigger once, unobserve the element after it's inView\n unobserve();\n unobserve = undefined;\n }\n },\n {\n root,\n rootMargin,\n threshold,\n // @ts-ignore\n trackVisibility,\n // @ts-ignore\n delay,\n },\n fallbackInView,\n );\n\n return () => {\n if (unobserve) {\n unobserve();\n }\n };\n },\n // We break the rule here, because we aren't including the actual `threshold` variable\n // eslint-disable-next-line react-hooks/exhaustive-deps\n [\n // If the threshold is an array, convert it to a string, so it won't change between renders.\n Array.isArray(threshold) ? threshold.toString() : threshold,\n ref,\n root,\n rootMargin,\n triggerOnce,\n skip,\n trackVisibility,\n fallbackInView,\n delay,\n ],\n );\n\n const entryTarget = state.entry?.target;\n const previousEntryTarget = React.useRef();\n if (\n !ref &&\n entryTarget &&\n !triggerOnce &&\n !skip &&\n previousEntryTarget.current !== entryTarget\n ) {\n // If we don't have a node ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)\n // This ensures we correctly reflect the current state - If you aren't observing anything, then nothing is inView\n previousEntryTarget.current = entryTarget;\n setState({\n inView: !!initialInView,\n entry: undefined,\n });\n }\n\n const result = [setRef, state.inView, state.entry] as InViewHookResponse;\n\n // Support object destructuring, by adding the specific values.\n result.ref = result[0];\n result.inView = result[1];\n result.entry = result[2];\n\n return result;\n}\n","import React, { useState, useEffect } from \"react\";\nimport \"./FeatureCard.css\";\nimport NewTextIconCard from \"../TextIconCard/NewTextIconCard\";\nimport GlowingImage from \"../GlowingImage/GlowingImage\";\nimport { motion, useAnimation } from \"framer-motion\";\nimport { useInView } from \"react-intersection-observer\";\n\nexport default function FeatureCard({ image, text, rightImage, onVisible }) {\n const controls = useAnimation();\n const [ref, inView] = useInView({\n triggerOnce: true,\n threshold: 0.8, \n });\n const [isLargeScreen, setIsLargeScreen] = useState(true);\n\n useEffect(() => {\n const checkScreenSize = () => {\n setIsLargeScreen(window.innerWidth > 750);\n };\n\n checkScreenSize();\n window.addEventListener('resize', checkScreenSize);\n\n return () => window.removeEventListener('resize', checkScreenSize);\n }, []);\n\n useEffect(() => {\n if (inView) {\n controls.start(\"visible\");\n // onVisible();\n }\n }, [controls, inView, onVisible]);\n\n const springTransition = {\n type: \"spring\",\n stiffness: 300,\n damping: 75,\n mass: 1,\n restDelta: 0.001\n };\n\n const slideUpVariants = {\n hidden: { opacity: 0, y: 30 },\n visible: {\n opacity: 1,\n y: 0,\n transition: {\n ...springTransition,\n opacity: { duration: 1, ease: \"easeOut\" }\n },\n },\n };\n\n const slideUpTextVariants = {\n hidden: { opacity: 0, y: 30 },\n visible: {\n opacity: 1,\n y: 0,\n transition: {\n ...springTransition,\n opacity: { duration: 1, ease: \"easeOut\" }\n },\n },\n };\n\n const textVariants = {\n hidden: { opacity: 0, x: rightImage ? -50 : 50 },\n visible: {\n opacity: 1,\n x: 0,\n transition: {\n ...springTransition,\n opacity: { duration: 1.2, ease: \"easeOut\" },\n delay: 0.2\n },\n },\n };\n\n const cardVariants = {\n hidden: { opacity: 0, y: 50 },\n visible: {\n opacity: 1,\n y: 0,\n transition: {\n ...springTransition,\n opacity: { duration: 0.8, ease: \"easeOut\" }\n },\n },\n };\n\n return (\n \n {rightImage ? (\n <>\n \n \n \n \n \n \n \n
\n );\n};\n\nexport default InstagramCard;","import instagramImage1 from './instagram-img-01.jpg';\nimport instagramImage2 from './instagram-img-02.jpg';\nimport instagramImage3 from './instagram-img-03.jpg';\nimport instagramImage4 from './instagram-img-04.jpg';\nimport instagramImage5 from './instagram-img-05.jpg';\n\nexport const instagramImages = {\n instagramImage1,\n instagramImage2,\n instagramImage3,\n instagramImage4,\n instagramImage5\n}","import \"./MobileInstagramCard.css\";\nimport PlayIcon from \"../../assets/icon-components/PlayIcon/PlayIcon\";\nconst MobileInstagramCard = ({\n image,\n viewCount,\n height,\n width,\n countLeft,\n countRight,\n url,\n}) => {\n const viewCountContainerClassName = `yul7_mobile_instagram-crd_view_count_container ${\n countLeft ? \"left-aligned\" : \"\"\n } ${countRight ? \"right-aligned\" : \"\"}`;\n const handleCardClick = () => {\n window.open(url, \"_blank\");\n };\n return (\n \n {/*
\n );\n};\n\nexport default NewTextIconCard;","import productImage1 from \"./product-image1.png\";\nimport productImage2 from \"./product-image2.png\";\nimport productImage3 from \"./product-image3.png\";\n\nexport const newProductImages = {\n productImage1,\n productImage2,\n productImage3,\n};\n","import \"./GlowingImage.css\";\nimport { newProductImages } from \"../../assets/new-feature-block-images\";\n\nconst GlowingImage = ({ image }) => {\n return (\n */}\n
\n \n
\n \n
\n {text}
\n\n
\n );\n};\n\nexport default GlowingImage;","const noop = (any) => any;\n\nexport { noop };\n","import { noop } from './noop.mjs';\n\nlet warning = noop;\nlet invariant = noop;\nif (process.env.NODE_ENV !== \"production\") {\n warning = (check, message) => {\n if (!check && typeof console !== \"undefined\") {\n console.warn(message);\n }\n };\n invariant = (check, message) => {\n if (!check) {\n throw new Error(message);\n }\n };\n}\n\nexport { invariant, warning };\n","const isKeyframesTarget = (v) => {\n return Array.isArray(v);\n};\n\nexport { isKeyframesTarget };\n","import { isKeyframesTarget } from '../animation/utils/is-keyframes-target.mjs';\n\nconst isCustomValue = (v) => {\n return Boolean(v && typeof v === \"object\" && v.mix && v.toValue);\n};\nconst resolveFinalValueInKeyframes = (v) => {\n // TODO maybe throw if v.length - 1 is placeholder token?\n return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v;\n};\n\nexport { isCustomValue, resolveFinalValueInKeyframes };\n","function addUniqueItem(arr, item) {\n if (arr.indexOf(item) === -1)\n arr.push(item);\n}\nfunction removeItem(arr, item) {\n const index = arr.indexOf(item);\n if (index > -1)\n arr.splice(index, 1);\n}\n// Adapted from array-move\nfunction moveItem([...arr], fromIndex, toIndex) {\n const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex;\n if (startIndex >= 0 && startIndex < arr.length) {\n const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex;\n const [item] = arr.splice(fromIndex, 1);\n arr.splice(endIndex, 0, item);\n }\n return arr;\n}\n\nexport { addUniqueItem, moveItem, removeItem };\n","import { addUniqueItem, removeItem } from './array.mjs';\n\nclass SubscriptionManager {\n constructor() {\n this.subscriptions = [];\n }\n add(handler) {\n addUniqueItem(this.subscriptions, handler);\n return () => removeItem(this.subscriptions, handler);\n }\n notify(a, b, c) {\n const numSubscriptions = this.subscriptions.length;\n if (!numSubscriptions)\n return;\n if (numSubscriptions === 1) {\n /**\n * If there's only a single handler we can just call it without invoking a loop.\n */\n this.subscriptions[0](a, b, c);\n }\n else {\n for (let i = 0; i < numSubscriptions; i++) {\n /**\n * Check whether the handler exists before firing as it's possible\n * the subscriptions were modified during this loop running.\n */\n const handler = this.subscriptions[i];\n handler && handler(a, b, c);\n }\n }\n }\n getSize() {\n return this.subscriptions.length;\n }\n clear() {\n this.subscriptions.length = 0;\n }\n}\n\nexport { SubscriptionManager };\n","/*\n Convert velocity into velocity per second\n\n @param [number]: Unit per frame\n @param [number]: Frame duration in ms\n*/\nfunction velocityPerSecond(velocity, frameDuration) {\n return frameDuration ? velocity * (1000 / frameDuration) : 0;\n}\n\nexport { velocityPerSecond };\n","const MotionGlobalConfig = {\n skipAnimations: false,\n useManualTiming: false,\n};\n\nexport { MotionGlobalConfig };\n","import { MotionGlobalConfig } from '../utils/GlobalConfig.mjs';\nimport { createRenderStep } from './render-step.mjs';\n\nconst stepsOrder = [\n \"read\", // Read\n \"resolveKeyframes\", // Write/Read/Write/Read\n \"update\", // Compute\n \"preRender\", // Compute\n \"render\", // Write\n \"postRender\", // Compute\n];\nconst maxElapsed = 40;\nfunction createRenderBatcher(scheduleNextBatch, allowKeepAlive) {\n let runNextFrame = false;\n let useDefaultElapsed = true;\n const state = {\n delta: 0.0,\n timestamp: 0.0,\n isProcessing: false,\n };\n const flagRunNextFrame = () => (runNextFrame = true);\n const steps = stepsOrder.reduce((acc, key) => {\n acc[key] = createRenderStep(flagRunNextFrame);\n return acc;\n }, {});\n const { read, resolveKeyframes, update, preRender, render, postRender } = steps;\n const processBatch = () => {\n const timestamp = MotionGlobalConfig.useManualTiming\n ? state.timestamp\n : performance.now();\n runNextFrame = false;\n state.delta = useDefaultElapsed\n ? 1000 / 60\n : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1);\n state.timestamp = timestamp;\n state.isProcessing = true;\n // Unrolled render loop for better per-frame performance\n read.process(state);\n resolveKeyframes.process(state);\n update.process(state);\n preRender.process(state);\n render.process(state);\n postRender.process(state);\n state.isProcessing = false;\n if (runNextFrame && allowKeepAlive) {\n useDefaultElapsed = false;\n scheduleNextBatch(processBatch);\n }\n };\n const wake = () => {\n runNextFrame = true;\n useDefaultElapsed = true;\n if (!state.isProcessing) {\n scheduleNextBatch(processBatch);\n }\n };\n const schedule = stepsOrder.reduce((acc, key) => {\n const step = steps[key];\n acc[key] = (process, keepAlive = false, immediate = false) => {\n if (!runNextFrame)\n wake();\n return step.schedule(process, keepAlive, immediate);\n };\n return acc;\n }, {});\n const cancel = (process) => {\n for (let i = 0; i < stepsOrder.length; i++) {\n steps[stepsOrder[i]].cancel(process);\n }\n };\n return { schedule, cancel, state, steps };\n}\n\nexport { createRenderBatcher, stepsOrder };\n","function createRenderStep(runNextFrame) {\n /**\n * We create and reuse two queues, one to queue jobs for the current frame\n * and one for the next. We reuse to avoid triggering GC after x frames.\n */\n let thisFrame = new Set();\n let nextFrame = new Set();\n /**\n * Track whether we're currently processing jobs in this step. This way\n * we can decide whether to schedule new jobs for this frame or next.\n */\n let isProcessing = false;\n let flushNextFrame = false;\n /**\n * A set of processes which were marked keepAlive when scheduled.\n */\n const toKeepAlive = new WeakSet();\n let latestFrameData = {\n delta: 0.0,\n timestamp: 0.0,\n isProcessing: false,\n };\n function triggerCallback(callback) {\n if (toKeepAlive.has(callback)) {\n step.schedule(callback);\n runNextFrame();\n }\n callback(latestFrameData);\n }\n const step = {\n /**\n * Schedule a process to run on the next frame.\n */\n schedule: (callback, keepAlive = false, immediate = false) => {\n const addToCurrentFrame = immediate && isProcessing;\n const queue = addToCurrentFrame ? thisFrame : nextFrame;\n if (keepAlive)\n toKeepAlive.add(callback);\n if (!queue.has(callback))\n queue.add(callback);\n return callback;\n },\n /**\n * Cancel the provided callback from running on the next frame.\n */\n cancel: (callback) => {\n nextFrame.delete(callback);\n toKeepAlive.delete(callback);\n },\n /**\n * Execute all schedule callbacks.\n */\n process: (frameData) => {\n latestFrameData = frameData;\n /**\n * If we're already processing we've probably been triggered by a flushSync\n * inside an existing process. Instead of executing, mark flushNextFrame\n * as true and ensure we flush the following frame at the end of this one.\n */\n if (isProcessing) {\n flushNextFrame = true;\n return;\n }\n isProcessing = true;\n [thisFrame, nextFrame] = [nextFrame, thisFrame];\n // Clear the next frame queue\n nextFrame.clear();\n // Execute this frame\n thisFrame.forEach(triggerCallback);\n isProcessing = false;\n if (flushNextFrame) {\n flushNextFrame = false;\n step.process(frameData);\n }\n },\n };\n return step;\n}\n\nexport { createRenderStep };\n","import { noop } from '../utils/noop.mjs';\nimport { createRenderBatcher } from './batcher.mjs';\n\nconst { schedule: frame, cancel: cancelFrame, state: frameData, steps, } = createRenderBatcher(typeof requestAnimationFrame !== \"undefined\" ? requestAnimationFrame : noop, true);\n\nexport { cancelFrame, frame, frameData, steps };\n","import { MotionGlobalConfig } from '../utils/GlobalConfig.mjs';\nimport { frameData } from './frame.mjs';\n\nlet now;\nfunction clearTime() {\n now = undefined;\n}\n/**\n * An eventloop-synchronous alternative to performance.now().\n *\n * Ensures that time measurements remain consistent within a synchronous context.\n * Usually calling performance.now() twice within the same synchronous context\n * will return different values which isn't useful for animations when we're usually\n * trying to sync animations to the same frame.\n */\nconst time = {\n now: () => {\n if (now === undefined) {\n time.set(frameData.isProcessing || MotionGlobalConfig.useManualTiming\n ? frameData.timestamp\n : performance.now());\n }\n return now;\n },\n set: (newTime) => {\n now = newTime;\n queueMicrotask(clearTime);\n },\n};\n\nexport { time };\n","import { SubscriptionManager } from '../utils/subscription-manager.mjs';\nimport { velocityPerSecond } from '../utils/velocity-per-second.mjs';\nimport { warnOnce } from '../utils/warn-once.mjs';\nimport { time } from '../frameloop/sync-time.mjs';\nimport { frame } from '../frameloop/frame.mjs';\n\n/**\n * Maximum time between the value of two frames, beyond which we\n * assume the velocity has since been 0.\n */\nconst MAX_VELOCITY_DELTA = 30;\nconst isFloat = (value) => {\n return !isNaN(parseFloat(value));\n};\nconst collectMotionValues = {\n current: undefined,\n};\n/**\n * `MotionValue` is used to track the state and velocity of motion values.\n *\n * @public\n */\nclass MotionValue {\n /**\n * @param init - The initiating value\n * @param config - Optional configuration options\n *\n * - `transformer`: A function to transform incoming values with.\n *\n * @internal\n */\n constructor(init, options = {}) {\n /**\n * This will be replaced by the build step with the latest version number.\n * When MotionValues are provided to motion components, warn if versions are mixed.\n */\n this.version = \"11.3.31\";\n /**\n * Tracks whether this value can output a velocity. Currently this is only true\n * if the value is numerical, but we might be able to widen the scope here and support\n * other value types.\n *\n * @internal\n */\n this.canTrackVelocity = null;\n /**\n * An object containing a SubscriptionManager for each active event.\n */\n this.events = {};\n this.updateAndNotify = (v, render = true) => {\n const currentTime = time.now();\n /**\n * If we're updating the value during another frame or eventloop\n * than the previous frame, then the we set the previous frame value\n * to current.\n */\n if (this.updatedAt !== currentTime) {\n this.setPrevFrameValue();\n }\n this.prev = this.current;\n this.setCurrent(v);\n // Update update subscribers\n if (this.current !== this.prev && this.events.change) {\n this.events.change.notify(this.current);\n }\n // Update render subscribers\n if (render && this.events.renderRequest) {\n this.events.renderRequest.notify(this.current);\n }\n };\n this.hasAnimated = false;\n this.setCurrent(init);\n this.owner = options.owner;\n }\n setCurrent(current) {\n this.current = current;\n this.updatedAt = time.now();\n if (this.canTrackVelocity === null && current !== undefined) {\n this.canTrackVelocity = isFloat(this.current);\n }\n }\n setPrevFrameValue(prevFrameValue = this.current) {\n this.prevFrameValue = prevFrameValue;\n this.prevUpdatedAt = this.updatedAt;\n }\n /**\n * Adds a function that will be notified when the `MotionValue` is updated.\n *\n * It returns a function that, when called, will cancel the subscription.\n *\n * When calling `onChange` inside a React component, it should be wrapped with the\n * `useEffect` hook. As it returns an unsubscribe function, this should be returned\n * from the `useEffect` function to ensure you don't add duplicate subscribers..\n *\n * ```jsx\n * export const MyComponent = () => {\n * const x = useMotionValue(0)\n * const y = useMotionValue(0)\n * const opacity = useMotionValue(1)\n *\n * useEffect(() => {\n * function updateOpacity() {\n * const maxXY = Math.max(x.get(), y.get())\n * const newOpacity = transform(maxXY, [0, 100], [1, 0])\n * opacity.set(newOpacity)\n * }\n *\n * const unsubscribeX = x.on(\"change\", updateOpacity)\n * const unsubscribeY = y.on(\"change\", updateOpacity)\n *\n * return () => {\n * unsubscribeX()\n * unsubscribeY()\n * }\n * }, [])\n *\n * return \n 
\n {/* 
*/}\n
\n \n \n {/* */}\n
\n \n
\n )}\n {`Header inside viewport ${inView}.`}
\nPlain children are always rendered. Use onChange to monitor state.
\n\n *
\n * );\n * };\n * ```\n */\nexport function useInView({\n threshold,\n delay,\n trackVisibility,\n rootMargin,\n root,\n triggerOnce,\n skip,\n initialInView,\n fallbackInView,\n onChange,\n}: IntersectionOptions = {}): InViewHookResponse {\n const [ref, setRef] = React.useState{`Header inside viewport ${inView}.`}
\n *\n
\n );\n}","const PlayIcon = ({height = 24, width = 24}) => {\n return (\n \n
\n \n
\n \n {featureList.map((item, index) => (\n
\n \n
\n ))}\n \n
\n \n
\n \n
\n {viewCount}M
\n\n {/* 
*/}\n \n
\n \n );\n};\n\nexport default MobileInstagramCard;\n","import MobileInstagramCard from \"../MobileInstagramCard/MobileInstagramCard\";\nimport \"./InstagramMobileCards.css\";\n\nconst InstagramMobileCards = ({ cardInformation }) => {\n return (\n {viewCount}M
\n\n
\n );\n};\n\nexport default InstagramMobileCards;\n","import \"./InstagramBlock.css\";\n\nimport InstagramCard from \"../../components/SingleInstagramCard/InstagramCard\";\nimport { instagramImages } from \"../../assets/instagram-images\";\nimport InstagramMobileCards from \"../../components/InstagramMobileCards/InstagramMobileCards\";\nimport { useState, useEffect } from \"react\";\n\nconst InstagramBlock = () => {\n const instagramCardInformation = [\n {\n image: instagramImages.instagramImage4,\n viewCount: 1.5,\n height: 300,\n width: 191.88,\n url: \"https://www.instagram.com/reel/C4KHEGavOiE/?igsh=MWo3eHFzc3V4YjdyYg==\",\n },\n {\n image: instagramImages.instagramImage2,\n viewCount: 6,\n height: 360,\n width: 230.25,\n url: \"https://www.instagram.com/reel/C4nLa5MPEGE/?igsh=NnAya2hxbm54YWl4\",\n },\n {\n image: instagramImages.instagramImage1,\n viewCount: 33.7,\n height: 400,\n width: 255.84,\n url: \"https://www.instagram.com/reel/C3aAYJWPqzB/?igsh=MXBrbzdxbW93Nzk4aQ==\",\n },\n {\n image: instagramImages.instagramImage3,\n viewCount: 3.5,\n height: 360,\n width: 230.25,\n url: \"https://www.instagram.com/reel/C3kUYz6vIt_/?igsh=bDl6N3lnMmVrZ2I1\",\n },\n {\n image: instagramImages.instagramImage5,\n viewCount: 2.2,\n height: 300,\n width: 191.88,\n url: \"https://www.instagram.com/reel/C3pSpugvwip/\",\n },\n ];\n\n const instagramMobileCardInformation = [\n {\n image: instagramImages.instagramImage2,\n viewCount: 6,\n height: 200,\n width: 125,\n url: \"https://www.instagram.com/reel/C4nLa5MPEGE/?igsh=NnAya2hxbm54YWl4\",\n },\n {\n image: instagramImages.instagramImage1,\n viewCount: 33.7,\n height: 250,\n width: 154,\n url: \"https://www.instagram.com/reel/C3aAYJWPqzB/?igsh=MXBrbzdxbW93Nzk4aQ==\",\n },\n {\n image: instagramImages.instagramImage3,\n viewCount: 3.5,\n height: 200,\n width: 125,\n url: \"https://www.instagram.com/reel/C3kUYz6vIt_/?igsh=bDl6N3lnMmVrZ2I1\",\n },\n ];\n \n\n const [cardInfo, setCardInfo] = useState(instagramMobileCardInformation);\n\n const adjustDimensions = () => {\n const screenWidth = window.innerWidth;\n \n const widthFactor = 0.3;\n const newWidth = screenWidth * widthFactor;\n \n const adjustedCards = instagramMobileCardInformation.map(card => {\n const aspectRatio = card.height / card.width;\n const adjustedHeight = newWidth * aspectRatio;\n \n return {\n ...card,\n height: adjustedHeight,\n width: newWidth,\n };\n });\n \n setCardInfo(adjustedCards);\n };\n \n useEffect(() => {\n adjustDimensions();\n window.addEventListener('resize', adjustDimensions);\n \n return () => window.removeEventListener('resize', adjustDimensions);\n }, []);\n\n return (\n \n
\n \n
\n \n
\n \n
\n );\n};\n\nexport default InstagramBlock;\n","const Yul7Logo = ({ height = 24, width = 69 }) => {\n return (\n \n
\n Join the Yul7 Movement
\n\n Long-lasting, full coverage perfection.That's what 33 million people\n can't stop talking about.\n
\n\n {instagramCardInformation.map((item, index) => (\n
\n \n
\n onScroll(refs)} style={{cursor:\"pointer\"}}>\n \n
\n © {currentYear} YUL7
\n\n
\n \n );\n};\n\nexport default FooterBlock;\n","import Yul7Logo from \"../../../assets/icon-components/YulLogo/Yul7Logo\";\nimport \"./NavigationBar.css\";\n\nconst NavigationBar = ({ scrollToBlock, refs }) => {\n return (\n \n );\n};\n\nexport default NavigationBar;\n","const BurgerIcon = () => {\n return (\n Terms & Conditions
\nPrivacy Policy
\n\n \n
\n \n );\n};\n\nexport default MobileNavigationBar;\n","import \"./YulNavigation.css\";\n\nimport NavigationBar from \"../DesktopNavigationBar/NavigationBar\";\nimport MobileNavigationBar from \"../MobileNavigationBar/MobileNavigationBar\";\n\nconst YulNavigation = ({ onBurgerButtonClick, scrollToBlock, refs }) => {\n return (\n <>\n scrollTo(refs.homeRef)} className=\"mobile-nav-logo-container\">\n
\n \n
\n \n
\n \n );\n};\n\nexport default YulNavigation;\n","const YulLogoWhite = () => {\n return (\n \n
\n );\n};\n\nexport default MobileNavigationSingleButton;\n","import React, { useRef, useEffect } from \"react\";\nimport { motion, useAnimation, useMotionValue } from \"framer-motion\";\nimport YulLogoWhite from \"../../../assets/icon-components/YulLogoWhite/YulLogoWhite\";\nimport \"./MobileNavigationBottomSheet.css\";\nimport MobileNavigationSingleButton from \"./MobileNavigationSingleButton/MobileNavigationSingleButton\";\n\nconst MobileNavigationBottomSheet = ({\n isOpen,\n refs,\n onClose,\n scrollToBlock,\n}) => {\n const controls = useAnimation();\n const sheetRef = useRef(null);\n const y = useMotionValue(0);\n\n const navigationValues = [\n { name: \"BRAND\", ref: refs.brandRef },\n { name: \"PRODUCT\", ref: refs.productRef },\n { name: \"YUL7 IN ACTION\", ref: refs.instagramRef },\n { name: \"LET'S TALK\", ref: refs.contactRef },\n ];\n\n useEffect(() => {\n if (isOpen) {\n controls.start({ y: 0 });\n } else {\n controls.start({ y: \"100%\" });\n }\n }, [isOpen, controls]);\n\n useEffect(() => {\n const handleClickOutside = (event) => {\n if (\n sheetRef.current &&\n !sheetRef.current.contains(event.target) &&\n isOpen &&\n !event.target.closest(\".mobile-nav-burger-container\")\n ) {\n onClose();\n }\n };\n\n document.addEventListener(\"mousedown\", handleClickOutside);\n return () => {\n document.removeEventListener(\"mousedown\", handleClickOutside);\n };\n }, [isOpen, onClose]);\n\n const handleDrag = (event, info) => {\n if (info.offset.y >= 0) {\n y.set(info.offset.y);\n } else {\n y.set(0);\n }\n };\n\n const handleDragEnd = (event, info) => {\n if (info.offset.y > 120 || info.velocity.y > 500) {\n controls.start({ y: \"100%\" });\n onClose();\n } else {\n controls.start({ y: 0 });\n }\n };\n\n return (\n {buttonText}
\n\n scrollToBlock(refs.homeRef)}\n >\n
\n \n \n
\n \n {navigationValues.map((item, index) => (\n scrollToBlock(item.ref)}\n />\n ))}\n
\n \n \n );\n};\n\nexport default MobileNavigationBottomSheet;\n","import { useContext, useState, useEffect } from 'react';\nimport { motionValue } from './index.mjs';\nimport { MotionConfigContext } from '../context/MotionConfigContext.mjs';\nimport { useConstant } from '../utils/use-constant.mjs';\n\n/**\n * Creates a `MotionValue` to track the state and velocity of a value.\n *\n * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.\n *\n * ```jsx\n * export const MyComponent = () => {\n * const scale = useMotionValue(1)\n *\n * return \n
\n \n );\n};\n\nexport default LottieSecondSection;\n","import background from \"./cloud-background.png\";\nimport hand from \"./hand.png\";\nimport rosePetals from \"./rose-petals.png\";\nimport cloudLayer from \"./cloud-layer.png\";\nimport backgroundMobile from \"./cloud-background-mobile.png\";\nimport handMobile from \"./hand-mobile.png\";\nimport rosePetalsMobile from \"./rose-petals-mobile.png\";\nimport cloudLayerMobile from \"./cloud-layer-mobile.png\";\n\nimport test from \"../../assets/footer-images/footer-desktop.png\"\n\nexport const heroImages = {\n background,\n hand,\n rosePetals,\n cloudLayer,\n backgroundMobile,\n handMobile,\n rosePetalsMobile,\n cloudLayerMobile,\n test\n};\n","import React, { useEffect, useState } from \"react\";\nimport \"./HeroBlock.css\";\nimport { heroImages } from \"../../assets/hero-assets\";\nimport { useInView } from \"react-intersection-observer\";\nimport { useAnimation, motion, spring } from \"framer-motion\";\n\nconst HeroBlock = () => {\n const [isMobile, setIsMobile] = useState(false);\n const [ref, inView] = useInView({\n triggerOnce: false,\n threshold: 0.5,\n });\n\n const petalsControls = useAnimation();\n const handControls = useAnimation();\n const cloudControls = useAnimation();\n\n const springTransition = {\n type: \"spring\",\n stiffness: 100,\n damping: 65,\n mass: 1,\n delay: 0,\n };\n\n useEffect(() => {\n if (inView) {\n petalsControls.start({\n opacity: 1,\n scale: 1,\n transition: {\n ...springTransition,\n // duration: 1.5,\n ease: \"easeOut\",\n opacity: { duration: 1 },\n },\n });\n handControls.start({\n \n y: -18,\n opacity: 1,\n transition: {\n ...springTransition,\n // duration: 1.5,\n ease: \"easeOut\",\n },\n });\n cloudControls.start({\n scale: 1,\n opacity: 1,\n transition: {\n ...springTransition,\n // duration: 1.5,\n ease: \"easeOut\",\n },\n });\n } else {\n petalsControls.start({\n opacity: 0,\n scale: 1.2,\n transition: {\n duration: 1.5,\n ease: \"easeInOut\",\n },\n });\n handControls.start({\n y: 110,\n opacity: 1,\n transition: {\n ...springTransition,\n // duration: 1.5,\n ease: \"easeInOut\",\n },\n });\n cloudControls.start({\n scale: 1.2,\n opacity: 1,\n transition: {\n ...springTransition,\n // duration: 1.5,\n ease: \"easeInOut\",\n },\n });\n }\n }, [inView, petalsControls, handControls]);\n\n useEffect(() => {\n const checkScreenSize = () => {\n setIsMobile(window.matchMedia(\"(max-width: 750px)\").matches);\n };\n\n checkScreenSize();\n\n window.addEventListener(\"resize\", checkScreenSize);\n return () => window.removeEventListener(\"resize\", checkScreenSize);\n }, []);\n\n const getBackgroundImage = (desktopImage, mobileImage) => {\n return isMobile ? mobileImage : desktopImage;\n };\n\n return (\n \n Excitement begins with
\n
\n Excitement begins with
small things!
\n \n Through innovative products and inspiring experiences, we strive to\n make every day a celebration of beauty and self-love. Yul7 is\n dedicated to redefining the beauty industry by creating innovative\n tools and experiences that inspire joy and excitement even in the\n simplest things.\n
\n\n
\n \n
\n \n
\n \n
\n );\n};\n\nexport default HeroBlock;\n","const CloseIcon = () => {\n return (\n \n
\n \n
\n \n
\n \n
\n ROLL GLOW GO
\n\n
\n \n Confidence that lasts as long as you do\n
\n\n
\n \n );\n};\n\nconst InfoModalSingleLine = ({ title, body, number }) => {\n return (\n <>\n \n
\n \n \n
\n \n
\n {headerText}
\n\n {siteInformation.map((item, index) => {\n return (\n
\n \n
\n \n );\n};\n\nexport default SiteInfoModal;\n","import SiteInfoModal from \"../SiteInfoModal/SiteInfoModal\";\n\nconst PrivacyPolicyModal = ({ onCloseButtonClick, isOpen }) => {\n const privacyPolicyData = [\n {\n title: \"Introduction\",\n body: `YUL7 (\"we\", \"our\", \"us\") values your privacy and is committed to ensuring that your personal information is protected. We do not collect any personal information from users through our website.`,\n },\n {\n title: \"No Collection of Personal Information\",\n body: `YUL7 (\"we\", \"our\", \"us\") values your privacy and is committed to ensuring that your personal information is protected. We do not collect any personal information from users through our website.`,\n },\n {\n title: \"Contact Us\",\n body: `YUL7 (\"we\", \"our\", \"us\") values your privacy and is committed to ensuring that your personal information is protected. We do not collect any personal information from users through our website.`,\n },\n {\n title: \"Changes to This Policy\",\n body: `YUL7 (\"we\", \"our\", \"us\") values your privacy and is committed to ensuring that your personal information is protected. We do not collect any personal information from users through our website.`,\n },\n {\n title: \"Contact Information\",\n body: `For any questions or concerns regarding this Privacy Policy, please contact us at yul7_official@naver.com.`,\n },\n ];\n return (\n \n
\n {number}.
\n\n {title}{\" \"}\n {body}\n
\n\n
\n );\n};\n\nexport default MobileProductShowcaseSingle;\n","const YulUpwardsArrow = () => {\n return (\n \n \n
\n \n \n
\n \n
\n {cardText}
\n\n
\n );\n}\n\nexport default MobileProductShowcase;","import React, { useEffect } from \"react\";\nimport { motion, useAnimation } from \"framer-motion\";\nimport { useInView } from \"react-intersection-observer\";\nimport \"./ProductShowcaseAnimatedComponent.css\";\n// import productImage from \"../../assets/product-showcase-images/product-display-main-image.png\";\nimport productImage from \"../../assets/product-showcase-images/Second-Image-Test.png\"\nimport productImageBackdrop from \"../../assets/product-showcase-images/product-image-backdrop-updated.png\";\nimport YUL7PuffArrow from \"../../assets/product-showcase-images/YUL7Puff\";\nimport MiniYULPuffArrow from \"../../assets/product-showcase-images/MiniYUL7PuffArrow\";\n\n\nconst ProductShowcaseAnimatedComponent = () => {\n const controls = useAnimation();\n const [ref, inView] = useInView({\n triggerOnce: false,\n threshold: 0.2,\n });\n\n const springTransition = {\n type: \"spring\",\n stiffness: 100,\n damping: 65,\n mass: 1,\n delay: 0,\n };\n\n useEffect(() => {\n if (inView) {\n controls.start({\n scale: 1,\n opacity: 1,\n transition: { ...springTransition, ease: \"easeInOut\" },\n });\n } else {\n controls.start({\n scale: 1.1,\n opacity: 0.8,\n transition: { ...springTransition, ease: \"easeInOut\" },\n });\n }\n }, [controls, inView]);\n\n return (\n <>\n \n
\n \n );\n};\n\nexport default ProductShowcaseAnimatedComponent;\n","import \"./ProductShowcaseMainBlock.css\";\nimport ProductShowcaseAnimatedComponent from \"../../components/ProductShowcaseAnimatedComponent/ProductShowcaseAnimatedComponent\";\nimport MobileProductShowcase from \"../../components/MobileProductShowcase/MobileProductShowcase\";\nimport { useState, useEffect } from \"react\";\n\nconst ProductShowcaseMainBlock = () => {\n const [isMobile, setIsMobile] = useState(false);\n\n useEffect(() => {\n const handleResize = () => {\n setIsMobile(window.innerWidth <= 800);\n };\n\n window.addEventListener(\"resize\", handleResize);\n\n handleResize();\n\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n return (\n \n 
\n
\n {/* \n \n
*/}\n \n \n 
\n \n
\n \n
\n \n
\n \n
\n Mini YUL7 Puff
\n\n
\n \n
\n \n
\n \n
\n YUL7 Puff
\n\n
\n );\n};\n\nexport default ProductShowcaseMainBlock;\n","import \"./App.css\";\nimport ContactBlock from \"./blocks/ContactBlock/ContactBlock\";\nimport FeatureBlock from \"./blocks/FeatureBlock/FeatureBlock\";\nimport InstagramBlock from \"./blocks/InstagramBlock/InstagramBlock\";\nimport FooterBlock from \"./blocks/FooterBlock/FooterBlock\";\nimport YulNavigation from \"./components/Navigation/YulNavigation/YulNavigation\";\nimport MobileNavigationPopup from \"./components/Navigation/MobileNavigationPopup/MobileNavigationBottomSheet\";\nimport { useState, useRef, useCallback } from \"react\";\nimport LottieSecondSection from \"./blocks/LottieSecondSection/LottieSecondSection\";\nimport HeroBlock from \"./blocks/HeroBlock/HeroBlock\";\nimport PrivacyPolicyModal from \"./components/Modals/PrivacyPolicyModal/PrivacyPolicyModal\";\nimport TermsAndConditionModal from \"./components/Modals/TermsAndConditionsModal/TermsAndConditionsModal\";\nimport ProductShowcaseBlock from \"./components/ProductShowcaseImage/ProductShowcaseImage\";\nimport ProductShowcaseMainBlock from \"./blocks/ProductShowcaseMainBlock/ProductShowcaseMainBlock\";\n\nconst LandingPage = () => {\n // bottom sheet of mobile navigation handling\n const [isMobileBottomSheetOpen, setMobileBottomSheetOpen] = useState(false);\n\n const [isTermConditionsOpen, setIsTermConditionsOpen] = useState(false);\n const [isPrivacyPolicyOpen, setPrivacyPolicyOpen] = useState(false);\n\n const toggleNav = () => {\n setMobileBottomSheetOpen(!isMobileBottomSheetOpen);\n };\n\n const handlePrivacyModal = () => {\n setPrivacyPolicyOpen(!isPrivacyPolicyOpen);\n };\n const handleTermsAndConditionModal = () => {\n setIsTermConditionsOpen(!isTermConditionsOpen);\n };\n\n // handling the singlepage navigation\n const brandRef = useRef(null);\n const productRef = useRef(null);\n const instagramRef = useRef(null);\n const contactRef = useRef(null);\n const homeRef = useRef(null);\n\n const scrollToBlock = (ref) => {\n ref.current.scrollIntoView({ behavior: \"smooth\" });\n };\n const scrollToBlockMobile = useCallback((ref) => {\n if (ref.current) {\n const yOffset = ref === contactRef ? -50 : 0;\n const y =\n ref.current.getBoundingClientRect().top + window.pageYOffset + yOffset;\n window.scrollTo({ top: y, behavior: \"smooth\" });\n }\n setMobileBottomSheetOpen(false);\n }, []);\n\n const onCloseMobileNavigationBottomSheet = () => {\n setMobileBottomSheetOpen(false);\n };\n\n return (\n <>\n \n
\n \n
\n YUL7 ROLLER PUFF
\n\n
\n Your secret for Natural, Flawless and Long-lasting base makeup
\n\n
\n \n
\n \n
\n \n Experience the luxury of the Yul Seven Puff. Crafted with care by\n Korean artisans with over 30 years of experience, this puff offers\n smooth application and gentle care for your skin.\n
\n\n
\n\n \n \n YUL7 \n \n
\n );\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nconst root = ReactDOM.createRoot(document.getElementById('root'));\nroot.render(\n