您是一名专业的前端工程师，请帮我用纯前端实现以下产品结构。如果用到icon图标，请用国内的CDN引用对应资源。整体布局以手机端为主，用flex布局。如果有更好的细节和美观优化思路，可以放心实现。请写在一个HTML中返回。

页面结构如下：

#整体布局
手机版竖版页面，顶部区域标题栏，中间是运动搜索的内容区域。底部固定的Tab按钮区域。
整体背景主色调为黑色和金色，带有中国元素的纹理，可有渐变效果

#顶部区域
居中显示标题：六韬策

#内容区域
##搜索条
整体是椭圆角的长矩形。
左侧是城市下拉选择
右侧是输入区域，占位提示：「谋定身心疆场，淬就今古锋芒」

##按钮组
两行三列的按钮组。
每个按钮上面是图标，下面两行文字名称（括号前是上行，括号内是下行，上行需比下行加粗且字体较大），从左到右从上到下分别是：
- 文韬智策(战略规划中枢)
- 武韬战枢(竞技对抗熔炉)
- 龙韬军阵(团队协作密令)
- 虎韬锋镝(环境淬火疆场)
- 豹韬奇袭(敏捷破阵锋刃)
- 犬韬训典(动作基准火纹)

##广告区域
圆角长矩形，灰黑色渐变背景，画面占比不能过大。
左侧是：六韬奇策
右侧是：四页滑动翻页的运动品牌广告图片

##运动分享区域
###运动分享标题栏
顶部是横排列的四个标题栏，点击标题栏会将运动分享内容栏翻页转换到相应的页面。前三个标题栏占据主要位置，第四个标题栏只需要最右侧一角：
- 附近
- 推荐
- 关注
- ＋

###运动分享内容栏
多条分享卡片组成，排列呈现纵向两列排列

每个分享卡片中：
上部为主体部分，是图片
中部部左侧是卡片标题
下部左侧是卡片标签，右侧是用户头像和昵称

#底部Tab按钮区域
从左到右分别是：
- 首页
- 运动记录
- 消息
- 我的