+ )
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165b.md b/curriculum/challenges/english/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165b.md
new file mode 100644
index 00000000000..db3fbd1070c
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165b.md
@@ -0,0 +1,126 @@
+---
+id: 674ef2d357676e50e469165b
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+Inside your return statement, replace the empty string with a `div` element with a `className` property of `flex-container`.
+
+# --hints--
+
+You should not have an empty string in your Card component.
+
+```js
+assert.notMatch(code, /""/)
+```
+
+You should create a `div` element with the class `flex-container`.
+
+```js
+const mockedComponent = Enzyme.mount(
+ React.createElement(window.index.App)
+);
+
+assert.equal(mockedComponent.childAt(0).type(), 'div');
+assert.isTrue(mockedComponent.childAt(0).hasClass('flex-container'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Reusable Card component
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.flex-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ align-items: center;
+}
+
+.card {
+ border: 5px solid var(--dark-orange);
+ border-radius: 10px;
+ width: 100%;
+ padding: 20px;
+ margin: 10px 0;
+ background-color: var(--light-grey);
+}
+
+.card-title {
+ border-bottom: 4px solid var(--dark-orange);
+ width: fit-content;
+}
+
+@media (min-width: 768px) {
+ .card {
+ width: 300px;
+ }
+}
+```
+
+```jsx
+export function Card({ name, title, bio }) {
+ return (
+
+
{name}
+
{title}
+
{bio}
+
+ )
+}
+
+export function App() {
+ return (
+ --fcc-editable-region--
+ ""
+ --fcc-editable-region--
+ );
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165c.md b/curriculum/challenges/english/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165c.md
new file mode 100644
index 00000000000..ebe73d4c75b
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165c.md
@@ -0,0 +1,144 @@
+---
+id: 674ef2d357676e50e469165c
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Now, use the `Card` component with the `name` prop set to `"Mark"`, the `title` prop set to `"Frontend developer"`, and the `bio` set to `"I like to work with different frontend technologies and play video games."`
+
+# --hints--
+
+You should use the `Card` component as an element with a `name` prop set to `"Mark"`.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(window.index.App));
+const cardItem = mockedComponent.find(window.index.Card);
+
+const cardItemsProps = cardItem.props()
+
+assert.equal(cardItem.props().name, "Mark")
+```
+
+You should use the `Card` component as an element with a `title` prop set to `"Frontend developer"`.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(window.index.App));
+const cardItem = mockedComponent.find(window.index.Card);
+
+const cardItemsProps = cardItem.props()
+
+assert.equal(cardItem.props().title, "Frontend developer")
+```
+
+You should use the `Card` component as an element with a `bio` prop set to `"I like to work with different frontend technologies and play video games."`.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(window.index.App));
+const cardItem = mockedComponent.find(window.index.Card);
+
+const cardItemsProps = cardItem.props()
+
+assert.equal(cardItem.props().bio, "I like to work with different frontend technologies and play video games.")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Reusable Card component
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.flex-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ align-items: center;
+}
+
+.card {
+ border: 5px solid var(--dark-orange);
+ border-radius: 10px;
+ width: 100%;
+ padding: 20px;
+ margin: 10px 0;
+ background-color: var(--light-grey);
+}
+
+.card-title {
+ border-bottom: 4px solid var(--dark-orange);
+ width: fit-content;
+}
+
+@media (min-width: 768px) {
+ .card {
+ width: 300px;
+ }
+}
+```
+
+```jsx
+export function Card({ name, title, bio }) {
+ return (
+
+ );
+}
+```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165d.md b/curriculum/challenges/english/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165d.md
new file mode 100644
index 00000000000..7b1d60ed468
--- /dev/null
+++ b/curriculum/challenges/english/25-front-end-development/workshop-reusable-profile-card-component/674ef2d357676e50e469165d.md
@@ -0,0 +1,265 @@
+---
+id: 674ef2d357676e50e469165d
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Again, use the `Card` component two more times with the following:
+
+| Props | First Card Values | Second Card Values |
+|-------|------------------------------------------------------------|-----------------------------------------------------|
+| `name` | `"Tiffany"` | `"Doug"`|
+| `title` | `"Engineering manager"` | `"Backend developer"` |
+| `bio` | `"I have worked in tech for 15 years and love to help people grow in this industry."` | `"I have been a software developer for over 20 years and I love working with Go and Rust."`|
+
+With that, your reusable profile card component project is complete!
+
+# --hints--
+
+You should use the `Card` component as an element with the appropriate props and first card values.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(window.index.App));
+const cardItems = mockedComponent.find(window.index.Card);
+
+const propsList = cardItems.map(item => item.props());
+
+assert.deepEqual(propsList[1], {
+ name: 'Tiffany',
+ title: 'Engineering manager',
+ bio: 'I have worked in tech for 15 years and love to help people grow in this industry.'
+});
+```
+
+You should use the `Card` component as an element with the appropriate props and second card values.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(window.index.App));
+const cardItems = mockedComponent.find(window.index.Card);
+
+const propsList = cardItems.map(item => item.props());
+
+assert.deepEqual(propsList[2], {
+ name: 'Doug',
+ title: 'Backend developer',
+ bio: 'I have been a software developer for over 20 years and I love working with Go and Rust.'
+});
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+ Reusable Card component
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+:root {
+ --dark-grey: #1b1b32;
+ --light-grey: #f5f6f7;
+ --dark-orange: #f89808;
+}
+
+body {
+ background-color: var(--dark-grey);
+}
+
+.flex-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ align-items: center;
+}
+
+.card {
+ border: 5px solid var(--dark-orange);
+ border-radius: 10px;
+ width: 100%;
+ padding: 20px;
+ margin: 10px 0;
+ background-color: var(--light-grey);
+}
+
+.card-title {
+ border-bottom: 4px solid var(--dark-orange);
+ width: fit-content;
+}
+
+@media (min-width: 768px) {
+ .card {
+ width: 300px;
+ }
+}
+```
+
+```jsx
+export function Card({ name, title, bio }) {
+ return (
+