diff --git a/.github/workflows/alpha.yml b/.github/workflows/alpha.yml index 59ef8a34b..2663ca678 100644 --- a/.github/workflows/alpha.yml +++ b/.github/workflows/alpha.yml @@ -70,6 +70,39 @@ jobs: tags: retrospected/backend:alpha platforms: linux/amd64 push: true + + marketing: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - name: Read VERSION + id: package + uses: martinbeentjes/npm-get-version-action@master + - name: Echo VERSION + run: echo ${{ steps.package.outputs.current-version }} + - name: Setup QEMU + uses: docker/setup-qemu-action@v2 + with: + platforms: all + - name: Setup BuildX + uses: docker/setup-buildx-action@v2 + id: buildx + with: + install: true + - name: Login to DockerHub + uses: docker/login-action@v2 + with: + username: ${{ secrets.DOCKER_NEW_USERNAME }} + password: ${{ secrets.DOCKER_NEW_PASSWORD }} + - name: Build and push Marketing + uses: docker/build-push-action@v4 + with: + builder: ${{ steps.buildx.outputs.name }} + file: marketing/Dockerfile + context: marketing + tags: retrospected/marketing:alpha + platforms: linux/amd64 + push: true integration: runs-on: ubuntu-latest @@ -88,7 +121,7 @@ jobs: trivy: runs-on: ubuntu-latest - needs: [frontend, backend] + needs: [frontend, backend, marketing] steps: - name: Trivy - Frontend uses: aquasecurity/trivy-action@master @@ -108,4 +141,13 @@ jobs: ignore-unfixed: true vuln-type: 'os,library' severity: 'CRITICAL' + - name: Trivy - Marketing + uses: aquasecurity/trivy-action@master + with: + image-ref: retrospected/marketing:alpha + format: 'table' + exit-code: '1' + ignore-unfixed: true + vuln-type: 'os,library' + severity: 'CRITICAL' \ No newline at end of file diff --git a/.github/workflows/canary.yml b/.github/workflows/canary.yml index ab9ccde8e..6d22a3af0 100644 --- a/.github/workflows/canary.yml +++ b/.github/workflows/canary.yml @@ -104,6 +104,39 @@ jobs: platforms: linux/amd64,linux/arm64,linux/arm/v7 push: true + marketing: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - name: Read VERSION + id: package + uses: martinbeentjes/npm-get-version-action@master + - name: Echo VERSION + run: echo ${{ steps.package.outputs.current-version }} + - name: Setup QEMU + uses: docker/setup-qemu-action@v2 + with: + platforms: all + - name: Setup BuildX + uses: docker/setup-buildx-action@v2 + id: buildx + with: + install: true + - name: Login to DockerHub + uses: docker/login-action@v2 + with: + username: ${{ secrets.DOCKER_NEW_USERNAME }} + password: ${{ secrets.DOCKER_NEW_PASSWORD }} + - name: Build and push Marketing + uses: docker/build-push-action@v4 + with: + builder: ${{ steps.buildx.outputs.name }} + file: marketing/Dockerfile + context: marketing + tags: retrospected/marketing:canary + platforms: linux/amd64,linux/arm64,linux/arm/v7 + push: true + maintenance: runs-on: ubuntu-latest steps: @@ -154,7 +187,7 @@ jobs: trivy: runs-on: ubuntu-latest - needs: [frontend, backend] + needs: [frontend, backend, marketing] steps: - name: Trivy - Frontend uses: aquasecurity/trivy-action@master @@ -174,4 +207,13 @@ jobs: ignore-unfixed: true vuln-type: 'os,library' severity: 'CRITICAL' + - name: Trivy - Marketing + uses: aquasecurity/trivy-action@master + with: + image-ref: retrospected/marketing:canary + format: 'table' + exit-code: '1' + ignore-unfixed: true + vuln-type: 'os,library' + severity: 'CRITICAL' \ No newline at end of file diff --git a/.github/workflows/marketing.yml b/.github/workflows/marketing.yml new file mode 100644 index 000000000..9cebf33f6 --- /dev/null +++ b/.github/workflows/marketing.yml @@ -0,0 +1,39 @@ +name: 'Marketing Build' + +on: + push: + branches: [v5000/marketing-final] + +jobs: + marketing: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - name: Read VERSION + id: package + uses: martinbeentjes/npm-get-version-action@master + - name: Echo VERSION + run: echo ${{ steps.package.outputs.current-version }} + - name: Setup QEMU + uses: docker/setup-qemu-action@v2 + with: + platforms: all + - name: Setup BuildX + uses: docker/setup-buildx-action@v2 + id: buildx + with: + install: true + - name: Login to DockerHub + uses: docker/login-action@v2 + with: + username: ${{ secrets.DOCKER_NEW_USERNAME }} + password: ${{ secrets.DOCKER_NEW_PASSWORD }} + - name: Build and push Marketing + uses: docker/build-push-action@v4 + with: + builder: ${{ steps.buildx.outputs.name }} + file: marketing/Dockerfile + context: marketing + tags: retrospected/marketing:alpha + platforms: linux/amd64 + push: true diff --git a/.github/workflows/master.yml b/.github/workflows/master.yml index d2c0e47f1..97f0d7b65 100644 --- a/.github/workflows/master.yml +++ b/.github/workflows/master.yml @@ -104,6 +104,39 @@ jobs: platforms: linux/amd64,linux/arm64,linux/arm/v7 push: true + marketing: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - name: Read VERSION + id: package + uses: martinbeentjes/npm-get-version-action@master + - name: Echo VERSION + run: echo ${{ steps.package.outputs.current-version }} + - name: Setup QEMU + uses: docker/setup-qemu-action@v2 + with: + platforms: all + - name: Setup BuildX + uses: docker/setup-buildx-action@v2 + id: buildx + with: + install: true + - name: Login to DockerHub + uses: docker/login-action@v2 + with: + username: ${{ secrets.DOCKER_NEW_USERNAME }} + password: ${{ secrets.DOCKER_NEW_PASSWORD }} + - name: Build and push Marketing + uses: docker/build-push-action@v4 + with: + builder: ${{ steps.buildx.outputs.name }} + file: marketing/Dockerfile + context: marketing + tags: retrospected/marketing:${{ steps.package.outputs.current-version }} + platforms: linux/amd64,linux/arm64,linux/arm/v7 + push: true + maintenance: runs-on: ubuntu-latest steps: diff --git a/.gitignore b/.gitignore index 0983c7d26..e8c20b46f 100644 --- a/.gitignore +++ b/.gitignore @@ -35,7 +35,7 @@ node_modules build persist configuration.json -assets +# assets stats .vscode .DS_Store diff --git a/Makefile b/Makefile index 50ba5d1c7..e36ff3532 100644 --- a/Makefile +++ b/Makefile @@ -23,6 +23,10 @@ local: docker build -f ./backend/Dockerfile -t retrospected/backend:local ./backend docker build -f ./frontend/Dockerfile -t retrospected/frontend:local ./frontend +marketing-build: + docker build -f ./marketing/Dockerfile -t retrospected/marketing:local ./marketing + docker run -it --rm -p 3333:80 retrospected/marketing:local + install-trivy: brew install trivy diff --git a/marketing/.dockerignore b/marketing/.dockerignore new file mode 100644 index 000000000..67fba9ca1 --- /dev/null +++ b/marketing/.dockerignore @@ -0,0 +1,7 @@ +.env +.env.example +.env.local +.next +.node_modules +Makefile +yarn-error.log \ No newline at end of file diff --git a/marketing/.env.example b/marketing/.env.example new file mode 100644 index 000000000..491f8a132 --- /dev/null +++ b/marketing/.env.example @@ -0,0 +1,3 @@ +# Copy to .env.local +NEXT_PUBLIC_APP_URL=http://localhost:3000 +NEXT_PUBLIC_MEASUREMENT_ID=G-XXXXXXXXXX \ No newline at end of file diff --git a/marketing/.eslintrc.json b/marketing/.eslintrc.json new file mode 100644 index 000000000..bffb357a7 --- /dev/null +++ b/marketing/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/marketing/.gitignore b/marketing/.gitignore new file mode 100644 index 000000000..c87c9b392 --- /dev/null +++ b/marketing/.gitignore @@ -0,0 +1,36 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/marketing/Dockerfile b/marketing/Dockerfile new file mode 100644 index 000000000..3199576a5 --- /dev/null +++ b/marketing/Dockerfile @@ -0,0 +1,66 @@ +FROM node:18-alpine AS base + +# Install dependencies only when needed +FROM base AS deps +# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed. +RUN apk add --no-cache libc6-compat +WORKDIR /app + +# Install dependencies based on the preferred package manager +COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./ +RUN \ + if [ -f yarn.lock ]; then yarn --frozen-lockfile; \ + elif [ -f package-lock.json ]; then npm ci; \ + elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \ + else echo "Lockfile not found." && exit 1; \ + fi + + +# Rebuild the source code only when needed +FROM base AS builder +WORKDIR /app +COPY --from=deps /app/node_modules ./node_modules +COPY . . + +# Next.js collects completely anonymous telemetry data about general usage. +# Learn more here: https://nextjs.org/telemetry +# Uncomment the following line in case you want to disable telemetry during the build. +# ENV NEXT_TELEMETRY_DISABLED 1 + +ARG NEXT_PUBLIC_MEASUREMENT_ID=APP_NEXT_PUBLIC_MEASUREMENT_ID +ARG NEXT_PUBLIC_APP_URL=APP_NEXT_PUBLIC_APP_URL +RUN yarn build + +# If using npm comment out above and use below instead +# RUN npm run build + +# Production image, copy all the files and run next +FROM base AS runner +WORKDIR /app + +ENV NODE_ENV production +# Uncomment the following line in case you want to disable telemetry during runtime. +# ENV NEXT_TELEMETRY_DISABLED 1 + +RUN addgroup --system --gid 1001 nodejs +RUN adduser --system --uid 1001 nextjs + +COPY --from=builder /app/public ./public +COPY --from=builder /app/docker/entrypoint.sh ./entrypoint.sh + +RUN ["chmod", "+x", "/app/entrypoint.sh"] + +# Automatically leverage output traces to reduce image size +# https://nextjs.org/docs/advanced-features/output-file-tracing +COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./ +COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static + +USER nextjs + +EXPOSE 3000 + +ENV PORT 3000 + +ENTRYPOINT ["/app/entrypoint.sh"] + +CMD ["node", "server.js"] \ No newline at end of file diff --git a/marketing/Makefile b/marketing/Makefile new file mode 100644 index 000000000..76b81ed22 --- /dev/null +++ b/marketing/Makefile @@ -0,0 +1,6 @@ +run: + docker build -f ./Dockerfile -t retrospected/marketing:local ./ + docker run \ + --env NEXT_PUBLIC_MEASUREMENT_ID=G-BLAH \ + --env NEXT_PUBLIC_APP_URL=http://localhost:3000 \ + -it --rm -p 3333:3000 retrospected/marketing:local \ No newline at end of file diff --git a/marketing/README.md b/marketing/README.md new file mode 100644 index 000000000..965a1228c --- /dev/null +++ b/marketing/README.md @@ -0,0 +1,38 @@ +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. + +[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. + +The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. + +This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/marketing/docker/entrypoint.sh b/marketing/docker/entrypoint.sh new file mode 100644 index 000000000..6155b454a --- /dev/null +++ b/marketing/docker/entrypoint.sh @@ -0,0 +1,26 @@ +#!/usr/bin/env sh + +# The first part wrapped in a function +makeSedCommands() { + printenv | \ + grep '^NEXT_PUBLIC' | \ + sed -r "s/=/ /g" | \ + xargs -n 2 sh -c 'echo "sed -i \"s#APP_$0#$1#g\""' +} + +# Set the delimiter to newlines (needed for looping over the function output) +IFS=$'\n' +# For each sed command +for c in $(makeSedCommands); do + echo "Executing $c" + # For each file in the .next directory + for f in $(find .next -type f); do + # Execute the command against the file + COMMAND="$c $f" + eval $COMMAND + done +done + +echo "Starting Nextjs" +# Run any arguments passed to this script +exec "$@" \ No newline at end of file diff --git a/marketing/next-i18next.config.js b/marketing/next-i18next.config.js new file mode 100644 index 000000000..bc82b01e8 --- /dev/null +++ b/marketing/next-i18next.config.js @@ -0,0 +1,6 @@ +module.exports = { + i18n: { + defaultLocale: 'en', + locales: ['en', 'fr'], + }, +} \ No newline at end of file diff --git a/marketing/next.config.js b/marketing/next.config.js new file mode 100644 index 000000000..37d52f535 --- /dev/null +++ b/marketing/next.config.js @@ -0,0 +1,13 @@ +const { i18n } = require('./next-i18next.config') + +/** @type {import('next').NextConfig} */ +const nextConfig = { + reactStrictMode: true, + i18n, + output: 'standalone', + compiler: { + styledComponents: true, + } +} + +module.exports = nextConfig diff --git a/marketing/package.json b/marketing/package.json new file mode 100644 index 000000000..b37477df8 --- /dev/null +++ b/marketing/package.json @@ -0,0 +1,54 @@ +{ + "name": "marketing", + "version": "5.0.0", + "private": true, + "scripts": { + "dev": "next dev -p 3001", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "@next/font": "13.1.6", + "@redq/reuse-modal": "^2.0.0", + "@styled-system/theme-get": "^5.1.2", + "@types/node": "18.13.0", + "@types/react": "18.0.28", + "@types/react-anchor-link-smooth-scroll": "^1.0.2", + "@types/react-aria-menubutton": "^6.2.9", + "@types/react-dom": "18.0.11", + "@types/react-scrollspy": "^3.3.5", + "@types/react-slick": "^0.23.10", + "@types/react-stickynode": "^4.0.0", + "@types/styled-components": "^5.1.26", + "@types/styled-system": "^5.1.16", + "@types/styled-system__theme-get": "^5.0.2", + "animate.css": "^4.1.1", + "eslint": "8.34.0", + "eslint-config-next": "13.1.6", + "fs": "^0.0.1-security", + "i18next": "^22.4.9", + "next": "13.1.6", + "next-i18next": "^13.1.5", + "polished": "^4.2.2", + "rc-collapse": "^3.5.2", + "rc-drawer": "^6.1.3", + "react": "18.2.0", + "react-anchor-link-smooth-scroll": "^1.0.12", + "react-aria-menubutton": "^7.0.3", + "react-dom": "18.2.0", + "react-i18next": "^12.1.5", + "react-icons-kit": "^2.0.0", + "react-parallax": "^3.5.1", + "react-reveal": "^1.2.2", + "react-scroll-motion": "^0.3.2", + "react-scrollspy": "^3.4.3", + "react-slick": "^0.29.0", + "react-stickynode": "^4.1.0", + "react-tabs": "^6.0.0", + "sharp": "^0.31.3", + "styled-components": "^5.3.6", + "styled-system": "^5.1.5", + "typescript": "4.9.5" + } +} diff --git a/marketing/public/android-chrome-192x192.png b/marketing/public/android-chrome-192x192.png new file mode 100644 index 000000000..7b80416d2 Binary files /dev/null and b/marketing/public/android-chrome-192x192.png differ diff --git a/marketing/public/android-chrome-512x512.png b/marketing/public/android-chrome-512x512.png new file mode 100644 index 000000000..63be5adb0 Binary files /dev/null and b/marketing/public/android-chrome-512x512.png differ diff --git a/marketing/public/android-icon-144x144.png b/marketing/public/android-icon-144x144.png new file mode 100644 index 000000000..b841d875a Binary files /dev/null and b/marketing/public/android-icon-144x144.png differ diff --git a/marketing/public/android-icon-192x192.png b/marketing/public/android-icon-192x192.png new file mode 100644 index 000000000..9615254dd Binary files /dev/null and b/marketing/public/android-icon-192x192.png differ diff --git a/marketing/public/android-icon-36x36.png b/marketing/public/android-icon-36x36.png new file mode 100644 index 000000000..41b0ba1ca Binary files /dev/null and b/marketing/public/android-icon-36x36.png differ diff --git a/marketing/public/android-icon-48x48.png b/marketing/public/android-icon-48x48.png new file mode 100644 index 000000000..84171d8a7 Binary files /dev/null and b/marketing/public/android-icon-48x48.png differ diff --git a/marketing/public/android-icon-72x72.png b/marketing/public/android-icon-72x72.png new file mode 100644 index 000000000..393c16e03 Binary files /dev/null and b/marketing/public/android-icon-72x72.png differ diff --git a/marketing/public/android-icon-96x96.png b/marketing/public/android-icon-96x96.png new file mode 100644 index 000000000..0f463ffc2 Binary files /dev/null and b/marketing/public/android-icon-96x96.png differ diff --git a/marketing/public/apple-icon-114x114.png b/marketing/public/apple-icon-114x114.png new file mode 100644 index 000000000..1b72f4c08 Binary files /dev/null and b/marketing/public/apple-icon-114x114.png differ diff --git a/marketing/public/apple-icon-120x120.png b/marketing/public/apple-icon-120x120.png new file mode 100644 index 000000000..cb2a0c365 Binary files /dev/null and b/marketing/public/apple-icon-120x120.png differ diff --git a/marketing/public/apple-icon-144x144.png b/marketing/public/apple-icon-144x144.png new file mode 100644 index 000000000..b841d875a Binary files /dev/null and b/marketing/public/apple-icon-144x144.png differ diff --git a/marketing/public/apple-icon-152x152.png b/marketing/public/apple-icon-152x152.png new file mode 100644 index 000000000..ff1e5ca32 Binary files /dev/null and b/marketing/public/apple-icon-152x152.png differ diff --git a/marketing/public/apple-icon-180x180.png b/marketing/public/apple-icon-180x180.png new file mode 100644 index 000000000..2d0f9df2e Binary files /dev/null and b/marketing/public/apple-icon-180x180.png differ diff --git a/marketing/public/apple-icon-57x57.png b/marketing/public/apple-icon-57x57.png new file mode 100644 index 000000000..3be312d09 Binary files /dev/null and b/marketing/public/apple-icon-57x57.png differ diff --git a/marketing/public/apple-icon-60x60.png b/marketing/public/apple-icon-60x60.png new file mode 100644 index 000000000..07643bdc0 Binary files /dev/null and b/marketing/public/apple-icon-60x60.png differ diff --git a/marketing/public/apple-icon-72x72.png b/marketing/public/apple-icon-72x72.png new file mode 100644 index 000000000..393c16e03 Binary files /dev/null and b/marketing/public/apple-icon-72x72.png differ diff --git a/marketing/public/apple-icon-76x76.png b/marketing/public/apple-icon-76x76.png new file mode 100644 index 000000000..732c2059f Binary files /dev/null and b/marketing/public/apple-icon-76x76.png differ diff --git a/marketing/public/apple-icon-precomposed.png b/marketing/public/apple-icon-precomposed.png new file mode 100644 index 000000000..72752ac78 Binary files /dev/null and b/marketing/public/apple-icon-precomposed.png differ diff --git a/marketing/public/apple-icon.png b/marketing/public/apple-icon.png new file mode 100644 index 000000000..72752ac78 Binary files /dev/null and b/marketing/public/apple-icon.png differ diff --git a/marketing/public/apple-touch-icon.png b/marketing/public/apple-touch-icon.png new file mode 100644 index 000000000..84211393e Binary files /dev/null and b/marketing/public/apple-touch-icon.png differ diff --git a/marketing/public/browserconfig.xml b/marketing/public/browserconfig.xml new file mode 100644 index 000000000..01f124d9d --- /dev/null +++ b/marketing/public/browserconfig.xml @@ -0,0 +1,12 @@ + + + + + + + + + #5842DE + + + diff --git a/marketing/public/favicon-16x16.png b/marketing/public/favicon-16x16.png new file mode 100644 index 000000000..80d5fb8b0 Binary files /dev/null and b/marketing/public/favicon-16x16.png differ diff --git a/marketing/public/favicon-32x32.png b/marketing/public/favicon-32x32.png new file mode 100644 index 000000000..84aa66a24 Binary files /dev/null and b/marketing/public/favicon-32x32.png differ diff --git a/marketing/public/favicon-96x96.png b/marketing/public/favicon-96x96.png new file mode 100644 index 000000000..0f463ffc2 Binary files /dev/null and b/marketing/public/favicon-96x96.png differ diff --git a/marketing/public/favicon.ico b/marketing/public/favicon.ico new file mode 100644 index 000000000..54875131e Binary files /dev/null and b/marketing/public/favicon.ico differ diff --git a/marketing/public/locales/en/common.json b/marketing/public/locales/en/common.json new file mode 100644 index 000000000..c1fbd28c5 --- /dev/null +++ b/marketing/public/locales/en/common.json @@ -0,0 +1,160 @@ +{ + "SEO": { + "title": "Retrospected", + "description": "Free Real-time Agile Retrospective Board for engineering teams" + }, + "Banner": { + "heading": "Real-time Retrospectives. Done right. In seconds.", + "text": "Because Post-It notes aren't going to cut it.", + "tagline": "*No Credit card required", + "subscribeToday": "Try it for free" + }, + "Nav": { + "home": "Home", + "howTo": "How To", + "features": "Features", + "testimonial": "Testimonials", + "pricing": "Pricing", + "faq": "FAQ", + "subscribe": "Subscribe", + "login": "Login" + }, + "Clients": { + "main": "Join the hundreds of companies using our product" + }, + "HowItWorks": { + "heading": "We are different because..." + }, + "Testimonials": { + "heading": "What people say about us", + "1": { + "author": "Johnny Simpson", + "designation": "Head of Design", + "quote": "Each room is loaded with the most collaborative surfaces so you can quickly take notes, capture to-dos, and share ideas. Pick one of our stock themes, or create your custom theme with the editors." + }, + "2": { + "author": "Johnny Simpson", + "designation": "Head of Design", + "quote": "Each room is loaded with the most collaborative surfaces so you can quickly take notes, capture to-dos, and share ideas. Pick one of our stock themes, or create your custom theme with the editors." + }, + "3": { + "author": "Johnny Simpson", + "designation": "Head of Design", + "quote": "Each room is loaded with the most collaborative surfaces so you can quickly take notes, capture to-dos, and share ideas. Pick one of our stock themes, or create your custom theme with the editors." + }, + "4": { + "author": "Johnny Simpson", + "designation": "Head of Design", + "quote": "Each room is loaded with the most collaborative surfaces so you can quickly take notes, capture to-dos, and share ideas. Pick one of our stock themes, or create your custom theme with the editors." + } + }, + "Pricing": { + "heading": "Explore our exciting pricing", + "monthly": "Monthly", + "yearly": "Yearly", + "currency": "$", + "subscribe": "Subscribe Now", + "login": "Login Now", + "basic": { + "title": "Basic", + "price": 0, + "recurrence": "per month", + "features": [ + "Unlimited Retrospectives", + "Unlimited Team Members", + "Unlimited Action Items", + "40 posts" + ] + }, + "pro": { + "title": "Pro", + "price": 12.90, + "recurrence": "per month", + "features": [ + "Unlimited Retrospectives", + "Unlimited Team Members", + "Unlimited Action Items", + "Unlimited posts", + "20 users" + ] + }, + "unlimited": { + "title": "Unlimited", + "price": 49.95, + "recurrence": "per month", + "features": [ + "Unlimited Retrospectives", + "Unlimited Team Members", + "Unlimited Action Items", + "Unlimited posts", + "Unlimited users" + ] + }, + "hosted": { + "title": "Self Hosted", + "price": 649, + "recurrence": "One-time fee", + "features": [ + "Everything from Unlimited", + "All users are Pro by default", + "Awesome documentation" + ] + } + }, + "SelfHosted": { + "slogan": "Self Hosting", + "title": "Retrospected on your premises", + "desc": "Keep complete control of your data by self-hosting Retrospected. One-time fee, unlimited updates. Get up and running with our amazing documentation in no time.", + "features": [ + "Complete control: your data stays on your premises", + "Easy to install", + "Administration Panel", + "All users are Pro", + "Free updates, forever" + ], + "button": { + "link": "https://docs.retrospected.com", + "label": "Discover our documentation" + } + }, + "Features": { + "heading": "Start a retrospective in seconds", + "description":"Starting or joining a retro is as easy as 1, 2, 3. It's friction-less.", + "feature1": "Feature 1", + "feature2": "Feature 2", + "feature3": "Feature 3", + "feature4": "Feature 4" + }, + "Newsfeed": { + "heading": "What's new at Retrospected" + }, + "FAQ": { + "heading": "Frequently Asked Questions", + "data": [ + {"question": "How are payments handled?", "answer": "Payments are handled by our partner, Stripe. No payment information is stored by Retrospected."}, + {"question": "Do you give Pro licenses for free in some cases?", "answer": "If you are using this product as a charity, or you are in education, send us an email and we'll sort out a free license for you. Contact us."}, + {"question": "Will I pay more for some features?", "answer": "We only have 2 tiers: Free and Pro. All features are unlocked when you subscribe to a Pro account."}, + {"question": "Is it possible to pay yearly?", "answer": "You can! Simply select this option at checkout and you will get one month free per year."}, + {"question": "Can I cancel my plan?", "answer": "Yes. The subscription can be stopped at any time, and will end at the end of your current billing month."}, + {"question": "Is there any limit?", "answer": "There is no limit on the amount of data stored, subject to fair-use policy. On free accounts, you are limited to 40 posts."} + ] + }, + "CTA": { + "heading": "Start a Retrospective now", + "description": "Join the thousands of users who are already using Retrospected", + "button": "Start a Retrospective", + "hint": "This will change your life!" + }, + "Footer": { + "copyright": "Copyright © 2023 - Retrospected Ltd. All rights reserved.", + "about": "We create software with Love, from London, UK" + }, + "Contact": { + "title": "Contact info", + "address": "Retrospected Ltd, London, UK", + "phone": "+44 (not used for now)", + "openingTime": "7 Days - 8am - 10pm", + "email": "support@retrospected.com" + } +} + \ No newline at end of file diff --git a/marketing/public/locales/fr/common.json b/marketing/public/locales/fr/common.json new file mode 100644 index 000000000..558896432 --- /dev/null +++ b/marketing/public/locales/fr/common.json @@ -0,0 +1,158 @@ +{ + "SEO": { + "title": "Retrospected", + "description": "Retrospectives gratuites et temps-réel pour équipes agiles" + }, + "Banner": { + "heading": "Des retrospectives fun & efficaces, des équipes performantes & motivées !", + "text": "Donnez une platforme moderne et simple à vos équipes, pour soutenir leur collaboration et leur amélioration continue", + "tagline": "*Aucune carte bancaire demandée", + "subscribeToday": "Essayer gratuitement" + }, + "Nav": { + "home": "Accueil", + "howTo": "Comment ?", + "features": "Fonctionnalités", + "testimonial": "Témoignages", + "pricing": "Tarifs", + "faq": "FAQ", + "subscribe": "Achetez", + "login": "Connectez-vous" + }, + "Clients": { + "main": "Rejoingnez les centaines d'entreprises qui nous ont fait confiance" + }, + "HowItWorks": { + "heading": "Nous sommes différents, parce-que..." + }, + "Testimonials": { + "heading": "Ce que les gens disent de nous", + "1": { + "author": "Jean LaPointe", + "designation": "Directeur Design", + "quote": "Retrospected nous est très utile, et blah blah blah, et encore du blah blah merci de remplir les trous" + }, + "2": { + "author": "Jean LaPointe", + "designation": "Directeur Design", + "quote": "Retrospected nous est très utile, et blah blah blah, et encore du blah blah merci de remplir les trous" + }, + "3": { + "author": "Jean LaPointe", + "designation": "Directeur Design", + "quote": "Retrospected nous est très utile, et blah blah blah, et encore du blah blah merci de remplir les trous" + }, + "4": { + "author": "Jean LaPointe", + "designation": "Directeur Design", + "quote": "Retrospected nous est très utile, et blah blah blah, et encore du blah blah merci de remplir les trous" + } + }, + "Pricing": { + "heading": "Nos prix", + "monthly": "Par mois", + "yearly": "Par an", + "currency": "€", + "subscribe": "Acheter maintenant", + "login": "Connectez-vous", + "basic": { + "title": "Basic", + "price": 0, + "features": [ + "Retrospectives illimitées", + "Unlimited Team Members", + "Unlimited Action Items", + "40 posts" + ] + }, + "pro": { + "title": "Pro", + "price": 11.90, + "recurrence": "par mois", + "features": [ + "Unlimited Retrospectives", + "Unlimited Team Members", + "Unlimited Action Items", + "Unlimited posts", + "20 users" + ] + }, + "unlimited": { + "title": "Unlimited", + "price": 49.95, + "recurrence": "par mois", + "features": [ + "Unlimited Retrospectives", + "Unlimited Team Members", + "Unlimited Action Items", + "Unlimited posts", + "Unlimited users" + ] + }, + "hosted": { + "title": "Self Hosted", + "price": 599, + "recurrence": "une seule fois", + "features": [ + "Everything from Unlimited", + "All users are Pro by default", + "Awesome documentation" + ] + } + }, + "SelfHosted": { + "slogan": "Self Hosting", + "title": "A TRADUIRE", + "desc": "Keep complete control of your data by self-hosting Retrospected. One-time fee, unlimited updates. Get up and running with our amazing documentation in no time.", + "features": [ + "Complete control: your data stays on your premises", + "Easy to install", + "Administration Panel", + "All users are Pro", + "Free updates, forever" + ], + "button": { + "link": "https://docs.retrospected.com", + "label": "Discover our documentation" + } + }, + "Features": { + "heading": "Commencez une rétro en quelques secondes", + "description":"Starting or joining a retro is as easy as 1, 2, 3. It's friction-less.", + "feature1": "Fonctionalité 1", + "feature2": "Feature 2", + "feature3": "Feature 3", + "feature4": "Feature 4" + }, + "Newsfeed": { + "heading": "Quoi de neuf à Retrospected ?" + }, + "FAQ": { + "heading": "Vos Questions (à traduire)", + "data": [ + {"question": "How are payments handled?", "answer": "Payments are handled by our partner, Stripe. No payment information is stored by Retrospected."}, + {"question": "Do you give Pro licenses for free in some cases?", "answer": "If you are using this product as a charity, or you are in education, send us an email and we'll sort out a free license for you. Contact us."}, + {"question": "Will I pay more for some features?", "answer": "We only have 2 tiers: Free and Pro. All features are unlocked when you subscribe to a Pro account."}, + {"question": "Is it possible to pay yearly?", "answer": "You can! Simply select this option at checkout and you will get one month free per year."}, + {"question": "Can I cancel my plan?", "answer": "Yes. The subscription can be stopped at any time, and will end at the end of your current billing month."}, + {"question": "Is there any limit?", "answer": "There is no limit on the amount of data stored, subject to fair-use policy. On free accounts, you are limited to 40 posts."} + ] + }, + "CTA": { + "heading": "Commencez une Retrospective maintenant", + "description": "Join the thousands of users who are already using Retrospected", + "button": "Start a Retrospective", + "hint": "This will change your life!" + }, + "Footer": { + "copyright": "Copyright © 2023 - Retrospected Ltd. Tout droits réservés.", + "about": "Nos logiciels sont développés avec amour par Retrospected Ltd à Londres" + }, + "Contact": { + "title": "Contactez-nous", + "address": "Retrospected Ltd, London, UK", + "phone": "+44 (not used for now)", + "openingTime": "7j/7 - 8h - 22h", + "email": "support@retrospected.com" + } +} diff --git a/marketing/public/manifest.json b/marketing/public/manifest.json new file mode 100644 index 000000000..a8f67d690 --- /dev/null +++ b/marketing/public/manifest.json @@ -0,0 +1,43 @@ +{ + "name": "Retrospected", + "short_name": "Retrospected", + "display": "standalone", + "start_url": "/", + "icons": [{ + "src": "\/android-icon-36x36.png", + "sizes": "36x36", + "type": "image\/png", + "density": 0.75 + }, + { + "src": "\/android-icon-48x48.png", + "sizes": "48x48", + "type": "image\/png", + "density": 1 + }, + { + "src": "\/android-icon-72x72.png", + "sizes": "72x72", + "type": "image\/png", + "density": 1.5 + }, + { + "src": "\/android-icon-96x96.png", + "sizes": "96x96", + "type": "image\/png", + "density": 2 + }, + { + "src": "\/android-icon-144x144.png", + "sizes": "144x144", + "type": "image\/png", + "density": 3 + }, + { + "src": "\/android-icon-192x192.png", + "sizes": "192x192", + "type": "image\/png", + "density": 4 + } + ] +} \ No newline at end of file diff --git a/marketing/public/ms-icon-144x144.png b/marketing/public/ms-icon-144x144.png new file mode 100644 index 000000000..b841d875a Binary files /dev/null and b/marketing/public/ms-icon-144x144.png differ diff --git a/marketing/public/ms-icon-150x150.png b/marketing/public/ms-icon-150x150.png new file mode 100644 index 000000000..3a1b2c5ad Binary files /dev/null and b/marketing/public/ms-icon-150x150.png differ diff --git a/marketing/public/ms-icon-310x310.png b/marketing/public/ms-icon-310x310.png new file mode 100644 index 000000000..5a1c600b6 Binary files /dev/null and b/marketing/public/ms-icon-310x310.png differ diff --git a/marketing/public/ms-icon-70x70.png b/marketing/public/ms-icon-70x70.png new file mode 100644 index 000000000..e004ec249 Binary files /dev/null and b/marketing/public/ms-icon-70x70.png differ diff --git a/marketing/public/safari-pinned-tab.svg b/marketing/public/safari-pinned-tab.svg new file mode 100644 index 000000000..06036cdbd --- /dev/null +++ b/marketing/public/safari-pinned-tab.svg @@ -0,0 +1,815 @@ + + + + +Created by potrace 1.11, written by Peter Selinger 2001-2013 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/marketing/public/site.webmanifest b/marketing/public/site.webmanifest new file mode 100644 index 000000000..0dc94ece5 --- /dev/null +++ b/marketing/public/site.webmanifest @@ -0,0 +1,19 @@ +{ + "name": "Retrospected", + "short_name": "Retrospected", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#5842DE", + "background_color": "#ffffff", + "display": "standalone" +} \ No newline at end of file diff --git a/marketing/src/common/assets/css/flaticon.css b/marketing/src/common/assets/css/flaticon.css new file mode 100755 index 000000000..3411e362f --- /dev/null +++ b/marketing/src/common/assets/css/flaticon.css @@ -0,0 +1,167 @@ +/* + Flaticon icon font: Flaticon + Creation date: 10/02/2019 12:14 + */ + +@font-face { + font-family: 'Flaticon'; + src: url('../fonts/Flaticon.eot'); + src: url('../fonts/Flaticon.eot?#iefix') format('embedded-opentype'), + url('../fonts/Flaticon.woff2') format('woff2'), + url('../fonts/Flaticon.woff') format('woff'), + url('../fonts/Flaticon.ttf') format('truetype'), + url('../fonts/Flaticon.svg#Flaticon') format('svg'); + font-weight: normal; + font-style: normal; +} + +@media screen and (-webkit-min-device-pixel-ratio: 0) { + @font-face { + font-family: 'Flaticon'; + src: url('../fonts/Flaticon.svg#Flaticon') format('svg'); + } +} + +[class^='flaticon-']:before, +[class*=' flaticon-']:before, +[class^='flaticon-']:after, +[class*=' flaticon-']:after { + font-family: Flaticon; + font-style: normal; +} + +.flaticon-flask:before { + content: '\f100'; +} +.flaticon-pencil-case:before { + content: '\f101'; +} +.flaticon-ruler:before { + content: '\f102'; +} +.flaticon-startup:before { + content: '\f103'; +} +.flaticon-creative:before { + content: '\f104'; +} +.flaticon-briefing:before { + content: '\f105'; +} +.flaticon-magnifying-glass:before { + content: '\f106'; +} +.flaticon-user:before { + content: '\f107'; +} +.flaticon-quotes:before { + content: '\f108'; +} +.flaticon-next:before { + content: '\f109'; +} +.flaticon-left-arrow:before { + content: '\f10a'; +} +.flaticon-plus-symbol:before { + content: '\f10b'; +} +.flaticon-minus-symbol:before { + content: '\f10c'; +} +.flaticon-trophy:before { + content: '\f10d'; +} +.flaticon-conversation:before { + content: '\f10e'; +} +.flaticon-atom:before { + content: '\f10f'; +} +.flaticon-link:before { + content: '\f110'; +} +.flaticon-battery:before { + content: '\f111'; +} +.flaticon-stopwatch:before { + content: '\f112'; +} +.flaticon-stopwatch-1:before { + content: '\f113'; +} +.flaticon-objective:before { + content: '\f114'; +} +.flaticon-facebook-logo:before { + content: '\f115'; +} +.flaticon-twitter-logo-silhouette:before { + content: '\f116'; +} +.flaticon-instagram:before { + content: '\f117'; +} +.flaticon-dribble-logo:before { + content: '\f118'; +} +.flaticon-tumblr-logo:before { + content: '\f119'; +} +.flaticon-youtube:before { + content: '\f11a'; +} +.flaticon-google-plus:before { + content: '\f11b'; +} +.flaticon-blockchain:before { + content: '\f11c'; +} +.flaticon-money-bag:before { + content: '\f11d'; +} +.flaticon-wallet:before { + content: '\f11e'; +} +.flaticon-security:before { + content: '\f11f'; +} +.flaticon-bitcoin:before { + content: '\f120'; +} +.flaticon-blockchain-1:before { + content: '\f121'; +} +.flaticon-annonymous:before { + content: '\f122'; +} +.flaticon-group:before { + content: '\f123'; +} +.flaticon-prototype:before { + content: '\f124'; +} +.flaticon-code:before { + content: '\f125'; +} +.flaticon-vectors:before { + content: '\f126'; +} +.flaticon-export:before { + content: '\f127'; +} +.flaticon-hourglass:before { + content: '\f128'; +} +.flaticon-trophy-1:before { + content: '\f129'; +} +.flaticon-upload:before { + content: '\f12a'; +} +.flaticon-settings:before { + content: '\f12b'; +} +.flaticon-strategy:before { + content: '\f12c'; +} diff --git a/marketing/src/common/assets/css/icon-example-page.css b/marketing/src/common/assets/css/icon-example-page.css new file mode 100755 index 000000000..44e166308 --- /dev/null +++ b/marketing/src/common/assets/css/icon-example-page.css @@ -0,0 +1,314 @@ +#flaticonExample ol, +#flaticonExample ul { + list-style: none; +} + +#flaticonExample blockquote, +#flaticonExample q { + quotes: none; +} + +#flaticonExample blockquote:before, +#flaticonExample blockquote:after, +#flaticonExample q:before, +#flaticonExample q:after { + content: ''; + content: none; +} + +#flaticonExample table { + border-collapse: collapse; + border-spacing: 0; +} + +#flaticonExample { + font-family: 'Varela Round', Helvetica, Arial, sans-serif; + font-size: 16px; + color: #222; +} + +#flaticonExample a { + color: #333; + border-bottom: 1px solid #a9fd00; + font-weight: bold; + text-decoration: none; +} + +#flaticonExample * { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + padding: 0; +} + +#flaticonExample [class^='flaticon-']:before, +#flaticonExample [class*=' flaticon-']:before, +#flaticonExample [class^='flaticon-']:after, +#flaticonExample [class*=' flaticon-']:after { + font-family: Flaticon; + font-size: 30px; + font-style: normal; + margin-left: 20px; + color: #333; +} + +#flaticonExample .wrapper { + max-width: 600px; + margin: auto; + padding: 0 1em; +} + +#flaticonExample .title { + font-size: 1.25em; + text-align: center; + margin-bottom: 1em; + text-transform: uppercase; +} + +#flaticonExample header { + text-align: center; + background-color: #222; + color: #fff; + padding: 1em; +} + +#flaticonExample header .logo { + width: 210px; + height: 38px; + display: inline-block; + vertical-align: middle; + margin-right: 1em; + border: none; +} + +#flaticonExample header strong { + font-size: 1.95em; + font-weight: bold; + vertical-align: middle; + margin-top: 5px; + display: inline-block; +} + +#flaticonExample .demo { + margin: 2em auto; + line-height: 1.25em; +} + +#flaticonExample .demo ul li { + margin-bottom: 1em; +} + +#flaticonExample .demo ul li .num { + color: #222; + border-radius: 20px; + display: inline-block; + width: 26px; + padding: 3px; + height: 26px; + text-align: center; + margin-right: 0.5em; + border: 1px solid #222; +} + +#flaticonExample .demo ul li code { + background-color: #222; + border-radius: 4px; + padding: 0.25em 0.5em; + display: inline-block; + color: #fff; + font-family: Consolas, Monaco, Lucida Console, Liberation Mono, + DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; + font-weight: lighter; + margin-top: 1em; + font-size: 0.8em; + word-break: break-all; +} + +#flaticonExample .demo ul li code.big { + padding: 1em; + font-size: 0.9em; +} + +#flaticonExample .demo ul li code .red { + color: #ef3159; +} + +#flaticonExample .demo ul li code .green { + color: #acff65; +} + +#flaticonExample .demo ul li code .yellow { + color: #ffff99; +} + +#flaticonExample .demo ul li code .blue { + color: #99d3ff; +} + +#flaticonExample .demo ul li code .purple { + color: #a295ff; +} + +#flaticonExample .demo ul li code .dots { + margin-top: 0.5em; + display: block; +} + +#flaticonExample #glyphs { + border-bottom: 1px solid #ccc; + padding: 2em 0; + text-align: center; +} + +#flaticonExample .glyph { + display: inline-block; + width: 9em; + margin: 1em; + text-align: center; + vertical-align: top; + background: #fff; +} + +#flaticonExample .glyph .glyph-icon { + padding: 10px; + display: block; + font-family: 'Flaticon'; + font-size: 64px; + line-height: 1; +} + +#flaticonExample .glyph .glyph-icon:before { + font-size: 64px; + color: #222; + margin-left: 0; +} + +#flaticonExample .class-name { + font-size: 0.65em; + background-color: #222; + color: #fff; + border-radius: 4px 4px 0 0; + padding: 0.5em; + color: #ffff99; + font-family: Consolas, Monaco, Lucida Console, Liberation Mono, + DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; +} + +#flaticonExample .author-name { + font-size: 0.6em; + background-color: #fcfcfd; + border: 1px solid #dedee4; + border-top: 0; + border-radius: 0 0 4px 4px; + padding: 0.5em; +} + +#flaticonExample .class-name:last-child { + font-size: 10px; + color: #888; +} + +#flaticonExample .class-name:last-child a { + font-size: 10px; + color: #555; +} + +#flaticonExample .class-name:last-child a:hover { + color: #a9fd00; +} + +#flaticonExample .glyph > input { + display: block; + width: 100px; + margin: 5px auto; + text-align: center; + font-size: 12px; + cursor: text; +} + +#flaticonExample .glyph > input.icon-input { + font-family: 'Flaticon'; + font-size: 16px; + margin-bottom: 10px; +} + +#flaticonExample .attribution .title { + margin-top: 2em; +} + +#flaticonExample .attribution textarea { + background-color: #fcfcfd; + padding: 1em; + border: none; + box-shadow: none; + border: 1px solid #dedee4; + border-radius: 4px; + resize: none; + width: 100%; + height: 150px; + font-size: 0.8em; + font-family: Consolas, Monaco, Lucida Console, Liberation Mono, + DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; + -webkit-appearance: none; +} + +#flaticonExample .iconsuse { + margin: 2em auto; + text-align: center; + max-width: 1200px; +} + +#flaticonExample .iconsuse:after { + content: ''; + display: table; + clear: both; +} + +#flaticonExample .iconsuse .image { + float: left; + width: 25%; + padding: 0 1em; +} + +#flaticonExample .iconsuse .image p { + margin-bottom: 1em; +} + +#flaticonExample .iconsuse .image span { + display: block; + font-size: 0.65em; + background-color: #222; + color: #fff; + border-radius: 4px; + padding: 0.5em; + color: #ffff99; + margin-top: 1em; + font-family: Consolas, Monaco, Lucida Console, Liberation Mono, + DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace; +} + +#flaticonExample #footer { + text-align: center; + background-color: #4c5b5c; + color: #7c9192; + padding: 1em; +} + +#flaticonExample #footer a { + border: none; + color: #a9fd00; + font-weight: normal; +} + +@media (max-width: 960px) { + #flaticonExample .iconsuse .image { + width: 50%; + } +} + +@media (max-width: 560px) { + #flaticonExample .iconsuse .image { + width: 100%; + } +} diff --git a/marketing/src/common/assets/css/rc-collapse.css b/marketing/src/common/assets/css/rc-collapse.css new file mode 100755 index 000000000..e520c9690 --- /dev/null +++ b/marketing/src/common/assets/css/rc-collapse.css @@ -0,0 +1,37 @@ +.rc-collapse-motion { + transition: height 0.3s, opacity 0.3s; +} + +.rc-collapse-content-hidden { + display: none; +} + +.rc-collapse-header { + width: 100%; +} + +.rc-collapse-header > .rc-collapse-header-text { + width: 100%; + justify-content: space-between; + display: flex; +} + +.rc-collapse > .rc-collapse-item > .rc-collapse-header .rc-collapse-extra { + margin: 0 16px 0 auto; +} + +.rc-collapse > .rc-collapse-item .rc-collapse-header-collapsible-only { + cursor: default; +} + +.rc-collapse > .rc-collapse-item .rc-collapse-header-collapsible-only .rc-collapse-header-text { + cursor: pointer; +} + +.rc-collapse > .rc-collapse-item-disabled > .rc-collapse-header { + cursor: not-allowed; +} + +.rc-collapse-content { + overflow: hidden; +} diff --git a/marketing/src/common/assets/css/rc-drawer.css b/marketing/src/common/assets/css/rc-drawer.css new file mode 100755 index 000000000..a0723d1a0 --- /dev/null +++ b/marketing/src/common/assets/css/rc-drawer.css @@ -0,0 +1,70 @@ +.rc-drawer{ + z-index: 9999 !important; +} +.mask-motion-enter-active, +.mask-motion-appear-active, +.mask-motion-leave-active { + transition: all 0.3s; +} +.mask-motion-enter, +.mask-motion-appear { + opacity: 0; +} +.mask-motion-enter-active, +.mask-motion-appear-active { + opacity: 1; +} +.mask-motion-leave { + opacity: 1; +} +.mask-motion-leave-active { + opacity: 0; +} +.panel-motion-left-enter-start, +.panel-motion-left-appear-start, +.panel-motion-left-leave-start { + transition: none !important; +} +.panel-motion-left-enter-active, +.panel-motion-left-appear-active, +.panel-motion-left-leave-active { + transition: all 0.3s; +} +.panel-motion-left-enter, +.panel-motion-left-appear { + transform: translateX(-100%); +} +.panel-motion-left-enter-active, +.panel-motion-left-appear-active { + transform: translateX(0); +} +.panel-motion-left-leave { + transform: translateX(0); +} +.panel-motion-left-leave-active { + transform: translateX(-100%) !important; +} +.panel-motion-right-enter-start, +.panel-motion-right-appear-start, +.panel-motion-right-leave-start { + transition: none !important; +} +.panel-motion-right-enter-active, +.panel-motion-right-appear-active, +.panel-motion-right-leave-active { + transition: all 0.3s; +} +.panel-motion-right-enter, +.panel-motion-right-appear { + transform: translateX(100%); +} +.panel-motion-right-enter-active, +.panel-motion-right-appear-active { + transform: translateX(0); +} +.panel-motion-right-leave { + transform: translateX(0); +} +.panel-motion-right-leave-active { + transform: translateX(100%) !important; +} diff --git a/marketing/src/common/assets/css/react-slick.css b/marketing/src/common/assets/css/react-slick.css new file mode 100755 index 000000000..1ecfb29b2 --- /dev/null +++ b/marketing/src/common/assets/css/react-slick.css @@ -0,0 +1,98 @@ +.slick-list, +.slick-slider, +.slick-track { + position: relative; + display: block; +} + +.slick-loading .slick-slide, +.slick-loading .slick-track { + visibility: hidden; +} + +.slick-slider { + box-sizing: border-box; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-touch-callout: none; + -khtml-user-select: none; + -ms-touch-action: pan-y; + touch-action: pan-y; + -webkit-tap-highlight-color: transparent; +} + +.slick-list { + overflow: hidden; + margin: 0; + padding: 0; +} + +.slick-list:focus { + outline: 0; +} + +.slick-list.dragging { + cursor: pointer; + cursor: hand; +} + +.slick-slider .slick-list, +.slick-slider .slick-track { + transform: translate3d(0, 0, 0); +} + +.slick-track { + top: 0; + left: 0; +} + +.slick-track:after, +.slick-track:before { + display: table; + content: ''; +} + +.slick-track:after { + clear: both; +} + +.slick-slide { + display: none; + float: left; + height: 100%; + min-height: 1px; +} + +[dir='rtl'] .slick-slide { + float: right; +} + +.slick-slide img { + display: block; +} + +.slick-slide.slick-loading img { + display: none; +} + +.slick-slide.dragging img { + pointer-events: none; +} + +.slick-initialized .slick-slide { + display: block; +} + +.slick-vertical .slick-slide { + display: block; + height: auto; + border: 1px solid transparent; +} + +.slick-arrow.slick-hidden { + display: none; +} + +/*# sourceMappingURL=slick.min.css.map */ diff --git a/marketing/src/common/assets/css/style.js b/marketing/src/common/assets/css/style.js new file mode 100755 index 000000000..994cb417c --- /dev/null +++ b/marketing/src/common/assets/css/style.js @@ -0,0 +1,120 @@ +import { createGlobalStyle } from 'styled-components'; + +const ResetCSS = createGlobalStyle` + ::selection { + background: #333333; + color: #ffffff; + } + + html { + box-sizing: border-box; + -ms-overflow-style: scrollbar; + } + + *, + *::before, + *::after { + box-sizing: inherit; + } + + * { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + *:focus { + outline: none; + } + + html, + html a, + h1, + h2, + h3, + h4, + h5, + h6, + a, + p, + li, + dl, + th, + dt, + input, + textarea, + span, + div { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); + } + + body { + margin: 0; + padding: 0; + overflow-x: hidden; + -webkit-tap-highlight-color: transparent; + } + + ul { + margin: 0; + padding: 0; + } + + li { + list-style-type: none; + } + + a { + text-decoration: none; + } + + a:hover { + text-decoration: none; + } + + .reuseModalHolder { + padding: 0 !important; + &.demo_switcher_modal { + border: 0 !important; + background-color: rgba(16, 30, 77, 0.9) !important; + .innerRndComponent { + border-radius: 8px !important; + } + } + } + + button.modalCloseBtn { + position: fixed !important; + z-index: 999991 !important; + background-color: transparent !important; + top: 10px !important; + right: 10px !important; + min-width: 34px !important; + min-height: 34px !important; + padding: 0 !important; + span.btn-icon { + font-size: 22px !important; + transform: rotate(45deg) !important; + } + + &.alt { + border-radius: 50% !important; + z-index: 999999 !important; + padding: 0 !important; + transition: all 0.3s ease !important; + top: 25px !important; + right: 30px !important; + min-width: 40px !important; + min-height: 40px !important; + + span.btn-icon { + font-size: 20px !important; + } + + &:hover { + opacity: 0.88 !important; + } + } + } +`; +export default ResetCSS; diff --git a/marketing/src/common/assets/fonts/Flaticon.eot b/marketing/src/common/assets/fonts/Flaticon.eot new file mode 100755 index 000000000..7590da273 Binary files /dev/null and b/marketing/src/common/assets/fonts/Flaticon.eot differ diff --git a/marketing/src/common/assets/fonts/Flaticon.svg b/marketing/src/common/assets/fonts/Flaticon.svg new file mode 100755 index 000000000..d0186943d --- /dev/null +++ b/marketing/src/common/assets/fonts/Flaticon.svg @@ -0,0 +1,551 @@ + + + + + +Created by FontForge 20170731 at Sun Feb 10 12:14:44 2019 + By root + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/marketing/src/common/assets/fonts/Flaticon.ttf b/marketing/src/common/assets/fonts/Flaticon.ttf new file mode 100755 index 000000000..fbef793f3 Binary files /dev/null and b/marketing/src/common/assets/fonts/Flaticon.ttf differ diff --git a/marketing/src/common/assets/fonts/Flaticon.woff b/marketing/src/common/assets/fonts/Flaticon.woff new file mode 100755 index 000000000..fa9c0ca3e Binary files /dev/null and b/marketing/src/common/assets/fonts/Flaticon.woff differ diff --git a/marketing/src/common/assets/fonts/Flaticon.woff2 b/marketing/src/common/assets/fonts/Flaticon.woff2 new file mode 100755 index 000000000..8b18d0e44 Binary files /dev/null and b/marketing/src/common/assets/fonts/Flaticon.woff2 differ diff --git a/marketing/src/common/assets/image/404.svg b/marketing/src/common/assets/image/404.svg new file mode 100755 index 000000000..44bc1e58d --- /dev/null +++ b/marketing/src/common/assets/image/404.svg @@ -0,0 +1 @@ +cuper \ No newline at end of file diff --git a/marketing/src/common/assets/image/error.svg b/marketing/src/common/assets/image/error.svg new file mode 100755 index 000000000..04e726ef1 --- /dev/null +++ b/marketing/src/common/assets/image/error.svg @@ -0,0 +1,10 @@ + + + + + diff --git a/marketing/src/common/assets/image/fav.png b/marketing/src/common/assets/image/fav.png new file mode 100755 index 000000000..f43d3a322 Binary files /dev/null and b/marketing/src/common/assets/image/fav.png differ diff --git a/marketing/src/common/assets/image/favicon.png b/marketing/src/common/assets/image/favicon.png new file mode 100755 index 000000000..13e5aa90d Binary files /dev/null and b/marketing/src/common/assets/image/favicon.png differ diff --git a/marketing/src/common/assets/image/red-heart.svg b/marketing/src/common/assets/image/red-heart.svg new file mode 100755 index 000000000..46f1e97ca --- /dev/null +++ b/marketing/src/common/assets/image/red-heart.svg @@ -0,0 +1,3 @@ + + + diff --git a/marketing/src/common/assets/image/success.svg b/marketing/src/common/assets/image/success.svg new file mode 100755 index 000000000..aedd7c26a --- /dev/null +++ b/marketing/src/common/assets/image/success.svg @@ -0,0 +1,10 @@ + + + + + + diff --git a/marketing/src/common/assets/image/webAppCreative/analytics.png b/marketing/src/common/assets/image/webAppCreative/analytics.png new file mode 100755 index 000000000..439b88462 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/analytics.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/clients/envato.png b/marketing/src/common/assets/image/webAppCreative/clients/envato.png new file mode 100755 index 000000000..f86648d5d Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/clients/envato.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/clients/evernote.png b/marketing/src/common/assets/image/webAppCreative/clients/evernote.png new file mode 100755 index 000000000..6a73230b1 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/clients/evernote.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/clients/forbes.png b/marketing/src/common/assets/image/webAppCreative/clients/forbes.png new file mode 100755 index 000000000..385c0bd35 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/clients/forbes.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/clients/geekwire.png b/marketing/src/common/assets/image/webAppCreative/clients/geekwire.png new file mode 100755 index 000000000..57a4c1d43 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/clients/geekwire.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/clients/slack.png b/marketing/src/common/assets/image/webAppCreative/clients/slack.png new file mode 100755 index 000000000..886d83767 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/clients/slack.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/clients/usa-today.png b/marketing/src/common/assets/image/webAppCreative/clients/usa-today.png new file mode 100755 index 000000000..72330371b Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/clients/usa-today.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/cta-bubble-1.png b/marketing/src/common/assets/image/webAppCreative/cta-bubble-1.png new file mode 100755 index 000000000..5755b0f29 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/cta-bubble-1.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/cta-bubble-2.png b/marketing/src/common/assets/image/webAppCreative/cta-bubble-2.png new file mode 100755 index 000000000..468abc0dd Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/cta-bubble-2.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/cta-bubble.png b/marketing/src/common/assets/image/webAppCreative/cta-bubble.png new file mode 100755 index 000000000..cc30144af Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/cta-bubble.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/dashboard-2.png b/marketing/src/common/assets/image/webAppCreative/dashboard-2.png new file mode 100755 index 000000000..31055a81a Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/dashboard-2.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/dashboard-pattern.png b/marketing/src/common/assets/image/webAppCreative/dashboard-pattern.png new file mode 100755 index 000000000..8bdefe20b Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/dashboard-pattern.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/dashboard.png b/marketing/src/common/assets/image/webAppCreative/dashboard.png new file mode 100755 index 000000000..4c72997f0 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/dashboard.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/1.png b/marketing/src/common/assets/image/webAppCreative/icons/1.png new file mode 100755 index 000000000..adb21d021 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/1.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/2.png b/marketing/src/common/assets/image/webAppCreative/icons/2.png new file mode 100755 index 000000000..d06c15de2 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/2.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/3.png b/marketing/src/common/assets/image/webAppCreative/icons/3.png new file mode 100755 index 000000000..9ea59bc0a Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/3.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/4.png b/marketing/src/common/assets/image/webAppCreative/icons/4.png new file mode 100755 index 000000000..9e247ee44 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/4.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/5.png b/marketing/src/common/assets/image/webAppCreative/icons/5.png new file mode 100755 index 000000000..5273bcee2 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/5.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/6.png b/marketing/src/common/assets/image/webAppCreative/icons/6.png new file mode 100755 index 000000000..afcfa6d98 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/6.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/7.png b/marketing/src/common/assets/image/webAppCreative/icons/7.png new file mode 100755 index 000000000..fc18b7831 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/7.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/README.zip b/marketing/src/common/assets/image/webAppCreative/icons/README.zip new file mode 100755 index 000000000..5663d7e77 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/README.zip differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/Superprops.zip b/marketing/src/common/assets/image/webAppCreative/icons/Superprops.zip new file mode 100755 index 000000000..5e3cc06ba Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/Superprops.zip differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/asana.png b/marketing/src/common/assets/image/webAppCreative/icons/asana.png new file mode 100755 index 000000000..3d37a6d7d Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/asana.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/donut.png b/marketing/src/common/assets/image/webAppCreative/icons/donut.png new file mode 100755 index 000000000..fa5d0fb80 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/donut.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/dribbble.png b/marketing/src/common/assets/image/webAppCreative/icons/dribbble.png new file mode 100755 index 000000000..83d755540 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/dribbble.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/drive.png b/marketing/src/common/assets/image/webAppCreative/icons/drive.png new file mode 100755 index 000000000..9d38d6e6b Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/drive.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/dropbox.png b/marketing/src/common/assets/image/webAppCreative/icons/dropbox.png new file mode 100755 index 000000000..2f98d952a Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/dropbox.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/envelope.png b/marketing/src/common/assets/image/webAppCreative/icons/envelope.png new file mode 100755 index 000000000..8b7795dbf Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/envelope.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/facebook.png b/marketing/src/common/assets/image/webAppCreative/icons/facebook.png new file mode 100755 index 000000000..f52f8b4a8 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/facebook.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/fontawesome.png b/marketing/src/common/assets/image/webAppCreative/icons/fontawesome.png new file mode 100755 index 000000000..2c17e760d Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/fontawesome.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/github.png b/marketing/src/common/assets/image/webAppCreative/icons/github.png new file mode 100755 index 000000000..99e38f47a Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/github.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/google-cloud.png b/marketing/src/common/assets/image/webAppCreative/icons/google-cloud.png new file mode 100755 index 000000000..ebc0296a4 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/google-cloud.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/icecream.png b/marketing/src/common/assets/image/webAppCreative/icons/icecream.png new file mode 100755 index 000000000..bae95847d Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/icecream.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/messenger.png b/marketing/src/common/assets/image/webAppCreative/icons/messenger.png new file mode 100755 index 000000000..311fe0cd8 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/messenger.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/nginx.png b/marketing/src/common/assets/image/webAppCreative/icons/nginx.png new file mode 100755 index 000000000..70c3cc8f6 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/nginx.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/pizza.png b/marketing/src/common/assets/image/webAppCreative/icons/pizza.png new file mode 100755 index 000000000..f1281ded8 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/pizza.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/slack.png b/marketing/src/common/assets/image/webAppCreative/icons/slack.png new file mode 100755 index 000000000..ebaf03af5 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/slack.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/smashing-mag.png b/marketing/src/common/assets/image/webAppCreative/icons/smashing-mag.png new file mode 100755 index 000000000..04f408466 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/smashing-mag.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/twitter.png b/marketing/src/common/assets/image/webAppCreative/icons/twitter.png new file mode 100755 index 000000000..ca8e5b675 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/twitter.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/zeplin.png b/marketing/src/common/assets/image/webAppCreative/icons/zeplin.png new file mode 100755 index 000000000..f5cf7fe1e Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/zeplin.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/icons/zoom.png b/marketing/src/common/assets/image/webAppCreative/icons/zoom.png new file mode 100755 index 000000000..683acccde Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/icons/zoom.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/logo.png b/marketing/src/common/assets/image/webAppCreative/logo.png new file mode 100755 index 000000000..8c3931c9d Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/logo.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/parallax-1.png b/marketing/src/common/assets/image/webAppCreative/parallax-1.png new file mode 100755 index 000000000..0817ec634 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/parallax-1.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/pattern1.png b/marketing/src/common/assets/image/webAppCreative/pattern1.png new file mode 100755 index 000000000..a20060c23 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/pattern1.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/pattern2.png b/marketing/src/common/assets/image/webAppCreative/pattern2.png new file mode 100755 index 000000000..c186d8dda Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/pattern2.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/pattern3.png b/marketing/src/common/assets/image/webAppCreative/pattern3.png new file mode 100755 index 000000000..02e30d194 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/pattern3.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/pattern4.png b/marketing/src/common/assets/image/webAppCreative/pattern4.png new file mode 100755 index 000000000..b95e76c32 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/pattern4.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/pattern5.png b/marketing/src/common/assets/image/webAppCreative/pattern5.png new file mode 100755 index 000000000..9bccb47f1 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/pattern5.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/pattern6.png b/marketing/src/common/assets/image/webAppCreative/pattern6.png new file mode 100755 index 000000000..2c11d7ec8 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/pattern6.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/pattern7.png b/marketing/src/common/assets/image/webAppCreative/pattern7.png new file mode 100755 index 000000000..edee351a8 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/pattern7.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/polygon.png b/marketing/src/common/assets/image/webAppCreative/polygon.png new file mode 100755 index 000000000..eb18d3820 Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/polygon.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/post1.png b/marketing/src/common/assets/image/webAppCreative/post1.png new file mode 100755 index 000000000..17e3b63ee Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/post1.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/post2.png b/marketing/src/common/assets/image/webAppCreative/post2.png new file mode 100755 index 000000000..0d9ac96fc Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/post2.png differ diff --git a/marketing/src/common/assets/image/webAppCreative/post3.png b/marketing/src/common/assets/image/webAppCreative/post3.png new file mode 100755 index 000000000..6b9244a9e Binary files /dev/null and b/marketing/src/common/assets/image/webAppCreative/post3.png differ diff --git a/marketing/src/common/components/Accordion/accordion.style.js b/marketing/src/common/components/Accordion/accordion.style.js new file mode 100755 index 000000000..d9eac059b --- /dev/null +++ b/marketing/src/common/components/Accordion/accordion.style.js @@ -0,0 +1,75 @@ +import styled, { keyframes } from 'styled-components'; +import { + AccordionItemHeading, + AccordionItemButton, + Accordion, + AccordionItem, + AccordionItemPanel, +} from 'react-accessible-accordion'; +import 'react-accessible-accordion/dist/fancy-example.css'; + +const fadeIn = keyframes` + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +`; + +export const AccordionWrapper = styled(Accordion)``; + +export const AccordionItemWrapper = styled(AccordionItem)``; + +export const OpenIcon = styled.div``; + +export const CloseIcon = styled.div` + opacity: 0; +`; + +export const AccordionTitleWrapper = styled(AccordionItemHeading)` + > div { + display: flex; + align-items: center; + cursor: pointer; + position: relative; + &[aria-expanded='false'] { + ${OpenIcon} { + opacity: 0; + } + ${CloseIcon} { + opacity: 1; + } + } + } + + &:focus { + outline: none; + } + + * { + flex-grow: 1; + } +`; +export const AccordionItemButtonWrapper = styled(AccordionItemButton)``; +export const AccordionBodyWrapper = styled(AccordionItemPanel)` + animation: 0.35s ${fadeIn} ease-in; + &.accordion__body--hidden { + animation: 0.35s ${fadeIn} ease-in; + } +`; + +export const IconWrapper = styled.div` + margin-left: 30px; + width: 40px; + position: relative; + + ${OpenIcon}, + ${CloseIcon} { + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + transition: 0.25s ease-in-out; + } +`; diff --git a/marketing/src/common/components/Accordion/index.js b/marketing/src/common/components/Accordion/index.js new file mode 100755 index 000000000..1a276fa62 --- /dev/null +++ b/marketing/src/common/components/Accordion/index.js @@ -0,0 +1,127 @@ +import React from 'react' +import PropTypes from 'prop-types' +import { + AccordionWrapper, + AccordionItemWrapper, + AccordionTitleWrapper, + AccordionItemButtonWrapper, + AccordionBodyWrapper, + IconWrapper, + OpenIcon, + CloseIcon, +} from './accordion.style' + +const Accordion = ({ + className, + children, + allowZeroExpanded = true, + preExpanded = [], +}) => { + // Add all classs to an array + const addAllClasses = ['reusecore__accordion'] + + // className prop checking + if (className) { + addAllClasses.push(className) + } + + return ( + + {children} + + ) +} + +const AccordionItem = ({ className, children, uuid }) => { + // Add all classs to an array + const addAllClasses = ['accordion__item'] + + // className prop checking + if (className) { + addAllClasses.push(className) + } + + return ( + + {children} + + ) +} + +const AccordionTitle = ({ className, children }) => { + // Add all classs to an array + const addAllClasses = ['accordion__header'] + + // className prop checking + if (className) { + addAllClasses.push(className) + } + + return ( + + {children} + + ) +} + +const AccordionBody = ({ className, children }) => { + // Add all classs to an array + const addAllClasses = ['accordion__body'] + + // className prop checking + if (className) { + addAllClasses.push(className) + } + + return ( + + {children} + + ) +} + +Accordion.propTypes = { + /** ClassName of the Accordion. Default class is reusecore__accordion*/ + className: PropTypes.string, + + /** Used to render any component */ + children: PropTypes.element, +} + +AccordionItem.propTypes = { + /** ClassName of the AccordionItem. Default class is accordion__item */ + className: PropTypes.string, + + /** Used to render any component */ + children: PropTypes.element, +} + +AccordionTitle.propTypes = { + /** ClassName of the AccordionTitle. Default class is accordion__header */ + className: PropTypes.string, + + /** Used to render any component */ + children: PropTypes.element, +} + +AccordionBody.propTypes = { + /** ClassName of the AccordionBody. Default class is accordion__body */ + className: PropTypes.string, + + /** Used to render any component */ + children: PropTypes.element, +} + +export { + Accordion, + AccordionItem, + AccordionTitle, + AccordionBody, + IconWrapper, + OpenIcon, + CloseIcon, +} diff --git a/marketing/src/common/components/Alert/alert.style.js b/marketing/src/common/components/Alert/alert.style.js new file mode 100755 index 000000000..d6464f2c8 --- /dev/null +++ b/marketing/src/common/components/Alert/alert.style.js @@ -0,0 +1,41 @@ +import styled from 'styled-components'; +import { variant } from 'styled-system'; +import { themeGet } from '@styled-system/theme-get'; +import { colorStyle } from '../customVariant'; +import { base } from '../base'; + +const AlertStyle = styled.div` + /* Alert default style */ + padding: 20px 25px; + border-radius: 4px; + border-width: 1px; + border-style: solid; + border-color: ${themeGet('colors.borderColor', '#dadada')}; + font-size: ${themeGet('fontSizes.4', '16')}px; + color: ${themeGet('colors.textColor', '#484848')}; + + p { + &:last-child { + margin-bottom: 0; + } + } + + /* Material style goes here */ + &.is-material { + box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), + 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); + } + + /* Style system custome color variant */ + ${colorStyle} + ${base} +`; + +// prop types can also be added from the style functions +AlertStyle.propTypes = { + ...variant.propTypes, +}; + +AlertStyle.displayName = 'AlertStyle'; + +export default AlertStyle; diff --git a/marketing/src/common/components/Alert/index.js b/marketing/src/common/components/Alert/index.js new file mode 100755 index 000000000..6ee88a04a --- /dev/null +++ b/marketing/src/common/components/Alert/index.js @@ -0,0 +1,40 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import AlertStyle from './alert.style'; + +const Alert = ({ className, isMaterial, children, ...props }) => { + // Add all classs to an array + const addAllClasses = ['reusecore__alert']; + + // className prop checking + if (className) { + addAllClasses.push(className); + } + + // isMaterial prop checking + if (isMaterial) { + addAllClasses.push('is-material'); + } + + return ( + + {children} + + ); +}; + +Alert.propTypes = { + /** ClassName of the Alert */ + className: PropTypes.string, + + /** Add Material effect */ + isMaterial: PropTypes.bool, + + /** Used to render icon, button, text or any elements inside the Alert. + * This can be a string or any component. */ + children: PropTypes.element, +}; + +Alert.defaultProps = {}; + +export default Alert; diff --git a/marketing/src/common/components/Animation/index.js b/marketing/src/common/components/Animation/index.js new file mode 100755 index 000000000..2c3a4f593 --- /dev/null +++ b/marketing/src/common/components/Animation/index.js @@ -0,0 +1,20 @@ +import { css, keyframes } from 'styled-components'; + +const spinner = keyframes` + 0% { + transform: rotate(0deg); + } + 50% { + transform: rotate(180deg); + opacity: 0.5; + } + 100% { + transform: rotate(360deg); + } +`; + +const AnimSpinner = css` + animation: ${spinner} 1s linear infinite; +`; + +export { AnimSpinner }; diff --git a/marketing/src/common/components/BlogPost/index.js b/marketing/src/common/components/BlogPost/index.js new file mode 100755 index 000000000..e248e96a0 --- /dev/null +++ b/marketing/src/common/components/BlogPost/index.js @@ -0,0 +1,36 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import NextImage from '../NextImage'; + +const BlogPost = ({ className, thumbUrl, title, excerpt, link }) => { + // Add all classes to an array + const addAllClasses = ['blog_post']; + + // className prop checking + if (className) { + addAllClasses.push(className); + } + + return ( +
+
+ +
+
+

{title}

+

{excerpt}

+ {link &&
{link}
} +
+
+ ); +}; + +BlogPost.propTypes = { + className: PropTypes.string, + thumbUrl: PropTypes.object, + title: PropTypes.string, + excerpt: PropTypes.string, + link: PropTypes.element, +}; + +export default BlogPost; diff --git a/marketing/src/common/components/Box/index.js b/marketing/src/common/components/Box/index.js new file mode 100755 index 000000000..a56c9058a --- /dev/null +++ b/marketing/src/common/components/Box/index.js @@ -0,0 +1,149 @@ +import React from 'react' +import PropTypes from 'prop-types' +import styled, { css } from 'styled-components' +import { + flexWrap, + flexDirection, + alignItems, + justifyContent, +} from 'styled-system' +import { base, themed } from '../base' + +const BoxWrapper = styled('div')( + base, + themed('Box'), + (props) => + props.flexBox && + css( + { display: 'flex' }, + flexWrap, + flexDirection, + alignItems, + justifyContent, + themed('FlexBox') + ) +) + +const Box = ({ children, ...props }) => ( + {children} +) + +export default Box + +Box.propTypes = { + children: PropTypes.any.isRequired, + /** Using this props we can convert our Box Component to a Flex Container or Component */ + flexBox: PropTypes.bool, + as: PropTypes.oneOf([ + 'div', + 'article', + 'section', + 'address', + 'header', + 'footer', + 'nav', + 'main', + ]), + width: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.string, PropTypes.number]) + ), + ]), + height: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.string, PropTypes.number]) + ), + ]), + fontSize: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.string, PropTypes.number]) + ), + ]), + color: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.string, PropTypes.number]) + ), + ]), + flex: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.string, PropTypes.number]) + ), + ]), + order: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.string, PropTypes.number]) + ), + ]), + alignSelf: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.string, PropTypes.number]) + ), + ]), + display: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.string, PropTypes.number]) + ), + ]), + border: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.string, PropTypes.number]) + ), + ]), + borderTop: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.string, PropTypes.number]) + ), + ]), + borderRight: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.string, PropTypes.number]) + ), + ]), + borderBottom: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.string, PropTypes.number]) + ), + ]), + borderLeft: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.string, PropTypes.number]) + ), + ]), + borderColor: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number, + PropTypes.arrayOf( + PropTypes.oneOfType([PropTypes.string, PropTypes.number]) + ), + ]), +} + +Box.defaultProps = { + as: 'div', +} diff --git a/marketing/src/common/components/Button/button.style.tsx b/marketing/src/common/components/Button/button.style.tsx new file mode 100755 index 000000000..72127cd31 --- /dev/null +++ b/marketing/src/common/components/Button/button.style.tsx @@ -0,0 +1,67 @@ +import styled from 'styled-components'; +import { alignItems, boxShadow } from 'styled-system'; +import { themeGet } from '@styled-system/theme-get'; +import { buttonStyle, colorStyle, sizeStyle } from '../customVariant'; +import { base } from '../base'; + +const ButtonStyle = styled.button` + /* button default style */ + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + color: ${themeGet('colors.white', '#ffffff')}; + background-color: ${themeGet('colors.primary', '#028489')}; + min-height: ${themeGet('heights.3', '48')}px; + min-width: ${themeGet('widths.3', '48')}px; + border-radius: ${themeGet('radius.0', '3')}px; + font-family: inherit; + font-size: ${themeGet('fontSizes.4', '16')}px; + font-weight: ${themeGet('fontWeights.4', '500')}; + text-decoration: none; + text-transform: capitalize; + padding-top: ${themeGet('space.2', '8')}px; + padding-bottom: ${themeGet('space.2', '8')}px; + padding-left: ${themeGet('space.4', '15')}px; + padding-right: ${themeGet('space.4', '15')}px; + border: 0; + transition: all 0.3s ease; + span.btn-text { + padding-left: ${themeGet('space.1', '4')}px; + padding-right: ${themeGet('space.1', '4')}px; + } + span.btn-icon { + display: flex; + > div { + display: flex !important; + } + } + + &:focus { + outline: none; + } + + /* Material style goes here */ + &.is-material { + box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2), + 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.12); + } + + /* When button on loading stage */ + &.is-loading { + .btn-text { + padding-left: ${themeGet('space.2', '8')}px; + padding-right: ${themeGet('space.2', '8')}px; + } + } + + /* Style system support */ + ${alignItems} + ${boxShadow} + ${buttonStyle} + ${colorStyle} + ${sizeStyle} + ${base} +`; + +export default ButtonStyle; diff --git a/marketing/src/common/components/Button/index.tsx b/marketing/src/common/components/Button/index.tsx new file mode 100755 index 000000000..586abebce --- /dev/null +++ b/marketing/src/common/components/Button/index.tsx @@ -0,0 +1,148 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import ButtonStyle from './button.style'; +import Loader from '../Loader'; + +type ButtonProps = { + type: 'button' | 'submit' | 'reset'; + title?: string; + icon?: React.ReactNode; + disabled?: boolean; + iconPosition?: 'left' | 'right'; + onClick?: (event: React.MouseEvent) => void; + loader?: React.ReactNode; + loaderColor?: string; + isMaterial?: boolean; + isLoading?: boolean; + className?: string; + colors?: + | 'primary' + | 'secondary' + | 'warning' + | 'error' + | 'primaryWithBg' + | 'secondaryWithBg' + | 'warningWithBg' + | 'errorWithBg'; +}; + +const Button = ({ + type, + title, + icon, + disabled, + iconPosition, + onClick, + loader, + loaderColor, + isMaterial, + isLoading, + className, + ...props +}: ButtonProps) => { + // Add all classs to an array + const addAllClasses = ['reusecore__button']; + + // isLoading prop checking + if (isLoading) { + addAllClasses.push('is-loading'); + } + + // isMaterial prop checking + if (isMaterial) { + addAllClasses.push('is-material'); + } + + // className prop checking + if (className) { + addAllClasses.push(className); + } + + // Checking button loading state + const buttonIcon = + isLoading !== false ? ( + + {loader ? loader : } + + ) : ( + icon && {icon} + ); + + // set icon position + const position = iconPosition || 'right'; + + return ( + + {position === 'left' && buttonIcon} + {title && {title}} + {position === 'right' && buttonIcon} + + ); +}; + +Button.propTypes = { + /** ClassName of the button */ + className: PropTypes.string, + + /** Add icon */ + type: PropTypes.oneOf(['button', 'submit', 'reset']), + + /** Add icon */ + icon: PropTypes.object, + + /** Add loader */ + loader: PropTypes.object, + + /** Add Material effect */ + isMaterial: PropTypes.bool, + + /** Button Loading state */ + isLoading: PropTypes.bool, + + /** Button Loading state */ + loaderColor: PropTypes.string, + + /** If true button will be disabled */ + disabled: PropTypes.bool, + + /** Adjust your icon and loader position [if you use loader] */ + iconPosition: PropTypes.oneOf(['left', 'right']), + + /** Variant change button shape */ + variant: PropTypes.oneOf(['textButton', 'outlined', 'fab', 'extendedFab']), + + /** primary || secondary || warning || error change text and border color. + * And primaryWithBg || secondaryWithBg || warningWithBg || errorWithBg change text, border and background color */ + colors: PropTypes.oneOf([ + 'primary', + 'secondary', + 'warning', + 'error', + 'primaryWithBg', + 'secondaryWithBg', + 'warningWithBg', + 'errorWithBg', + ]), + + /** + * Gets called when the user clicks on the button + */ + onClick: PropTypes.func, +}; + +Button.defaultProps = { + disabled: false, + isMaterial: false, + isLoading: false, + type: 'button', +}; + +export default Button; diff --git a/marketing/src/common/components/Card/index.js b/marketing/src/common/components/Card/index.js new file mode 100755 index 000000000..e375f957e --- /dev/null +++ b/marketing/src/common/components/Card/index.js @@ -0,0 +1,54 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import { + borders, + borderColor, + borderRadius, + boxShadow, + backgroundImage, + backgroundSize, + backgroundPosition, + backgroundRepeat, + opacity, +} from 'styled-system'; +import { cards } from '../customVariant'; +import { base, themed } from '../base'; + +const CardWrapper = styled('div')( + base, + borders, + borderColor, + borderRadius, + boxShadow, + backgroundImage, + backgroundSize, + backgroundPosition, + backgroundRepeat, + opacity, + cards, + themed('Card') +); + +const Card = ({ children, ...props }) => ( + {children} +); + +Card.propTypes = { + children: PropTypes.any, + ...borders.propTypes, + ...borderColor.propTypes, + ...borderRadius.propTypes, + ...boxShadow.propTypes, + ...backgroundImage.propTypes, + ...backgroundSize.propTypes, + ...backgroundPosition.propTypes, + ...backgroundRepeat.propTypes, + ...opacity.propTypes, + ...cards.propTypes, +}; + +Card.defaultProps = { + boxShadow: '0px 20px 35px rgba(0, 0, 0, 0.05)', +}; +export default Card; diff --git a/marketing/src/common/components/Checkbox/checkbox.group.js b/marketing/src/common/components/Checkbox/checkbox.group.js new file mode 100755 index 000000000..1bd4c9942 --- /dev/null +++ b/marketing/src/common/components/Checkbox/checkbox.group.js @@ -0,0 +1,18 @@ +// import React, { useState, Fragment } from 'react'; +// import PropTypes from 'prop-types'; +// import CheckBoxStyle from './checkbox.style'; +// import CheckBox from './index'; + +// const CheckBoxGroup = props => { +// const { data } = props; +// console.log(data); +// return ( +// +// {Object.keys(data).forEach((key, index) => { +// // console.log(key, data[key], 'moma'); +// ; +// })} +// +// ); +// }; +// export default CheckBoxGroup; diff --git a/marketing/src/common/components/Checkbox/checkbox.style.js b/marketing/src/common/components/Checkbox/checkbox.style.js new file mode 100755 index 000000000..0811ba4cc --- /dev/null +++ b/marketing/src/common/components/Checkbox/checkbox.style.js @@ -0,0 +1,96 @@ +import styled from 'styled-components'; +import { themeGet } from '@styled-system/theme-get'; +import { base } from '../base'; + +const CheckBoxStyle = styled.div` + display: inline-flex; + /* Switch label default style */ + .reusecore__field-label { + color: ${themeGet('colors.textColor', '#484848')}; + font-size: ${themeGet('fontSizes.4', '16')}px; + font-weight: ${themeGet('fontWeights.4', '500')}; + } + + /* Switch label style when labelPosition on left */ + &.label_left { + label { + display: flex; + align-items: center; + .reusecore__field-label { + margin-right: ${themeGet('space.3', '10')}px; + } + } + } + + /* Switch label style when labelPosition on right */ + &.label_right { + label { + display: flex; + flex-direction: row-reverse; + align-items: center; + + .reusecore__field-label { + margin-left: ${themeGet('space.3', '10')}px; + } + } + } + + /* Checkbox default style */ + input[type='checkbox'] { + &.checkbox { + opacity: 0; + position: absolute; + margin: 0; + z-index: -1; + width: 0; + height: 0; + overflow: hidden; + pointer-events: none; + + &:checked + div { + border-color: ${themeGet('colors.primary', '#028489')}; + background-color: ${themeGet('colors.primary', '#028489')}; + &::after { + opacity: 1; + visibility: visible; + transform: rotate(45deg) scale(1); + } + } + } + + div { + display: inline-flex; + align-items: center; + justify-content: center; + width: 16px; + height: 16px; + border-radius: 3px; + border: 1px solid ${themeGet('colors.borderColor', '#dadada')}; + position: relative; + transition: all 0.3s ease; + &::after { + content: ''; + width: 4px; + height: 10px; + transform: rotate(45deg) scale(0.8); + border-bottom: 2px solid ${themeGet('colors.white', '#ffffff')}; + border-right: 2px solid ${themeGet('colors.white', '#ffffff')}; + position: absolute; + top: 0; + opacity: 0; + visibility: hidden; + transition-property: opacity, visibility; + transition-duration: 0.3s; + } + } + } + + /* support base component props */ + ${base} +`; + +// prop types can also be added from the style functions +CheckBoxStyle.propTypes = {}; + +CheckBoxStyle.displayName = 'CheckBoxStyle'; + +export default CheckBoxStyle; diff --git a/marketing/src/common/components/Checkbox/index.js b/marketing/src/common/components/Checkbox/index.js new file mode 100755 index 000000000..fb3afd1f0 --- /dev/null +++ b/marketing/src/common/components/Checkbox/index.js @@ -0,0 +1,101 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import useToggle from '../useToggle'; +import CheckBoxStyle from './checkbox.style'; + +const CheckBox = ({ + className, + isChecked, + labelText, + value, + id, + htmlFor, + labelPosition, + isMaterial, + disabled, + ...props +}) => { + // use toggle hooks + const [toggleValue, toggleHandler] = useToggle(isChecked); + + // Add all classs to an array + const addAllClasses = ['reusecore__checkbox']; + + // Add label position class + if (labelPosition) { + addAllClasses.push(`label_${labelPosition}`); + } + + // isMaterial prop checking + if (isMaterial) { + addAllClasses.push('is-material'); + } + + // className prop checking + if (className) { + addAllClasses.push(className); + } + + // label control + const LabelField = labelText && ( + {labelText} + ); + + const position = labelPosition || 'right'; + + return ( + +