diff --git a/frontend/apps/service-site/src/contents/posts/1/en.mdx b/frontend/apps/service-site/src/contents/posts/1/en.mdx index 2fa5b75f..24f62ef8 100644 --- a/frontend/apps/service-site/src/contents/posts/1/en.mdx +++ b/frontend/apps/service-site/src/contents/posts/1/en.mdx @@ -103,10 +103,14 @@ Healthcare providers can develop patient management systems, appointment schedul New businesses can rapidly prototype and test their ideas by building MVPs (Minimum Viable Products) on no-code platforms, allowing them to iterate quickly based on user feedback. -- Airtable: A startup used Airtable, a no-code platform, to create a custom project management tool within days. This tool allowed them to quickly track and manage their workflow, gather team feedback, and iteratively improve the product without the need for a dedicated development team. -- Bubble: An early-stage tech startup built their initial web application on Bubble, enabling them to launch a functional MVP in just a few weeks. This allowed them to test their business model with real users, collect feedback, and secure early-stage funding to further develop their product. -- Glide: A fitness app startup leveraged Glide to create a mobile app MVP without any coding. The app allowed users to log workouts and track progress. By releasing this MVP, the startup was able to gather valuable user feedback and refine their product offering before investing in custom development. -- Webflow: A design-focused startup used Webflow to quickly build and launch a visually appealing MVP for their e-commerce platform. The no-code approach enabled them to test their market hypothesis with a fully responsive website, gather customer insights, and iterate on design and functionality based on real-world feedback. +- **Airtable**: A startup used Airtable, a no-code platform, to create a custom project management tool within days. This tool allowed them to quickly track and manage their workflow, gather team feedback, and iteratively improve the product without the need for a dedicated development team. + - Airtable: A startup used Airtable, a no-code platform, to create a custom project management tool within days. This tool allowed them to quickly track and manage their workflow, gather team feedback, and iteratively improve the product without the need for a dedicated development team. + - Airtable: A startup used Airtable, a no-code platform, to create a custom project management tool within days. This tool allowed them to quickly track and manage their workflow, gather team feedback, and iteratively improve the product without the need for a dedicated development team. + - Airtable: A startup used Airtable, a no-code platform, to create a custom project management tool within days. This tool allowed them to quickly track and manage their workflow, gather team feedback, and iteratively improve the product without the need for a dedicated development team. + - Airtable: A startup used Airtable, a no-code platform, to create a custom project management tool within days. This tool allowed them to quickly track and manage their workflow, gather team feedback, and iteratively improve the product without the need for a dedicated development team. +- **Bubble**: An early-stage tech startup built their initial web application on Bubble, enabling them to launch a functional MVP in just a few weeks. This allowed them to test their business model with real users, collect feedback, and secure early-stage funding to further develop their product. +- **Glide**: A fitness app startup leveraged Glide to create a mobile app MVP without any coding. The app allowed users to log workouts and track progress. By releasing this MVP, the startup was able to gather valuable user feedback and refine their product offering before investing in custom development. +- **Webflow**: A design-focused startup used Webflow to quickly build and launch a visually appealing MVP for their e-commerce platform. The no-code approach enabled them to test their market hypothesis with a fully responsive website, gather customer insights, and iterate on design and functionality based on real-world feedback. ## The Future of No-Code diff --git a/frontend/apps/service-site/src/features/posts/components/OrderList/OrderList.module.css b/frontend/apps/service-site/src/features/posts/components/OrderList/OrderList.module.css index fdaf51b6..c311baab 100644 --- a/frontend/apps/service-site/src/features/posts/components/OrderList/OrderList.module.css +++ b/frontend/apps/service-site/src/features/posts/components/OrderList/OrderList.module.css @@ -1,12 +1,11 @@ .ol { - display: grid; - gap: var(--space-1, 8px); padding-left: var(--space-4, 16px); font-size: var(--font-size-6, 16px); line-height: 160%; } .ol li { + margin-top: var(--space-2, 16px); counter-increment: title; color: var(--global-body-text); font-weight: 400; diff --git a/frontend/apps/service-site/src/features/posts/components/UnOrderList/UnOrderList.module.css b/frontend/apps/service-site/src/features/posts/components/UnOrderList/UnOrderList.module.css new file mode 100644 index 00000000..ba185e93 --- /dev/null +++ b/frontend/apps/service-site/src/features/posts/components/UnOrderList/UnOrderList.module.css @@ -0,0 +1,34 @@ +.ul { + padding-left: var(--spacing-3, 12px); + font-size: var(--font-size-6, 16px); + line-height: 160%; +} + +.ul li { + margin-top: var(--space-2, 16px); + color: var(--global-body-text); + font-weight: 400; + padding-left: var(--spacing-3, 12px); + position: relative; +} + +.ul li::before { + content: ''; + background: var(--overlay-40); + display: block; + height: 1px; + width: 16px; + position: absolute; + left: calc(-1 * var(--spacing-3, 12px)); + top: 13px; +} + +@media screen and (max-width: 768px) { + .ul { + font-size: var(--font-size-5, 14px); + } + + .ul li::before { + top: 11px; + } +} diff --git a/frontend/apps/service-site/src/features/posts/components/UnOrderList/UnOrderList.stories.tsx b/frontend/apps/service-site/src/features/posts/components/UnOrderList/UnOrderList.stories.tsx new file mode 100644 index 00000000..6d52b639 --- /dev/null +++ b/frontend/apps/service-site/src/features/posts/components/UnOrderList/UnOrderList.stories.tsx @@ -0,0 +1,43 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import { UnOrderList } from '.' + +const StoryComponent = () => { + return ( + +
  • + The importance of no-code platforms cannot be overstated. They are + breaking down barriers to entry, enabling individuals and businesses of + all sizes to innovate and solve problems with custom software solutions. + Here’s why the no-code revolution is so significant +
  • +
  • + The importance of no-code platforms cannot be overstated. They are + breaking down barriers to entry, enabling individuals and businesses of + all sizes to innovate and solve problems with custom software solutions. + Here’s why the no-code revolution is so significant +
  • +
  • + The importance of no-code platforms cannot be overstated. They are + breaking down barriers to entry, enabling individuals and businesses of + all sizes to innovate and solve problems with custom software solutions. + Here’s why the no-code revolution is so significant +
  • +
  • + The importance of no-code platforms cannot be overstated. They are + breaking down barriers to entry, enabling individuals and businesses of + all sizes to innovate and solve problems with custom software solutions. + Here’s why the no-code revolution is so significant +
  • +
    + ) +} + +const meta = { + component: StoryComponent, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Default: Story = {} diff --git a/frontend/apps/service-site/src/features/posts/components/UnOrderList/UnOrderList.tsx b/frontend/apps/service-site/src/features/posts/components/UnOrderList/UnOrderList.tsx new file mode 100644 index 00000000..928994d5 --- /dev/null +++ b/frontend/apps/service-site/src/features/posts/components/UnOrderList/UnOrderList.tsx @@ -0,0 +1,10 @@ +import type { PropsWithChildren } from 'react' +import styles from './UnOrderList.module.css' + +export const UnOrderList = ({ children, ...props }: PropsWithChildren) => { + return ( + + ) +} diff --git a/frontend/apps/service-site/src/features/posts/components/UnOrderList/index.ts b/frontend/apps/service-site/src/features/posts/components/UnOrderList/index.ts new file mode 100644 index 00000000..f44c2aee --- /dev/null +++ b/frontend/apps/service-site/src/features/posts/components/UnOrderList/index.ts @@ -0,0 +1 @@ +export * from './UnOrderList' diff --git a/frontend/apps/service-site/src/features/posts/components/index.ts b/frontend/apps/service-site/src/features/posts/components/index.ts index afe64512..6920b57e 100644 --- a/frontend/apps/service-site/src/features/posts/components/index.ts +++ b/frontend/apps/service-site/src/features/posts/components/index.ts @@ -12,6 +12,7 @@ export * from './PostCategories' export * from './PostTags' export * from './PostWriter' export * from './OrderList' +export * from './UnOrderList' export * from './PostDetailPage' export * from './PostListPage' diff --git a/frontend/apps/service-site/src/libs/contentlayer/MDXContent.tsx b/frontend/apps/service-site/src/libs/contentlayer/MDXContent.tsx index 90638d00..0660f65d 100644 --- a/frontend/apps/service-site/src/libs/contentlayer/MDXContent.tsx +++ b/frontend/apps/service-site/src/libs/contentlayer/MDXContent.tsx @@ -6,6 +6,7 @@ import { Heading, LinkCard, OrderList, + UnOrderList, } from '@/features/posts' import type { MDXComponents } from 'mdx/types' // eslint-disable-next-line no-restricted-imports @@ -52,6 +53,9 @@ const mdxComponents: MDXComponents = { ol: ({ children, ...props }) => { return {children} }, + ul: ({ children, ...props }) => { + return {children} + }, } type Props = {