Initial Commit
commit
40b4f7e38c
@ -0,0 +1,69 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Typescript v1 declaration files
|
||||
typings/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# dotenv environment variable files
|
||||
.env*
|
||||
|
||||
# gatsby files
|
||||
.cache/
|
||||
public
|
||||
|
||||
# Mac files
|
||||
.DS_Store
|
||||
|
||||
# Yarn
|
||||
yarn-error.log
|
||||
.pnp/
|
||||
.pnp.js
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
@ -0,0 +1,4 @@
|
||||
.cache
|
||||
package.json
|
||||
package-lock.json
|
||||
public
|
||||
@ -0,0 +1,4 @@
|
||||
{
|
||||
"arrowParens": "avoid",
|
||||
"semi": false
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
The BSD Zero Clause License (0BSD)
|
||||
|
||||
Copyright (c) 2020 Gatsby Inc.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
||||
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
||||
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
||||
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
||||
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
||||
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
||||
PERFORMANCE OF THIS SOFTWARE.
|
||||
@ -0,0 +1,9 @@
|
||||
/**
|
||||
* Implement Gatsby's Browser APIs in this file.
|
||||
*
|
||||
* See: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/
|
||||
*/
|
||||
|
||||
// You can delete this file if you're not using it
|
||||
|
||||
import './src/styles/global.css'
|
||||
@ -0,0 +1,44 @@
|
||||
/**
|
||||
* Configure your Gatsby site with this file.
|
||||
*
|
||||
* See: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/
|
||||
*/
|
||||
|
||||
/**
|
||||
* @type {import('gatsby').GatsbyConfig}
|
||||
*/
|
||||
module.exports = {
|
||||
siteMetadata: {
|
||||
title: `Talent Team`,
|
||||
description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
|
||||
author: `@Alexandr Beknazaryan`,
|
||||
siteUrl: `https://gatsbystarterdefaultsource.gatsbyjs.io/`,
|
||||
},
|
||||
plugins: [
|
||||
'gatsby-plugin-postcss',
|
||||
`gatsby-plugin-image`,
|
||||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
options: {
|
||||
name: `images`,
|
||||
path: `${__dirname}/src/images`,
|
||||
},
|
||||
},
|
||||
`gatsby-transformer-sharp`,
|
||||
`gatsby-plugin-sharp`,
|
||||
{
|
||||
resolve: `gatsby-plugin-manifest`,
|
||||
options: {
|
||||
name: `gatsby-starter-default`,
|
||||
short_name: `starter`,
|
||||
start_url: `/`,
|
||||
background_color: `#663399`,
|
||||
// This will impact how browsers show your PWA/website
|
||||
// https://css-tricks.com/meta-theme-color-and-trickery/
|
||||
// theme_color: `#663399`,
|
||||
display: `minimal-ui`,
|
||||
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
/**
|
||||
* Implement Gatsby's Node APIs in this file.
|
||||
*
|
||||
* See: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-node/
|
||||
*/
|
||||
|
||||
/**
|
||||
* @type {import('gatsby').GatsbyNode['createPages']}
|
||||
*/
|
||||
exports.createPages = async ({ actions }) => {
|
||||
const { createPage } = actions
|
||||
createPage({
|
||||
path: "/using-dsg",
|
||||
component: require.resolve("./src/templates/using-dsg.js"),
|
||||
context: {},
|
||||
defer: true,
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,12 @@
|
||||
/**
|
||||
* Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
|
||||
*
|
||||
* See: https://www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr/
|
||||
*/
|
||||
|
||||
/**
|
||||
* @type {import('gatsby').GatsbySSR['onRenderBody']}
|
||||
*/
|
||||
exports.onRenderBody = ({ setHtmlAttributes }) => {
|
||||
setHtmlAttributes({ lang: `en` })
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,50 @@
|
||||
{
|
||||
"name": "gatsby-starter-default",
|
||||
"private": true,
|
||||
"description": "A simple starter to get up and developing quickly with Gatsby",
|
||||
"version": "0.1.0",
|
||||
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
|
||||
"dependencies": {
|
||||
"@headlessui/react": "^1.7.12",
|
||||
"@heroicons/react": "^2.0.16",
|
||||
"framer-motion": "^10.12.16",
|
||||
"gatsby": "^5.7.0",
|
||||
"gatsby-plugin-image": "^3.7.0",
|
||||
"gatsby-plugin-manifest": "^5.7.0",
|
||||
"gatsby-plugin-sharp": "^5.7.0",
|
||||
"gatsby-source-filesystem": "^5.7.0",
|
||||
"gatsby-transformer-sharp": "^5.7.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^4.7.1",
|
||||
"react-type-animation": "^3.0.1",
|
||||
"swiper": "^9.3.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^10.4.13",
|
||||
"gatsby-plugin-postcss": "^6.7.0",
|
||||
"postcss": "^8.4.21",
|
||||
"prettier": "^2.8.4",
|
||||
"tailwindcss": "^3.2.7"
|
||||
},
|
||||
"keywords": [
|
||||
"gatsby"
|
||||
],
|
||||
"license": "0BSD",
|
||||
"scripts": {
|
||||
"build": "gatsby build",
|
||||
"develop": "gatsby develop",
|
||||
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,css}\"",
|
||||
"start": "gatsby develop",
|
||||
"serve": "gatsby serve",
|
||||
"clean": "gatsby clean",
|
||||
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/gatsbyjs/gatsby-starter-default"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/gatsbyjs/gatsby/issues"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
|
||||
const Advantage = ({className, icon, title, description}) => {
|
||||
return (
|
||||
<div className={['flex', className].join(' ')}>
|
||||
<div className='flex flex-col items-center text-center'>
|
||||
<div className='bg-yellow-400 rounded-lg w-16 h-16 flex justify-center items-center mb-4'>{icon}</div>
|
||||
<h3 className='text-gray-900 font-semibold text-2xl mb-3'>{title}</h3>
|
||||
<p className='text-gray-500 font-medium text-base leading-6'>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Advantage;
|
||||
@ -0,0 +1,12 @@
|
||||
import React from 'react'
|
||||
import { getImage } from 'gatsby-plugin-image';
|
||||
|
||||
const Image = ({title, image}) => {
|
||||
return (
|
||||
<div style={{'--image-url': `url(${getImage(image).images.fallback.src})`}} className="[&>h3]:hover:-translate-y-7 bg-[size:100%] bg-center hover:bg-[size:110%] duration-[2s] ease-[cubic-bezier(0, 1, 0.35, 1)] transition-all flex items-center justify-center relative bg-no-repeat bg-[linear-gradient(to_bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),var(--image-url)] basis-1/3 h-80">
|
||||
<h3 className='transition uppercase text-white font-medium text-center'>{title}</h3>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Image
|
||||
@ -0,0 +1,15 @@
|
||||
import React from 'react'
|
||||
|
||||
import FacilitationsMain from './Main';
|
||||
import FacilitationsExample from './Example/Example';
|
||||
|
||||
const Facilitations = {
|
||||
Main: function Main(props) {
|
||||
return (<FacilitationsMain></FacilitationsMain>)
|
||||
},
|
||||
Example: function Example(props) {
|
||||
return (<FacilitationsExample></FacilitationsExample>)
|
||||
}
|
||||
}
|
||||
|
||||
export default Facilitations
|
||||
@ -0,0 +1,15 @@
|
||||
import React from 'react'
|
||||
|
||||
const Step = ({title, count, ml}) => {
|
||||
return (
|
||||
<div className='flex flex-col mb-7 relative [&>div>.number]:last:before:content-none'>
|
||||
<div className="flex items-center">
|
||||
<div className={'number border-yellow-200 border-4 flex items-center justify-center text-lg text-white relative font-bold bg-yellow-400 rounded-full w-16 h-16 mr-5 before:absolute before:bottom-0 before:bg-yellow-200 before:w-1 before:left-[calc(50%+5px)] before:h-[40px] before:-rotate-[11deg] before:-translate-y-[-100%] '+ml}>0{count}</div>
|
||||
<p className='text-xl font-medium text-gray-800'>{title}</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Step
|
||||
@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'gatsby';
|
||||
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
|
||||
import { BsArrowRight } from "react-icons/bs";
|
||||
|
||||
const Game = ({img, title, description, slug}) => {
|
||||
const image = getImage(img)
|
||||
|
||||
return (
|
||||
<Link to={slug} className={'flex basis-[calc(25%-15px)] mr-5 justify-center [&:nth-child(4n+4)]:mr-0 mb-14 [&>div>h2]:hover:text-yellow-500 [&>div]:hover:scale-105'}>
|
||||
<div className="flex flex-col transition">
|
||||
<GatsbyImage className='rounded-lg mb-2 h-60 object-cover' image={image} alt="logo" placeholder="none"/>
|
||||
<h2 className='text-white text-xl font-medium mb-3 transition'>{title}</h2>
|
||||
<p className='text-gray-300 mb-4 grow'>{description}</p>
|
||||
<p className='more transition flex items-center text-yellow-400'>Подробнее <BsArrowRight className='ml-2'/></p>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export default Game;
|
||||
@ -0,0 +1,19 @@
|
||||
import React from 'react'
|
||||
|
||||
import { FaQuoteLeft } from "react-icons/fa";
|
||||
|
||||
const Review = ({text, name, post, company}) => {
|
||||
return (
|
||||
<div className="h-full border-2 rounded-md p-5 pl-14 border-[#0E0808] relative flex flex-col">
|
||||
<FaQuoteLeft className='text-gray-400 text-lg absolute left-5'/>
|
||||
<p className='flex-grow mb-10'>{text}</p>
|
||||
<div className="flex text-sm leading-5 flex-col items-end text-left">
|
||||
<p>{name}</p>
|
||||
<p>{post}</p>
|
||||
<p>{company}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Review;
|
||||
@ -0,0 +1,34 @@
|
||||
import React, { useState } from 'react'
|
||||
import { Swiper, SwiperSlide } from 'swiper/react';
|
||||
import { Autoplay } from 'swiper';
|
||||
import 'swiper/css';
|
||||
import 'swiper/css/autoplay';
|
||||
|
||||
import Review from './Review';
|
||||
|
||||
const Reviews = () => {
|
||||
|
||||
const [reviews, setReviews] = useState([
|
||||
{id: 0, text: 'Какой-то очень красивый отзыв ялял яля л яля ля ля лля ля ля лйцмвпйцв йцв пнгцйпнгвнгпйц йцвйцв в', name: 'Имя Фамилия', post: 'Директор', company: 'Газпром :D'},
|
||||
{id: 1, text: 'Какой-то очень красивый отзыв ялял яля л яля ля ля лля ля ля лйцмвпйцв йцв пнгцйпнгвнгйцвйц вйцвцй в йцвйцв йцв ш йцвв йц йцвгйшц рщв гшпщнйцвнпш гйцвшнпщгйц внпгщ йцнпгвйцв нгпнг йпцвгн пйцгнппйцв', name: 'Имя Фамилия', post: 'Директор', company: 'Газпром :D'},
|
||||
{id: 2, text: 'Какой-то очень красивый отзыв ялял яля л яля ля ля лля ля ля лйцмвпйцв йцв пнгцйпнгвнгпйцв', name: 'Имя Фамилия', post: 'Директор', company: 'Газпром :D'},
|
||||
{id: 3, text: 'Какой-то очень красивый отзыв ялял яля л яля ля ля лля ля ля лйцмвпйцв йцв пнгцйпнгвнгпйцв', name: 'Имя Фамилия', post: 'Директор', company: 'Газпром :D'},
|
||||
])
|
||||
|
||||
return (
|
||||
<section className='py-24'>
|
||||
<div className="container mx-auto">
|
||||
<h2 className='text-3xl mb-20 font-semibold text-slate-800 text-center uppercase'>Отзывы</h2>
|
||||
<Swiper modules={[Autoplay]} autoplay={true} spaceBetween={50} slidesPerView={3} onSwiper={(swiper) => console.log(swiper)}>
|
||||
{reviews.map(review=>
|
||||
<SwiperSlide className='!h-auto'>
|
||||
<Review key={review.id} text={review.text} name={review.name} post={review.post} company={review.company}></Review>
|
||||
</SwiperSlide>
|
||||
)}
|
||||
</Swiper>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Reviews;
|
||||
@ -0,0 +1,18 @@
|
||||
import React from 'react'
|
||||
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
|
||||
|
||||
const Person = ({name, post, img}) => {
|
||||
return (
|
||||
<div className='flex p-6 flex-col basis-1/3 relative h-[600px] mr-6 [&:nth-child(3n+3)]:mr-0'>
|
||||
<div className="h-full flex flex-col justify-end max-w-s z-20">
|
||||
<h3 className='text-xl text-white mb-3'>{name}</h3>
|
||||
<p className='text-base text-white whitespace-pre-wrap'>{post}</p>
|
||||
</div>
|
||||
<div className="absolute top-0 left-0 h-full before:absolute before:bg-black before:h-full before:w-full before:top-0 before:left-0 before:z-10 before:rounded-lg before:opacity-25">
|
||||
<GatsbyImage className='h-full rounded-lg mb-2 object-cover' image={getImage(img)} alt="logo" placeholder="none"/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Person
|
||||
@ -0,0 +1,42 @@
|
||||
import React, { useState } from 'react'
|
||||
|
||||
import { useStaticQuery, graphql } from "gatsby"
|
||||
import Image from './Image'
|
||||
|
||||
const Example = () => {
|
||||
|
||||
const images = useStaticQuery(graphql`
|
||||
query {
|
||||
hero1: file(relativePath: {eq: "hero1.jpg"}) {
|
||||
childImageSharp {
|
||||
gatsbyImageData(formats: WEBP, quality: 90)
|
||||
}
|
||||
},
|
||||
}`);
|
||||
|
||||
const [examples, setExamples] = useState([
|
||||
{id: 1, title: 'Веревочный курс', img: images.hero1},
|
||||
{id: 2, title: 'Тематический «Форд Боярд» ', img: images.hero1},
|
||||
{id: 3, title: 'Творческий', img: images.hero1},
|
||||
{id: 4, title: 'Интеллектуальный квест', img: images.hero1},
|
||||
{id: 5, title: 'Машина Голдберга (цепная реакция)', img: images.hero1},
|
||||
{id: 6, title: 'Шерстяной тимбилдинг ', img: images.hero1},
|
||||
{id: 7, title: 'Авторский тимбилдинг', img: images.hero1},
|
||||
{id: 8, title: 'Зимние Олимпийские игры', img: images.hero1},
|
||||
{id: 9, title: 'Командная картина', img: images.hero1},
|
||||
{id: 10, title: 'Гигантская пирамида', img: images.hero1},
|
||||
]);
|
||||
|
||||
return (
|
||||
<section className='pt-32 bg-[#0E0808]'>
|
||||
<h2 className='text-3xl mb-20 font-semibold text-white text-center uppercase'>Примеры тимбилдингов</h2>
|
||||
<div className="flex flex-wrap">
|
||||
{examples.map(example =>
|
||||
<Image key={example.id} title={example.title} image={example.img}></Image>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default Example
|
||||
@ -0,0 +1,14 @@
|
||||
import React from 'react'
|
||||
import { getImage } from 'gatsby-plugin-image';
|
||||
|
||||
const Image = ({title, image}) => {
|
||||
return (
|
||||
<div className="flex basis-1/5 h-64 overflow-hidden">
|
||||
<div style={{'--image-url': `url(${getImage(image).images.fallback.src})`}} className="[&>h3]:hover:-translate-y-7 w-full bg-cover bg-center hover:scale-105 duration-[2s] ease-[cubic-bezier(0, 1, 0.35, 1)] transition-all flex items-center justify-center relative bg-no-repeat bg-[linear-gradient(to_bottom,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),var(--image-url)] ">
|
||||
<h3 className='transition uppercase text-white font-medium text-center'>{title}</h3>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Image
|
||||
@ -0,0 +1,15 @@
|
||||
import React from 'react'
|
||||
|
||||
import TeambuildingMain from './Main'
|
||||
import TeambuildingExample from './Example/Example'
|
||||
|
||||
const Teambuilding = {
|
||||
Main : function Main(props) {
|
||||
return <TeambuildingMain></TeambuildingMain>
|
||||
},
|
||||
Example : function Example(props) {
|
||||
return <TeambuildingExample></TeambuildingExample>
|
||||
}
|
||||
}
|
||||
|
||||
export default Teambuilding
|
||||
@ -0,0 +1,9 @@
|
||||
import React from 'react';
|
||||
|
||||
const Button = ({className, children}) => {
|
||||
return (
|
||||
<button className={['bg-yellow-500 rounded-md py-2.5 px-5 text-lg text-white hover:bg-yellow-600 transition delay-50', className].join(' ')}>{children}</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default Button;
|
||||
@ -0,0 +1,54 @@
|
||||
.list {
|
||||
display: grid;
|
||||
margin: 0;
|
||||
/* https://css-tricks.com/responsive-layouts-fewer-media-queries/ */
|
||||
--w: 280px;
|
||||
--n: 2;
|
||||
gap: var(--size-gap);
|
||||
grid-template-columns: repeat(
|
||||
auto-fit,
|
||||
minmax(max(var(--w), 100%/ (var(--n) + 1) + 0.1%), 1fr)
|
||||
);
|
||||
margin-bottom: var(--size-gap);
|
||||
margin-top: var(--size-gap);
|
||||
}
|
||||
|
||||
.listItem {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.listItem::marker {
|
||||
color: #e95800;
|
||||
}
|
||||
|
||||
.listItem:nth-child(2)::marker {
|
||||
color: #159bf3;
|
||||
}
|
||||
|
||||
.listItem:nth-child(3)::marker {
|
||||
color: #8eb814;
|
||||
}
|
||||
|
||||
.listItem:nth-child(4)::marker {
|
||||
color: #663399;
|
||||
}
|
||||
|
||||
.listItemLink {
|
||||
color: var(--color-primary);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.listItemDescription {
|
||||
color: var(--color-text);
|
||||
margin-bottom: 0;
|
||||
margin-top: var(--space-1);
|
||||
}
|
||||
|
||||
.textCenter {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.intro {
|
||||
max-width: none;
|
||||
line-height: var(--line-height-loose);
|
||||
}
|
||||
@ -0,0 +1,45 @@
|
||||
/**
|
||||
* Layout component that queries for data
|
||||
* with Gatsby's useStaticQuery component
|
||||
*
|
||||
* See: https://www.gatsbyjs.com/docs/how-to/querying-data/use-static-query/
|
||||
*/
|
||||
|
||||
import * as React from "react"
|
||||
import { useStaticQuery, graphql } from "gatsby"
|
||||
|
||||
import Header from "./header"
|
||||
import "./layout.css"
|
||||
|
||||
const Layout = ({ children }) => {
|
||||
const data = useStaticQuery(graphql`
|
||||
query SiteTitleQuery {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
`)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header siteTitle={data.site.siteMetadata?.title || `Title`} />
|
||||
<div>
|
||||
<main>{children}</main>
|
||||
<footer
|
||||
style={{
|
||||
marginTop: `var(--space-5)`,
|
||||
fontSize: `var(--font-sm)`,
|
||||
}}
|
||||
>
|
||||
© {new Date().getFullYear()} · Built with
|
||||
{` `}
|
||||
<a href="https://www.gatsbyjs.com">Gatsby</a>
|
||||
</footer>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Layout
|
||||
@ -0,0 +1,48 @@
|
||||
/**
|
||||
* SEO component that queries for data with
|
||||
* Gatsby's useStaticQuery React hook
|
||||
*
|
||||
* See: https://www.gatsbyjs.com/docs/how-to/querying-data/use-static-query/
|
||||
*/
|
||||
|
||||
import * as React from "react"
|
||||
import { useStaticQuery, graphql } from "gatsby"
|
||||
|
||||
function Seo({ description, title, children }) {
|
||||
const { site } = useStaticQuery(
|
||||
graphql`
|
||||
query {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
description
|
||||
author
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
)
|
||||
|
||||
const metaDescription = description || site.siteMetadata.description
|
||||
const defaultTitle = site.siteMetadata?.title
|
||||
|
||||
return (
|
||||
<>
|
||||
<title>{defaultTitle ? `${title} | ${defaultTitle}` : title}</title>
|
||||
<meta name="description" content={metaDescription} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={metaDescription} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:creator" content={site.siteMetadata?.author || ``} />
|
||||
<meta name="twitter:title" content={title} />
|
||||
<meta name="twitter:description" content={metaDescription} />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
{children}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default Seo
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 313 KiB |
@ -0,0 +1,3 @@
|
||||
<svg width="1440" height="116" viewBox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1440 51.4091H1090.08C833.336 51.4091 580.229 116 360 116C139.771 116 0 51.4091 0 51.4091V0H1440V51.4091Z" fill="#f9fafb"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 242 B |
@ -0,0 +1,3 @@
|
||||
<svg width="1440" height="116" viewBox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 64.5909H349.922C606.664 64.5909 859.771 -7.62939e-06 1080 -7.62939e-06C1300.23 -7.62939e-06 1440 64.5909 1440 64.5909V116H0V64.5909Z" fill="#f9fafb"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 272 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 246 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 380 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 548 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 565 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 178 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 755 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 670 KiB |
@ -0,0 +1,3 @@
|
||||
<svg width="979" height="264" viewBox="0 0 979 264" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0 0.5H719.5H773.5L849 263.5H978.5" stroke="#E4E4E4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 171 B |
@ -0,0 +1,25 @@
|
||||
<svg width="344" height="344" viewBox="0 0 344 344" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_306_16)">
|
||||
<path d="M190.52 343.36L177.39 336.71C177.03 336.53 176.61 336.53 176.25 336.71L163.1 343.33C162.2 343.78 161.16 343.05 161.33 342.09L163.86 328.03C163.93 327.65 163.8 327.26 163.51 326.99L152.89 317.02C152.17 316.34 152.57 315.16 153.57 315.02L168.27 312.99C168.67 312.94 169.01 312.7 169.19 312.35L175.78 299.57C176.23 298.7 177.52 298.7 177.97 299.57L184.52 312.37C184.7 312.72 185.04 312.96 185.44 313.01L200.13 315.08C201.13 315.22 201.53 316.4 200.8 317.08L190.15 327.02C189.86 327.29 189.73 327.68 189.8 328.06L192.29 342.12C192.46 343.09 191.41 343.82 190.52 343.36Z" fill="#DBB30E"/>
|
||||
<path d="M249.19 320.9L239.14 315.82C238.87 315.68 238.54 315.68 238.27 315.82L228.22 320.9C227.54 321.25 226.73 320.69 226.87 319.95L228.79 309.2C228.84 308.91 228.74 308.61 228.52 308.41L220.39 300.8C219.84 300.28 220.14 299.38 220.91 299.27L232.14 297.7C232.44 297.66 232.71 297.47 232.84 297.21L237.86 287.43C238.2 286.76 239.19 286.76 239.53 287.43L244.55 297.21C244.69 297.47 244.95 297.66 245.25 297.7L256.48 299.27C257.25 299.38 257.55 300.28 257 300.8L248.87 308.41C248.65 308.62 248.55 308.91 248.6 309.2L250.52 319.95C250.67 320.69 249.87 321.25 249.19 320.9Z" fill="#DBB30E"/>
|
||||
<path d="M104.75 320.9L114.8 315.82C115.07 315.68 115.4 315.68 115.67 315.82L125.72 320.9C126.4 321.25 127.21 320.69 127.07 319.95L125.15 309.2C125.1 308.91 125.2 308.61 125.42 308.41L133.55 300.8C134.1 300.28 133.8 299.38 133.03 299.27L121.8 297.7C121.5 297.66 121.23 297.47 121.1 297.21L116.08 287.43C115.74 286.76 114.75 286.76 114.41 287.43L109.39 297.21C109.25 297.47 108.99 297.66 108.69 297.7L97.4596 299.27C96.6896 299.38 96.3896 300.28 96.9396 300.8L105.07 308.41C105.29 308.62 105.39 308.91 105.34 309.2L103.42 319.95C103.27 320.69 104.07 321.25 104.75 320.9Z" fill="#DBB30E"/>
|
||||
<path d="M223.54 60.9297H131.15V74.3797H223.54V60.9297Z" fill="#DBB30E"/>
|
||||
<path d="M246.09 13.45C246.09 16.53 243.53 19.03 240.34 19.1L223.7 57.77L177.28 57.86L130.86 57.77L114.22 19.07C111.24 18.8 108.9 16.39 108.9 13.45C108.9 10.33 111.53 7.79999 114.78 7.79999C118.03 7.79999 120.66 10.33 120.66 13.45C120.66 14.64 120.28 15.75 119.62 16.66C126.82 25.84 152.58 54.71 161.26 10.46C159.58 9.46999 158.46 7.67999 158.46 5.64999C158.46 2.52999 161.09 0 164.34 0C167.59 0 170.22 2.52999 170.22 5.64999C170.22 7.77999 169 9.62 167.2 10.59C168.12 15.12 171.24 28.49 176.61 30.8C177.09 31 177.64 31 178.12 30.8C183.57 28.45 186.61 14.68 187.44 10.38C185.84 9.37 184.78 7.63 184.78 5.66C184.78 2.54 187.41 0.0100098 190.66 0.0100098C193.91 0.0100098 196.54 2.54 196.54 5.66C196.54 7.84 195.25 9.73999 193.36 10.68C202.17 55.1 228.32 25.21 235.18 16.38C234.64 15.53 234.33 14.53 234.33 13.46C234.33 10.34 236.96 7.81 240.21 7.81C243.46 7.8 246.09 10.33 246.09 13.45Z" fill="#DBB30E"/>
|
||||
<path d="M191.49 110.91V208.59C191.49 210.54 191.95 212.02 192.87 213.03C193.79 214.04 195.42 214.86 197.78 215.48V218.5H155.93V215.48C158.29 214.85 159.92 214.03 160.84 213.03C161.76 212.02 162.21 210.55 162.21 208.59V110.91H120.56C118.6 110.91 117.09 111.34 116.04 112.2C114.99 113.06 114.14 114.65 113.49 116.95H110.35V83.6299H113.49C114.21 85.9199 115.08 87.4999 116.09 88.3699C117.1 89.2399 118.59 89.6699 120.56 89.6699H233.04C235.07 89.6699 236.61 89.2399 237.66 88.3699C238.71 87.4999 239.56 85.9199 240.21 83.6299H243.35V116.95H240.21C239.55 114.65 238.7 113.07 237.66 112.2C236.61 111.34 235.07 110.91 233.04 110.91H191.49Z" fill="white"/>
|
||||
<path d="M28.28 250.2H17.89V277.82H10.59V250.2H0V243.62H28.29V250.2H28.28Z" fill="white"/>
|
||||
<path d="M59.5704 277.81H52.2704L49.2604 270.71H34.6204L31.7404 277.81H24.4404L38.0404 244.25L38.3004 243.62H45.0804L45.3504 244.25L59.5704 277.81ZM46.4204 264.01L41.7804 252.19L37.3404 264.01H46.4204Z" fill="white"/>
|
||||
<path d="M91.5205 271.24V277.82H63.2305V243.63H70.5305V271.25H91.5205V271.24Z" fill="white"/>
|
||||
<path d="M102.71 250.2V256.49H114.21V263.07H102.71V271.24H123.7V277.82H95.4102V243.63H123.7V250.21H102.71V250.2Z" fill="white"/>
|
||||
<path d="M157.19 243.62V277.81H150.26L149.89 277.22L135.91 255.15V277.82H128.61V243.63H135.91L149.89 265.7V243.63H157.19V243.62Z" fill="white"/>
|
||||
<path d="M189.33 250.2H178.94V277.82H171.64V250.2H161.05V243.62H189.34V250.2H189.33Z" fill="white"/>
|
||||
<path d="M235.6 250.2H225.21V277.82H217.91V250.2H207.32V243.62H235.61V250.2H235.6Z" fill="white"/>
|
||||
<path d="M246.74 250.2V256.49H258.24V263.07H246.74V271.24H267.73V277.82H239.44V243.63H267.73V250.21H246.74V250.2Z" fill="white"/>
|
||||
<path d="M304.81 277.81H297.51L294.5 270.71H279.86L276.98 277.81H269.68L283.28 244.25L283.54 243.62H290.32L290.59 244.25L304.81 277.81ZM291.66 264.01L287.02 252.19L282.58 264.01H291.66Z" fill="white"/>
|
||||
<path d="M343.49 243.62V277.81H336.19V259.18L329.33 273.8L327.45 277.8H323.82L322.02 273.8L315.76 259.87V277.8H308.46V243.61H315.76L325.74 265.85L336.17 243.61H343.49V243.62Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_306_16">
|
||||
<rect width="344" height="344" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 414 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 378 KiB |
@ -0,0 +1,15 @@
|
||||
import * as React from "react"
|
||||
|
||||
import Layout from "../components/layout"
|
||||
import Seo from "../components/seo"
|
||||
|
||||
const NotFoundPage = () => (
|
||||
<Layout>
|
||||
<h1>404: Not Found</h1>
|
||||
<p>You just hit a route that doesn't exist... the sadness.</p>
|
||||
</Layout>
|
||||
)
|
||||
|
||||
export const Head = () => <Seo title="404: Not Found" />
|
||||
|
||||
export default NotFoundPage
|
||||
@ -0,0 +1,42 @@
|
||||
import * as React from "react"
|
||||
import { Link } from "gatsby"
|
||||
import { StaticImage } from "gatsby-plugin-image"
|
||||
import Layout from "../components/layout"
|
||||
import Seo from "../components/seo"
|
||||
import Hero from "../components/Hero"
|
||||
import Advantages from "../components/Advantages"
|
||||
import About from "../components/About"
|
||||
import Games from "../components/Games/Games"
|
||||
import Facilitations from "../components/Facilitations/Facilitations"
|
||||
import Teambuilding from "../components/Teambuilding/Teambuilding"
|
||||
import Courses from "../components/Courses"
|
||||
import Team from "../components/Team/Team"
|
||||
import Reviews from "../components/Reviews/Reviews"
|
||||
|
||||
const IndexPage = ({data}) => {
|
||||
return(
|
||||
<Layout>
|
||||
<Hero></Hero>
|
||||
<Advantages></Advantages>
|
||||
<About></About>
|
||||
<Games></Games>
|
||||
<Facilitations.Main></Facilitations.Main>
|
||||
<Facilitations.Example></Facilitations.Example>
|
||||
<Teambuilding.Main></Teambuilding.Main>
|
||||
<Teambuilding.Example></Teambuilding.Example>
|
||||
<Courses></Courses>
|
||||
<Team></Team>
|
||||
<Reviews></Reviews>
|
||||
</Layout>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Head export to define metadata for the page
|
||||
*
|
||||
* See: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/
|
||||
*/
|
||||
export const Head = () => <Seo title="Home" />
|
||||
|
||||
export default IndexPage
|
||||
@ -0,0 +1,17 @@
|
||||
import * as React from "react"
|
||||
import { Link } from "gatsby"
|
||||
|
||||
import Layout from "../components/layout"
|
||||
import Seo from "../components/seo"
|
||||
|
||||
const SecondPage = () => (
|
||||
<Layout>
|
||||
<h1>Hi from the second page</h1>
|
||||
<p>Welcome to page 2</p>
|
||||
<Link to="/">Go back to the homepage</Link>
|
||||
</Layout>
|
||||
)
|
||||
|
||||
export const Head = () => <Seo title="Page two" />
|
||||
|
||||
export default SecondPage
|
||||
@ -0,0 +1,55 @@
|
||||
import * as React from "react"
|
||||
import { Link } from "gatsby"
|
||||
|
||||
import Layout from "../components/layout"
|
||||
import Seo from "../components/seo"
|
||||
|
||||
const UsingSSR = ({ serverData }) => {
|
||||
return (
|
||||
<Layout>
|
||||
<h1>
|
||||
This page is <b>rendered server-side</b>
|
||||
</h1>
|
||||
<p>
|
||||
This page is rendered server side every time the page is requested.
|
||||
Reload it to see a(nother) random photo from{" "}
|
||||
<code>dog.ceo/api/breed/shiba/images/random</code>:
|
||||
</p>
|
||||
<img
|
||||
style={{ width: "320px", borderRadius: "var(--border-radius)" }}
|
||||
alt="A random dog"
|
||||
src={serverData.message}
|
||||
/>
|
||||
<p>
|
||||
To learn more, head over to our{" "}
|
||||
<a href="https://www.gatsbyjs.com/docs/reference/rendering-options/server-side-rendering/">
|
||||
documentation about Server Side Rendering
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<Link to="/">Go back to the homepage</Link>
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
export const Head = () => <Seo title="Using SSR" />
|
||||
|
||||
export default UsingSSR
|
||||
|
||||
export async function getServerData() {
|
||||
try {
|
||||
const res = await fetch(`https://dog.ceo/api/breed/shiba/images/random`)
|
||||
if (!res.ok) {
|
||||
throw new Error(`Response failed`)
|
||||
}
|
||||
return {
|
||||
props: await res.json(),
|
||||
}
|
||||
} catch (error) {
|
||||
return {
|
||||
status: 500,
|
||||
headers: {},
|
||||
props: {},
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,56 @@
|
||||
// If you don't want to use TypeScript you can delete this file!
|
||||
import * as React from "react"
|
||||
import { PageProps, Link, graphql, HeadFC } from "gatsby"
|
||||
|
||||
import Layout from "../components/layout"
|
||||
import Seo from "../components/seo"
|
||||
|
||||
type DataProps = {
|
||||
site: {
|
||||
buildTime: string
|
||||
}
|
||||
}
|
||||
|
||||
const UsingTypescript: React.FC<PageProps<DataProps>> = ({
|
||||
data,
|
||||
location,
|
||||
}) => (
|
||||
<Layout>
|
||||
<h1>
|
||||
Gatsby supports <b>TypeScript by default</b>
|
||||
</h1>
|
||||
<p>
|
||||
This means that you can create and write <code>.ts/.tsx</code> files for
|
||||
your pages, components, and <code>gatsby-*</code> configuration files (for
|
||||
example <code>gatsby-config.ts</code>).
|
||||
</p>
|
||||
<p>
|
||||
For type checking you'll want to install <code>typescript</code> via npm
|
||||
and run <code>tsc --init</code> to create a <code>tsconfig</code> file.
|
||||
</p>
|
||||
<p>
|
||||
You're currently on the page <code>{location.pathname}</code> which was
|
||||
built on {data.site.buildTime}.
|
||||
</p>
|
||||
<p>
|
||||
To learn more, head over to our{" "}
|
||||
<a href="https://www.gatsbyjs.com/docs/how-to/custom-configuration/typescript/">
|
||||
documentation about TypeScript
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<Link to="/">Go back to the homepage</Link>
|
||||
</Layout>
|
||||
)
|
||||
|
||||
export const Head: HeadFC<DataProps> = () => <Seo title="Using TypeScript" />
|
||||
|
||||
export default UsingTypescript
|
||||
|
||||
export const query = graphql`
|
||||
{
|
||||
site {
|
||||
buildTime(formatString: "YYYY-MM-DD hh:mm a z")
|
||||
}
|
||||
}
|
||||
`
|
||||
@ -0,0 +1,24 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
body::-webkit-scrollbar {
|
||||
width: 12px; /* width of the entire scrollbar */
|
||||
}
|
||||
body::-webkit-scrollbar-track {
|
||||
background: #0e0808;
|
||||
}
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background-color: white; /* color of the scroll thumb */
|
||||
border-radius: 20px; /* roundness of the scroll thumb */
|
||||
border: 3px solid #0e0808; /* creates padding around scroll thumb */
|
||||
}
|
||||
*::selection {
|
||||
color: #0e0808;
|
||||
background-color: #facc15;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
import * as React from "react"
|
||||
import { Link } from "gatsby"
|
||||
|
||||
import Layout from "../components/layout"
|
||||
import Seo from "../components/seo"
|
||||
|
||||
const UsingDSG = () => (
|
||||
<Layout>
|
||||
<h1>
|
||||
Hello from a <b>DSG Page</b>
|
||||
</h1>
|
||||
<p>This page is not created until requested by a user.</p>
|
||||
<p>
|
||||
To learn more, head over to our{" "}
|
||||
<a href="https://www.gatsbyjs.com/docs/reference/rendering-options/deferred-static-generation/">
|
||||
documentation about Deferred Static Generation
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
<Link to="/">Go back to the homepage</Link>
|
||||
</Layout>
|
||||
)
|
||||
|
||||
export const Head = () => <Seo title="Using DSG" />
|
||||
|
||||
export default UsingDSG
|
||||
@ -0,0 +1,11 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
"./src/pages/**/*.{js,jsx,ts,tsx}",
|
||||
"./src/components/**/*.{js,jsx,ts,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Loading…
Reference in New Issue