@myelmut/design-system 0.1.47 → 0.1.48

package/src/components/Navigation/Tabs/Tabs.stories.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Tabs } from './Tabs';
+
+import { PlanCard } from '../../Cards/PlanCard/PlanCard';
+
+const meta = {
+    title: 'Components/Navigation/Tabs',
+    component: Tabs,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'padded',
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['default'],
+            description: 'Visual style variant of the tabs',
+        },
+        defaultActiveTab: {
+            control: 'text',
+            description: 'ID of the tab that should be active by default',
+        },
+        className: {
+            control: 'text',
+            description: 'Additional classes to apply to the tabs container',
+        },
+        tabClassName: {
+            control: 'text',
+            description: 'Additional classes to apply to tab buttons',
+        },
+        activeTabClassName: {
+            control: 'text',
+            description: 'Additional classes to apply to the active tab button',
+        },
+        contentClassName: {
+            control: 'text',
+            description: 'Additional classes to apply to the content area',
+        },
+    },
+
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Sample tab content for stories
+const sampleTabs = [
+    {
+        id: 'complete',
+        label: 'Elmut formule complète',
+        content: (
+            <PlanCard
+                title="Formule complète"
+                description="Uniquement du Elmut pour couvrir l'intégralité des besoins caloriques de Jackie la Fripouille, Shalvah, Max."
+                dailyAmount="300g/jour"
+                price="2,69€"
+                originalPrice="3,85€"
+                discountPercentage="-30%"
+                planImage="/images/trash/full-cat.png"
+                planImageAlt="Bol de nourriture pour chien"
+            />
+        ),
+    },
+    {
+        id: 'half',
+        label: 'Elmut demi pension',
+        content: (
+            <PlanCard
+                title="Demi pension"
+                description="Du Elmut pour couvrir 50% des besoins caloriques de votre animal, complété par vos croquettes habituelles."
+                dailyAmount="150g/jour"
+                price="1,35€"
+                originalPrice="1,93€"
+                discountPercentage="-30%"
+                planImage="/images/trash/full-cat.png"
+                planImageAlt="Demi-bol de nourriture pour chien"
+            />
+        ),
+    },
+];
+
+export const Default: Story = {
+    args: {
+        tabs: sampleTabs,
+        variant: 'default',
+        defaultActiveTab: 'complete',
+    },
+};
+
+export const SimpleTabs: Story = {
+    args: {
+        tabs: [
+            {
+                id: 'tab1',
+                label: 'Tab 1',
+                content: <div className="p-4">Content for Tab 1</div>,
+            },
+            {
+                id: 'tab2',
+                label: 'Tab 2',
+                content: <div className="p-4">Content for Tab 2</div>,
+            },
+            {
+                id: 'tab3',
+                label: 'Tab 3',
+                content: <div className="p-4">Content for Tab 3</div>,
+            },
+        ],
+        variant: 'default',
+        defaultActiveTab: 'tab1',
+    },
+};

package/src/components/Navigation/Tabs/Tabs.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import React, { useState } from 'react';
+
+import clsx from 'clsx';
+
+import { CheckRoundedIcon, Text } from '../../../components';
+
+export interface TabItem {
+    id: string;
+    label: string;
+    content: React.ReactNode;
+    disabled?: boolean;
+}
+
+export interface TabsProps {
+    tabs: TabItem[];
+    defaultActiveTab?: string;
+    onTabChange?: (tabId: string) => void;
+    className?: string;
+    tabClassName?: string;
+    activeTabClassName?: string;
+    contentClassName?: string;
+    variant?: 'default';
+}
+
+export const Tabs = ({ tabs, defaultActiveTab, onTabChange, className = '', tabClassName = '', activeTabClassName = '', contentClassName = '', variant = 'default' }: TabsProps) => {
+    const [activeTab, setActiveTab] = useState(defaultActiveTab || tabs[0]?.id);
+
+    const handleTabClick = (tabId: string) => {
+        if (tabs.find((tab) => tab.id === tabId)?.disabled) return;
+
+        setActiveTab(tabId);
+        onTabChange?.(tabId);
+    };
+
+    const activeTabContent = tabs.find((tab) => tab.id === activeTab)?.content;
+
+    const baseTabStyles = {
+        default: 'px-6 py-3 rounded-t-2xl transition-all duration-200 font-medium relative cursor-pointer',
+    };
+
+    const activeTabStyles = {
+        default: `bg-beige-dark text-claret-violet-dark cursor-pointer transition-all duration-200 hover:bg-beige-light`,
+    };
+
+    const inactiveTabStyles = {
+        default: `bg-claret-violet-dark/30 text-claret-violet-dark `,
+    };
+
+
+    return (
+        <div className={clsx('w-full', className)}>
+            {/* Tab Navigation */}
+            <div className={clsx('flex', variant === 'default' ? 'border-b border-gray-200' : 'gap-1')}>
+                {tabs.map((tab, index) => {
+                    const isActive = activeTab === tab.id;
+                    const isDisabled = tab.disabled;
+                    const isLastIndex = index === tabs.length - 1;
+
+                    return (
+                        <button
+                            key={tab.id}
+                            onClick={() => handleTabClick(tab.id)}
+                            disabled={isDisabled}
+                            className={clsx(
+                                "w-full",
+                                baseTabStyles[variant],
+                                {
+                                    [activeTabStyles[variant]]: isActive,
+                                    [inactiveTabStyles[variant]]: !isActive,
+                                },
+                                tabClassName,
+                                {
+                                    [activeTabClassName]: isActive,
+                                },
+                            )}
+                        >
+                            <div className="flex items-center gap-[16px]">
+                                <div className="w-6">{isActive ? <CheckRoundedIcon className="w-6" /> : null}</div>
+                                <Text size="xl">{tab.label}</Text>
+                            </div>
+                        </button>
+                    );
+                })}
+            </div>
+
+            {/* Tab Content */}
+            {activeTabContent ? <div className={clsx(contentClassName)}>{activeTabContent}</div> : null}
+        </div>
+    );
+};

package/src/components/Navigation/WizardNavbar/WizardNavbar.stories.tsx

@@ -0,0 +1,59 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+
+import { WizardNavbar } from './WizardNavbar';
+
+const meta = {
+    title: 'Components/Navigation/WizardNavbar',
+    component: WizardNavbar,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['default', 'form', 'payment'],
+        },
+        className: {
+            control: 'text',
+            description: 'Additional CSS classes.',
+        },
+        totalSteps: {
+            control: 'number',
+            description: 'Total number of steps.',
+        },
+        currentStep: {
+            control: 'number',
+            description: 'Current step.',
+        },
+    },
+    args: {
+        totalSteps: 8,
+        currentStep: 3,
+    },
+    globals: {
+        backgrounds: {
+            value: 'light',
+        },
+    },
+} satisfies Meta<typeof WizardNavbar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        variant: 'default',
+    },
+};
+
+export const Form: Story = {
+    args: {
+        variant: 'form',
+    },
+};
+
+export const Payment: Story = {
+    args: {
+        variant: 'payment',
+    },
+};

package/src/components/Navigation/WizardNavbar/WizardNavbar.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import clsx from 'clsx';
+import { useTranslation } from 'react-i18next';
+
+import { Banner, Button, Logo, Stepper, Text } from '../../../components';
+
+export type WizardNavbarProps = {
+    variant: 'default' | 'form' | 'payment';
+    totalSteps?: number;
+    currentStep?: number;
+    className?: string;
+};
+
+const variantStyles = {
+    default: 'bg-beige-light text-claret-violet-dark pt-20 md:pt-9.5 pb-6',
+    form: 'bg-beige-light text-claret-violet-dark pt-5',
+    payment: 'bg-claret-violet-dark text-beige-light pt-5',
+};
+
+const containerStyles = {
+    default: 'justify-center ',
+    form: '',
+    payment: 'justify-center',
+};
+
+const tagStyles = {
+    default: 'hidden',
+    form: 'bg-claret-violet-dark/30',
+    payment: 'bg-beige-light/30',
+};
+
+const TagDesktop = ({ variant, totalSteps, currentStep, className }: { variant: WizardNavbarProps['variant']; totalSteps: number; currentStep: number; className?: string }) => {
+    const { t } = useTranslation('design');
+
+    return (
+        <div className={clsx('flex items-center gap-4 max-md:invisible max-md:w-21', className)}>
+            <Text size="legend">{t('wizard.myPet')}</Text>
+            <Text size="button" className={clsx('min-w-9 rounded-full p-1.5 text-center leading-none', tagStyles[variant])}>
+                {currentStep}/{totalSteps}
+            </Text>
+        </div>
+    );
+};
+
+const TagMobile = ({ variant, totalSteps, currentStep, className }: { variant: WizardNavbarProps['variant']; totalSteps: number; currentStep: number; className?: string }) => {
+    const { t } = useTranslation('design');
+
+    return (
+        <div className={clsx('mx-auto mt-6 flex h-6 w-fit items-center gap-2.5 rounded-full px-1.5 md:hidden', tagStyles[variant], className)}>
+            <Text size="md" className={clsx('text-center leading-none max-md:not-italic')}>
+                {currentStep}/{totalSteps}
+            </Text>
+            <Text size="md" className="leading-none">
+                {t('wizard.myPet')}
+            </Text>
+        </div>
+    );
+};
+
+//todo update button actions or links
+export const WizardNavbar = ({ variant = 'default', totalSteps = 8, currentStep = 1, className }: WizardNavbarProps) => {
+    const { t } = useTranslation('design');
+
+    return (
+        <nav className={clsx('fixed top-0 right-0 left-0 z-10', variantStyles[variant], className)}>
+            <div className={clsx('container mx-auto flex items-center', containerStyles[variant])}>
+                <Button as="a" href="/" variant="terciary" color={variant === 'payment' ? 'light' : 'dark'} className={clsx(variant === 'default' && 'hidden')}>
+                    {t('navigation.back')}
+                </Button>
+                <Logo variant={variant === 'payment' ? 'secondary' : 'primary'} className="mx-auto w-28" />
+                {variant != 'default' && <TagDesktop variant={variant} totalSteps={totalSteps} currentStep={currentStep} />}
+            </div>
+            {variant != 'default' && (
+                <div className="container mx-auto px-6 pb-5 md:px-0">
+                    <TagMobile variant={variant} totalSteps={totalSteps} currentStep={currentStep} />
+                    {variant === 'form' && <Stepper totalSteps={totalSteps} currentStep={currentStep} className="mx-auto mt-6 w-full md:mt-3.5 md:w-3/4" />}
+                </div>
+            )}
+            {variant === 'payment' && <Banner content={t('wizard.promotionBanner')} className="top-full" />}
+        </nav>
+    );
+};

package/src/components/Navigation/index.ts

@@ -0,0 +1,11 @@
+import { Footer } from './Footer/Footer';
+import { FooterTips } from './FooterTips/FooterTips';
+import { MobileMenu } from './MobileMenu/MobileMenu';
+import { menuNavLinks, Navbar } from './Navbar/Navbar';
+import { NavbarDesktop } from './NavbarDesktop/NavbarDesktop';
+import { NavbarMobile } from './NavbarMobile/NavbarMobile';
+import { Stepper } from './Stepper/Stepper';
+import { Tabs } from './Tabs/Tabs';
+import { WizardNavbar } from './WizardNavbar/WizardNavbar';
+
+export { MobileMenu, NavbarDesktop, NavbarMobile, Navbar, menuNavLinks, WizardNavbar, Stepper, FooterTips, Footer, Tabs };

package/src/components/SVG/Facebook.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 6 13" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.57593 3.95036H3.67694V2.69668C3.67694 2.22587 3.98694 2.1161 4.20528 2.1161C4.42312 2.1161 5.54537 2.1161 5.54537 2.1161V0.0463135L3.69979 0.0390625C1.65103 0.0390625 1.18479 1.58278 1.18479 2.57066V3.95036H-6.10352e-05V6.08315H1.18479C1.18479 8.82028 1.18479 12.1182 1.18479 12.1182H3.67694C3.67694 12.1182 3.67694 8.78778 3.67694 6.08315H5.35858L5.57593 3.95036Z"/>
+</svg>

package/src/components/SVG/Instagram.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.7955 4.03931C10.7955 4.10896 10.7955 4.10896 10.7955 4.03931C11.2831 4.03931 11.6314 3.62137 11.6314 3.20343C11.6314 2.71584 11.2135 2.36755 10.7955 2.36755C10.308 2.36755 9.95966 2.78549 9.95966 3.20343C9.89001 3.69102 10.308 4.03931 10.7955 4.03931Z"/>
+<path d="M6.96452 10.4477C8.84525 10.4477 10.4473 8.91526 10.4473 6.96488C10.4473 5.08415 8.9149 3.48206 6.96452 3.48206C5.01414 3.48206 3.4817 5.0145 3.4817 6.96488C3.4817 8.91526 5.01414 10.4477 6.96452 10.4477ZM6.96452 4.73587C8.21834 4.73587 9.26318 5.78072 9.26318 7.03453C9.26318 8.28835 8.21834 9.3332 6.96452 9.3332C5.71071 9.3332 4.66586 8.28835 4.66586 7.03453C4.66586 5.78072 5.71071 4.73587 6.96452 4.73587Z"/>
+<path d="M-0.000930786 4.31809V9.68163C-0.000930786 12.05 1.94945 14.0003 4.31776 14.0003H9.68131C12.0496 14.0003 14 12.05 14 9.68163V4.31809C14 1.94977 12.0496 -0.000610352 9.68131 -0.000610352H4.31776C1.87979 0.0690461 -0.000930786 1.94977 -0.000930786 4.31809ZM4.31776 1.25321H9.68131C11.4227 1.25321 12.8158 2.64633 12.8158 4.38774V9.75129C12.8158 11.4927 11.4227 12.8858 9.68131 12.8858H4.31776C2.57635 12.8858 1.18323 11.4927 1.18323 9.75129V4.38774C1.18323 2.64633 2.57635 1.25321 4.31776 1.25321Z"/>
+</svg>

package/src/components/SVG/Linkedin.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 11 11" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.4314 3.16846H0.20015V10.4997H2.4314V3.16846Z"/>
+<path d="M7.85126 3.16846C6.5753 3.16846 6.22149 3.58666 5.9378 4.12471V3.16846H3.70655V10.4997H5.9378V6.35596C5.9378 5.71846 5.9378 5.08096 7.05343 5.08096C8.16905 5.08096 8.16905 5.71846 8.16905 6.35596V10.4997H10.4003V6.35596C10.4003 4.44346 10.0816 3.16846 7.85126 3.16846Z"/>
+<path d="M1.31577 2.53191C1.93192 2.53191 2.4314 2.03243 2.4314 1.41628C2.4314 0.800141 1.93192 0.300659 1.31577 0.300659C0.699632 0.300659 0.20015 0.800141 0.20015 1.41628C0.20015 2.03243 0.699632 2.53191 1.31577 2.53191Z"/>
+</svg>

package/src/components/SVG/Tiktok.svg

@@ -0,0 +1,7 @@
+<svg viewBox="0 0 12 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.3226 5.90273V3.62555C8.34598 3.49986 8.25022 0.794932 8.25022 0.540759V0.521606H5.94949V9.39052C5.94924 9.77378 5.82814 10.1472 5.60341 10.4576C5.37868 10.7681 5.06178 10.9998 4.69778 11.1197C4.33378 11.2397 3.94123 11.2418 3.57597 11.1257C3.21071 11.0097 2.89134 10.7814 2.6633 10.4734C2.43526 10.1654 2.31016 9.79328 2.3058 9.41005C2.30144 9.02682 2.41804 8.65198 2.63902 8.33885C2.85999 8.02572 3.17409 7.79025 3.53662 7.66593C3.89915 7.54162 4.29165 7.53479 4.65828 7.64643V5.29782C4.48202 5.27521 4.30449 5.26388 4.12679 5.26391C3.31062 5.26391 2.51278 5.50593 1.83416 5.95937C1.15554 6.41281 0.626624 7.05729 0.31429 7.81134C0.00195587 8.56538 -0.079765 9.3951 0.0794615 10.1956C0.238688 10.9961 0.63171 11.7314 1.20883 12.3085C1.78595 12.8856 2.52124 13.2786 3.32173 13.4379C4.12221 13.5971 4.95194 13.5154 5.70598 13.203C6.46002 12.8907 7.10451 12.3618 7.55795 11.6832C8.01139 11.0045 8.25341 10.2067 8.25341 9.39052C8.25341 9.33267 8.25341 9.27521 8.24942 9.21815V4.85092C9.3088 5.82013 11.3226 5.90273 11.3226 5.90273Z" fill="#F7C8CC"/>
+<path d="M12.0002 6.46508V4.18671C9.02313 4.06102 8.92777 1.35609 8.92777 1.10192V1.08276H6.62704V9.95168C6.62687 10.335 6.50584 10.7084 6.28117 11.0189C6.05649 11.3294 5.73961 11.5612 5.37562 11.6812C5.01162 11.8012 4.61905 11.8033 4.25376 11.6874C3.88846 11.5714 3.56905 11.3431 3.34097 11.0351C3.11288 10.7271 2.98774 10.355 2.98335 9.97176C2.97896 9.58851 3.09554 9.21365 3.31651 8.90049C3.53748 8.58733 3.85158 8.35184 4.21412 8.22751C4.57666 8.10318 4.96918 8.09634 5.33583 8.20798V5.85898C5.15914 5.83685 4.98121 5.82606 4.80314 5.82666C3.98696 5.8269 3.18917 6.06916 2.51068 6.52281C1.83218 6.97647 1.30345 7.62113 0.991345 8.37529C0.679242 9.12944 0.597785 9.95921 0.757276 10.7597C0.916767 11.5601 1.31004 12.2953 1.88737 12.8722C2.46469 13.4492 3.20014 13.8419 4.00069 14.0009C4.80125 14.1598 5.63097 14.0778 6.38491 13.7652C7.13885 13.4526 7.78316 12.9234 8.23636 12.2446C8.68955 11.5658 8.93127 10.7679 8.93096 9.95168C8.93096 9.89383 8.93096 9.83637 8.92697 9.77931V5.41208C9.98635 6.38129 12.0002 6.46508 12.0002 6.46508Z" fill="#F7EFDC"/>
+<path d="M8.30717 1.08276C8.4181 1.68687 8.7421 2.63134 9.68657 3.18398C8.96475 2.34325 8.92844 1.25833 8.92844 1.10192V1.08276H8.30717Z" fill="#F7EFDC"/>
+<path d="M11.9998 6.46487V4.18649C11.7719 4.17814 11.5451 4.15145 11.3215 4.10669V5.90026C11.3215 5.90026 9.30766 5.81767 8.24907 4.84846V9.21449C8.25147 9.27155 8.25307 9.329 8.25307 9.38686C8.25296 10.1335 8.05033 10.8661 7.66676 11.5066C7.28318 12.1471 6.73303 12.6716 6.07491 13.0242C5.4168 13.3767 4.67537 13.5442 3.92961 13.5086C3.18385 13.4731 2.4617 13.2359 1.84009 12.8224C2.41176 13.4128 3.14669 13.819 3.95071 13.989C4.75474 14.159 5.59121 14.0851 6.35294 13.7767C7.11467 13.4683 7.76695 12.9394 8.2262 12.2579C8.68544 11.5764 8.93071 10.7733 8.93059 9.95147C8.93059 9.89361 8.93059 9.83615 8.9266 9.77909V5.41187C9.98599 6.38108 11.9998 6.46487 11.9998 6.46487Z" fill="#F7EFDC"/>
+<path d="M4.65799 7.64316C4.21868 7.50917 3.74498 7.54594 3.3316 7.74611C2.91823 7.94628 2.59564 8.2951 2.42832 8.72284C2.26101 9.15057 2.26131 9.62569 2.42916 10.0532C2.597 10.4807 2.92003 10.8292 3.33366 11.0288C3.10762 10.72 2.98446 10.348 2.98163 9.96536C2.9788 9.58271 3.09644 9.20888 3.31789 8.89682C3.53934 8.58475 3.85336 8.35028 4.21548 8.22661C4.5776 8.10294 4.96945 8.09635 5.33552 8.20776V5.85876C5.15883 5.83663 4.9809 5.82584 4.80283 5.82644C4.75375 5.82644 4.70547 5.82644 4.65679 5.82923L4.65799 7.64316Z" fill="#F7EFDC"/>
+</svg>

package/src/components/SVG/arrow-plain.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 19 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.93969 12.0542C8.74031 13.0526 10.2597 13.0526 11.0603 12.0542L17.7183 3.75117C18.7681 2.44202 17.8361 0.500002 16.158 0.500002H2.84203C1.16395 0.500002 0.231937 2.44202 1.28172 3.75117L7.93969 12.0542Z" fill="currentColor"/>
+</svg>

package/src/components/SVG/arrow.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1.5L8 8.5L15 1.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/SVG/calendar.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.75 0.75C5.75 0.335786 5.41421 0 5 0C4.58579 0 4.25 0.335786 4.25 0.75V2.32926C2.81067 2.44451 1.86577 2.72737 1.17157 3.42157C0.477375 4.11577 0.194513 5.06067 0.0792572 6.5H19.9207C19.8055 5.06067 19.5226 4.11577 18.8284 3.42157C18.1342 2.72737 17.1893 2.44451 15.75 2.32926V0.75C15.75 0.335786 15.4142 0 15 0C14.5858 0 14.25 0.335786 14.25 0.75V2.2629C13.5847 2.25 12.839 2.25 12 2.25H8C7.16097 2.25 6.41527 2.25 5.75 2.2629V0.75Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 10.25V12.25C20 16.0212 20 17.9069 18.8284 19.0784C17.6569 20.25 15.7712 20.25 12 20.25H8C4.22876 20.25 2.34315 20.25 1.17157 19.0784C0 17.9069 0 16.0212 0 12.25V10.25C0 9.41096 0 8.66527 0.012902 8H19.9871C20 8.66527 20 9.41096 20 10.25ZM14.5 16.25C15.3284 16.25 16 15.5784 16 14.75C16 13.9216 15.3284 13.25 14.5 13.25C13.6716 13.25 13 13.9216 13 14.75C13 15.5784 13.6716 16.25 14.5 16.25Z" fill="currentColor"/>
+</svg>

package/src/components/SVG/check-circle.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/>
+<path d="M8.5 12.5L10.5 14.5L15.5 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/SVG/check-rounded.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1ZM16.7682 10.1402C17.1218 9.7159 17.0645 9.08534 16.6402 8.73177C16.2159 8.37821 15.5853 8.43553 15.2318 8.85981L10.9328 14.0186L8.70711 11.7929C8.31658 11.4024 7.68342 11.4024 7.29289 11.7929C6.90237 12.1834 6.90237 12.8166 7.29289 13.2071L10.2929 16.2071C10.4916 16.4058 10.7646 16.5117 11.0453 16.499C11.326 16.4862 11.5884 16.356 11.7682 16.1402L16.7682 10.1402Z" fill="currentColor"/>
+</svg>

package/src/components/SVG/check.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 9 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.28033 0.21967C8.57322 0.512563 8.57322 0.987437 8.28033 1.28033L3.28033 6.28033C2.98744 6.57322 2.51256 6.57322 2.21967 6.28033L0.21967 4.28033C-0.0732233 3.98744 -0.0732233 3.51256 0.21967 3.21967C0.512563 2.92678 0.987437 2.92678 1.28033 3.21967L2.75 4.68934L4.98483 2.4545L7.21967 0.21967C7.51256 -0.0732233 7.98744 -0.0732233 8.28033 0.21967Z" fill="currentColor"/>
+</svg>

package/src/components/SVG/cross-rounded.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM6.96963 6.96965C7.26252 6.67676 7.73739 6.67676 8.03029 6.96965L9.99997 8.93933L11.9696 6.96967C12.2625 6.67678 12.7374 6.67678 13.0303 6.96967C13.3232 7.26256 13.3232 7.73744 13.0303 8.03033L11.0606 9.99999L13.0303 11.9696C13.3232 12.2625 13.3232 12.7374 13.0303 13.0303C12.7374 13.3232 12.2625 13.3232 11.9696 13.0303L9.99997 11.0607L8.03031 13.0303C7.73742 13.3232 7.26254 13.3232 6.96965 13.0303C6.67676 12.7374 6.67676 12.2625 6.96965 11.9697L8.93931 9.99999L6.96963 8.03031C6.67673 7.73742 6.67673 7.26254 6.96963 6.96965Z" fill="currentColor"/>
+</svg>

package/src/components/SVG/cross.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.68628 12.6509L13 1.33723" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+<path d="M1.68628 1.65094L13 12.9646" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/src/components/SVG/dollar-rounded.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.25 7.84748C10.3141 8.10339 9.75 8.82154 9.75 9.5C9.75 10.1785 10.3141 10.8966 11.25 11.1525V7.84748Z" fill="currentColor"/>
+<path d="M12.75 12.8475V16.1525C13.6859 15.8966 14.25 15.1785 14.25 14.5C14.25 13.8215 13.6859 13.1034 12.75 12.8475Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM12 5.25C12.4142 5.25 12.75 5.58579 12.75 6V6.31673C14.3804 6.60867 15.75 7.83361 15.75 9.5C15.75 9.91421 15.4142 10.25 15 10.25C14.5858 10.25 14.25 9.91421 14.25 9.5C14.25 8.82154 13.6859 8.10339 12.75 7.84748V11.3167C14.3804 11.6087 15.75 12.8336 15.75 14.5C15.75 16.1664 14.3804 17.3913 12.75 17.6833V18C12.75 18.4142 12.4142 18.75 12 18.75C11.5858 18.75 11.25 18.4142 11.25 18V17.6833C9.61957 17.3913 8.25 16.1664 8.25 14.5C8.25 14.0858 8.58579 13.75 9 13.75C9.41421 13.75 9.75 14.0858 9.75 14.5C9.75 15.1785 10.3141 15.8966 11.25 16.1525V12.6833C9.61957 12.3913 8.25 11.1664 8.25 9.5C8.25 7.83361 9.61957 6.60867 11.25 6.31673V6C11.25 5.58579 11.5858 5.25 12 5.25Z" fill="currentColor"/>
+</svg>

package/src/components/SVG/double-arrow.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 50 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M47.6872 0.790522C47.5713 0.250519 47.0397 -0.0933466 46.4997 0.0224767L37.6998 1.90993C37.1598 2.02575 36.8159 2.5574 36.9318 3.09741C37.0476 3.63741 37.5792 3.98127 38.1193 3.86545L45.9414 2.18772L47.6191 10.0098C47.7349 10.5498 48.2666 10.8937 48.8066 10.7779C49.3466 10.662 49.6904 10.1304 49.5746 9.59038L47.6872 0.790522ZM1.9095 68.9636C2.02533 69.5036 2.55698 69.8474 3.09698 69.7316L11.8968 67.8442C12.4368 67.7283 12.7807 67.1967 12.6649 66.6567C12.5491 66.1167 12.0174 65.7728 11.4774 65.8886L3.65531 67.5664L1.97758 59.7443C1.86175 59.2043 1.3301 58.8604 0.790098 58.9762C0.250095 59.092 -0.0937705 59.6237 0.0220529 60.1637L1.9095 68.9636ZM46.7094 1.00024L45.8697 0.457149L2.04759 68.2108L2.88726 68.7538L3.72694 69.2969L47.5491 1.54333L46.7094 1.00024Z" fill="currentColor"/>
+</svg>

package/src/components/SVG/filters.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.9585 11.75C16.5443 11.75 16.2085 11.4142 16.2085 11L16.2085 2C16.2085 1.58579 16.5443 1.25 16.9585 1.25C17.3727 1.25 17.7085 1.58579 17.7085 2L17.7085 11C17.7085 11.4142 17.3727 11.75 16.9585 11.75Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.99997 5.75C9.07104 5.75 10.75 7.42893 10.75 9.5C10.75 11.5711 9.07104 13.25 6.99997 13.25C4.92891 13.25 3.24998 11.5711 3.24998 9.5C3.24998 7.42893 4.92891 5.75 6.99997 5.75ZM9.24997 9.5C9.24997 8.25736 8.24262 7.25 6.99997 7.25C5.75733 7.25 4.74998 8.25736 4.74998 9.5C4.74998 10.7426 5.75733 11.75 6.99997 11.75C8.24262 11.75 9.24997 10.7426 9.24997 9.5Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17 18.25C19.071 18.25 20.75 16.5711 20.75 14.5C20.75 12.4289 19.071 10.75 17 10.75C14.9289 10.75 13.25 12.4289 13.25 14.5C13.25 16.5711 14.9289 18.25 17 18.25ZM19.25 14.5C19.25 15.7426 18.2426 16.75 17 16.75C15.7573 16.75 14.75 15.7426 14.75 14.5C14.75 13.2574 15.7573 12.25 17 12.25C18.2426 12.25 19.25 13.2574 19.25 14.5Z" fill="currentColor"/>
+<path d="M6.2085 13C6.2085 12.5858 6.54428 12.25 6.9585 12.25C7.37271 12.25 7.7085 12.5858 7.7085 13V22C7.7085 22.4142 7.37271 22.75 6.9585 22.75C6.54428 22.75 6.2085 22.4142 6.2085 22V13Z" fill="currentColor"/>
+<path d="M16.9585 22.75C16.5443 22.75 16.2085 22.4142 16.2085 22V18C16.2085 17.5858 16.5443 17.25 16.9585 17.25C17.3727 17.25 17.7085 17.5858 17.7085 18V22C17.7085 22.4142 17.3727 22.75 16.9585 22.75Z" fill="currentColor"/>
+<path d="M6.2085 2C6.2085 1.58579 6.54428 1.25 6.9585 1.25C7.37271 1.25 7.7085 1.58579 7.7085 2V6C7.7085 6.41421 7.37271 6.75 6.9585 6.75C6.54428 6.75 6.2085 6.41421 6.2085 6V2Z" fill="currentColor"/>
+</svg>

package/src/components/SVG/hat-cook.svg

@@ -0,0 +1,4 @@
+<svg  viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 8C0 5.23858 2.23858 3 5 3C5.25052 3 5.49673 3.01842 5.73736 3.05399C6.33961 1.27806 8.02055 0 10 0C11.9794 0 13.6604 1.27806 14.2626 3.05399C14.5033 3.01842 14.7495 3 15 3C17.7614 3 20 5.23858 20 8C20 10.0503 18.7659 11.8124 17 12.584L17 15.25H3V12.584C1.2341 11.8124 0 10.0503 0 8ZM9.04286 11.6693C8.16485 11.0251 7 9.98486 7 9.00044C7 7.32721 8.65005 6.7025 10 7.99506C11.35 6.7025 13 7.32721 13 9.00043C13 9.98488 11.8352 11.0251 10.9571 11.6693C10.5374 11.9773 10.3275 12.1313 10 12.1313C9.67249 12.1313 9.46261 11.9773 9.04286 11.6693Z" fill="currentColor"/>
+<path d="M3.58579 19.4142C3.08343 18.9119 3.01188 18.1469 3.00169 16.75H16.9983C16.9881 18.1469 16.9166 18.9119 16.4142 19.4142C15.8284 20 14.8856 20 13 20H7C5.11438 20 4.17157 20 3.58579 19.4142Z" fill="currentColor"/>
+</svg>

package/src/components/SVG/home-hero-shape-mobile.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 320 248" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
+<path d="M320 248C319.064 245.878 320 72.5001 320 9.76575C276.096 2.6226 223.055 0.000113595 151.741 0.000107361C82.7763 0.000101332 34.8277 5.57396 -9.96192e-06 12.8706C-9.96192e-06 12.8706 -1.88904e-05 115 0 248L320 248Z" fill="#802948"/>
+</svg>

package/src/components/SVG/home-hero-shape-small.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 641 164" fill="none" xmlns="http://www.w3.org/2000/svg" >
+<path d="M641 163.5C630.623 139.904 618.387 121.021 607.079 104.736C590.917 81.4347 577.132 66.7815 549.799 49.4857C488.004 10.5702 438.093 0.00062313 314.74 0.000612347C191.388 0.000601563 158.351 24.0224 134.108 32.1899C68.5206 53.9084 23.2739 103.95 0.777588 163.5L641 163.5Z" fill="#671A36"/>
+</svg>

package/src/components/SVG/home-hero-shape.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 1512 549" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
+<path d="M1830 549C1795.18 469.766 1754.13 406.361 1716.19 351.68C1661.97 273.439 1615.72 224.237 1524.01 166.161C1316.69 35.4907 1149.23 0.000123591 735.372 8.741e-05C321.513 5.12294e-05 210.672 80.6606 129.336 108.085C-90.7166 181.012 -242.523 349.042 -318 549L1830 549Z" fill="#802948"/>
+</svg>

package/src/components/SVG/index.ts

@@ -0,0 +1,75 @@
+'use client';
+
+import { ReactComponent as ArrowPlainIcon } from './arrow-plain.svg';
+import { ReactComponent as ArrowIcon } from './arrow.svg';
+import { ReactComponent as CalendarIcon } from './calendar.svg';
+import { ReactComponent as CheckCircleIcon } from './check-circle.svg';
+import { ReactComponent as CheckRoundedIcon } from './check-rounded.svg';
+import { ReactComponent as CheckIcon } from './check.svg';
+import { ReactComponent as CrossRoundedIcon } from './cross-rounded.svg';
+import { ReactComponent as CrossIcon } from './cross.svg';
+import { ReactComponent as DollarRoundedIcon } from './dollar-rounded.svg';
+import { ReactComponent as DoubleArrowIcon } from './double-arrow.svg';
+import { ReactComponent as FacebookIcon } from './Facebook.svg';
+import { ReactComponent as FiltersIcon } from './filters.svg';
+import { ReactComponent as HatCookIcon } from './hat-cook.svg';
+import { ReactComponent as HomeHeroShapeMobile } from './home-hero-shape-mobile.svg';
+import { ReactComponent as HomeHeroShapeSmall } from './home-hero-shape-small.svg';
+import { ReactComponent as HomeHeroShape } from './home-hero-shape.svg';
+import { ReactComponent as InfoIcon } from './info.svg';
+import { ReactComponent as InstagramIcon } from './Instagram.svg';
+import { ReactComponent as LinkedinIcon } from './Linkedin.svg';
+import { ReactComponent as MagicWandIcon } from './magic-wand.svg';
+import { ReactComponent as MenuIcon } from './menu.svg';
+import { ReactComponent as MinusIcon } from './minus.svg';
+import { ReactComponent as MuteIcon } from './mute.svg';
+import { ReactComponent as PauseIcon } from './pause.svg';
+import { ReactComponent as PlayIcon } from './play.svg';
+import { ReactComponent as PlusIcon } from './plus.svg';
+import { ReactComponent as PolaroidThreadIcon } from './polaroid-thread.svg';
+import { ReactComponent as ProfilIcon } from './profil.svg';
+import { ReactComponent as QuoteIcon } from './quote.svg';
+import { ReactComponent as RecipeBgShapeIcon } from './recipe-bg-shape.svg';
+import { ReactComponent as StarIcon } from './star.svg';
+import { ReactComponent as SubtractIcon } from './subtract.svg';
+import { ReactComponent as TiktokIcon } from './Tiktok.svg';
+import { ReactComponent as TrustpilotIcon } from './trustpilot.svg';
+import { ReactComponent as UnmuteIcon } from './unmute.svg';
+
+export {
+    FacebookIcon,
+    InstagramIcon,
+    LinkedinIcon,
+    TiktokIcon,
+    ArrowIcon,
+    ArrowPlainIcon,
+    FiltersIcon,
+    HatCookIcon,
+    CheckIcon,
+    CrossRoundedIcon,
+    MinusIcon,
+    PlusIcon,
+    QuoteIcon,
+    PolaroidThreadIcon,
+    MenuIcon,
+    ProfilIcon,
+    CrossIcon,
+    InfoIcon,
+    CalendarIcon,
+    MagicWandIcon,
+    SubtractIcon,
+    TrustpilotIcon,
+    HomeHeroShape,
+    HomeHeroShapeSmall,
+    HomeHeroShapeMobile,
+    MuteIcon,
+    UnmuteIcon,
+    PlayIcon,
+    PauseIcon,
+    StarIcon,
+    RecipeBgShapeIcon,
+    CheckRoundedIcon,
+    CheckCircleIcon,
+    DollarRoundedIcon,
+    DoubleArrowIcon,
+};

package/src/components/SVG/info.svg

@@ -0,0 +1,3 @@
+<svg  viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM8 12.6C8.33137 12.6 8.6 12.3314 8.6 12V7.2C8.6 6.86863 8.33137 6.6 8 6.6C7.66863 6.6 7.4 6.86863 7.4 7.2V12C7.4 12.3314 7.66863 12.6 8 12.6ZM8 4C8.44183 4 8.8 4.35817 8.8 4.8C8.8 5.24183 8.44183 5.6 8 5.6C7.55817 5.6 7.2 5.24183 7.2 4.8C7.2 4.35817 7.55817 4 8 4Z" fill="currentColor"/>
+</svg>

package/src/components/SVG/magic-wand.svg

@@ -0,0 +1,9 @@
+<svg  viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.5">
+<path d="M1.16674 1.55329C0.277754 2.50153 0.277754 4.03893 1.16674 4.98717L2.42023 6.32421C2.42964 6.3126 2.43951 6.30127 2.44985 6.29025L5.60778 2.92183C5.61808 2.91084 5.62867 2.90033 5.63952 2.89032L4.38604 1.55329C3.49705 0.605045 2.05572 0.605045 1.16674 1.55329Z" fill="currentColor"/>
+<path d="M6.47469 3.78115C6.4653 3.79273 6.45546 3.80402 6.44515 3.81501L3.28722 7.18344C3.27689 7.19446 3.26626 7.20499 3.25538 7.21503L10.8246 15.2888C11.7136 16.2371 13.155 16.2371 14.0439 15.2888C14.9329 14.3406 14.9329 12.8032 14.0439 11.8549L6.47469 3.78115Z" fill="currentColor"/>
+<path d="M10.8422 0.258686C10.9693 -0.0862283 11.4253 -0.0862286 11.5523 0.258685L11.8921 1.18103C11.9309 1.28634 12.0087 1.36969 12.1071 1.41122L12.9686 1.77499C13.2908 1.91102 13.2908 2.39916 12.9686 2.53519L12.1071 2.89896C12.0087 2.94049 11.9309 3.02385 11.8921 3.12915L11.5523 4.0515C11.4253 4.39641 10.9693 4.39641 10.8422 4.0515L10.5025 3.12915C10.4637 3.02385 10.3858 2.94049 10.2875 2.89896L9.42593 2.53519C9.10376 2.39916 9.10376 1.91102 9.42593 1.77499L10.2875 1.41122C10.3858 1.36969 10.4637 1.28634 10.5025 1.18103L10.8422 0.258686Z" fill="currentColor"/>
+<path d="M13.8953 6.00375C14.0224 5.65884 14.4783 5.65884 14.6054 6.00375L14.7292 6.34004C14.768 6.44535 14.8459 6.5287 14.9443 6.57024L15.2584 6.70287C15.5805 6.8389 15.5805 7.32704 15.2584 7.46307L14.9443 7.5957C14.8459 7.63723 14.768 7.72059 14.7292 7.82589L14.6054 8.16219C14.4783 8.5071 14.0224 8.5071 13.8953 8.16219L13.7714 7.82589C13.7326 7.72059 13.6548 7.63723 13.5564 7.5957L13.2423 7.46307C12.9201 7.32704 12.9201 6.8389 13.2423 6.70287L13.5564 6.57024C13.6548 6.5287 13.7326 6.44535 13.7714 6.34004L13.8953 6.00375Z" fill="currentColor"/>
+<path d="M2.18412 11.2061C2.31118 10.8611 2.76713 10.8611 2.89419 11.2061L3.01808 11.5423C3.05687 11.6477 3.13473 11.731 3.23309 11.7725L3.54721 11.9052C3.86937 12.0412 3.86937 12.5293 3.54721 12.6654L3.23309 12.798C3.13473 12.8395 3.05687 12.9229 3.01808 13.0282L2.89419 13.3645C2.76713 13.7094 2.31118 13.7094 2.18412 13.3645L2.06024 13.0282C2.02144 12.9229 1.94358 12.8395 1.84522 12.798L1.53111 12.6654C1.20894 12.5293 1.20894 12.0412 1.53111 11.9052L1.84522 11.7725C1.94358 11.731 2.02144 11.6477 2.06024 11.5423L2.18412 11.2061Z" fill="currentColor"/>
+</g>
+</svg>

package/src/components/SVG/menu.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 18 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 1.15092H17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+<path d="M1 7.15092H17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+<path d="M1 13.1509H17" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/src/components/SVG/minus.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5264 0.993286L0.473735 0.993285M15.5264 0.993286L0.473735 0.993285" stroke="currentColor" />
+</svg>

package/src/components/SVG/mute.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" role="img" aria-label="Mute">
+  <path d="M11.25 5.25 6.75 9H4.5A2.25 2.25 0 0 0 2.25 11.25v1.5A2.25 2.25 0 0 0 4.5 15h2.25l4.5 3.75a.75.75 0 0 0 1.23-.58V5.83a.75.75 0 0 0-1.23-.58Z"/>
+  <path d="M16.5 10.5l3 3m0-3l-3 3"/>
+</svg>

package/src/components/SVG/pause.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"  role="img" aria-label="Pause">
+  <path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>
+</svg>

package/src/components/SVG/play.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" role="img" aria-label="Play">
+  <path d="M5 3v18l15-9L5 3z"/>
+</svg>

package/src/components/SVG/plus.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99337 0.473633V15.5263M7.99337 0.473633V15.5263" stroke="currentColor"/>
+<path d="M15.5264 7.99329L0.473735 7.99329M15.5264 7.99329L0.473735 7.99329" stroke="currentColor"/>
+</svg>