From 0fad20a661a962a85121966c28518a9ca950809f Mon Sep 17 00:00:00 2001 From: HaudinFlorence Date: Sun, 14 Jul 2024 14:09:33 +0200 Subject: [PATCH] Keep on working on style and css classes. Add svg pictures for the mobile menu. Fix portrait pop up for mobile screen sizes. --- package-lock.json | 172 ++++++++++++- package.json | 1 + src/components/about/Avatar.tsx | 2 +- src/components/about/FourValues.tsx | 14 +- src/components/about/LargePortraitCard.tsx | 33 ++- src/components/about/SmallPortraitCard.tsx | 30 ++- src/components/about/SubTeam.tsx | 23 +- src/components/about/Team/QScollaborators.ts | 4 +- src/components/about/Team/coreTeam.ts | 40 ++- src/components/about/Team/leadershipTeam.ts | 12 +- src/components/about/index.tsx | 30 +-- src/components/about/styles.module.css | 185 ++++++++------ src/components/blog/index.tsx | 2 +- src/components/blog/styles.module.css | 4 +- src/components/careers/Header.tsx | 14 - src/components/careers/InterviewPicture.tsx | 2 +- src/components/careers/Interviews.tsx | 2 +- src/components/careers/VisitWTJProfile.tsx | 17 +- src/components/careers/index.tsx | 23 +- src/components/careers/styles.module.css | 29 --- src/components/contact/index.tsx | 2 +- src/components/contact/styles.module.css | 3 - src/components/home/AboutQS/index.tsx | 33 +-- src/components/home/AboutQS/styles.module.css | 39 ++- src/components/home/Hero/LogosTableBy8.tsx | 64 ++--- src/components/home/Hero/index.tsx | 6 +- src/components/home/Hero/styles.module.css | 7 +- src/components/home/Home.tsx | 4 +- src/components/home/LearnMore/index.tsx | 13 +- .../home/LearnMore/styles.module.css | 33 +-- src/components/home/LinkToAboutUs.tsx | 2 +- src/components/home/LinkToBlogs.tsx | 2 +- src/components/home/LinkToContact.tsx | 2 +- src/components/home/LinkToServices.tsx | 2 +- src/components/home/News/index.tsx | 8 +- src/components/home/News/styles.module.css | 13 +- .../home/ProjectsOverview/Computing.tsx | 2 +- .../home/ProjectsOverview/Jupyter.tsx | 2 +- .../home/ProjectsOverview/Robotics.tsx | 2 +- .../home/ProjectsOverview/RoboticsReverse.tsx | 6 +- .../home/ProjectsOverview/SpecialProjects.tsx | 2 +- .../home/ProjectsOverview/SupplyChain.tsx | 2 +- .../ProjectsOverview/SupplyChainReversed.tsx | 6 +- .../home/ProjectsOverview/index.tsx | 3 +- .../home/ProjectsOverview/styles.module.css | 6 + src/components/home/WhatWeDo/Topics.tsx | 14 +- src/components/home/WhatWeDo/TopicsCard.tsx | 13 +- src/components/home/WhatWeDo/index.tsx | 23 +- .../home/WhatWeDo/styles.module.css | 73 ++++-- src/components/home/styles.module.css | 52 +++- src/components/projects/Header.tsx | 6 +- src/components/projects/ProjectCard.tsx | 18 +- src/components/projects/ScheduleAMeeting.tsx | 12 +- .../projects/styles.module copy.css | 199 --------------- src/components/projects/styles.module.css | 134 +++++----- src/components/services/SpecialProjects.tsx | 2 +- src/components/services/Support.tsx | 2 +- src/components/services/index.tsx | 6 +- src/components/services/styles.module.css | 26 -- src/css/custom.css | 240 +++++++++++++++--- static/img/icons/AboutUs.svg | 5 + static/img/icons/Blog.svg | 5 + static/img/icons/Careers.svg | 5 + static/img/icons/CloseButton.svg | 5 + static/img/icons/ContactUs.svg | 5 + static/img/icons/Home.svg | 5 + static/img/icons/Projects.svg | 5 + static/img/icons/Services.svg | 5 + 68 files changed, 978 insertions(+), 785 deletions(-) delete mode 100644 src/components/projects/styles.module copy.css create mode 100644 static/img/icons/AboutUs.svg create mode 100644 static/img/icons/Blog.svg create mode 100644 static/img/icons/Careers.svg create mode 100644 static/img/icons/CloseButton.svg create mode 100644 static/img/icons/ContactUs.svg create mode 100644 static/img/icons/Home.svg create mode 100644 static/img/icons/Projects.svg create mode 100644 static/img/icons/Services.svg diff --git a/package-lock.json b/package-lock.json index 08aef5e09..c497ea979 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,6 +30,7 @@ "probe-image-size": "^7.2.3", "python": "^0.0.4", "react": "^18.0.0", + "react-bootstrap": "^2.10.4", "react-dom": "^18.0.0", "react-markdown": "^9.0.1", "react-slick": "^0.30.2", @@ -1892,8 +1893,9 @@ "license": "MIT" }, "node_modules/@babel/runtime": { - "version": "7.24.1", - "license": "MIT", + "version": "7.24.8", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.8.tgz", + "integrity": "sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -3291,6 +3293,59 @@ "url": "https://opencollective.com/popperjs" } }, + "node_modules/@react-aria/ssr": { + "version": "3.9.4", + "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.4.tgz", + "integrity": "sha512-4jmAigVq409qcJvQyuorsmBR4+9r3+JEC60wC+Y0MZV0HCtTmm8D9guYXlJMdx0SSkgj0hHAyFm/HvPNFofCoQ==", + "dependencies": { + "@swc/helpers": "^0.5.0" + }, + "engines": { + "node": ">= 12" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } + }, + "node_modules/@restart/hooks": { + "version": "0.4.16", + "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz", + "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==", + "dependencies": { + "dequal": "^2.0.3" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@restart/ui": { + "version": "1.6.9", + "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.6.9.tgz", + "integrity": "sha512-mUbygUsJcRurjZCt1f77gg4DpheD1D+Sc7J3JjAkysUj7t8m4EBJVOqWC9788Qtbc69cJ+HlJc6jBguKwS8Mcw==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@popperjs/core": "^2.11.6", + "@react-aria/ssr": "^3.5.0", + "@restart/hooks": "^0.4.9", + "@types/warning": "^3.0.0", + "dequal": "^2.0.3", + "dom-helpers": "^5.2.0", + "uncontrollable": "^8.0.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + } + }, + "node_modules/@restart/ui/node_modules/uncontrollable": { + "version": "8.0.4", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz", + "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==", + "peerDependencies": { + "react": ">=16.14.0" + } + }, "node_modules/@sideway/address": { "version": "4.1.5", "license": "BSD-3-Clause", @@ -3591,6 +3646,14 @@ "url": "https://github.com/sponsors/gregberge" } }, + "node_modules/@swc/helpers": { + "version": "0.5.12", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.12.tgz", + "integrity": "sha512-KMZNXiGibsW9kvZAO1Pam2JPTDBm+KSHMMHWdsyI/1DbIZjT2A6Gy3hblVXUMEDvUAKq+e0vL0X0o54owWji7g==", + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@szmarczak/http-timer": { "version": "5.0.1", "license": "MIT", @@ -3852,6 +3915,14 @@ "@types/react-router": "*" } }, + "node_modules/@types/react-transition-group": { + "version": "4.4.10", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", + "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/retry": { "version": "0.12.0", "license": "MIT" @@ -3899,6 +3970,11 @@ "version": "3.0.2", "license": "MIT" }, + "node_modules/@types/warning": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz", + "integrity": "sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==" + }, "node_modules/@types/ws": { "version": "8.5.10", "license": "MIT", @@ -5957,6 +6033,15 @@ "utila": "~0.4" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dom-serializer": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", @@ -12181,6 +12266,18 @@ "react-is": "^16.13.1" } }, + "node_modules/prop-types-extra": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz", + "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==", + "dependencies": { + "react-is": "^16.3.2", + "warning": "^4.0.0" + }, + "peerDependencies": { + "react": ">=0.14.0" + } + }, "node_modules/property-information": { "version": "6.4.1", "license": "MIT", @@ -12351,6 +12448,35 @@ "node": ">=0.10.0" } }, + "node_modules/react-bootstrap": { + "version": "2.10.4", + "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.4.tgz", + "integrity": "sha512-W3398nBM2CBfmGP2evneEO3ZZwEMPtHs72q++eNw60uDGDAdiGn0f9yNys91eo7/y8CTF5Ke1C0QO8JFVPU40Q==", + "dependencies": { + "@babel/runtime": "^7.24.7", + "@restart/hooks": "^0.4.9", + "@restart/ui": "^1.6.9", + "@types/react-transition-group": "^4.4.6", + "classnames": "^2.3.2", + "dom-helpers": "^5.2.1", + "invariant": "^2.2.4", + "prop-types": "^15.8.1", + "prop-types-extra": "^1.1.0", + "react-transition-group": "^4.4.5", + "uncontrollable": "^7.2.1", + "warning": "^4.0.3" + }, + "peerDependencies": { + "@types/react": ">=16.14.8", + "react": ">=16.14.0", + "react-dom": ">=16.14.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "license": "MIT", @@ -12510,6 +12636,11 @@ "react": "^16.13.1 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" + }, "node_modules/react-loadable": { "name": "@docusaurus/react-loadable", "version": "6.0.0", @@ -12620,6 +12751,21 @@ "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/reactjs-popup": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/reactjs-popup/-/reactjs-popup-2.0.6.tgz", @@ -14409,6 +14555,20 @@ "node": ">=14.17" } }, + "node_modules/uncontrollable": { + "version": "7.2.1", + "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz", + "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==", + "dependencies": { + "@babel/runtime": "^7.6.3", + "@types/react": ">=16.9.11", + "invariant": "^2.2.4", + "react-lifecycles-compat": "^3.0.4" + }, + "peerDependencies": { + "react": ">=15.0.0" + } + }, "node_modules/undici-types": { "version": "5.26.5", "license": "MIT" @@ -14871,6 +15031,14 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.1", "license": "MIT", diff --git a/package.json b/package.json index ebbeda690..b245904a4 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "probe-image-size": "^7.2.3", "python": "^0.0.4", "react": "^18.0.0", + "react-bootstrap": "^2.10.4", "react-dom": "^18.0.0", "react-markdown": "^9.0.1", "react-slick": "^0.30.2", diff --git a/src/components/about/Avatar.tsx b/src/components/about/Avatar.tsx index b8e173e08..ccfa12038 100644 --- a/src/components/about/Avatar.tsx +++ b/src/components/about/Avatar.tsx @@ -11,7 +11,7 @@ export default function Avatar({ person }) { height={"160px"} alt={ "Avatar of " + - person.CompleteName + + person.completeName + "working at QuantStack as a " + person.position } diff --git a/src/components/about/FourValues.tsx b/src/components/about/FourValues.tsx index 0d9615afc..1e126ad94 100644 --- a/src/components/about/FourValues.tsx +++ b/src/components/about/FourValues.tsx @@ -4,7 +4,7 @@ import { valuesDetails } from "./Values/valuesDetails"; export default function FourValues() { return ( -
+

@@ -14,21 +14,13 @@ export default function FourValues() {

    {valuesDetails.map((value, index) => (
  • -
    - -
    +
    • ))} diff --git a/src/components/about/LargePortraitCard.tsx b/src/components/about/LargePortraitCard.tsx index d014e068f..880928d43 100644 --- a/src/components/about/LargePortraitCard.tsx +++ b/src/components/about/LargePortraitCard.tsx @@ -2,6 +2,23 @@ import styles from "./styles.module.css"; import SocialMediaContacts from "./SocialMediaContacts"; import DistinctionIcon from "@site/static/img/icons/Distinction.svg"; import Link from "@docusaurus/Link"; +import React, { useState } from "react"; + +export function Avatar({ person, avatarUrl }) { + return ( + { + + ); +} export function Distinction({ person }) { if (person.distinctionTitle.length !== 0) { @@ -27,11 +44,7 @@ export default function LargePortraitCard({ person, avatarUrl, BioComponent }) { return (
    -
    +
    {person.completeName} @@ -39,21 +52,21 @@ export default function LargePortraitCard({ person, avatarUrl, BioComponent }) {
    {person.position}
    -
    -
    +
    +
    +
    { +
    diff --git a/src/components/about/SmallPortraitCard.tsx b/src/components/about/SmallPortraitCard.tsx index 27f387c78..8ae263617 100644 --- a/src/components/about/SmallPortraitCard.tsx +++ b/src/components/about/SmallPortraitCard.tsx @@ -56,7 +56,7 @@ export function SmallPortraitCard({ person, avatarUrl, setOffsets }) { height={"160px"} alt={ "Avatar of " + - person.CompleteName + + person.completeName + "working at QuantStack as a " + person.position } @@ -79,9 +79,16 @@ export default function PopupPortrait({ subTeamBioComponent, }) { const [offsets, setOffsets] = useState([0, 0]); + let [isPopupOpen, setIsPopupOpen] = useState(false); + return (
    setIsPopupOpen(false)} + trigger={
    } + onOpen={() => { + setIsPopupOpen(true) + }} contentStyle={contentStyle} overlayStyle={overlayStyle} position={"center center"} offsetX={offsets[0]} offsetY={offsets[1]} > - +
    + + +
    ); -} \ No newline at end of file +} diff --git a/src/components/about/SubTeam.tsx b/src/components/about/SubTeam.tsx index 9863704fc..19f72cc4d 100644 --- a/src/components/about/SubTeam.tsx +++ b/src/components/about/SubTeam.tsx @@ -1,26 +1,31 @@ import styles from "./styles.module.css"; -import Link from "@docusaurus/Link"; import PopupPortrait from "./SmallPortraitCard"; -export default function SubTeam ({ - description, +export default function SubTeam({ + subTeamName, subTeam, subTeamAvatarsUrls, subTeamBioComponents, }) { return ( -
    -

    {description}

    -
    +
    +

    {subTeamName}

    +
      {subTeam.map((person, index) => (
    • - +
      • ))} @@ -29,5 +34,3 @@ export default function SubTeam ({
    ); } - - diff --git a/src/components/about/Team/QScollaborators.ts b/src/components/about/Team/QScollaborators.ts index e1ce831bd..60231596e 100644 --- a/src/components/about/Team/QScollaborators.ts +++ b/src/components/about/Team/QScollaborators.ts @@ -21,7 +21,7 @@ export const QSCollaboratorsTeam = [ avatarRoute: "@site/static/img/avatars/Serge@2x.jpg", distinctionTitle: [], distinctionLink: [], - subTeam: "QSCollaboratorsTeam", + subTeamName: "QSCollaboratorsTeam", }, { completeName: "Romain Menegaux", @@ -37,7 +37,7 @@ export const QSCollaboratorsTeam = [ avatarRoute: "@site/static/img/avatars/Romain@2x.jpg", distinctionTitle: [], distinctionLink: [], - subTeam: "QSCollaboratorsTeam", + subTeamName: "QSCollaboratorsTeam", }, ]; export default QSCollaboratorsTeam; diff --git a/src/components/about/Team/coreTeam.ts b/src/components/about/Team/coreTeam.ts index ac48aa46c..9ed9c4180 100644 --- a/src/components/about/Team/coreTeam.ts +++ b/src/components/about/Team/coreTeam.ts @@ -96,8 +96,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Thorsten@2x.jpg", distinctionTitle:[], distinctionLink: [], - distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Le Duc Trung", @@ -113,8 +112,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Trung@2x.jpg", distinctionTitle:[], distinctionLink: [], - distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: " Andreas Trawöger", @@ -130,7 +128,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Andreas@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Denisa Checiu", @@ -146,7 +144,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Denisa@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Joël Lamotte", @@ -162,7 +160,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Joel@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Florence Haudin", @@ -178,7 +176,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Florence@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Nicolas Brichet", @@ -194,7 +192,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Nicolas@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Isabel Paredes", @@ -210,7 +208,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Isabel@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Gabriela Vives", @@ -226,7 +224,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Gabriela@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Hind Montassif", @@ -242,7 +240,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Hind@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Julien Jerphanion", @@ -258,7 +256,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Julien@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Anutosh Bhat", @@ -274,7 +272,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Anutosh@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Greg Mooney", @@ -290,7 +288,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Greg@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Ian Thomas", @@ -306,7 +304,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Ian@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Nour Cheour", @@ -322,7 +320,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Nour@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Meriem Ben Ismail", @@ -338,7 +336,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Meriem@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Alexis Placet", @@ -354,7 +352,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Alexis@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Anastasiia Sliusar", @@ -370,7 +368,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Anastasiia@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, { completeName: "Kerim Birgi", @@ -387,7 +385,7 @@ export const coreTeam = [ avatarRoute: "@site/static/img/avatars/Kerim@2x.jpg", distinctionTitle:[], distinctionLink: [], - subTeam: "coreTeam", + subTeamName: "coreTeam", }, ]; diff --git a/src/components/about/Team/leadershipTeam.ts b/src/components/about/Team/leadershipTeam.ts index 90845f40e..fa2528693 100644 --- a/src/components/about/Team/leadershipTeam.ts +++ b/src/components/about/Team/leadershipTeam.ts @@ -44,7 +44,7 @@ export const leadershipTeam = [ avatarRoute: "@site/static/img/avatars/Sylvain@2x.png", distinctionTitle: ["ACM Software System Award"], distinctionLink: ["https://awards.acm.org/award_winners/corlay_8324973"], - subTeam: "LeadershipTeam", + subTeamName: "LeadershipTeam", }, { completeName: "Johan Mabille", @@ -61,7 +61,7 @@ export const leadershipTeam = [ distinctionTitle: ["Jupyter distinguished contributor"], distinctionLink: ["https://jupyter.org/about#distinguished-contributors"], - subTeam: "LeadershipTeam", + subTeamName: "LeadershipTeam", }, { completeName: "Martin Renou", @@ -78,7 +78,7 @@ export const leadershipTeam = [ distinctionTitle: ["Jupyter distinguished contributor"], distinctionLink: ["https://jupyter.org/about#distinguished-contributors"], - subTeam: "LeadershipTeam", + subTeamName: "LeadershipTeam", }, { completeName: "Jeremy Tuloup", @@ -95,7 +95,7 @@ export const leadershipTeam = [ distinctionTitle: ["Jupyter distinguished contributor"], distinctionLink: ["https://jupyter.org/about#distinguished-contributors"], - subTeam: "LeadershipTeam", + subTeamName: "LeadershipTeam", }, { @@ -112,7 +112,7 @@ export const leadershipTeam = [ avatarRoute: "@site/static/img/avatars/Darian@2x.png", distinctionTitle: ["Jupyter distinguished contributor"], distinctionLink:[ "https://jupyter.org/about#distinguished-contributors"], - subTeam: "LeadershipTeam", + subTeamName: "LeadershipTeam", }, { completeName: "David Brochart", @@ -128,7 +128,7 @@ export const leadershipTeam = [ avatarRoute: "@site/static/img/avatars/David@2x.png", distinctionTitle: ["Jupyter distinguished contributor"], distinctionLink: ["https://jupyter.org/about#distinguished-contributors"], - subTeam: "LeadershipTeam", + subTeamName: "LeadershipTeam", }, ]; export default leadershipTeam; diff --git a/src/components/about/index.tsx b/src/components/about/index.tsx index 7a5af1460..be6d2c089 100644 --- a/src/components/about/index.tsx +++ b/src/components/about/index.tsx @@ -19,7 +19,7 @@ export function About() { return (
    -
    +
    @@ -38,19 +38,19 @@ export function About() {
    -
    -

    - Join the team -

    -
    - QuantStack is seeking talents in the open-source scientific computing - community. Join a team committed to open-science and free software. -
    +
    +
    Join the team
    + QuantStack is seeking talents in the open-source scientific computing + community. Join a team committed to open-science and free software.
    diff --git a/src/components/about/styles.module.css b/src/components/about/styles.module.css index a7fe31b88..1091552ee 100644 --- a/src/components/about/styles.module.css +++ b/src/components/about/styles.module.css @@ -1,14 +1,14 @@ .small_portrait_card { width: 279px; - height: 388px; - background-color: white; - color: var(--ifm-color-primary-p2); - border-radius: 8px; - box-shadow: 0px 0px 8px 1px #c8c8c7; - padding: var(--ifm-spacing-lg) var(--ifm-spacing-md); - text-align: center; - margin-bottom: var(--ifm-spacing-xl); -} + height: 388px; + background-color: white; + color: var(--ifm-color-primary-p2); + border-radius: 8px; + box-shadow: 0px 0px 8px 1px #c8c8c7; + padding: var(--ifm-spacing-lg) var(--ifm-spacing-md); + text-align: center; + margin-bottom: var(--ifm-spacing-xl); + } .avatar { filter: grayscale(1); @@ -18,17 +18,8 @@ width: 160px; } -.subteam_component { - margin: var(--ifm-spacing-5xl) var(--ifm-spacing-6xl); -} -.team_description { - font-family: var(--ifm-font-family-roboto); - font-size: 22px; - font-style: normal; - font-weight: 400; - line-height: 28px; - text-align: center; -} + + .value_header { font-family: var(--ifm-font-family-rubik-one); @@ -51,47 +42,19 @@ color: var(--ifm-text-color-on-primary-p1); } -.row_with_margins { - margin-top: var(--ifm-spacing-4xl) 0; -} div .row { margin-left: 0; margin-right: 0; } -.about_container { - margin-top: var(--ifm-spacing-6xl); -} - -.value_card { - height: 540px; - width: 264px; - padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg); - border-radius: 8px; - box-shadow: 0px 0px 8px 1px #c8c8c7; - background-color: var(--ifm-color-primary-p1); - margin-bottom: var(--ifm-spacing-xl); -} - -.large_portrait_card { - width: 1000px; - /*background-color: white;*/ - border-radius: 10px; - box-shadow: 0px 1px 10px 0 rgba(1, 0, 0, 0.17); - padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl); -} - .bio_container { font-family: var(--ifm-font-family-roboto); font-size: 16px; font-style: normal; font-weight: 400; - line-height: 24px; /* 133.333% */ + line-height: 24px; letter-spacing: 0.5px; -} - -.bio_container p { color: var(--ifm-color-primary-p2); } @@ -101,7 +64,7 @@ div .row { color: var(--ifm-color-primary-p2); font-style: normal; font-weight: 500; - line-height: 24px; /* 150% */ + line-height: 24px; letter-spacing: 0.15px; margin: var(--ifm-spacing-xs) 0; } @@ -112,7 +75,7 @@ div .row { color: var(---ifm-text-color); font-style: normal; font-weight: 600; - line-height: 24px; /* 133.333% */ + line-height: 24px; letter-spacing: 0.5px; color: var(--ifm-color-primary-p2); } @@ -126,10 +89,7 @@ div .row { line-height: 40px; color: var(--ifm-color-primary-p2); } - -div .large_card_complete_name { - color: var(--ifm-color-primary-p2); -} +s .large_card_position { font-size: var(--ifm--font-size-normal); @@ -164,27 +124,6 @@ div .large_card_position { color: var(--ifm-color-primary-p2); } -.subteam_container { - margin-top: var(--ifm-spacing-2xl); -} - -.four_values_container { - margin-bottom: var(--ifm-spacing-5xl); -} - -.join_the_team_container { - font-family: var(--ifm-font-family-roboto); - font-size: 28px; - font-style: normal; - text-align: center; - font-weight: 400; - line-height: 36px; /* 128.571% */ - color: var(--ifm-color-secondary-s2); - padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl); - max-width: none; - background-color: var(--ifm-color-secondary-s1); -} - div .join_the_team_title { color: var(--ifm-color-secondary-s2); } @@ -196,4 +135,96 @@ div .join_the_team_title { div .join_the_team_text { color: var(--ifm-color-secondary-s2); } -/*}*/ + + + +@media only screen and (max-width: 996px) { + /*Mobile*/ + .value_card { + height: 400px; + width: 264px; + padding: var(--ifm-spacing-xl) var(--ifm-spacing-lg); + border-radius: 8px; + box-shadow: 0px 0px 8px 1px #c8c8c7; + background-color: var(--ifm-color-primary-p1); + margin-bottom: var(--ifm-spacing-xl); + } + + .large_portrait_card { + width: 100%; + height: 200%; + padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl); + } + + .row_with_margin_top { + margin-top: var(--ifm-spacing-xl); + } + + .row_with_margin_bottom { + margin-bottom: var(--ifm-spacing-xl); + } + + .row_with_margins { + margin: var(--ifm-spacing-xl) 0; + } + + .subteam_container { + margin: var(--ifm-spacing-3xl) var(--ifm-spacing-2xl); + } + + .team_description { + font-family: var(--ifm-font-family-roboto); + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 150%; + text-align: center; + } +} + +@media only screen and (min-width: 996px) { + /*Desktop*/ + .value_card { + height: 540px; + width: 264px; + padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg); + border-radius: 8px; + box-shadow: 0px 0px 8px 1px #c8c8c7; + background-color: var(--ifm-color-primary-p1); + margin-bottom: var(--ifm-spacing-xl); + } + + + + .large_portrait_card { + width: 1000px; + padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl); + } + + .row_with_margin_top { + margin-top: var(--ifm-spacing-2xl); + } + + .row_with_margin_bottom { + margin-bottom: var(--ifm-spacing-2xl); + } + + + .row_with_margins { + margin: var(--ifm-spacing-2xl) 0; + } + + .subteam_container { + margin: var(--ifm-spacing-5xl) var(--ifm-spacing-6xl); + } + + .team_description { + font-family: var(--ifm-font-family-roboto); + font-size: 22px; + font-style: normal; + font-weight: 400; + line-height: 28px; + text-align: center; + } + +} \ No newline at end of file diff --git a/src/components/blog/index.tsx b/src/components/blog/index.tsx index 62b56d018..470541d11 100644 --- a/src/components/blog/index.tsx +++ b/src/components/blog/index.tsx @@ -23,7 +23,7 @@ export default function BlogsComponent({ blogpostsDetails }) { return (
    -
    +
    -

    Join the QuantStack team!

    -
    - {"Picture -
    -
    - ); - } - \ No newline at end of file diff --git a/src/components/careers/InterviewPicture.tsx b/src/components/careers/InterviewPicture.tsx index 3f60a13fb..346ae47cd 100644 --- a/src/components/careers/InterviewPicture.tsx +++ b/src/components/careers/InterviewPicture.tsx @@ -9,7 +9,7 @@ export default function InterviewPicture({ person }) { src={person.pictureRoute} alt={ "Picture of" + - person.CompleteName + + person.completeName + "working at QuantStack as a" + person.position } diff --git a/src/components/careers/Interviews.tsx b/src/components/careers/Interviews.tsx index 85ff5692e..6b3c33734 100644 --- a/src/components/careers/Interviews.tsx +++ b/src/components/careers/Interviews.tsx @@ -3,7 +3,7 @@ import InterviewCard from "./InterviewCard"; export default function Interviews({ details, description }) { return ( -
    +

    {description}

      diff --git a/src/components/careers/VisitWTJProfile.tsx b/src/components/careers/VisitWTJProfile.tsx index 70456763f..2fdf1a938 100644 --- a/src/components/careers/VisitWTJProfile.tsx +++ b/src/components/careers/VisitWTJProfile.tsx @@ -1,22 +1,9 @@ -import styles from "./styles.module.css"; import LinkToWTJ from "./LinkToWTJ"; export default function VisitWTJProfile() { return ( -
      -

      - LEARN MORE ON OUR WELCOME TO THE JUNGLE WEB PAGE -

      +
      + Learn more on our Welcome to the Jungle web page.
      ); diff --git a/src/components/careers/index.tsx b/src/components/careers/index.tsx index 8297ba5af..f0626cd37 100644 --- a/src/components/careers/index.tsx +++ b/src/components/careers/index.tsx @@ -4,15 +4,32 @@ import Interviews from "./Interviews"; import Header from "./Header"; import VisitWTJProfile from "./VisitWTJProfile"; import JoinTheTeam from "./JoinTheTeam"; +import GroupPhotoJupyterConUrl from "@site/static/img/group/group-photo.png"; export default function Careers() { return (
      -
      -
      +
      +
      -
      +

      Join the QuantStack team!

      +
      + { +
      +
      -
      -
      -
      +
      +
      +
      +
      We are a team of expert of open-source developers, the very same people behind a number of technologies that you already use.
      -
      -
      -
      +
      +
      +
      {
      -
      -
      - - -
      +
      +
      +
      + +
      diff --git a/src/components/home/AboutQS/styles.module.css b/src/components/home/AboutQS/styles.module.css index 50e8015e7..78a6dcea0 100644 --- a/src/components/home/AboutQS/styles.module.css +++ b/src/components/home/AboutQS/styles.module.css @@ -1,15 +1,32 @@ -.about_us_container { - margin-top: var(--ifm-spacing-2xl); - background-color: var(--ifm-color-primary-p1); -} +@media only screen and (max-width: 996px) { + .aboutQS_container { + background-color: var(--ifm-color-secondary-s2); + color: white; + padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl) 0 + var(--ifm-spacing-2xl); + text-align: center; + } + + .aboutQS_text { + font-size: 14px; + text-align: center; + margin-bottom: var(--ifm-spacing-xl); + } -div .text_container { - color: var(--ifm-color-primary-p2); } -.text_container { - font-size: 24px; - text-align: center; - margin-bottom: var(--ifm-spacing-lg); - padding: var(--ifm-spacing-5xl) var(--ifm-spacing-5xl); +@media only screen and (min-width: 996px) { + .aboutQS_container { + margin-top: var(--ifm-spacing-2xl); + background-color: var(--ifm-color-primary-p1); + color: var(--ifm-color-primary-p2); + padding: var(--ifm-spacing-2xl) var(--ifm-spacing-5xl) 0 + var(--ifm-spacing-5xl); + } + + .aboutQS_text { + font-size: 24px; + text-align: center; + margin-bottom: var(--ifm-spacing-lg); + } } diff --git a/src/components/home/Hero/LogosTableBy8.tsx b/src/components/home/Hero/LogosTableBy8.tsx index 9c72cd763..38ee0df16 100644 --- a/src/components/home/Hero/LogosTableBy8.tsx +++ b/src/components/home/Hero/LogosTableBy8.tsx @@ -67,28 +67,28 @@ export function LogosTable1() { return (
      -
      +
      {"Logo
      -
      +
      {"Logo
      -
      +
      {"Logo
      -
      +
      -
      +
      {"Logo
      -
      +
      -
      +
      {"Logo
      -
      +
      -
      +
      {"Logo
      -
      +
      {"Logo
      -
      +
      {"Logo
      -
      +
      -
      +
      {"Logo
      -
      +
      {"Logo
      -
      +
      {"Logo
      -
      +
      -
      +
      {"Logo
      -
      +
      -
      +
      {"Logo
      -
      +
      -
      +
      -
      +
      {"Logo
      -
      +
      {"Logo
      -
      +
      +
      -
      +
      -
      +
      {"Logo
      -
      +
      {"Logo
      -
      +
      -
      +
      {"Logo
      -
      +
      {"Logo
      -
      +
      -
      +
      -
      +

      Open-source for discovery, science, and education

      @@ -21,7 +21,7 @@ export function Hero() { Jupyter, Conda-forge, Mamba, Voilà, Xtensor and more.
      -
      +
      + <> - + ); } diff --git a/src/components/home/LearnMore/index.tsx b/src/components/home/LearnMore/index.tsx index 9467dc5ae..ce20d37e8 100644 --- a/src/components/home/LearnMore/index.tsx +++ b/src/components/home/LearnMore/index.tsx @@ -1,15 +1,12 @@ -import styles from "./styles.module.css"; import LinkToContact from "../LinkToContact"; +import styles from "./styles.module.css"; export default function LearnMore() { return ( -
      -

      WANT TO LEARN MORE?

      - -
      - Schedule a meeting and benefit from our expertise on Jupyter, - Conda-forge, high-performance computing, and open-source development. -
      +
      +
      Want to learn more?
      + Schedule a meeting and benefit from our expertise on Jupyter, Conda-forge, + high-performance computing, and open-source development.
      ); diff --git a/src/components/home/LearnMore/styles.module.css b/src/components/home/LearnMore/styles.module.css index 7619d9aec..b0e623c6d 100644 --- a/src/components/home/LearnMore/styles.module.css +++ b/src/components/home/LearnMore/styles.module.css @@ -1,24 +1,13 @@ -div .learn_more_text { - color: var(--ifm-color-secondary-s2); +@media only screen and (max-width: 996px) { + /*Mobile*/ + .learn_more_container { + display: none; + } } -div .learn_more_title { - color: var(--ifm-color-secondary-s2); -} - -.learn_more_container { - background-color: var(--ifm-color-secondary-s1); - text-align: center; - padding: var(--ifm-spacing-2xl); -} - -.learn_more_text { - text-align: center; - font-family: var(--ifm-font-family-roboto); - font-size: 20px; - font-style: normal; - font-weight: 400; - line-height: 36px; /* 128.571% */ - padding: var(--ifm-spacing-2xl); - color: var(--ifm-color-secondary-s2); -} +@media only screen and (max-width: 996px) { + /*Desktop*/ + .learn_more_container { + + } + } \ No newline at end of file diff --git a/src/components/home/LinkToAboutUs.tsx b/src/components/home/LinkToAboutUs.tsx index 3876b75e8..adbe99591 100644 --- a/src/components/home/LinkToAboutUs.tsx +++ b/src/components/home/LinkToAboutUs.tsx @@ -5,7 +5,7 @@ export default function LinkToAboutUs({label}) { return (
      {label} diff --git a/src/components/home/LinkToBlogs.tsx b/src/components/home/LinkToBlogs.tsx index 22c9b85c9..2ae3acb53 100644 --- a/src/components/home/LinkToBlogs.tsx +++ b/src/components/home/LinkToBlogs.tsx @@ -3,7 +3,7 @@ import Link from "@docusaurus/Link"; export default function LinkToBlogs({label}) { return ( -
      +
      {label} diff --git a/src/components/home/LinkToServices.tsx b/src/components/home/LinkToServices.tsx index 4ddd3a15c..7c7c7252e 100644 --- a/src/components/home/LinkToServices.tsx +++ b/src/components/home/LinkToServices.tsx @@ -5,7 +5,7 @@ export default function LinkToServices({label}) { return (
      {label} diff --git a/src/components/home/News/index.tsx b/src/components/home/News/index.tsx index 6ca295afb..aa7b6f79e 100644 --- a/src/components/home/News/index.tsx +++ b/src/components/home/News/index.tsx @@ -1,6 +1,5 @@ import BlogpostCard from "../../blog/BlogpostCard"; import blogpostsDetails from "@site/src/components/blog/blogpostsDetails.json"; -import Link from "@docusaurus/Link"; import styles from "./styles.module.css"; import LinkToBlogs from "../LinkToBlogs"; @@ -8,12 +7,13 @@ export default function News() { const numberOfBlogs = blogpostsDetails.length; return (
      -
      +
      -

      Recent blog contributions

      +

      Recent blog contributions

      +
      -
        +
        • +
          +
          +
          +

          Special projects

          diff --git a/src/components/home/ProjectsOverview/SupplyChain.tsx b/src/components/home/ProjectsOverview/SupplyChain.tsx index 301d7b40e..599579e70 100644 --- a/src/components/home/ProjectsOverview/SupplyChain.tsx +++ b/src/components/home/ProjectsOverview/SupplyChain.tsx @@ -4,7 +4,7 @@ import MambaPictureUrl from "@site/static/img/projects/mamba_console.png"; export default function SupplyChainProjects() { return ( -
          +
          +
          +
          diff --git a/src/components/home/ProjectsOverview/styles.module.css b/src/components/home/ProjectsOverview/styles.module.css index 2fef72356..444c67f83 100644 --- a/src/components/home/ProjectsOverview/styles.module.css +++ b/src/components/home/ProjectsOverview/styles.module.css @@ -1,3 +1,9 @@ +@media (max-width: 996px) { + .projects_overview_container { + display: none; + } +} + .project_desktop { margin-bottom: var(--ifm-spacing-3xl); } diff --git a/src/components/home/WhatWeDo/Topics.tsx b/src/components/home/WhatWeDo/Topics.tsx index 9536e1a07..299818d2c 100644 --- a/src/components/home/WhatWeDo/Topics.tsx +++ b/src/components/home/WhatWeDo/Topics.tsx @@ -1,25 +1,19 @@ -import styles from "./styles.module.css"; import { topicsDetails } from "./topics/topicsDetails"; import { TopicsCard } from "./TopicsCard"; import JupyterMD from "./topics/Jupyter.md"; import SupplyChainMD from "./topics/SupplyChain.md"; import ComputingMD from "./topics/Computing.md"; - const TopicsDescriptions = [JupyterMD, SupplyChainMD, ComputingMD]; export function Topics() { return (
          -
          -
            +
            +
              {topicsDetails.map((topics, index) => (
            • -
              +
              -
              {topics.name}
              -
              +
              +
              + {topics.name} +
              +
              ); } -export default TopicsCard; \ No newline at end of file +export default TopicsCard; diff --git a/src/components/home/WhatWeDo/index.tsx b/src/components/home/WhatWeDo/index.tsx index 092990236..264bdd39a 100644 --- a/src/components/home/WhatWeDo/index.tsx +++ b/src/components/home/WhatWeDo/index.tsx @@ -1,25 +1,36 @@ import styles from "./styles.module.css"; import Topics from "./Topics"; import LinkToServices from "../LinkToServices"; -import { useEffect, useState } from "react"; - +import LinkToProjects from "../LinkToProjects"; export function WhatWeDo() { return (
              -
              +
              +
              + +
              +
              +
              +
              +

              What we do

              -
              +
              -
              - +
              +
              + +
              +
              + +
              diff --git a/src/components/home/WhatWeDo/styles.module.css b/src/components/home/WhatWeDo/styles.module.css index a12014ea2..f5cbeed1a 100644 --- a/src/components/home/WhatWeDo/styles.module.css +++ b/src/components/home/WhatWeDo/styles.module.css @@ -1,10 +1,3 @@ -@media only screen and (max-width: 996px) { - /*Mobile*/ - .header { - display: none; - } -} - .topics_header { font-family: var(--ifm-font-family-rubik-one); font-size: var(--ifm-font-size-secondary-title); @@ -19,21 +12,57 @@ div .topics_header { color: var(--ifm-color-neutral-n2); } -.header { - color: var(--ifm-text-color-on-primary-p1); -} -.whatwedo_container { - background-color: var(--ifm-color-primary-p1); - padding: var(--ifm-spacing-2xl); - margin-top: var(--ifm-spacing-5xl); +@media only screen and (max-width: 996px) { + /*Mobile*/ + .header { + display: none; + } + + + .whatwedo_container { + /*background-color: var(--ifm-color-primary-p1);*/ + padding: 0; + margin-top: 0; + } + + .topics_card { + width: 100%; + padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg); + } + + .services_link_container_desktop { + display: none; + } } -.topics_card { - height: 462px; - width: 350px; - padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg); - border-radius: 8px; - box-shadow: 0px 0px 8px 1px #c8c8c7; - background-color: var(--ifm-color-orange-light); - margin-bottom: var(--ifm-spacing-2xl); +@media only screen and (min-width: 996px) { + + .header { + color: var(--ifm-color-orange-jupyter); + } + + .projects_link_container { + display: none; + } + + .services_link_container_mobile { + display: none; + } + + .whatwedo_container { + background-color: var(--ifm-color-primary-p1); + padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl) 0 + var(--ifm-spacing-2xl); + margin-top: var(--ifm-spacing-3xl); + } + + .topics_card { + height: 462px; + width: 350px; + padding: var(--ifm-spacing-2xl) var(--ifm-spacing-lg); + border-radius: 8px; + box-shadow: 0px 0px 8px 1px #c8c8c7; + background-color: var(--ifm-color-orange-light); + margin-bottom: var(--ifm-spacing-xl); + } } diff --git a/src/components/home/styles.module.css b/src/components/home/styles.module.css index 9003e776a..50ded0cd5 100644 --- a/src/components/home/styles.module.css +++ b/src/components/home/styles.module.css @@ -1,6 +1,48 @@ -.link_to { - background-color: var(--ifm-color-orange-jupyter); - color: var(--ifm-text-color-on-primary-p1); - width: 358px; - font-weight: 700; +@media only screen and (max-width: 996px) { + /*Mobile*/ + .link_to { + background-color: var(--ifm-color-primary-p1); + color: var(--ifm-text-color-on-primary-p1); + width: 358px; + font-weight: 700; + } + + .link_to_services { + background-color: var(--ifm-color-primary-p1); + color: var(--ifm-text-color-on-primary-p1); + width: 358px; + font-weight: 700; + } + + + .link_to_about_us { + background-color: var(--ifm-color-primary-p1); + color: var(--ifm-text-color-on-primary-p1); + width: 358px; + font-weight: 700; + } +} + +@media only screen and (min-width: 996px) { + .link_to { + background-color: var(--ifm-color-orange-jupyter); + color: var(--ifm-text-color-on-primary-p1); + width: 358px; + font-weight: 700; + } + + .link_to_services { + background-color: var(--ifm-color-orange-jupyter); + color: var(--ifm-text-color-on-primary-p1); + width: 358px; + font-weight: 700; + } + + + .link_to_about_us { + background-color: var(--ifm-color-secondary-s2); + color: white; + width: 358px; + font-weight: 700; + } } diff --git a/src/components/projects/Header.tsx b/src/components/projects/Header.tsx index 268459f71..a52e6418a 100644 --- a/src/components/projects/Header.tsx +++ b/src/components/projects/Header.tsx @@ -3,10 +3,10 @@ import HeaderMD from "./descriptions/Header.md"; export default function Header() { return ( -
              +
              -
              -

              Working in the open

              +
              +

              Working in the open

              diff --git a/src/components/projects/ProjectCard.tsx b/src/components/projects/ProjectCard.tsx index 39a92fbec..09e9b34aa 100644 --- a/src/components/projects/ProjectCard.tsx +++ b/src/components/projects/ProjectCard.tsx @@ -3,8 +3,8 @@ import styles from "./styles.module.css"; export default function ProjectCard({ project }): JSX.Element { /*if (project.reverse === "false") {*/ return ( -
              -
              +
              +
              {project.title}
              @@ -23,7 +23,7 @@ export default function ProjectCard({ project }): JSX.Element { } style={{ border: project.pictureBorder }} > -
              +
              -
              +
              +
              -
              +
              +
              -
              -
              - Schedule a meeting and benefit from our experience in Python, C++, - in-browser data visualization, and high-performance computing. -
              - +
              + Schedule a meeting and benefit from our experience in Python, C++, + in-browser data visualization, and high-performance computing. +
              diff --git a/src/components/projects/styles.module copy.css b/src/components/projects/styles.module copy.css deleted file mode 100644 index 3c09ade7e..000000000 --- a/src/components/projects/styles.module copy.css +++ /dev/null @@ -1,199 +0,0 @@ -.h1_custom { - padding: 0; -} - -div .schedule_container { - background-color: var(--ifm-color-secondary-s1); -} - -/*@media only screen and (max-width: 480px) { - /*Mobile */ - .project_container { - padding: var(--ifm-spacing-sm) var(--ifm-spacing-lg); - margin-bottom: var(--ifm-spacing-xs); - width: 200px; - height: 100px; - background-color: var(--ifm-color-orange-light); - } - - .header_text { - font-family: var(--ifm-font-family-roboto); - color: var(--ifm-color-primary-p2); - font-size: 14px; - font-style: normal; - font-weight: 400; - line-height: 20px; - letter-spacing: 0.25px; - text-align: center; - padding: 0 var(--ifm-spacing-lg); - } - - .project_title_small { - margin-top: var(--ifm-spacing-md); - color: var(--ifm-color-neutral-n1); - font-family: var(--ifm-font-family-roboto); - font-size: var(--ifm-font-size-normal); - font-style: normal; - font-weight: 400; - line-height: 24px; - letter-spacing: 0.5px; - width: 150px; - text-align: center; - } - - .header_container { - padding: var(--ifm-spacing-lg) 0; - background-color: var(--ifm-color-primary-p1); - } - - .ul.row.row_all_projects { - padding-left: 0; - } - - .schedule_container { - padding: var(--ifm-spacing-2xl) var(--ifm-spacing-3xl); - } - - .schedule_text { - font-family: var(--ifm-font-family-roboto); - color: var(--ifm-color-secondary-s2); - font-size: 14px; - font-size: 14px; - font-style: normal; - font-weight: 500; - line-height: 20px; - letter-spacing: 0.1px; - text-align: center; - margin-bottom: var(--ifm-spacing-2xl); - } - - .project_image_container { - padding: var(--ifm-spacing-xl) 0; - text-align: center; - } - - .project_title_popup { - padding: 8px 32px 8px 20px; - text-align: left; - color: var(--ifm-text-color); - font-family: var(--ifm-font-family-bebas-neue); - font-size: 24px; - font-style: normal; - font-weight: 600; - line-height: 150%; - letter-spacing: 1.056px; - height: 52px; - } - - .project_description_container { - padding: var(--ifm-spacing-xl) var(--ifm-spacing-3xl); - } -/*} - -/*@media only screen and (min-width: 996px) { - /*Desktop */ - .project_container { - margin-bottom: var(--ifm-spacing-lg); - margin-left: 0; - padding: 0; - /*background-color: var(--ifm-color-orange-light);*/ - /*border-radius: 10px; - box-shadow: 0px 0px 8px 1px #d0cb54;*/ - } - - .project_title { - margin-bottom: var(--ifm-spacing-md); - font-family: var(--ifm-font-family-bebas-neue); - font-size: var(--ifm-font-size-secondary-title); - font-style: normal; - font-weight: bolder; - line-height: 150%; - text-align: start; - } - - div .project_title { - color: var(--ifm-color-primary-p2); - } - - .project_description { - /*padding: var(--ifm-spacing-md) var(--ifm-spacing-xl);*/ - text-align: center; - } - - .project_description p { - color: var(--ifm-color-primary-p2); - } - - /*.row_project { - background-color: var(--ifm-color-orange-light); - border-radius: 10px; - box-shadow: 0px 0px 8px 1px #d0cb54; - width: 1200px; - }*/ - - .col_project_text { - background-color: var(--ifm-color-orange-light); - padding: var(--ifm-spacing-4xl) var(--ifm-spacing-3xl); - border-radius: 10px; - /*box-shadow: 0px 0px 8px 1px #d0cb54;*/ - } - - .col_project_picture_left { - margin-right: var(--ifm-spacing-lg); - border-radius: 10px; - } - - .col_project_picture_right { - margin-left: var(--ifm-spacing-lg); - border-radius: 10px; - } - - .col_schedule { - padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl); - margin: 0; - max-width: none; - } - - .header_text { - font-family: var(--ifm-font-family-roboto); - color: var(--ifm-color-primary-p2); - font-size: 22px; - font-style: normal; - font-weight: 400; - line-height: 28px; /* 142.857% */ - text-align: center; - margin-bottom: var(--ifm-spacing-6xl); - } - - .header_container { - margin-top: var(--ifm-spacing-6xl); - padding: 0; - } - - .schedule_text { - font-family: var(--ifm-font-family-bebas-neue); - font-size: var(--ifm-font-size-secondary-title); - font-style: normal; - font-weight: 800; - line-height: 150%; - text-align: center; - margin-bottom: var(--ifm-spacing-2xl); - } - - div .schedule_text { - color: var(--ifm-color-secondary-s2); - } - - .link_to_button_custom { - margin: var(--ifm-spacing-lg) 0; - } - - .schedule_a_meeting_container { - margin-top: var(--ifm-spacing-7xl); - } - - .all_projects_desktop_container { - margin-left: var(--ifm-spacing-6xl); - margin-right: var(--ifm-spacing-6xl); - } -/*} diff --git a/src/components/projects/styles.module.css b/src/components/projects/styles.module.css index 677fb667c..6a8b116ae 100644 --- a/src/components/projects/styles.module.css +++ b/src/components/projects/styles.module.css @@ -1,18 +1,7 @@ -.h1_custom { - padding-left: var(--ifm-spacing-4xl); - margin-top: var(--ifm-spacing-6xl); -} - div .schedule_container { background-color: var(--ifm-color-secondary-s1); } -.project_container { - margin-bottom: var(--ifm-spacing-lg); - margin-left: 0; - padding: 0; -} - .project_title { margin-bottom: var(--ifm-spacing-md); font-family: var(--ifm-font-family-bebas-neue); @@ -37,66 +26,73 @@ div .project_title { color: var(--ifm-color-primary-p2); } -/*.row_project { +@media only screen and (max-width: 996px) { + /*Mobile*/ + + .header_container { + background-color: var(--ifm-color-primary-p1); + } + + .header_title { + padding-left: none; + } + + .header_text { + font-family: var(--ifm-font-family-roboto); + + color: var(--ifm-color-primary-p2); + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.25px; + text-align: center; + margin-bottom: var(--ifm-spacing-2xl); + padding: var(--ifm-spacing-lg) var(--ifm-spacing-2xl); + } + + .col_project_text { background-color: var(--ifm-color-orange-light); + padding: var(--ifm-spacing-2xl) 0 var(--ifm-spacing-md) 0; border-radius: 10px; - box-shadow: 0px 0px 8px 1px #d0cb54; - width: 1200px; - }*/ - -.col_project_text { - background-color: var(--ifm-color-orange-light); - padding: var(--ifm-spacing-4xl) var(--ifm-spacing-3xl); - border-radius: 10px; - /*box-shadow: 0px 0px 8px 1px #d0cb54;*/ -} - -.col_project_picture_left { - margin: none; - border-radius: 10px; -} - -.col_project_picture_right { - border-radius: 10px; -} - -.col_schedule { - padding: var(--ifm-spacing-2xl) var(--ifm-spacing-2xl); - margin: 0; - max-width: none; -} - -.header_text { - font-family: var(--ifm-font-family-roboto); - color: var(--ifm-color-primary-p2); - font-size: 22px; - font-style: normal; - font-weight: 400; - line-height: 28px; /* 142.857% */ - text-align: center; - margin-bottom: var(--ifm-spacing-6xl); - padding: var(--ifm-spacing-lg) var(--ifm-spacing-4xl) -} - - -.schedule_text { - font-family: var(--ifm-font-family-bebas-neue); - font-size: var(--ifm-font-size-secondary-title); - font-style: normal; - font-weight: 800; - line-height: 150%; - text-align: center; - margin-bottom: var(--ifm-spacing-2xl); -} - -div .schedule_text { - color: var(--ifm-color-secondary-s2); -} + /*box-shadow: 0px 0px 8px 1px #d0cb54;*/ + } +} + +@media only screen and (min-width: 996px) { + /*Desktop*/ + .header_title { + padding-left: var(--ifm-spacing-4xl); + } + + .header_text { + font-family: var(--ifm-font-family-roboto); + color: var(--ifm-color-primary-p2); + font-size: 22px; + font-style: normal; + font-weight: 400; + line-height: 28px; /* 142.857% */ + text-align: center; + margin-bottom: var(--ifm-spacing-6xl); + padding: var(--ifm-spacing-lg) var(--ifm-spacing-4xl); + } + + .col_project_text { + background-color: var(--ifm-color-orange-light); + padding: var(--ifm-spacing-4xl) var(--ifm-spacing-3xl); + margin-bottom: var(--ifm-spacing-lg); + border-radius: 10px; + /*box-shadow: 0px 0px 8px 1px #d0cb54;*/ + } -.link_to_button_custom { - margin: var(--ifm-spacing-lg) 0; -} + .col_project_picture_left { + margin: none; + border-radius: 10px; + margin-bottom: var(--ifm-spacing-lg); + } -.schedule_a_meeting_container { - margin-top: var(--ifm-spacing-7xl); + .col_project_picture_right { + border-radius: 10px; + margin-bottom: var(--ifm-spacing-lg); + } } diff --git a/src/components/services/SpecialProjects.tsx b/src/components/services/SpecialProjects.tsx index e8da0bc13..a5da4f7d1 100644 --- a/src/components/services/SpecialProjects.tsx +++ b/src/components/services/SpecialProjects.tsx @@ -7,7 +7,7 @@ import SpecialProjectsIllustration from "@site/static/img/illustrations/special_ export function SpecialProjects() { return (
              -
              +

              Special projects

              diff --git a/src/components/services/Support.tsx b/src/components/services/Support.tsx index 5c9609d36..e897e32ed 100644 --- a/src/components/services/Support.tsx +++ b/src/components/services/Support.tsx @@ -5,7 +5,7 @@ import SupportIllustration from "/img/illustrations/support.svg"; export function Support() { return (
              -
              +
              diff --git a/src/components/services/index.tsx b/src/components/services/index.tsx index d80f64fad..d1fe0c1f2 100644 --- a/src/components/services/index.tsx +++ b/src/components/services/index.tsx @@ -6,16 +6,16 @@ import LinkToContact from "../home/LinkToContact"; export default function Services() { return ( -
              +
              Work with the people behind the technology.
              -
              +
              Sign a support retainer for QuantStack services in our ecosystem.
              diff --git a/src/components/services/styles.module.css b/src/components/services/styles.module.css index be06f4a4b..ae5caa7b5 100644 --- a/src/components/services/styles.module.css +++ b/src/components/services/styles.module.css @@ -1,30 +1,4 @@ - .service_container { - margin-top: var(--ifm-spacing-6xl); - } - - .sign_a_support_container { - font-family: var(--ifm-font-family-bebas-neue); - font-size: var(--ifm-font-size-secondary-title); - font-weight: 800; - - color: var(--ifm-color-secondary-s2); - padding: var(--ifm-spacing-2xl) 0; - margin-top: var(--ifm-spacing-7xl); - } - - div .sign_a_support_container { - background-color: var(--ifm-color-secondary-s1); - } - - .sign_a_support_text { - margin-bottom: var(--ifm-spacing-2xl); - } - - div .sign_a_support_text { - color: var(--ifm-color-secondary-s2); - } - .h2_custom { color: var(--ifm-color-indigo-i1); } diff --git a/src/css/custom.css b/src/css/custom.css index 78020ec6b..65f90b590 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -88,42 +88,6 @@ ul { padding-left: 0; } -.main-container-with-margins { - margin-left: 96px; - margin-right: 96px; - display: flex; - justify-content: center; -} - -h1 { - color: var(--ifm-color-primary-p2); - font-family: var(--ifm-font-family-bebas-neue); - font-size: var(--ifm-font-size-main-title); - font-style: normal; - font-weight: 800; - line-height: 150%; - letter-spacing: 2.112px; - text-align: start; - padding: 8px 36px 8px 20px; -} - -h2 { - font-family: var(--ifm-font-family-bebas-neue); - font-size: var(--ifm-font-size-secondary-title); - font-style: normal; - font-weight: bolder; - line-height: 150%; - text-align: start; -} - -p { - font-family: var(--ifm-font-family-roboto); - font-size: var(--ifm-font-size-normal); - font-style: normal; - letter-spacing: 0.25px; - text-align: justify; -} - .container { max-width: none; padding: 0; @@ -141,11 +105,200 @@ p { } } +/****** Class that are specific for smaller screens*/ @media (max-width: 996px) { .main-container-with-margins { - margin: 0; + margin-left: 42px; + margin-right: 42px; + } + + .upper-container-with-margin-top { + margin-top: var(--ifm-spacing-2xl) + } + + h1 { + color: var(--ifm-text-color-main-title); + font-family: var(--ifm-font-family-bebas-neue); + font-size: 24px; + font-style: normal; + font-weight: 600; + line-height: 150%; /* 36px */ + letter-spacing: 1.056px; + text-align: center; + padding: 0; + } + + h2 { + font-family: var(--ifm-font-family-bebas-neue); + font-size: 24px; + font-style: normal; + font-weight: bolder; + line-height: 150%; + text-align: center; + } + + p { + font-family: var(--ifm-font-family-roboto); + font-size: 14px; + font-style: normal; + line-height: 150%; + line-height: 20px; + letter-spacing: 0.25px; + text-align: center; + } + + li { + font-size: 14px; + } + + .blue-banner-container { + font-family: var(--ifm-font-family-roboto); + font-size: 16px; + font-weight: 500; + color: var(--ifm-color-secondary-s2); + padding-top: var(--ifm-spacing-2xl); + background-color: var(--ifm-color-secondary-s1); + line-height: 20px; + letter-spacing: 0.1px; + text-align: center; + } + + .blue-banner-header { + text-align: center; + font-family: var(--ifm-font-family-bebas-neue); + font-size: 32px; + font-style: normal; + font-weight: 600; + line-height: 150%; + letter-spacing: 2.112px; + background-color: var(--ifm-color-secondary-s1); + color: var(--ifm-color-secondary-s2); + } + .link-to-button { + width: 258px; + height: 56px; + font-family: var(--ifm-font-family-roboto); + border-radius: 35px; + background: var(--ifm-color-secondary-s2); + color: white; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 150%; + letter-spacing: -0.176px; + padding: 16px 36px; + border: none; + text-align: center; + margin-top: var(--ifm-spacing-lg); + margin-bottom: var(--ifm-spacing-lg); + } + + .link-box { + height: 59px; + width: auto; + display: flex; + align-items: center; + justify-content: center; + } +} +/***************************************************/ + +/****** Class that are specific to larger screens*/ +@media (min-width: 996px) { + .main-container-with-margins { + margin-left: 96px; + margin-right: 96px; + display: flex; + justify-content: center; + } + + .upper-container-with-margin-top { + margin-top: var(--ifm-spacing-6xl) + } + + h1 { + color: var(--ifm-color-primary-p2); + font-family: var(--ifm-font-family-bebas-neue); + font-size: var(--ifm-font-size-main-title); + font-style: normal; + font-weight: 800; + line-height: 150%; + letter-spacing: 2.112px; + text-align: start; + padding: 8px 36px 8px 20px; + } + + h2 { + font-family: var(--ifm-font-family-bebas-neue); + font-size: var(--ifm-font-size-secondary-title); + font-style: normal; + font-weight: bolder; + line-height: 150%; + text-align: start; + } + + p { + font-family: var(--ifm-font-family-roboto); + font-size: var(--ifm-font-size-normal); + font-style: normal; + letter-spacing: 0.25px; + text-align: justify; } + + .blue-banner-container { + text-align: center; + font-family: var(--ifm-font-family-roboto); + font-size: 28px; + font-style: normal; + font-weight: 500; + line-height: 150%; + background-color: var(--ifm-color-secondary-s1); + color: var(--ifm-color-secondary-s2); + padding: var(--ifm-spacing-2xl) var(--ifm-spacing-4xl) 0 var(--ifm-spacing-4xl); + } + + .blue-banner-header { + text-align: center; + font-family: var(--ifm-font-family-bebas-neue); + font-size: 48px; + font-style: normal; + font-weight: 600; + line-height: 150%; + letter-spacing: 2.112px; + background-color: var(--ifm-color-secondary-s1); + color: var(--ifm-color-secondary-s2); + margin-bottom:var(--ifm-spacing-2xl); + } + + .link-to-button { + width: 258px; + height: 56px; + font-family: var(--ifm-font-family-roboto); + border-radius: 35px; + background: var(--ifm-color-secondary-s2); + color: white; + font-size: 16px; + font-style: normal; + font-weight: 600; + line-height: 150%; + letter-spacing: -0.176px; + padding: 16px 36px; + border: none; + text-align: center; + margin-top: var(--ifm-spacing-2xl); + margin-bottom: var(--ifm-spacing-2xl); + } + + .link-box { + height: 59px; + width: auto; + display: flex; + align-items: center; + justify-content: center; + } + } +/***********************************************************/ .social-media-links { margin-left: var(--ifm-spacing-3xl); @@ -223,6 +376,8 @@ p { padding: 16px 36px; border: none; text-align: center; + margin-top: var(--ifm-spacing-2xl); + margin-bottom: var(--ifm-spacing-2xl); } .link-box { @@ -231,7 +386,6 @@ p { display: flex; align-items: center; justify-content: center; - margin-top: var(--ifm-spacing-2xl); } .quantstack-address { @@ -476,6 +630,16 @@ a.menu__link:active { background-repeat: no-repeat; } +.close-button { + background: url(@site/static/img/icons/CloseButton.svg); + content: ""; + display: flex; + height: 36px; + width: 36px; + background-repeat: no-repeat; + border: 0px solid; +} + .cards-list { list-style-type: none; padding: none; diff --git a/static/img/icons/AboutUs.svg b/static/img/icons/AboutUs.svg new file mode 100644 index 000000000..c81741b60 --- /dev/null +++ b/static/img/icons/AboutUs.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/icons/Blog.svg b/static/img/icons/Blog.svg new file mode 100644 index 000000000..41c23a2e0 --- /dev/null +++ b/static/img/icons/Blog.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/icons/Careers.svg b/static/img/icons/Careers.svg new file mode 100644 index 000000000..2ec079ca6 --- /dev/null +++ b/static/img/icons/Careers.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/icons/CloseButton.svg b/static/img/icons/CloseButton.svg new file mode 100644 index 000000000..d2984e72f --- /dev/null +++ b/static/img/icons/CloseButton.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/icons/ContactUs.svg b/static/img/icons/ContactUs.svg new file mode 100644 index 000000000..b209458fe --- /dev/null +++ b/static/img/icons/ContactUs.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/icons/Home.svg b/static/img/icons/Home.svg new file mode 100644 index 000000000..336989fb0 --- /dev/null +++ b/static/img/icons/Home.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/icons/Projects.svg b/static/img/icons/Projects.svg new file mode 100644 index 000000000..671b6aa56 --- /dev/null +++ b/static/img/icons/Projects.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/static/img/icons/Services.svg b/static/img/icons/Services.svg new file mode 100644 index 000000000..80a753822 --- /dev/null +++ b/static/img/icons/Services.svg @@ -0,0 +1,5 @@ + + + + +