公司网站源码|公司小程序源码带手机版

　　世界正在变得非常数字化。其中，网站对任何初创公司、公司、企业或个人的重要性都有其重要性，我们都知道这一点。现在，并不是每个人都知道复杂的代码甚至拖放创作。每个人都没有时间、想要或精力来为自己创建一个网站。这就是网站设计师和网站开发专业人士的用武之地。在本文中，我将主要讨论我们使用的工具以及我们如何使用它们来创建我们的动态网站。这些是我们通常用于客户项目的工具。
　　
　　演示：m.jcedus.top
　　
　　设计：设计团队使用 figma 来创建网站的设计，初始版本的屏幕截图如下所示。设计经过四次迭代完成，第一次是低保真线框。几乎每个人都以某种方式为设计做出了贡献。
　　
　　内容：我们有专人负责网站材料的文案，他们与设计团队合作，确保他们所写的内容与设计一致。
　　
　　发展：在创建设计和内容后，我们继续构建网站。在我进入技术细节之前，让我列出一些网站所支持的东西。
　　
　　为 UI 做出反应
　　
　　用于 SSG/SSR/ISSG 的NextJS
　　
　　用于样式的Tailwind css
　　
　　没有类名冲突的CSS 模块样式
　　
　　GSAP JavaScript 动画
　　
　　邮件列表的Mailchimp
　　
　　Vercel CI/CD 和托管
　　
　　Framer 动作JavaScript 动画
　　
　　TypeScript为我们的代码库添加类型安全
　　
　　我可能会在这个阶段多花一点时间，因为开发是最迷人的阶段。Reactjs是网站的基础，所有组件都建立在它之上。下面是一个示例可重用Button组件及其样式。
　　
　　button.tsx

import {
  FC,
  forwardRef,
  ButtonHTMLAttributes,
  JSXElementConstructor,
  ReactElement,
} from 'react';
import Link from 'next/link';
import { motion } from 'framer-motion';
import cn from 'classnames';

import s from './Button.module.scss';

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  href?: string;
  className?: string;
  disabled?: boolean;
  rightIcon?: ReactElement;
  leftIcon?: ReactElement;
  active?: boolean;
  target?: '_blank' | '_self' | '_parent' | '_top';
  size?: 'sm' | 'md' | 'lg';
  variant?:
    | 'primary'
    | 'secondary'
    | 'white'
    | 'black'
    | 'naked'
    | 'outlineBlack'
    | 'outlineWhite'
    | 'square';
  as?: 'button' | 'a' | JSXElementConstructor<any>;
}

export const Button: FC<ButtonProps> = forwardRef((props, buttonRef) => {
  const {
    as: Tag = 'button',
    variant = 'primary',
    size = 'md',
    target = '_self',
    href,
    active,
    rightIcon,
    leftIcon,
    className,
    disabled,
    children,
    ...rest
  } = props;
  const classes = cn(
    s.root,
    {
      [