feat: add initial testimonials layout

.eslintrc.cjs

@@ -48,7 +48,9 @@ module.exports = {
       plugins: [
         'react',
       ],
-      rules: {},
+      rules: {
+        "react/prop-types": "off",
+      },
     },
   ],
   parserOptions: {
@@ -59,6 +61,7 @@ module.exports = {
   },
   plugins: ['@typescript-eslint'],
   rules: {
+    "react/prop-types": "off",
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     'no-unused-vars': 'off',
     '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],

astro.config.mjs

@@ -21,10 +21,5 @@ export default defineConfig({
     define: {
       'import.meta.env.PUBLIC_GOOGLE_ANALYTICS_ID': process.env.PUBLIC_GOOGLE_ANALYTICS_ID,
     },
-    server: {
-      fs: {
-        strict: false,
-      },
-    },
   },
 });

package.json

@@ -50,6 +50,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.21.0",
+    "swiper": "^11.0.5",
     "typescript": "^5.3.3"
   },
   "devDependencies": {

src/pages/index.astro

@@ -1,15 +1,15 @@
 ---
 import BaseLayout from '@components/templates/baseLayout/BaseLayout.astro';
 import Welcome from '@components/molecules/welcome/Welcome.astro';
-import Testimonials from '@components/molecules/testimonials/Testimonials.astro';
+import Testimonials from 'src/ui/components/organisms/testimonials/Testimonials.astro';
 
-// todo: add testimonial
+// current todo: refine testimonials (modules, css, grid, etc)
 // todo: reveal on enter viewport
 // todo: view transitions
 // todo: add vitest
 // todo: add CIs
 ---
 <BaseLayout title="" description="">
-<Welcome />
-<Testimonials />
+    <Welcome />
+    <Testimonials />
 </BaseLayout>

src/ui/components/atoms/index.ts/Slide.tsx

@@ -0,0 +1,34 @@
+import React, { type FC, type ReactNode } from 'react';
+
+interface RenderChildrenProps {
+  children: ReactNode;
+}
+
+type SlideProps = RenderChildrenProps;
+
+type ImageProps = Pick<HTMLImageElement, 'src' | 'alt'>;
+export const Slide: FC<SlideProps> & {
+  Title: FC<RenderChildrenProps>;
+  Quote: FC<RenderChildrenProps>;
+  Role: FC<RenderChildrenProps>;
+  Image: FC<ImageProps>;
+} = ({ children }) => {
+  return (
+    <div className="slide-container">
+      <div className="slide-content">{children}</div>
+    </div>
+  );
+};
+
+const Title: FC<RenderChildrenProps> = ({ children }) => <h4>{children}</h4>;
+
+const Quote: FC<RenderChildrenProps> = ({ children }) => <blockquote className="quote">{children}</blockquote>;
+
+const Role: FC<RenderChildrenProps> = ({ children }) => <p className="role">{children}</p>;
+
+const Image: FC<ImageProps> = ({ src, alt }) => <img src={src} alt={alt} decoding="async" loading="lazy" />;
+
+Slide.Title = Title;
+Slide.Quote = Quote;
+Slide.Role = Role;
+Slide.Image = Image;

src/ui/components/atoms/index.ts/slide.css

@@ -0,0 +1,135 @@
+@layer header.menu {
+  .header__menu {
+    display: flex;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    visibility: hidden;
+    width: 100vw;
+
+    & > div {
+      height: 100%;
+    }
+  }
+
+  .header__menu :is(a, span) {
+    color: var(--white);
+    line-height: 70%;
+    position: relative;
+    top: 150%;
+  }
+
+  .navigation__menu {
+    align-items: center;
+    display: flex;
+    flex: 3;
+    flex-direction: column;
+    justify-content: center;
+    background-color: var(--neutral-main);
+  }
+
+  .navigation__menu__inner {
+    display: grid;
+    grid-template-areas: 'HeaderQuote Divider Navigation';
+    grid-template-columns: 50% 1fr 50%;
+    gap: 1rem;
+  }
+
+  .navigation__menu__nav {
+    gap: 3rem 0;
+    padding-left: 4rem;
+    grid-area: Navigation;
+  }
+
+  .navigation__menu__item,
+  .navigation__menu__quote {
+    position: relative;
+
+    &:after {
+      background: var(--neutral-main);
+      content: '';
+      height: 175%;
+      left: -1.5rem;
+      margin: 0 auto;
+      position: absolute;
+      width: 120%;
+    }
+  }
+
+  .navigation__menu__item {
+    span:first-child {
+      margin-inline-end: 0.5rem;
+    }
+
+    &:after {
+      top: 125%;
+    }
+  }
+
+  .navigation__menu__quote {
+    color: var(--white);
+    grid-area: HeaderQuote;
+    padding-inline-end: 4rem;
+    text-align: end;
+    font-size: clamp(2rem, 2rem, 2rem);
+    position: relative;
+
+    & span {
+      line-height: 140%;
+    }
+
+    &:after {
+      top: 220px;
+      width: 100%;
+    }
+  }
+
+  .navigation__menu__divider {
+    grid-area: Divider;
+    height: 150%;
+    width: 1px;
+    background-color: var(--white);
+    transition: 0.3s opacity;
+    opacity: 0;
+    translate: 0 -3rem;
+
+    &.--is-menu-open {
+      transition-delay: 2.5s;
+      opacity: 1;
+    }
+  }
+
+  .navigation__menu__link {
+    font-size: clamp(2rem, 5rem, 5rem);
+    text-transform: uppercase;
+    position: relative;
+    display: inline-block;
+
+    &:after {
+      background-color: currentColor;
+      width: 80%;
+      height: 1px;
+      margin: 0 auto;
+      left: 0;
+      right: 0;
+      bottom: -1.25rem;
+      transform: scaleX(0);
+      transition: all 0.2s ease;
+      position: absolute;
+      content: '';
+    }
+
+    &.--is-current-page {
+      color: var(--primary-main);
+    }
+
+    &:hover,
+    &:focus {
+      opacity: 1;
+
+      &:after {
+        transform: scaleX(1);
+      }
+    }
+  }
+}

src/ui/components/atoms/testimonial/index.tsx

@@ -0,0 +1 @@
+export * from './testimonial.tsx';

src/ui/components/atoms/testimonial/testimonial.css

@@ -0,0 +1,3 @@
+@layer testimonial {
+
+}

src/ui/components/atoms/testimonial/testimonial.tsx

@@ -0,0 +1,35 @@
+import React, { type FC, type ReactNode } from 'react';
+import './testimonial.css';
+
+interface RenderChildrenProps {
+  children: ReactNode;
+}
+
+type TestimonialProps = RenderChildrenProps;
+
+type ImageProps = Pick<HTMLImageElement, 'src' | 'alt'>;
+export const Testimonial: FC<TestimonialProps> & {
+  Name: FC<RenderChildrenProps>;
+  Quote: FC<RenderChildrenProps>;
+  Description: FC<RenderChildrenProps>;
+  Image: FC<ImageProps>;
+} = ({ children }) => {
+  return (
+    <div className="slide__wrapper">
+      <div className="slide__content">{children}</div>
+    </div>
+  );
+};
+
+const Image: FC<ImageProps> = ({ src, alt }) => <img src={src} alt={alt} decoding="async" loading="lazy" />;
+
+const Quote: FC<RenderChildrenProps> = ({ children }) => <blockquote className="quote">{children}</blockquote>;
+
+const Name: FC<RenderChildrenProps> = ({ children }) => <h4>{children}</h4>;
+
+const Description: FC<RenderChildrenProps> = ({ children }) => <p className="role">{children}</p>;
+
+Testimonial.Name = Name;
+Testimonial.Quote = Quote;
+Testimonial.Description = Description;
+Testimonial.Image = Image;

src/ui/components/molecules/testimonialsSlider/TestimonialsSlider.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation } from 'swiper/modules';
+import { Testimonial } from '@components/atoms/testimonial';
+
+export const TestimonialsSlider = () => {
+  return (
+    <Swiper navigation={true} modules={[Navigation]} className="mySwiper" slidesPerView={3}>
+      <SwiperSlide>
+        <Testimonial>
+          <Testimonial.Name>Name</Testimonial.Name>
+          <Testimonial.Quote>quote</Testimonial.Quote>
+          <Testimonial.Image src="https://via.placeholder.com/50" alt="alt" />
+          <Testimonial.Description>role</Testimonial.Description>
+        </Testimonial>
+      </SwiperSlide>
+      <SwiperSlide>
+        <Testimonial>
+          <Testimonial.Name>Name</Testimonial.Name>
+          <Testimonial.Quote>quote</Testimonial.Quote>
+          <Testimonial.Image src="https://via.placeholder.com/50" alt="alt" />
+          <Testimonial.Description>role</Testimonial.Description>
+        </Testimonial>
+      </SwiperSlide>
+      <SwiperSlide>
+        <Testimonial>
+          <Testimonial.Name>Name</Testimonial.Name>
+          <Testimonial.Quote>quote</Testimonial.Quote>
+          <Testimonial.Image src="https://via.placeholder.com/50" alt="alt" />
+          <Testimonial.Description>role</Testimonial.Description>
+        </Testimonial>
+      </SwiperSlide>
+      <SwiperSlide>
+        <Testimonial>
+          <Testimonial.Name>Name</Testimonial.Name>
+          <Testimonial.Quote>quote</Testimonial.Quote>
+          <Testimonial.Image src="https://via.placeholder.com/50" alt="alt" />
+          <Testimonial.Description>role</Testimonial.Description>
+        </Testimonial>
+      </SwiperSlide>
+    </Swiper>
+  );
+};

src/ui/components/molecules/testimonialsSlider/index.tsx

@@ -0,0 +1 @@
+export * from './TestimonialsSlider';

src/ui/components/organisms/testimonials/Testimonials.astro

@@ -0,0 +1,12 @@
+---
+import '@components/organisms/testimonials/testimonials.css';
+import { TestimonialsSlider } from '@components/molecules/testimonialsSlider/index';
+---
+<section class="testimonials__wrapper wrapper">
+    <h3 class="testimonials__title">Testimonials</h3>
+    <p class="testimonials__body">
+        This template comes with a few integrations already configured in your
+        astro.config.mjs file. You can customize your setup with Astro Integrations to add tools like Tailwind, React,
+        or Vue to your project.</p>
+    <TestimonialsSlider client:only="react" />
+</section>

src/ui/components/templates/baseLayout/BaseLayout.astro

@@ -1,6 +1,6 @@
 ---
 import Footer from '@components/organisms/footer/Footer.astro';
-import ReactScriptProvider from 'src/ui/components/atoms/ReactScriptProvider';
+import ReactScriptProvider from '@components/atoms/reactScriptProvider/ReactScriptProvider';
 import SiteHead from '@components/organisms/siteHead/SiteHead.astro';
 import Header from '@components/organisms/header/Header.astro';
 

src/ui/styles/vendor/index.css

@@ -1 +1,2 @@
+@import url('vendor.css');
 @import url('overrides.css');

src/ui/styles/vendor/vendor.css

@@ -0,0 +1,16 @@
+@import url('swiper/css');
+@import url('swiper/css/navigation');
+
+
+
+
+
+
+
+
+
+
+
+
+
+

yarn.lock

@@ -2457,6 +2457,7 @@ __metadata:
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     react-router-dom: "npm:^6.21.0"
+    swiper: "npm:^11.0.5"
     typescript: "npm:^5.3.3"
     vitest: "npm:^1.0.4"
   languageName: unknown
@@ -8651,6 +8652,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"swiper@npm:^11.0.5":
+  version: 11.0.5
+  resolution: "swiper@npm:11.0.5"
+  checksum: 443d147cdca55708dcf0fd174edfd68f6b55166578a9aedc7c636687c071f520e0bb626dd4ea9fb83feb21d61e4e6e4beda8d1f4b7e664077ebda9e22398d815
+  languageName: node
+  linkType: hard
+
 "synckit@npm:^0.8.0, synckit@npm:^0.8.5":
   version: 0.8.6
   resolution: "synckit@npm:0.8.6"