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

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

世界正在变得非常数字化。 其中，网站对于任何初创公司、公司、企业或个人的重要性都有其重要性，我们都知道。 现在，并不是每个人都知道复杂的编码甚至拖放创建。 每个人都没有时间、意愿或精力为自己创建一个网站。 这就是网站设计师和网站开发专业人员发挥作用的地方。 在这篇文章中，我将主要讨论我们使用的工具以及如何使用它们来创建动态网站。 这些是我们通常用于客户项目的工具。

演示：

设计：设计团队使用figma来创建网站的设计，初始版本的屏幕截图如下所示。 该设计经过四次迭代完成，第一次是低保真线框。 几乎每个人都以某种方式为设计做出了贡献。

内容：我们有专人负责网站素材的文案撰写，他们与设计团队合作，确保所写的内容与设计一致。

开发：创建设计和内容后，我们继续构建网站。 在讨论技术细节之前，让我列出该网站支持的一些内容。

对用户界面做出反应

适用于 SSG/SSR/ISSG

CSS 样式

CSS 模块样式没有类名冲突

GSAP动画

邮件列表

CI/CD 和托管

运动动画

向我们的代码库添加类型安全

我可能会在这个阶段多花一点时间，因为开发是最令人着迷的阶段。 它是网站的基础，所有组件都构建在其之上。 下面是一个可重用组件及其样式的示例。

.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 {
  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;
}
export const Button: FC = 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,
    {
      [s.primary]: variant === 'primary',
      [s.outlineBlack]: variant === 'outlineBlack',
      [s.outlineWhite]: variant === 'outlineWhite',
      [s.secondary]: variant === 'secondary',
      [s.white]: variant === 'white',
      [s.naked]: variant === 'naked',
      [s.black]: variant === 'black',
      [s.square]: variant === 'square',
      [s.md]: size === 'md',
      [s.sm]: size === 'sm',
      [s.lg]: size === 'lg',
      'flex items-center gap-3': (rightIcon || leftIcon) && size === 'md',
      [s.dFlex]: (rightIcon || leftIcon) && size === 'lg',
      [s.active]: active,
    },
    className
  );
  return (
    
      {href ? (
        
          
            
              {leftIcon}
              {children}
              {rightIcon}
            
          
        
      ) : (
        
          {leftIcon}
          {children}
          {rightIcon}
        
      )}
    
  );
});
Button.displayName = 'Button';

.scss

.root {
  @apply mb-1 transition duration-200 ease-linear;
}
.dFlex {
  @apply flex items-center gap-5;
}
.primary {
  @apply relative overflow-hidden border border-primary bg-primary text-white;
  span,
  svg {
    @apply relative z-[2];
  }
  &::after {
    content: '';
    @apply absolute top-0 left-0 block h-full w-0 bg-white transition-[width] duration-300 ease-linear;
  }
  &:hover {
    @apply text-primary;
  }
  &:hover::after {
    @apply w-full;
  }
}
.naked {
  @apply bg-transparent;
}
.black {
  @apply relative border border-black bg-black text-white;
  &::after {
    content: '';
    @apply absolute top-0 left-0 block h-full w-0 bg-white mix-blend-difference transition-[width] duration-300 ease-linear;
  }
  &:hover::after {
    @apply w-full;
  }
}
.white {
  @apply border border-white bg-white text-primary;
}
.secondary {
  @apply border border-secondary bg-secondary text-white;
}
.outlineBlack {
  @apply relative border border-black;
  &::after {
    content: '';
    @apply absolute top-0 left-0 block h-full w-0 bg-white mix-blend-difference transition-[width] duration-300 ease-linear;
  }
  &:hover::after {
    @apply w-full;
  }
}
.square {
  @apply relative flex h-12 w-12 items-center justify-center rounded-full border border-black p-0 hover:scale-110 3xl:h-20 3xl:w-20 3xl:border-2 #{!important};
}
.outlineWhite {
  @apply relative border border-white text-white;
  &::before {
    content: '';
    @apply absolute left-[20%] -bottom-[1px] h-[1px] w-7 bg-black transition-[left];
  }
  &::after {
    content: '';
    @apply absolute right-[20%] -top-[1px] h-[1px] w-7 bg-black transition-[right];
  }
  &:hover::before {
    @apply left-[30%];
  }
  &:hover::after {
    @apply right-[30%];
  }
  &:hover {
    @apply opacity-100;
  }
}
.sm {
  @apply px-4 py-2;
}
.md {
  @apply px-4 py-[10px] xl:px-6;
}
.lg {
  @apply px-5 py-4 text-sm font-medium xl:py-[1.1rem] xl:px-8 xl:text-base 3xl:px-16 3xl:py-6 3xl:text-lg;
}

组件是用于确保类型安全的代码。 也有助于编写自记录代码。 对于我们使用的样式，但请注意，我们的 React 组件中的类是干净的，因为实用程序类位于单独的 css 文件（即 CSS）中。 CSS 模块有助于避免 CSS 类的命名空间冲突。 下面介绍如何使用它。

}
>
  Get in touch

我们所有的可重用组件都是这样编码的。

这些小部件（例如 、 和 ）位于 Text 文件夹中，并使用单个文件导出，以便可以像 /ui/index.ts 一样导入它们

{ Text, Box, , Link, } 来自 '@/ui';

常见元素（例如 和 ）位于 // 文件夹中，页面特定元素位于 /pages/[page-name] 文件夹中。

搜索引擎优化

我们必须确保我们的网站对搜索引擎友好，因此我们创建了一个页面组件，该组件将一些 SEO 数据作为道具，网站上的每个页面都将其用作父页面。

html.tsx

import type { NextPage } from 'next';
import { Page, HowMuch } from '@components/shared';
import { Hero, Intro, Team } from '@components/pages/about';
const Home: NextPage = () => {
  return (
    
      
      
      
      
    
  );
};
export default Home;

页面使用示例

import { FC } from 'react';
import Head from 'next/head';
interface Props {
  title: string;
  description: string;
  image: string;
  canonicalURL?: string;
}
export const Page: FC = ({
  children,
  title,
  description,
  image,
  canonicalURL,
}) => {
  return (
    <>
      
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        {canonicalURL && }
      
      
{children}
    
  );
};

网站开发公司由不同的专业人士组成，如网站设计师、图形设计师、编码员、IT 专业人士、创意总监等，他们致力于帮助客户创建适合他们需求和利基的应用程序或网站。

这些公司为其客户创建的网站类型通常基于以下因素：

1. 客户的预算

2.他们的利基市场

3.他们的品味或营销理念

4. 他们想要纳入的一些具体功能

5.类型

6. 所需的目标和号召性用语类型

该过程首先与客户讨论需求，讨论预算，然后合并计划。 然后创建它，并根据需要进行一些修改和更改后，最终产品就准备好了。 然后，客户将接受某种培训，以有效地使用他们新创建的网站，然后该过程结束。 这些公司的好处之一是他们还提供维护服务，因此他们的客户支持不仅仅是创建网站。

确保我们获得最全面、最清晰的沟通并接触到我们网站开发公司的人才至关重要。

那么，这些公司实际上为他们的客户做了什么？

1. 构思并执行网站的设计和结构

2.使用代码创建网站

3. 设计并集成各种媒体、插件和必要的功能

4. 网站内容的发布和维护

5. 测试用户界面、导航、用户、设备和浏览器的友好性 6. 测试

速度和其他对于用户友好的网站至关重要的因素7.Beta

测试

8.他们有时也会关注SEO

9. 如果需要，修复网站/应用程序中的错误和错误

10.及其他功能范围

虽然有些人可能会认为 1.0 和 1.0 等免费平台的兴起使任何人都可以为他们创建网站，但这些平台只有在您有足够的时间和设计专业知识的情况下才有效。 此外，即使您投入了大量精力创建网站，如果您使用这些应用程序，结果也可能达不到预期。 网站开发公司是专业的，确保创建的网站用户友好并满足人群和客户的期望。