From 14dca34605fdb90d2b4bec3c540c28700845675a Mon Sep 17 00:00:00 2001 From: Daniel Joo Date: Sat, 11 Oct 2025 15:32:53 -0700 Subject: [PATCH 1/5] added carasol but still needs text --- package-lock.json | 59 ++++++++++- package.json | 4 +- src/components/Home/EnsuringSecurity.tsx | 121 ----------------------- src/components/Home/Testimonials.tsx | 102 +++++++++++++++++++ src/components/Home/index.tsx | 4 +- 5 files changed, 161 insertions(+), 129 deletions(-) delete mode 100644 src/components/Home/EnsuringSecurity.tsx create mode 100644 src/components/Home/Testimonials.tsx diff --git a/package-lock.json b/package-lock.json index becc5065..65156153 100644 --- a/package-lock.json +++ b/package-lock.json @@ -65,6 +65,7 @@ "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react-select": "^3.1.0", + "react-slick": "^0.31.0", "react-stepper-horizontal": "^1.0.11", "react-switch": "^5.0.1", "react-test-renderer": "^18.0.0", @@ -73,9 +74,10 @@ "rollup-plugin-polyfill-node": "^0.13.0", "sass-embedded": "^1.89.2", "serve": "^14.2.4", + "slick-carousel": "^1.8.1", "typescript": "^4.6.3", "valid-url": "^1.0.9", - "vite": "^6.2.3", + "vite": "^6.3.6", "vitest": "^3.2.2" }, "devDependencies": { @@ -13924,6 +13926,12 @@ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, + "node_modules/lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", + "license": "MIT" + }, "node_modules/lodash.escape": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz", @@ -19311,6 +19319,22 @@ "react": "^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0" } }, + "node_modules/react-slick": { + "version": "0.31.0", + "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.31.0.tgz", + "integrity": "sha512-zo6VLT8wuSBJffg/TFPbzrw2dEnfZ/cUKmYsKByh3AgatRv29m2LoFbq5vRMa3R3A4wp4d8gwbJKO2fWZFaI3g==", + "license": "MIT", + "dependencies": { + "classnames": "^2.2.5", + "json2mq": "^0.2.0", + "lodash.debounce": "^4.0.8", + "resize-observer-polyfill": "^1.5.0" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/react-stepper-horizontal": { "version": "1.0.11", "resolved": "https://registry.npmjs.org/react-stepper-horizontal/-/react-stepper-horizontal-1.0.11.tgz", @@ -21319,6 +21343,15 @@ "node": ">=0.10.0" } }, + "node_modules/slick-carousel": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", + "license": "MIT", + "peerDependencies": { + "jquery": ">=1.8.0" + } + }, "node_modules/snapdragon": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz", @@ -24550,13 +24583,17 @@ } }, "node_modules/vite": { - "version": "6.2.3", - "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.3.tgz", - "integrity": "sha512-IzwM54g4y9JA/xAeBPNaDXiBF8Jsgl3VBQ2YQ/wOY6fyW3xMdSoltIV3Bo59DErdqdE6RxUfv8W69DvUorE4Eg==", + "version": "6.3.6", + "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.6.tgz", + "integrity": "sha512-0msEVHJEScQbhkbVTb/4iHZdJ6SXp/AvxL2sjwYQFfBqleHtnCqv1J3sa9zbWz/6kW1m9Tfzn92vW+kZ1WV6QA==", + "license": "MIT", "dependencies": { "esbuild": "^0.25.0", + "fdir": "^6.4.4", + "picomatch": "^4.0.2", "postcss": "^8.5.3", - "rollup": "^4.30.1" + "rollup": "^4.34.9", + "tinyglobby": "^0.2.13" }, "bin": { "vite": "bin/vite.js" @@ -24641,6 +24678,18 @@ "url": "https://opencollective.com/vitest" } }, + "node_modules/vite/node_modules/picomatch": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", + "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, "node_modules/vitest": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.2.2.tgz", diff --git a/package.json b/package.json index da6bffa7..f7c57a84 100644 --- a/package.json +++ b/package.json @@ -63,6 +63,7 @@ "react-router": "^5.2.0", "react-router-dom": "^5.2.0", "react-select": "^3.1.0", + "react-slick": "^0.31.0", "react-stepper-horizontal": "^1.0.11", "react-switch": "^5.0.1", "react-test-renderer": "^18.0.0", @@ -71,9 +72,10 @@ "rollup-plugin-polyfill-node": "^0.13.0", "sass-embedded": "^1.89.2", "serve": "^14.2.4", + "slick-carousel": "^1.8.1", "typescript": "^4.6.3", "valid-url": "^1.0.9", - "vite": "^6.2.3", + "vite": "^6.3.6", "vitest": "^3.2.2" }, "devDependencies": { diff --git a/src/components/Home/EnsuringSecurity.tsx b/src/components/Home/EnsuringSecurity.tsx deleted file mode 100644 index 7891af7b..00000000 --- a/src/components/Home/EnsuringSecurity.tsx +++ /dev/null @@ -1,121 +0,0 @@ -import classNames from 'classnames'; -import React from 'react'; -import { defineMessages, useIntl } from 'react-intl'; - -import BaseCard, { - CardImageLoc, - CardSize, -} from '../../components/BaseComponents/BaseCard'; -import tinkPNG from '../../static/images/homePage/googletink.png'; -import mozillaPNG from '../../static/images/homePage/mozilla_observatory.png'; - -const EnsuringSecurityMessages = defineMessages({ - header: { - id: 'home.security.header', - defaultMessage: 'Ensuring Security', - }, - card1Header: { - id: 'home.security.step-1-header', - defaultMessage: 'Completely Secure', - }, - card1Detail: { - id: 'home.security.step-1-detail', - defaultMessage: `Team Keep members are certified and follow "national standards for - electronic health care transactions and code sets, - unique health identifiers, and security."`, - }, - card2Header: { - id: 'home.security.step-2-header', - defaultMessage: 'Always Encryped', - }, - card2Detail: { - id: 'home.security.step-2-detail', - defaultMessage: `We use state-of-the-art security practices and - libraries used by industry leaders, such as Google. - Your documents are cryptographically signed and encrypted to increase client security.`, - }, - card3Header: { - id: 'home.security.step-3-header', - defaultMessage: 'Secure in the Cloud', - }, - card3Detail: { - id: 'home.security.step-3-detail', - defaultMessage: `Our application has been validated against internet vulnerabilities - by Mozilla Observatory. We hold ourselves to the highest web industry standards.`, - }, - buttonLearnMore: { - id: 'home.security.step-5-header', - defaultMessage: 'Learn More', - }, -}); - -function EnsuringSecurity() { - const intl = useIntl(); - return ( -
-
-
-

- {intl.formatMessage(EnsuringSecurityMessages.header)} -

-
-
-
-
-
- ( - - )} - /> -
-
- ( - - )} - /> -
-
-
-
- ); -} - -export default EnsuringSecurity; diff --git a/src/components/Home/Testimonials.tsx b/src/components/Home/Testimonials.tsx new file mode 100644 index 00000000..eb7b0faf --- /dev/null +++ b/src/components/Home/Testimonials.tsx @@ -0,0 +1,102 @@ +import 'slick-carousel/slick/slick.css'; +import 'slick-carousel/slick/slick-theme.css'; + +import React from 'react'; +import { defineMessages, useIntl } from 'react-intl'; +import Slider from 'react-slick'; + +const TestimonialMessages = defineMessages({ + header: { + id: 'home.testimonials.header', + defaultMessage: 'Testimonials', + }, +}); + +const testimonialsData = [ + { + quote: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labor', + author: 'Daniel Joo, CEO of Apple', + }, + { + quote: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco labor', + author: 'Daniel Joo, Astronaut', + }, + { + quote: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim', + author: 'Daniel Joo, USA Olympian', + }, + { + quote: + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ', + author: 'Daniel Joo, Nobel laureate', + }, +]; + +function Testimonials() { + const intl = useIntl(); + const settings = { + dots: true, + infinite: true, + speed: 500, + slidesToShow: 1, + slidesToScroll: 1, + arrows: true, + autoplay: true, + autoplaySpeed: 6000, + adaptiveHeight: true, + }; + + return ( + <> + + +
+
+
+

+ {intl.formatMessage(TestimonialMessages.header)} +

+
+
+
+
+ + {/* FIX 1: Use a stable key instead of the array index. */} + {testimonialsData.map((testimonial) => ( +
+
+

+ {/* FIX 2: Wrap the string in curly braces to handle the quotes correctly. */} + {`"${testimonial.quote}"`} +

+
+ {testimonial.author} +
+
+
+ ))} + +
+
+
+ + ); +} + +export default Testimonials; diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx index 19223fc4..b439694f 100644 --- a/src/components/Home/index.tsx +++ b/src/components/Home/index.tsx @@ -4,10 +4,10 @@ import { defineMessages, useIntl } from 'react-intl'; import { Link } from 'react-router-dom'; import HomepageGraphic from '../../static/images/homepage_graphic.svg'; -import EnsuringSecurity from './EnsuringSecurity'; import FocusingOnPeople from './FocusingOnPeople'; import HomelessStats from './HomelessStats'; import IntroText from './IntroText'; +import Testimonials from './Testimonials'; import WhoWeAreServing from './WhoWeAreServing'; const messages = defineMessages({ @@ -111,7 +111,7 @@ function Home() { - + From b504aaf27f9048c00eb27f5080dd6212a4291bf5 Mon Sep 17 00:00:00 2001 From: Daniel Joo Date: Sun, 26 Oct 2025 16:02:27 -0700 Subject: [PATCH 2/5] Minimalistic, simple carasoul --- src/components/Home/Testimonials.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/Home/Testimonials.tsx b/src/components/Home/Testimonials.tsx index eb7b0faf..ccff842e 100644 --- a/src/components/Home/Testimonials.tsx +++ b/src/components/Home/Testimonials.tsx @@ -59,10 +59,10 @@ function Testimonials() { } /* FIX: This makes the arrows visible against a light background */ - .slick-prev:before, - .slick-next:before { - color: black !important; - } + // .slick-prev:before, + // .slick-next:before { + // color: black !important; + // } `} @@ -77,12 +77,10 @@ function Testimonials() {
- {/* FIX 1: Use a stable key instead of the array index. */} {testimonialsData.map((testimonial) => (

- {/* FIX 2: Wrap the string in curly braces to handle the quotes correctly. */} {`"${testimonial.quote}"`}