diff --git a/assets/scss/user-group.scss b/assets/scss/user-group.scss new file mode 100644 index 000000000..f92222979 --- /dev/null +++ b/assets/scss/user-group.scss @@ -0,0 +1,489 @@ +@import 'variables'; +@import 'mixin'; + +.div { + div { + box-sizing: border-box; + } +} + +.topSection { + position: relative; + padding-top: 138px; + + .title-div { + padding-bottom: 62px; + + h1 { + width: 1060px; + font-weight: 600; + font-size: 40px; + line-height: 40px; + text-align: center; + letter-spacing: -0.1px; + text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15); + } + + p { + width: 1060px; + margin-top: 12px; + letter-spacing: -0.04px; + color: #ffffff; + text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15); + text-align: center; + font-size: 16px; + line-height: 24px; + } + + @media only screen and (max-width: $mobile-max-width) { + width: 100%; + top: 100px; + + h1 { + width: 100%; + } + + p { + width: 100%; + } + } + } +} + +.cityBox { + width: 100%; + padding-top: 91px; + padding-bottom: 99px; + display: flex; + flex-direction: row; + position: relative; + + .city-card { + position: relative; + + .innerBox { + width: 293px; + height: 300px; + border-radius: 10px; + padding: 32px 24px 32px 32px; + background: #FFFFFF; + box-shadow: 0px 8px 16px rgba(36, 46, 66, 0.05), 0px 4px 8px rgba(36, 46, 66, 0.06); + backdrop-filter: blur(12px); + + .title { + display: block; + font-weight: 600; + font-size: 32px; + line-height: 52px; + color: #171C34; + margin-bottom: 8px; + } + + .des { + display: block; + font-size: 16px; + line-height: 32px; + color: #171C34; + margin-bottom: 24px; + } + + .joinUs { + display: flex; + width: 104px; + height: 40px; + align-items: center; + justify-content: center; + background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.1) 96.81%), #55BC8A; + box-shadow: 0px 8px 16px rgba(33, 43, 61, 0.2), 0px 10px 50px rgba(34, 43, 62, 0.1); + border-radius: 20px; + color: #FFFFFF; + font-weight: 600; + font-size: 14px; + line-height: 20px; + } + } + + .bl-svg { + position: absolute; + width: 131px; + height: 128px; + bottom: -78px; + left: -63px; + z-index: -1; + } + } + + .tr-svg { + position: absolute; + width: 131px; + height: 128px; + top: 19px; + right: -48px; + z-index: -1; + } + + .imageList { + margin-left: 13px; + display: flex; + flex-direction: row; + flex: 1; + + .normalPic { + width: 212px; + height: 300px; + border-radius: 10px; + // background: #C4C4C4; + padding: 20px; + overflow: hidden; + position: relative; + z-index: 0; + transition-duration: .5s; + + img { + position: absolute; + border-radius: 10px; + z-index: -1; + } + + .shanghai { + width: 568px; + height: 394px; + top: -47px; + left: -84px; + } + + .hangzhou { + width: 410px; + height: 330px; + top: 0px; + left: -20px; + } + + .chengdu { + width: 384px; + height: 512px; + top: -88px; + left: -44px; + } + + .nameText { + text-align: center; + width: 60px; + height: 24px; + background: linear-gradient(180deg, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.1) 96.81%), #242E42; + box-shadow: 0px 8px 16px rgba(33, 43, 61, 0.2), 0px 10px 50px rgba(34, 43, 62, 0.1); + border-radius: 18px; + font-weight: 500; + font-size: 12px; + line-height: 24px; + color: #ffffff; + } + + .textBox { + position: absolute; + bottom: 0px; + left: 0px; + padding: 20px; + opacity: 0; + background: linear-gradient(180deg, rgba(23, 28, 52, 0) 0%, rgba(23, 28, 52, 0.8) 100%); + border-radius: 10px; + + + .title { + font-weight: 600; + font-size: 16px; + line-height: 24px; + letter-spacing: -0.0444444px; + color: #FFFFFF; + } + + .des { + font-size: 14px; + line-height: 20px; + color: rgba(255, 255, 255, 0.8); + } + } + + &:nth-child(even) { + margin: 0 20px; + } + } + + .pic-hover { + width: 380px; + cursor: pointer; + + .textBox { + opacity: 1; + transition-delay: .3s; + } + } + } +} + +.org-section { + background-size: 100% 100%; + background-repeat: no-repeat; + + .org { + padding: 48px 0px; + height: 500px; + display: flex; + flex-direction: row; + justify-content: center; + + .left { + width: 480px; + + .title { + font-weight: 600; + font-size: 32px; + line-height: 52px; + color: #171C34; + text-shadow: 0px 4px 8px rgba(35, 45, 65, 0.1); + } + + .orgIcon { + width: 89px; + height: 29px; + margin-top: 8px; + margin-bottom: 24px; + } + + .des { + font-size: 16px; + line-height: 32px; + color: #171C34; + } + } + + .right { + width: 535px; + height: 294px; + margin-left: 81px; + padding-top: 8px; + background-repeat: no-repeat; + position: relative; + display: flex; + align-items: center; + flex-direction: column; + + .bg { + position: absolute; + top: 0px; + left: 0px; + width: 535px; + height: 294px; + z-index: 0; + } + + .sig { + width: 256px; + height: 48px; + background: #060845; + box-shadow: 0px 8px 16px rgba(36, 46, 66, 0.05), 0px 4px 8px rgba(36, 46, 66, 0.06); + border-radius: 8px; + font-weight: 600; + font-size: 16px; + line-height: 22px; + color: #FFFFFF; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 56px; + z-index: 5; + } + + .sig-zh { + width: 256px; + height: 48px; + background: #060845; + box-shadow: 0px 8px 16px rgba(36, 46, 66, 0.05), 0px 4px 8px rgba(36, 46, 66, 0.06); + border-radius: 8px; + font-weight: 600; + font-size: 16px; + line-height: 22px; + color: #FFFFFF; + display: flex; + justify-content: center; + align-items: center; + margin-bottom: 92px; + z-index: 5; + } + + .positionBox { + width: 100%; + height: 48px; + display: flex; + flex-direction: row; + justify-content: space-between; + z-index: 5; + + .position { + width: 120px; + height: 48px; + background: #55BC8A; + box-shadow: 0px 8px 16px rgba(36, 46, 66, 0.05), 0px 4px 8px rgba(36, 46, 66, 0.06); + border-radius: 8px; + font-weight: 600; + font-size: 16px; + line-height: 22px; + color: #FFFFFF; + display: flex; + justify-content: center; + align-items: center; + } + } + } + } +} + +.applyNew { + .apply { + padding-top: 108px; + padding-bottom: 80px; + + .text-head { + display: flex; + flex-direction: row; + margin-bottom: 24.03px; + justify-content: center; + + .left { + width: 480px; + position: relative; + + .title-en { + font-weight: 500; + font-size: 14px; + line-height: 24px; + text-transform: uppercase; + color: #00A971; + } + + .title { + font-weight: 600; + font-size: 32px; + line-height: 52px; + color: #171C34; + margin-bottom: 24px; + } + + .des { + font-size: 16px; + line-height: 32px; + color: #171C34; + } + + .svg { + width: 197.97px; + height: 175.32px; + opacity: 0.8; + position: absolute; + top: -60px; + left: -35px; + } + } + + .right { + width: 503.19px; + height: 365.97px; + margin-left: 96px; + } + } + + .title { + display: block; + font-weight: 600; + font-size: 20px; + line-height: 32px; + color: #36435C; + margin-bottom: 8px; + } + + .des { + font-size: 16px; + line-height: 24px; + color: #8F94A1; + } + + @mixin condition { + background: #FFFFFF; + border-radius: 8px; + display: flex; + flex-direction: row; + padding: 24px; + + .icon { + width: 64px; + height: 64px; + } + + .text { + margin-left: 20px; + + span { + display: block; + } + + a { + font-weight: 600; + color: #55BC8A; + } + } + } + + .condition { + @include condition() + } + + .apply { + margin: 20px 0px; + @include condition() + } + } +} + +.returns { + margin-bottom: 78px; + .return { + .title { + font-weight: 600; + font-size: 32px; + line-height: 48px; + color: #3D3E49; + text-shadow: 0px 4px 8px rgba(35, 45, 65, 0.1); + text-align: center; + margin-bottom: 40px; + } + + .cards { + display: flex; + flex-direction: row; + justify-content: space-between; + + .card { + box-sizing: border-box; + width: 275px; + height: 156px; + background: #FFFFFF; + border-radius: 8px; + padding: 24px; + position: relative; + overflow: hidden; + + .text{ + font-size: 16px; + line-height: 28px; + color: #36435C; + } + + .bg{ + position: absolute; + top: 92px; + right: 0px; + } + } + } + } +} \ No newline at end of file diff --git a/content/zh/user-group/_index.md b/content/zh/user-group/_index.md new file mode 100644 index 000000000..4f6581522 --- /dev/null +++ b/content/zh/user-group/_index.md @@ -0,0 +1,82 @@ +--- +title: "社区用户委员会" + +css: "scss/user-group.scss" + +topSection: + title: KubeSphere 社区用户委员会 + content: KubeSphere 社区用户委员会是由 KubeSphere 社区牵头，在城市当地由活跃且愿意为 KubeSphere 社区发展而贡献的用户组成的用户组织。社区会给予委员会相应的支持和授权，以使委员会在当地组织交流活动等，从而促进 KubeSphere 的发展。目前已经成立三个城市站：上海、杭州、成都。 + image: /images/user-group/banner.png + +citySection: + cityCard: + title: 城市站 + des: KubeSphere 用户委员会目前已经成立三个城市站：上海、杭州、成都。 + joinLink: https://www.baidu.com + + picList: + - name: 上海站 + backgroundImage: /images/user-group/cityCards/shanghai.jpeg + title: KubeSphere 社区用户委员会 — 上海站 + des: 上海站成立于 2021 年 5 月 15 日，是由活跃在上海的 KubeSphere 社区用户和成员组成的。目前为初创阶段，核心成员 4 人。 + id: shanghai + + - name: 杭州站 + backgroundImage: /images/user-group/cityCards/hangzhou.jpeg + title: KubeSphere 社区用户委员会 — 杭州站 + des: 杭州站成立于 2021 年 5 月 15 日，是由活跃在上海的 KubeSphere 社区用户和成员组成的。目前为初创阶段，核心成员 5 人。 + id: hangzhou + + - name: 成都站 + backgroundImage: /images/user-group/cityCards/chengdu.jpeg + title: KubeSphere 社区用户委员会 — 成都站 + des: 成都站成立于 2021 年 5 月 15 日，是由活跃在上海的 KubeSphere 社区用户和成员组成的。目前为初创阶段，核心成员 6 人。 + id: chengdu + +organization: + name: 组织架构 + orgIcon: /images/user-group/org/github.svg + description: Advocacy and Outreach SIG 旨在以创新的方式发展社区。 我们讨论宣传、外展、活动、社交媒体推广，并吸引新人加入 KubeSphere 社区。如果您感兴趣，可以加入我们的 SIG。在那里您可以找到与您感兴趣的主题所相关的一切内容。 + SIG: Advocacy and Outreach SIG + SIG_zh: KubeSphere 社区用户委员会 + position1: 站长 + position2: 副站长 + position3: 委员 + + +applyNew: + title_en: KubeSphere community + title: 申请成立新的城市站 + description: 因 KubeSphere 社区成员和用户遍布全国各地，而社区无法定期在每个城市都组织如 Meetup 等交流活动，将各地用户聚集起来交流探讨。在多个城市都有一批活跃的而且愿意贡献的用户，可自发组织交流活动。为了方便 KubeSphere 社区用户的线下交流，以及本地活动的开展，KubeSphere 社区欢迎并鼓励成立新的城市站（上海、杭州、成都除外）。 + right_pic: /images/user-group/applyNew/apply.svg + + conditions: + text: 成立条件 + description: 要成立的城市站至少要有一名近半年内在 KubeSphere 社区中活跃的成员作为站长发起。 + image: /images/user-group/applyNew/condition.svg + + apply: + text: 申请方式 + applyLink: https://github.com/kubesphere/community/issues + image: /images/user-group/applyNew/note.svg + + requirements: + text: 要求 + applyLink: https://github.com/kubesphere/community/issues + image: /images/user-group/applyNew/requirements.svg + +returns: + title: 成为站长你可以获得什么？ + list: + - text: 结识更多的云原生领域的技术大牛、志同道合的朋友 + bg: /images/user-group/returns/bg1.svg + + - text: 提升在云原生领域的知名度 + bg: /images/user-group/returns/bg2.svg + + - text: 提升自身多项能力：交流沟通能力、组织协调能力、领导能力等 + bg: /images/user-group/returns/bg3.svg + + - text: KubeSphere 社区周边纪念礼品、社区认证证书及社区Title + bg: /images/user-group/returns/bg4.svg +--- \ No newline at end of file diff --git a/layouts/user-group/list.html b/layouts/user-group/list.html new file mode 100644 index 000000000..4e0323265 --- /dev/null +++ b/layouts/user-group/list.html @@ -0,0 +1,155 @@ +{{ define "main" }} + +{{ with .Params.topSection }} +
+
+

{{ .title }}

+

{{ .content }}

+
+
+{{ end }} + +{{ with .Params.citySection }} +
+
+
+ {{ with .cityCard }} +
+
+ {{ .title }} + {{ .des }} + 加入我们 +
+ +
+ {{ end }} + +
+ {{ range .picList }} +
+ +
{{ .name }}
+
+
{{ .title }}
+
{{ .des }}
+
+
+ {{ end }} +
+ +
+
+
+{{end}} + +{{ with .Params.organization }} +
+
+
+
+
{{ .name }}
+ +
{{ .description }}
+
+
+ +
{{ .SIG }}
+
{{ .SIG_zh }}
+
+
{{ .position1 }}
+
{{ .position2 }}
+
{{ .position3 }}
+
+
+
+
+
+{{ end }} + +{{ with .Params.applyNew }} +
+
+
+
+
+
{{ .title_en }}
+
{{ .title }}
+
{{ .description }}
+ +
+
+
+ {{ with .conditions }} +
+ +
+ {{ .text }} + {{ .description }} +
+
+ {{ end }} + + {{ with .apply }} +
+ +
+ {{ .text }} + + 站长向社区 提交申请，通过后即可成立。 + +
+
+ {{ end }} + + {{ with .requirements }} +
+ +
+ {{ .text }} + + 1.站长需要保证所在城市内，每年至少组织一场线下活动（出现疫情等特殊情况例外）。 + 2.如果站长由于某个原因临时、或者长期无法于所在城市组织线下活动，需要向社区 提交申请 推荐新的站长，或请求社区推荐新的站长。如果最终无人能组织活动，城市站设置为不活跃状态，直到有新的活跃成员出现。 + + +
+
+ {{ end }} +
+
+
+{{ end }} + + +{{ with .Params.returns }} +
+
+
+

{{ .title }}

+
+ {{ range .list }} +
+ {{ .text }} + +
+ {{ end }} +
+
+
+
+{{ end }} + + +{{ end }} \ No newline at end of file diff --git a/layouts/user-group/single.html b/layouts/user-group/single.html new file mode 100644 index 000000000..e69de29bb diff --git a/static/images/user-group/applyNew/apply.svg b/static/images/user-group/applyNew/apply.svg new file mode 100644 index 000000000..adc807719 --- /dev/null +++ b/static/images/user-group/applyNew/apply.svg @@ -0,0 +1,113 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/user-group/applyNew/condition.svg b/static/images/user-group/applyNew/condition.svg new file mode 100644 index 000000000..dfa77d213 --- /dev/null +++ b/static/images/user-group/applyNew/condition.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/images/user-group/applyNew/note.svg b/static/images/user-group/applyNew/note.svg new file mode 100644 index 000000000..be467ddd8 --- /dev/null +++ b/static/images/user-group/applyNew/note.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/static/images/user-group/applyNew/requirements.svg b/static/images/user-group/applyNew/requirements.svg new file mode 100644 index 000000000..6fa57cd80 --- /dev/null +++ b/static/images/user-group/applyNew/requirements.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/static/images/user-group/applyNew/top-rect.svg b/static/images/user-group/applyNew/top-rect.svg new file mode 100644 index 000000000..04fa1ee38 --- /dev/null +++ b/static/images/user-group/applyNew/top-rect.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/user-group/banner.png b/static/images/user-group/banner.png new file mode 100644 index 000000000..631a43450 Binary files /dev/null and b/static/images/user-group/banner.png differ diff --git a/static/images/user-group/city-rect.svg b/static/images/user-group/city-rect.svg new file mode 100644 index 000000000..6d4e223c3 --- /dev/null +++ b/static/images/user-group/city-rect.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/user-group/city-rect1.svg b/static/images/user-group/city-rect1.svg new file mode 100644 index 000000000..056258c11 --- /dev/null +++ b/static/images/user-group/city-rect1.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/user-group/cityCards/chengdu.jpeg b/static/images/user-group/cityCards/chengdu.jpeg new file mode 100644 index 000000000..86e965256 Binary files /dev/null and b/static/images/user-group/cityCards/chengdu.jpeg differ diff --git a/static/images/user-group/cityCards/hangzhou.jpeg b/static/images/user-group/cityCards/hangzhou.jpeg new file mode 100644 index 000000000..2c30022a7 Binary files /dev/null and b/static/images/user-group/cityCards/hangzhou.jpeg differ diff --git a/static/images/user-group/cityCards/shanghai.jpeg b/static/images/user-group/cityCards/shanghai.jpeg new file mode 100644 index 000000000..4f9a7b0fa Binary files /dev/null and b/static/images/user-group/cityCards/shanghai.jpeg differ diff --git a/static/images/user-group/org/bg.png b/static/images/user-group/org/bg.png new file mode 100644 index 000000000..36ebc6271 Binary files /dev/null and b/static/images/user-group/org/bg.png differ diff --git a/static/images/user-group/org/github.svg b/static/images/user-group/org/github.svg new file mode 100644 index 000000000..c94933329 --- /dev/null +++ b/static/images/user-group/org/github.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/static/images/user-group/org/tree.svg b/static/images/user-group/org/tree.svg new file mode 100644 index 000000000..417213402 --- /dev/null +++ b/static/images/user-group/org/tree.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/images/user-group/returns/bg1.svg b/static/images/user-group/returns/bg1.svg new file mode 100644 index 000000000..7b0c93848 --- /dev/null +++ b/static/images/user-group/returns/bg1.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/static/images/user-group/returns/bg2.svg b/static/images/user-group/returns/bg2.svg new file mode 100644 index 000000000..1411a0b1e --- /dev/null +++ b/static/images/user-group/returns/bg2.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/images/user-group/returns/bg3.svg b/static/images/user-group/returns/bg3.svg new file mode 100644 index 000000000..b1a0f274b --- /dev/null +++ b/static/images/user-group/returns/bg3.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/static/images/user-group/returns/bg4.svg b/static/images/user-group/returns/bg4.svg new file mode 100644 index 000000000..c1cc6f5a6 --- /dev/null +++ b/static/images/user-group/returns/bg4.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file