Footer

Introduction

The Footer component is used to create the footer section of websites, providing copyright information, navigation links, social media links, and other content. This component supports high customization and can display or hide different sections as needed.

Component features:

Clear information hierarchy - Displays different categories of footer information through visual hierarchy and grouping
Responsive layout - Maintains good usability and aesthetics across different screen sizes
Customizability - Supports various configuration options to adapt to different website needs
Brand consistency - Maintains consistency with the overall website design style
Multi-language support - Supports display in multiple languages, automatically detecting the current language environment
Social media integration - Provides display of social media links
WeChat QR code support
WhatsApp QR code support
Product link display - Can add product link lists
Friendly link display - Can add friendly link lists
Logo display - Supports adding website logos

Examples

---



/**
 * @component Footer.Basic
 *
 * @description
 * 基础Footer组件示例，展示最简单的页脚用法。
 */
import { Footer, getLandscapeImage, getProductImage } from "@coffic/cosy-ui";

// 产品数据

// 友情链接数据

// 社交媒体链接
const socialLinks = [
	"https://github.com/cofficlab",
	"https://twitter.com/cofficlab",
	"https://weibo.com/cofficlab",
	"https://www.linkedin.com/company/cofficlab",
];

// 联系方式信息
const contactInfo = {
	address: "北京市朝阳区某某大厦 1001 室",
	phone: "+86 138-0000-0000",
	email: "contact@cofficlab.com",
	workingHours: "周一至周五 9:00-18:00",
	wechat: "cofficlab_wechat",
	qq: "123456789",
};

// 法律信息
const legalInfo = {
	termsLink: "/terms",
	privacyLink: "/privacy",
	icp: "京ICP备12345678号",
	icpLink: "https://beian.miit.gov.cn",
};

// 关于信息
const aboutInfo = {
	aboutLink: "/about",
	contactLink: "/contact",
	teamLink: "/team",
	careersLink: "/careers",
};

// 资源信息
const resourcesInfo = {
	newsLink: "/news",
	historyLink: "/history",
	partnersLink: "/partners",
	blogLink: "/blog",
	faqLink: "/faq",
	mediaLink: "/media",
	techStackLink: "/tech-stack",
};

// 二维码图片
const wechatQR = getLandscapeImage({
	width: 200,
	height: 200,
	tag: "wechat-qr",
});

const whatsappQR = getLandscapeImage({
	width: 200,
	height: 200,
	tag: "whatsapp-qr",
});

// 公司 Logo
const logo = getProductImage({
	width: 120,
	height: 40,
	tag: "cofficlab-logo",
});
---

<Footer
  siteName="CofficLab"
  homeLink="/"
  slogan="构建美好的数字体验"
  company="CofficLab 科技有限公司"
  copyright="© 2024 CofficLab. 保留所有权利"
  inspirationalSlogan="让技术更简单，让体验更美好"
  logo={logo}
  background="base-200"
  aboutInfo={aboutInfo}
  contactInfo={contactInfo}
  socialLinks={socialLinks}
  wechatQR={wechatQR}
  whatsappQR={whatsappQR}
  legalInfo={legalInfo}
  resourcesInfo={resourcesInfo}
/>

---



import { Footer, FooterProps } from "@coffic/cosy-ui";
---

<Footer
  {...FooterProps()
    .siteName('我的网站')
    .homeLink('/')
    .slogan('简单而强大')
    .company('我的公司')
    .inspirationalSlogan('构建美好的数字体验')
    .build()}
/>

Props

aboutInfo

About information configuration, including about us, contact us, team introduction, careers and other related links.

---



/**
 * @component Footer.Basic
 *
 * @description
 * 基础Footer组件示例，展示最简单的页脚用法。
 */
import { Footer, getLandscapeImage, getProductImage } from "@coffic/cosy-ui";

// 产品数据

// 友情链接数据

// 社交媒体链接
const socialLinks = [
	"https://github.com/cofficlab",
	"https://twitter.com/cofficlab",
	"https://weibo.com/cofficlab",
	"https://www.linkedin.com/company/cofficlab",
];

// 联系方式信息
const contactInfo = {
	address: "北京市朝阳区某某大厦 1001 室",
	phone: "+86 138-0000-0000",
	email: "contact@cofficlab.com",
	workingHours: "周一至周五 9:00-18:00",
	wechat: "cofficlab_wechat",
	qq: "123456789",
};

// 法律信息
const legalInfo = {
	termsLink: "/terms",
	privacyLink: "/privacy",
	icp: "京ICP备12345678号",
	icpLink: "https://beian.miit.gov.cn",
};

// 关于信息
const aboutInfo = {
	aboutLink: "/about",
	contactLink: "/contact",
	teamLink: "/team",
	careersLink: "/careers",
};

// 资源信息
const resourcesInfo = {
	newsLink: "/news",
	historyLink: "/history",
	partnersLink: "/partners",
	blogLink: "/blog",
	faqLink: "/faq",
	mediaLink: "/media",
	techStackLink: "/tech-stack",
};

// 二维码图片
const wechatQR = getLandscapeImage({
	width: 200,
	height: 200,
	tag: "wechat-qr",
});

const whatsappQR = getLandscapeImage({
	width: 200,
	height: 200,
	tag: "whatsapp-qr",
});

// 公司 Logo
const logo = getProductImage({
	width: 120,
	height: 40,
	tag: "cofficlab-logo",
});
---

<Footer
  siteName="CofficLab"
  homeLink="/"
  slogan="构建美好的数字体验"
  company="CofficLab 科技有限公司"
  copyright="© 2024 CofficLab. 保留所有权利"
  inspirationalSlogan="让技术更简单，让体验更美好"
  logo={logo}
  background="base-200"
  aboutInfo={aboutInfo}
  contactInfo={contactInfo}
  socialLinks={socialLinks}
  wechatQR={wechatQR}
  whatsappQR={whatsappQR}
  legalInfo={legalInfo}
  resourcesInfo={resourcesInfo}
/>

---



import { Footer, FooterProps } from "@coffic/cosy-ui";
---

<Footer
  {...FooterProps()
    .siteName('我的网站')
    .homeLink('/')
    .slogan('简单而强大')
    .company('我的公司')
    .inspirationalSlogan('构建美好的数字体验')
    .build()}
/>

background

Footer background color. Supported presets (with opacity and gradients):

Base: primary, secondary, accent, neutral, base-100, base-200, base-300, success, warning, error, info
Opacity: all base colors support /10, /20, /30, /40, /50, /60, /70, /80, /90 (e.g., primary/10)
Gradients: gradient, gradient-primary, gradient-secondary, gradient-accent, gradient-success, gradient-warning, gradient-info, gradient-sky, gradient-sunset, gradient-forest, gradient-ocean, gradient-mountain, gradient-flower, gradient-watermelon, gradient-lemon, gradient-grape, gradient-blueberry, gradient-mango, gradient-kiwi, gradient-pitaya, gradient-banana

---



import { Footer } from "@coffic/cosy-ui";
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
/>

---



import { Footer } from "@coffic/cosy-ui";
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  background="primary"
/>

---



import { Footer } from "@coffic/cosy-ui";
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  background="primary/10"
/>

---



import { Footer } from "@coffic/cosy-ui";
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  background="accent"
/>

---



import { Footer } from "@coffic/cosy-ui";
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  background="success"
/>

---



import { Footer } from "@coffic/cosy-ui";
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  background="warning"
/>

---



import { Footer } from "@coffic/cosy-ui";
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  background="error"
/>

---



import { Footer } from "@coffic/cosy-ui";
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  background="secondary"
/>

---



import { Footer } from "@coffic/cosy-ui";
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  background="neutral/50"
/>

---



import { Footer } from "@coffic/cosy-ui";
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  background="gradient-sky"
/>

company

Company name.

---



/**
 * @component Footer.Basic
 *
 * @description
 * 基础Footer组件示例，展示最简单的页脚用法。
 */
import { Footer, getLandscapeImage, getProductImage } from "@coffic/cosy-ui";

// 产品数据

// 友情链接数据

// 社交媒体链接
const socialLinks = [
	"https://github.com/cofficlab",
	"https://twitter.com/cofficlab",
	"https://weibo.com/cofficlab",
	"https://www.linkedin.com/company/cofficlab",
];

// 联系方式信息
const contactInfo = {
	address: "北京市朝阳区某某大厦 1001 室",
	phone: "+86 138-0000-0000",
	email: "contact@cofficlab.com",
	workingHours: "周一至周五 9:00-18:00",
	wechat: "cofficlab_wechat",
	qq: "123456789",
};

// 法律信息
const legalInfo = {
	termsLink: "/terms",
	privacyLink: "/privacy",
	icp: "京ICP备12345678号",
	icpLink: "https://beian.miit.gov.cn",
};

// 关于信息
const aboutInfo = {
	aboutLink: "/about",
	contactLink: "/contact",
	teamLink: "/team",
	careersLink: "/careers",
};

// 资源信息
const resourcesInfo = {
	newsLink: "/news",
	historyLink: "/history",
	partnersLink: "/partners",
	blogLink: "/blog",
	faqLink: "/faq",
	mediaLink: "/media",
	techStackLink: "/tech-stack",
};

// 二维码图片
const wechatQR = getLandscapeImage({
	width: 200,
	height: 200,
	tag: "wechat-qr",
});

const whatsappQR = getLandscapeImage({
	width: 200,
	height: 200,
	tag: "whatsapp-qr",
});

// 公司 Logo
const logo = getProductImage({
	width: 120,
	height: 40,
	tag: "cofficlab-logo",
});
---

<Footer
  siteName="CofficLab"
  homeLink="/"
  slogan="构建美好的数字体验"
  company="CofficLab 科技有限公司"
  copyright="© 2024 CofficLab. 保留所有权利"
  inspirationalSlogan="让技术更简单，让体验更美好"
  logo={logo}
  background="base-200"
  aboutInfo={aboutInfo}
  contactInfo={contactInfo}
  socialLinks={socialLinks}
  wechatQR={wechatQR}
  whatsappQR={whatsappQR}
  legalInfo={legalInfo}
  resourcesInfo={resourcesInfo}
/>

---



import { Footer, FooterProps } from "@coffic/cosy-ui";
---

<Footer
  {...FooterProps()
    .siteName('我的网站')
    .homeLink('/')
    .slogan('简单而强大')
    .company('我的公司')
    .inspirationalSlogan('构建美好的数字体验')
    .build()}
/>

contactInfo

Contact information configuration, including address, phone, email, working hours, and other contact details. Each contact method is displayed on a separate line with an icon.

---



import { Footer } from "@coffic/cosy-ui";
import Book from "@/assets/book.png";

const contactInfo = {
	address: "北京市朝阳区某某大厦 1001 室",
	phone: "+86 138-0000-0000",
	email: "contact@example.com",
	workingHours: "周一至周五 9:00-18:00",
	wechat: "wechat_id",
	qq: "123456789",
};

const socialLinks = [
	"https://weibo.com",
	"https://github.com",
	"https://twitter.com",
];
---

<Footer
  siteName="CofficLab"
  homeLink="/"
  slogan="构建美好的数字体验"
  company="CofficLab 科技有限公司"
  copyright="© 2024 CofficLab. 保留所有权利"
  inspirationalSlogan="让技术更简单，让体验更美好"
  logo={Book}
  aboutLink="/about"
  contactLink="/contact"
  teamLink="/team"
  careersLink="/careers"
  newsLink="/news"
  historyLink="/history"
  partnersLink="/partners"
  blogLink="/blog"
  faqLink="/faq"
  mediaLink="/media"
  techStackLink="/tech-stack"
  termsLink="/terms"
  privacyLink="/privacy"
  contactInfo={contactInfo}
  socialLinks={socialLinks}
  icp="京ICP备12345678号"
  icpLink="https://beian.miit.gov.cn"
/>

friendlyLinks

Friendly links array, each object contains name, href and optional external properties.

---



/**
 * @component Footer.WithFriendlyLinks
 *
 * @description
 * 展示带有友情链接的页脚示例。
 */
import { Footer } from "@coffic/cosy-ui";
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  friendlyLinks={[
    { name: '合作伙伴A', href: 'https://partner-a.com', external: true },
    { name: '合作伙伴B', href: 'https://partner-b.com', external: true },
    { name: '技术社区', href: 'https://tech-community.com', external: true },
    {
      name: '开源项目',
      href: 'https://open-source-project.com',
      external: true,
    },
  ]}
/>

homeLink

Home page link.

---



/**
 * @component Footer.Basic
 *
 * @description
 * 基础Footer组件示例，展示最简单的页脚用法。
 */
import { Footer, getLandscapeImage, getProductImage } from "@coffic/cosy-ui";

// 产品数据

// 友情链接数据

// 社交媒体链接
const socialLinks = [
	"https://github.com/cofficlab",
	"https://twitter.com/cofficlab",
	"https://weibo.com/cofficlab",
	"https://www.linkedin.com/company/cofficlab",
];

// 联系方式信息
const contactInfo = {
	address: "北京市朝阳区某某大厦 1001 室",
	phone: "+86 138-0000-0000",
	email: "contact@cofficlab.com",
	workingHours: "周一至周五 9:00-18:00",
	wechat: "cofficlab_wechat",
	qq: "123456789",
};

// 法律信息
const legalInfo = {
	termsLink: "/terms",
	privacyLink: "/privacy",
	icp: "京ICP备12345678号",
	icpLink: "https://beian.miit.gov.cn",
};

// 关于信息
const aboutInfo = {
	aboutLink: "/about",
	contactLink: "/contact",
	teamLink: "/team",
	careersLink: "/careers",
};

// 资源信息
const resourcesInfo = {
	newsLink: "/news",
	historyLink: "/history",
	partnersLink: "/partners",
	blogLink: "/blog",
	faqLink: "/faq",
	mediaLink: "/media",
	techStackLink: "/tech-stack",
};

// 二维码图片
const wechatQR = getLandscapeImage({
	width: 200,
	height: 200,
	tag: "wechat-qr",
});

const whatsappQR = getLandscapeImage({
	width: 200,
	height: 200,
	tag: "whatsapp-qr",
});

// 公司 Logo
const logo = getProductImage({
	width: 120,
	height: 40,
	tag: "cofficlab-logo",
});
---

<Footer
  siteName="CofficLab"
  homeLink="/"
  slogan="构建美好的数字体验"
  company="CofficLab 科技有限公司"
  copyright="© 2024 CofficLab. 保留所有权利"
  inspirationalSlogan="让技术更简单，让体验更美好"
  logo={logo}
  background="base-200"
  aboutInfo={aboutInfo}
  contactInfo={contactInfo}
  socialLinks={socialLinks}
  wechatQR={wechatQR}
  whatsappQR={whatsappQR}
  legalInfo={legalInfo}
  resourcesInfo={resourcesInfo}
/>

---



import { Footer, FooterProps } from "@coffic/cosy-ui";
---

<Footer
  {...FooterProps()
    .siteName('我的网站')
    .homeLink('/')
    .slogan('简单而强大')
    .company('我的公司')
    .inspirationalSlogan('构建美好的数字体验')
    .build()}
/>

legalInfo

Legal information configuration, including terms of service, privacy policy, ICP registration and other legal-related content.

---



/**
 * @component Footer.Basic
 *
 * @description
 * 基础Footer组件示例，展示最简单的页脚用法。
 */
import { Footer, getLandscapeImage, getProductImage } from "@coffic/cosy-ui";

// 产品数据

// 友情链接数据

// 社交媒体链接
const socialLinks = [
	"https://github.com/cofficlab",
	"https://twitter.com/cofficlab",
	"https://weibo.com/cofficlab",
	"https://www.linkedin.com/company/cofficlab",
];

// 联系方式信息
const contactInfo = {
	address: "北京市朝阳区某某大厦 1001 室",
	phone: "+86 138-0000-0000",
	email: "contact@cofficlab.com",
	workingHours: "周一至周五 9:00-18:00",
	wechat: "cofficlab_wechat",
	qq: "123456789",
};

// 法律信息
const legalInfo = {
	termsLink: "/terms",
	privacyLink: "/privacy",
	icp: "京ICP备12345678号",
	icpLink: "https://beian.miit.gov.cn",
};

// 关于信息
const aboutInfo = {
	aboutLink: "/about",
	contactLink: "/contact",
	teamLink: "/team",
	careersLink: "/careers",
};

// 资源信息
const resourcesInfo = {
	newsLink: "/news",
	historyLink: "/history",
	partnersLink: "/partners",
	blogLink: "/blog",
	faqLink: "/faq",
	mediaLink: "/media",
	techStackLink: "/tech-stack",
};

// 二维码图片
const wechatQR = getLandscapeImage({
	width: 200,
	height: 200,
	tag: "wechat-qr",
});

const whatsappQR = getLandscapeImage({
	width: 200,
	height: 200,
	tag: "whatsapp-qr",
});

// 公司 Logo
const logo = getProductImage({
	width: 120,
	height: 40,
	tag: "cofficlab-logo",
});
---

<Footer
  siteName="CofficLab"
  homeLink="/"
  slogan="构建美好的数字体验"
  company="CofficLab 科技有限公司"
  copyright="© 2024 CofficLab. 保留所有权利"
  inspirationalSlogan="让技术更简单，让体验更美好"
  logo={logo}
  background="base-200"
  aboutInfo={aboutInfo}
  contactInfo={contactInfo}
  socialLinks={socialLinks}
  wechatQR={wechatQR}
  whatsappQR={whatsappQR}
  legalInfo={legalInfo}
  resourcesInfo={resourcesInfo}
/>

---



import { Footer, FooterProps } from "@coffic/cosy-ui";
---

<Footer
  {...FooterProps()
    .siteName('我的网站')
    .homeLink('/')
    .slogan('简单而强大')
    .company('我的公司')
    .inspirationalSlogan('构建美好的数字体验')
    .build()}
/>

inspirationalSlogan

Inspirational slogan displayed in the banner.

---



/**
 * @component Footer.Basic
 *
 * @description
 * 基础Footer组件示例，展示最简单的页脚用法。
 */
import { Footer, getLandscapeImage, getProductImage } from "@coffic/cosy-ui";

// 产品数据

// 友情链接数据

// 社交媒体链接
const socialLinks = [
	"https://github.com/cofficlab",
	"https://twitter.com/cofficlab",
	"https://weibo.com/cofficlab",
	"https://www.linkedin.com/company/cofficlab",
];

// 联系方式信息
const contactInfo = {
	address: "北京市朝阳区某某大厦 1001 室",
	phone: "+86 138-0000-0000",
	email: "contact@cofficlab.com",
	workingHours: "周一至周五 9:00-18:00",
	wechat: "cofficlab_wechat",
	qq: "123456789",
};

// 法律信息
const legalInfo = {
	termsLink: "/terms",
	privacyLink: "/privacy",
	icp: "京ICP备12345678号",
	icpLink: "https://beian.miit.gov.cn",
};

// 关于信息
const aboutInfo = {
	aboutLink: "/about",
	contactLink: "/contact",
	teamLink: "/team",
	careersLink: "/careers",
};

// 资源信息
const resourcesInfo = {
	newsLink: "/news",
	historyLink: "/history",
	partnersLink: "/partners",
	blogLink: "/blog",
	faqLink: "/faq",
	mediaLink: "/media",
	techStackLink: "/tech-stack",
};

// 二维码图片
const wechatQR = getLandscapeImage({
	width: 200,
	height: 200,
	tag: "wechat-qr",
});

const whatsappQR = getLandscapeImage({
	width: 200,
	height: 200,
	tag: "whatsapp-qr",
});

// 公司 Logo
const logo = getProductImage({
	width: 120,
	height: 40,
	tag: "cofficlab-logo",
});
---

<Footer
  siteName="CofficLab"
  homeLink="/"
  slogan="构建美好的数字体验"
  company="CofficLab 科技有限公司"
  copyright="© 2024 CofficLab. 保留所有权利"
  inspirationalSlogan="让技术更简单，让体验更美好"
  logo={logo}
  background="base-200"
  aboutInfo={aboutInfo}
  contactInfo={contactInfo}
  socialLinks={socialLinks}
  wechatQR={wechatQR}
  whatsappQR={whatsappQR}
  legalInfo={legalInfo}
  resourcesInfo={resourcesInfo}
/>

---



import { Footer, FooterProps } from "@coffic/cosy-ui";
---

<Footer
  {...FooterProps()
    .siteName('我的网站')
    .homeLink('/')
    .slogan('简单而强大')
    .company('我的公司')
    .inspirationalSlogan('构建美好的数字体验')
    .build()}
/>

logo

Website logo image source (ImageSource). It is recommended to generate it via library helpers (e.g., getExampleImage).

---



/**
 * @component Footer.WithLogo
 *
 * @description
 * 展示带有Logo的页脚示例。
 */
import { Footer, getExampleImage } from "@coffic/cosy-ui";
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  logo={getExampleImage({
    width: 100,
    height: 100,
    provider: 'robohash',
    tag: 'logo',
  })}
/>

---



/**
 * @component Footer.WithLogoLocal
 * @description 使用本地图片作为 Logo 的页脚示例
 */
import { Footer } from "@coffic/cosy-ui";
import book from "@/assets/book.png";
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  logo={book}
/>

products

Product links array, each object contains name, href and optional external properties.

---



/**
 * @component Footer.WithProducts
 *
 * @description
 * 展示带有产品链接的页脚示例。
 */
import { Footer } from "@coffic/cosy-ui";
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  products={[
    { name: '产品A', href: '/products/a' },
    { name: '产品B', href: '/products/b' },
    { name: '产品C', href: '/products/c' },
    { name: '外部产品', href: 'https://example.com', external: true },
  ]}
/>

resourcesInfo

Resources information configuration, including news, blog, FAQ, history, tech stack and other resource links.

---



/**
 * @component Footer.Basic
 *
 * @description
 * 基础Footer组件示例，展示最简单的页脚用法。
 */
import { Footer, getLandscapeImage, getProductImage } from "@coffic/cosy-ui";

// 产品数据

// 友情链接数据

// 社交媒体链接
const socialLinks = [
	"https://github.com/cofficlab",
	"https://twitter.com/cofficlab",
	"https://weibo.com/cofficlab",
	"https://www.linkedin.com/company/cofficlab",
];

// 联系方式信息
const contactInfo = {
	address: "北京市朝阳区某某大厦 1001 室",
	phone: "+86 138-0000-0000",
	email: "contact@cofficlab.com",
	workingHours: "周一至周五 9:00-18:00",
	wechat: "cofficlab_wechat",
	qq: "123456789",
};

// 法律信息
const legalInfo = {
	termsLink: "/terms",
	privacyLink: "/privacy",
	icp: "京ICP备12345678号",
	icpLink: "https://beian.miit.gov.cn",
};

// 关于信息
const aboutInfo = {
	aboutLink: "/about",
	contactLink: "/contact",
	teamLink: "/team",
	careersLink: "/careers",
};

// 资源信息
const resourcesInfo = {
	newsLink: "/news",
	historyLink: "/history",
	partnersLink: "/partners",
	blogLink: "/blog",
	faqLink: "/faq",
	mediaLink: "/media",
	techStackLink: "/tech-stack",
};

// 二维码图片
const wechatQR = getLandscapeImage({
	width: 200,
	height: 200,
	tag: "wechat-qr",
});

const whatsappQR = getLandscapeImage({
	width: 200,
	height: 200,
	tag: "whatsapp-qr",
});

// 公司 Logo
const logo = getProductImage({
	width: 120,
	height: 40,
	tag: "cofficlab-logo",
});
---

<Footer
  siteName="CofficLab"
  homeLink="/"
  slogan="构建美好的数字体验"
  company="CofficLab 科技有限公司"
  copyright="© 2024 CofficLab. 保留所有权利"
  inspirationalSlogan="让技术更简单，让体验更美好"
  logo={logo}
  background="base-200"
  aboutInfo={aboutInfo}
  contactInfo={contactInfo}
  socialLinks={socialLinks}
  wechatQR={wechatQR}
  whatsappQR={whatsappQR}
  legalInfo={legalInfo}
  resourcesInfo={resourcesInfo}
/>

---



import { Footer, FooterProps } from "@coffic/cosy-ui";
---

<Footer
  {...FooterProps()
    .siteName('我的网站')
    .homeLink('/')
    .slogan('简单而强大')
    .company('我的公司')
    .inspirationalSlogan('构建美好的数字体验')
    .build()}
/>

siteName

Website name.

---



/**
 * @component Footer.Basic
 *
 * @description
 * 基础Footer组件示例，展示最简单的页脚用法。
 */
import { Footer, getLandscapeImage, getProductImage } from "@coffic/cosy-ui";

// 产品数据

// 友情链接数据

// 社交媒体链接
const socialLinks = [
	"https://github.com/cofficlab",
	"https://twitter.com/cofficlab",
	"https://weibo.com/cofficlab",
	"https://www.linkedin.com/company/cofficlab",
];

// 联系方式信息
const contactInfo = {
	address: "北京市朝阳区某某大厦 1001 室",
	phone: "+86 138-0000-0000",
	email: "contact@cofficlab.com",
	workingHours: "周一至周五 9:00-18:00",
	wechat: "cofficlab_wechat",
	qq: "123456789",
};

// 法律信息
const legalInfo = {
	termsLink: "/terms",
	privacyLink: "/privacy",
	icp: "京ICP备12345678号",
	icpLink: "https://beian.miit.gov.cn",
};

// 关于信息
const aboutInfo = {
	aboutLink: "/about",
	contactLink: "/contact",
	teamLink: "/team",
	careersLink: "/careers",
};

// 资源信息
const resourcesInfo = {
	newsLink: "/news",
	historyLink: "/history",
	partnersLink: "/partners",
	blogLink: "/blog",
	faqLink: "/faq",
	mediaLink: "/media",
	techStackLink: "/tech-stack",
};

// 二维码图片
const wechatQR = getLandscapeImage({
	width: 200,
	height: 200,
	tag: "wechat-qr",
});

const whatsappQR = getLandscapeImage({
	width: 200,
	height: 200,
	tag: "whatsapp-qr",
});

// 公司 Logo
const logo = getProductImage({
	width: 120,
	height: 40,
	tag: "cofficlab-logo",
});
---

<Footer
  siteName="CofficLab"
  homeLink="/"
  slogan="构建美好的数字体验"
  company="CofficLab 科技有限公司"
  copyright="© 2024 CofficLab. 保留所有权利"
  inspirationalSlogan="让技术更简单，让体验更美好"
  logo={logo}
  background="base-200"
  aboutInfo={aboutInfo}
  contactInfo={contactInfo}
  socialLinks={socialLinks}
  wechatQR={wechatQR}
  whatsappQR={whatsappQR}
  legalInfo={legalInfo}
  resourcesInfo={resourcesInfo}
/>

---



import { Footer, FooterProps } from "@coffic/cosy-ui";
---

<Footer
  {...FooterProps()
    .siteName('我的网站')
    .homeLink('/')
    .slogan('简单而强大')
    .company('我的公司')
    .inspirationalSlogan('构建美好的数字体验')
    .build()}
/>

slogan

Website slogan.

---



/**
 * @component Footer.Basic
 *
 * @description
 * 基础Footer组件示例，展示最简单的页脚用法。
 */
import { Footer, getLandscapeImage, getProductImage } from "@coffic/cosy-ui";

// 产品数据

// 友情链接数据

// 社交媒体链接
const socialLinks = [
	"https://github.com/cofficlab",
	"https://twitter.com/cofficlab",
	"https://weibo.com/cofficlab",
	"https://www.linkedin.com/company/cofficlab",
];

// 联系方式信息
const contactInfo = {
	address: "北京市朝阳区某某大厦 1001 室",
	phone: "+86 138-0000-0000",
	email: "contact@cofficlab.com",
	workingHours: "周一至周五 9:00-18:00",
	wechat: "cofficlab_wechat",
	qq: "123456789",
};

// 法律信息
const legalInfo = {
	termsLink: "/terms",
	privacyLink: "/privacy",
	icp: "京ICP备12345678号",
	icpLink: "https://beian.miit.gov.cn",
};

// 关于信息
const aboutInfo = {
	aboutLink: "/about",
	contactLink: "/contact",
	teamLink: "/team",
	careersLink: "/careers",
};

// 资源信息
const resourcesInfo = {
	newsLink: "/news",
	historyLink: "/history",
	partnersLink: "/partners",
	blogLink: "/blog",
	faqLink: "/faq",
	mediaLink: "/media",
	techStackLink: "/tech-stack",
};

// 二维码图片
const wechatQR = getLandscapeImage({
	width: 200,
	height: 200,
	tag: "wechat-qr",
});

const whatsappQR = getLandscapeImage({
	width: 200,
	height: 200,
	tag: "whatsapp-qr",
});

// 公司 Logo
const logo = getProductImage({
	width: 120,
	height: 40,
	tag: "cofficlab-logo",
});
---

<Footer
  siteName="CofficLab"
  homeLink="/"
  slogan="构建美好的数字体验"
  company="CofficLab 科技有限公司"
  copyright="© 2024 CofficLab. 保留所有权利"
  inspirationalSlogan="让技术更简单，让体验更美好"
  logo={logo}
  background="base-200"
  aboutInfo={aboutInfo}
  contactInfo={contactInfo}
  socialLinks={socialLinks}
  wechatQR={wechatQR}
  whatsappQR={whatsappQR}
  legalInfo={legalInfo}
  resourcesInfo={resourcesInfo}
/>

---



import { Footer, FooterProps } from "@coffic/cosy-ui";
---

<Footer
  {...FooterProps()
    .siteName('我的网站')
    .homeLink('/')
    .slogan('简单而强大')
    .company('我的公司')
    .inspirationalSlogan('构建美好的数字体验')
    .build()}
/>

socialLinks

Social media links array.

---



/**
 * @component Footer.WithSocial
 *
 * @description
 * 展示带有社交媒体链接的页脚示例。
 */
import { Footer } from "@coffic/cosy-ui";
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  socialLinks={[
    'https://github.com/myusername',
    'https://twitter.com/myusername',
    'https://linkedin.com/in/myusername',
    'https://facebook.com/myusername',
  ]}
/>

wechatQR

WeChat QR code image source, supports local images or remote URLs. When this property is provided, a WeChat icon will be displayed in the social media links area, showing the QR code on hover.

---



import { Footer } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  wechatQR={qrCodeImage}
/>

---



import { Footer } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  wechatQR={qrCodeImage}
  socialLinks={[
    'https://github.com/myusername',
    'https://twitter.com/myusername',
  ]}
/>

whatsappQR

WhatsApp QR code image source, supports local images or remote URLs. When this property is provided, a WhatsApp icon will be displayed in the social media links area, showing the QR code on hover.

---



import { Footer } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  wechatQR={qrCodeImage}
/>

---



import { Footer } from "@coffic/cosy-ui";
import qrCodeImage from "@/assets/qrcode.png";
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  whatsappQR={qrCodeImage}
/>

---



import { Footer } from "@coffic/cosy-ui";
import bookImage from "@/assets/book.png";
---

<Footer
  siteName="我的网站"
  homeLink="/"
  slogan="简单而强大"
  company="我的公司"
  copyright="保留所有权利"
  inspirationalSlogan="构建美好的数字体验"
  wechatQR={bookImage}
  whatsappQR={bookImage}
  socialLinks={[
    'https://github.com/myusername',
    'https://twitter.com/myusername',
  ]}
/>