35 | ~{' '} 36 | {/* {Math.ceil(post.readingTime)} min read */} 37 |
38 |39 | {post.title} 40 |
41 | {post.image ? ( 42 |
54 |
55 |
56 | )}
57 |
14 | {children}
15 |
16 |
10 |
11 |
12 |
8 | {images &&
9 | images.map(({ src, alt, link }, index) => (
10 |
24 |
11 |
12 |
22 | ))}
23 |
8 | {items.map(({ title, description }, index) => (
9 |
22 |
13 |
20 | ))}
21 |
14 | {getSuffixNumber(title as number)}
15 |
16 | 17 | {description} 18 |
19 |
9 | {header &&
22 |
11 | {title && (
12 |
23 | {title}
13 | )} 14 | {subtitle &&{subtitle}
} 15 | {text && href && ( 16 |18 | Blog 19 |
20 |
22 | {posts.map(({ slug, title, image }: { slug: string, title: string, image: string }) => (
23 |
31 |
24 |
25 |
29 | ))}
30 | {title}
27 | 28 |
12 | {targetBlank ? (
13 |
19 | {Icon &&
29 | )}
30 |
31 | );
32 | };
33 |
34 | export default CTA;
35 |
--------------------------------------------------------------------------------
/src/stories/widgets/Team.stories.ts:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 |
3 | import Component from '~/components/widgets/Team';
4 | import { teamHome as mockData } from '~/shared/data/pages/home.data';
5 |
6 | // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
7 | const meta = {
8 | title: 'Widgets/Team',
9 | component: Component,
10 | parameters: {
11 | // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
12 | layout: 'fullscreen',
13 | },
14 | // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
15 | tags: ['autodocs'],
16 | // More on argTypes: https://storybook.js.org/docs/api/argtypes
17 | argTypes: {},
18 | } satisfies Meta
9 | {(title || subtitle || tagline) && (
10 |
39 | );
40 | };
41 |
42 | export default Headline;
43 |
--------------------------------------------------------------------------------
/src/components/widgets/Announcement.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @next/next/no-img-element */
2 | import { announcementData } from '~/shared/data/global.data';
3 |
4 | const Announcement = () => {
5 | const { title, callToAction, callToAction2 } = announcementData;
6 |
7 | return (
8 |
18 | {tagline && (
19 |
37 | )}
38 | 20 | {tagline} 21 |
22 | )} 23 | {title &&{title}
} 24 | {subtitle && ( 25 |33 | {subtitle} 34 |
35 | )} 36 |
9 | {title}{' '}
10 | {callToAction && callToAction.text && callToAction.href && (
11 |
17 | {callToAction.icon && 
34 |
35 | )}
36 |
37 | );
38 | };
39 |
40 | export default Announcement;
41 |
--------------------------------------------------------------------------------
/src/components/widgets/Team2.tsx:
--------------------------------------------------------------------------------
1 | import Headline from '../common/Headline';
2 | import { TeamProps } from '~/shared/types';
3 | import WidgetWrapper from '../common/WidgetWrapper';
4 | import ItemTeam from '../common/ItemTeam';
5 |
6 | const Team = ({ header, teams, id, hasBackground = false }: TeamProps) => (
7 |
34 |
35 | )}
36 |
10 |
29 |
11 | {teams.map(({ name, occupation, image, items }, index) => (
12 |
28 |
13 |
26 | ))}
27 |
10 |
29 |
11 | {teams.map(({ name, occupation, image, items }, index) => (
12 |
28 |
13 |
26 | ))}
27 |
57 |
59 | ),
60 | withThemeByClassName
19 |
48 | );
49 | };
50 |
51 | export default ItemTeam;
52 |
--------------------------------------------------------------------------------
/src/components/widgets/FAQs3.tsx:
--------------------------------------------------------------------------------
1 | import Headline from '../common/Headline';
2 | import Collapse from '../common/Collapse';
3 | import { IconMinus, IconPlus } from '@tabler/icons-react';
4 | import { CallToActionType, FAQsProps, Item } from '~/shared/types';
5 | import CTA from '../common/CTA';
6 | import WidgetWrapper from '../common/WidgetWrapper';
7 |
8 | const FAQs3 = ({ header, items, callToAction, id, hasBackground = false }: FAQsProps) => (
9 |
21 |
47 | {name}
22 |{occupation}
23 |-
24 | {items &&
25 | items.map(
26 | ({ title, href, icon: Icon }, index2) =>
27 | Icon &&
28 | href && (
29 |
-
33 |
40 |
41 | 42 |
43 | ),
44 | )}
45 |
11 |
39 |
12 |
38 |
15 | {header && (
16 |
29 |
30 |
37 |
23 |
54 |
28 | {header && (
29 |
38 | {isImageDisplayed && (
39 |
40 | {image && (
41 |
52 | )}
53 |
9 |
46 |
10 |
45 |
11 | {tagline && (
12 |
29 | {image && (
30 | 13 | {tagline} 14 |
15 | )} 16 | {title && ( 17 |18 | {title} 19 |
20 | )} 21 |
22 | {subtitle &&
28 | {subtitle}
} 23 |
24 | {callToAction &&
27 |
31 |
43 | )}
44 |
18 | {items.map(({ title, description, icon: Icon }, index = 0) => (
19 |
48 | )}
49 |
50 | );
51 | };
52 |
53 | export default Timeline;
54 |
--------------------------------------------------------------------------------
/src/components/common/Collapse.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import { IconChevronDown, IconChevronUp } from '@tabler/icons-react';
4 | import useCollapse from '~/hooks/useCollapse';
5 | import { CollapseProps } from '~/shared/types';
6 |
7 | const Collapse = ({ items, classCollapseItem, iconUp, iconDown }: CollapseProps) => {
8 | const { activeIndex, handleSetIndex } = useCollapse();
9 |
10 | return (
11 | <>
12 | {items.map(({ title, description }, index) => (
13 |
20 |
46 | ))}
47 |
21 |
35 |
26 | {Icon ? (
27 |
32 |
33 | {index !== items.length - 1 && }
34 |
36 | {title && (
37 |
45 | 38 | {title} 39 |
40 | )} 41 | {description && ( 42 |{description}
43 | )} 44 | handleSetIndex(index)}
16 | className="mx-auto max-w-3xl select-none bg-transparent text-base text-gray-700"
17 | >
18 |
51 | ))}
52 |
53 | );
54 | };
55 |
56 | export default Collapse;
57 |
--------------------------------------------------------------------------------
/src/stories/widgets/Features2.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { Title, Subtitle, Description, Primary, Controls, Story, Stories } from '@storybook/blocks';
3 |
4 | import Component from '~/components/widgets/Features2';
5 | import { featuresHome as mockData } from '~/shared/data/pages/home.data';
6 |
7 | // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
8 | const meta = {
9 | title: 'Widgets/Features2',
10 | component: Component,
11 | parameters: {
12 | // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
13 | layout: 'fullscreen',
14 | // Offers several doc blocks to help document your components. More info: https://storybook.js.org/docs/writing-docs/doc-blocks
15 | docs: {
16 | page: () => (
17 | <>
18 |
19 |
50 |
27 |
40 | {activeIndex === index && (
41 | {title}
28 | {iconDown && iconUp ? ( 29 | activeIndex === index ? ( 30 | iconUp 31 | ) : ( 32 | iconDown 33 | ) 34 | ) : activeIndex === index ? ( 35 |
46 |
48 | )}
49 | {description}
47 |
26 |
61 | );
62 | };
63 |
64 | export default ItemTestimonial;
65 |
--------------------------------------------------------------------------------
/src/stories/widgets/Steps.stories.tsx:
--------------------------------------------------------------------------------
1 | import type { Meta, StoryObj } from '@storybook/react';
2 | import { Title, Subtitle, Description, Primary, Controls, Story, Stories } from '@storybook/blocks';
3 |
4 | import Component from '~/components/widgets/Steps';
5 | import { stepsHome as mockData } from '~/shared/data/pages/home.data';
6 |
7 | // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
8 | const meta = {
9 | title: 'Widgets/Steps',
10 | component: Component,
11 | parameters: {
12 | // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
13 | layout: 'fullscreen',
14 | // Offers several doc blocks to help document your components. More info: https://storybook.js.org/docs/writing-docs/doc-blocks
15 | docs: {
16 | page: () => (
17 | <>
18 |
27 | {((image && name) || (name && job)) && (
28 | <>
29 |
60 |
30 | {image && (
31 |
45 |
46 | {hasDividerLine &&
41 | {name &&
44 | {name}
} 42 | {job && {job}} 43 |52 |58 | )} 59 |53 | {startSlice !== undefined && endSlice !== undefined 54 | ? `" ${testimonial.slice(Number(startSlice), Number(endSlice))}... "` 55 | : `" ${testimonial} "`} 56 |
57 |
10 |
42 |
11 |
41 |
12 | {content &&
39 |
40 | {content}
} 13 |-
14 | {items &&
15 | items.map(({ title, description, icon: Icon }, index) => (
16 |
-
17 | 18 | {Icon &&20 |
} 19 | 21 |35 |{title}
22 | {typeof description === 'string' ? ( 23 |24 | {description} 25 |
26 | ) : ( 27 | description && 28 | description.map((desc, index) => ( 29 |30 | {desc} 31 |
32 | )) 33 | )} 34 |
36 | ))}
37 |
26 |
58 |
27 |
57 |
28 | {content &&
40 |
56 | {content}
}
29 |
35 |
65 | );
66 | };
67 |
68 | export default Dropdown;
69 |
--------------------------------------------------------------------------------
/src/stories/assets/github.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/components/widgets/Comparison.tsx:
--------------------------------------------------------------------------------
1 | import { IconCheck, IconMinus } from '@tabler/icons-react';
2 | import { CallToActionType, ComparisonProps } from '~/shared/types';
3 | import CTA from '../common/CTA';
4 | import Headline from '../common/Headline';
5 | import WidgetWrapper from '../common/WidgetWrapper';
6 |
7 | const Comparison = ({ header, columns, id, hasBackground = false }: ComparisonProps) => (
8 |
36 |
49 | {isDropdownOpen && (
50 | {selectedOption}
37 | {iconDown && iconUp ? (
38 | isDropdownOpen === false ? (
39 | iconDown
40 | ) : (
41 | iconUp
42 | )
43 | ) : isDropdownOpen === false ? (
44 |
51 | {options.map((option: Tab, index) => (
52 |
63 | )}
64 | onOptionSelected(option, index)}
55 | className={`flex cursor-pointer items-center bg-white p-3 text-lg dark:bg-slate-900 ${
56 | activeTab !== index ? 'pl-10' : 'text-primary-600 dark:text-primary-200'
57 | }`}
58 | >
59 | {activeTab === index &&
61 | ))}
62 |
11 | {columns.map(({ title, items, callToAction }, index) => (
12 |
50 |
20 |
48 | ))}
49 | 25 | {title} 26 |
27 | {items && 28 | items.map(({ title: title2 }, index2) => ( 29 |
33 | {(title2 as boolean) === true ? (
34 |
43 | ))}
44 | {index !== 0 && callToAction && (
45 | {title2}
39 | ) : ( 40 |{title2}
41 | )} 42 |
9 |
50 |
10 |
49 |
11 |
31 |
12 | {tagline && (
13 |
30 | 14 | {tagline} 15 |
16 | )} 17 | {title && ( 18 |19 | {title} 20 |
21 | )} 22 |
23 | {subtitle &&
29 | {subtitle}
} 24 |
25 | {callToAction &&
28 |
32 |
48 |
33 | {image && (
34 |
47 |
8 |
59 | );
60 | };
61 |
62 | export default Footer2;
63 |
--------------------------------------------------------------------------------
/src/components/common/ItemGrid.tsx:
--------------------------------------------------------------------------------
1 | import { twMerge } from 'tailwind-merge';
2 | import type { ItemGrid as ItemGridType } from '~/shared/types';
3 | import CTA from './CTA';
4 |
5 | const ItemGrid = ({
6 | id,
7 | items,
8 | columns,
9 | defaultColumns,
10 | defaultIcon: DefaultIcon,
11 | containerClass,
12 | panelClass,
13 | iconClass,
14 | titleClass,
15 | descriptionClass,
16 | actionClass,
17 | }: ItemGridType) => {
18 | return (
19 | <>
20 | {items && (
21 |
9 | {columns.map(({ title, texts }, index) => (
10 |
40 |
14 |
22 | ))}
23 | {title}
15 | {texts &&
16 | texts.map((text, index2) => (
17 | 18 | {text} 19 |
20 | ))} 21 |
24 |
39 | Social
25 | -
26 | {socials.map(({ label, icon: Icon, href }, index) => (
27 |
-
28 |
33 | {Icon &&
} 34 | 35 |
36 | ))}
37 |
41 |
58 | -
42 | {links &&
43 | links.map(({ label, href }, index) => (
44 |
- 45 | 50 | {label} 51 | 52 | {links.length - 1 !== index && · } 53 | 54 | ))} 55 |
35 | {items.map(({ title, description, icon: Icon, callToAction }, index) => (
36 |
70 | )}
71 |
72 | );
73 | };
74 |
75 | export default ItemGrid;
76 |
--------------------------------------------------------------------------------
/src/components/widgets/FAQs4.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 |
3 | import Headline from '../common/Headline';
4 | import Collapse from '../common/Collapse';
5 | import { IconMinus, IconPlus } from '@tabler/icons-react';
6 | import { FAQsProps, Item, Tab } from '~/shared/types';
7 | import { useState } from 'react';
8 | import useWindowSize from '~/hooks/useWindowSize';
9 | import Dropdown from '../common/Dropdown';
10 | import WidgetWrapper from '../common/WidgetWrapper';
11 |
12 | const FAQs4 = ({ header, tabs, id, hasBackground = false }: FAQsProps) => {
13 | const { width } = useWindowSize();
14 | const [activeTab, setActiveTab] = useState(0);
15 |
16 | const activeTabSelectedHandler = (index: number) => {
17 | setActiveTab(index);
18 | };
19 |
20 | return (
21 |
37 |
68 | ))}
69 |
38 |
67 |
39 | {Icon ? (
40 |
45 |
46 | {title &&
66 | {title}
} 47 | {description && ( 48 |51 | {description} 52 |
53 | )} 54 | {callToAction && ( 55 |
24 |
69 |
25 | {width > 767 ? (
26 |
68 |
27 |
50 | ) : (
51 |
28 |
49 | -
29 | {(tabs as Tab[]).map((tab, index) => {
30 | const onSelectTab = () => {
31 | setActiveTab(index);
32 | };
33 |
34 | return (
35 |
- 43 | {tab.link?.label} 44 | 45 | ); 46 | })} 47 |
54 | {(tabs as Tab[]).map((tab, index) => (
55 |
67 |
56 | {activeTab === index && (
57 |
65 | ))}
66 |
19 |
71 | {callToAction && (
72 |
20 | {testimonials.map(
21 | ({ name, job, testimonial, image, href }, index) =>
22 | testimonial && (
23 |
70 |
31 | {!callToAction && href ? (
32 |
33 |
67 | ),
68 | )}
69 |
6 |
44 | );
45 |
46 | const CallToAction2 = ({ title, subtitle, items }: CallToActionProps) => (
47 |
7 |
17 | {form && (
18 |
8 |
11 | {href && (
12 | {title}
9 |{description}
10 |
13 |
15 | )}
16 |
19 |
41 |
42 | )}
43 |
49 |
78 |
50 |
77 |
51 |
56 | {title}
52 |53 | {subtitle} 54 |
55 |
57 | {items &&
58 | items.map(({ title, description, href, form }, index) => (
59 |
76 |
60 | {href ? (
61 |
68 |
74 | ))}
75 |
32 | {testimonials.map(
33 | ({ name, job, testimonial, image }, index) =>
34 | testimonial && (
35 |
79 |
40 |
76 | ),
77 | )}
78 |
56 |
65 |
74 |
75 |
12 |
74 |
13 | {prices &&
14 | prices.map(
15 | ({ title, subtitle, price, period, items, callToAction, hasRibbon = false, ribbonTitle }, index) => (
16 |
73 |
20 | {price && period && (
21 |
70 | ),
71 | )}
72 |
22 | {hasRibbon && ribbonTitle && (
23 |
68 | )}
69 |
24 |
25 | {ribbonTitle}
26 |
27 |
28 | )}
29 |
30 | {title && (
31 |
61 | {callToAction && (
62 | 32 | {title} 33 |
34 | )} 35 | {subtitle && ( 36 |{subtitle}
37 | )} 38 |
39 |
47 | {items && (
48 |
40 | $
41 | {price}
42 |
43 |
44 | {period}
45 |
46 |
49 |
59 | )}
60 |