property-practice-ui 0.1.4 → 0.2.0

package/src/organism/Header/Header.tsx

@@ -1,5 +1,8 @@
 import styled from 'styled-components';
 import { ExtendedButton, TextButton } from '../../atoms';
+import { colors } from '../../tokens/colors';
+
+type BorderColor = keyof typeof colors.border;
 
 const HeaderContainer = styled.header`
   display: flex;
@@ -7,6 +10,7 @@ const HeaderContainer = styled.header`
   align-items: center;
   background-color: #ffffff;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  padding: 0 1rem;
 `;
 
 const LogoWrapper = styled.div`
@@ -23,6 +27,55 @@ const ButtonGroup = styled.div`
   display: flex;
   gap: 1rem;
   align-items: center;
+  
+  /* Hide on mobile */
+  @media (max-width: 767px) {
+    display: none;
+  }
+`;
+
+const BurgerButton = styled.button<{ $burgerVariant: BorderColor }>`
+  display: none;
+  
+  /* Show only on mobile */
+  @media (max-width: 767px) {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    width: 2rem;
+    height: 2rem;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    
+    &:focus {
+      outline: none;
+    }
+  }
+`;
+
+const BurgerLine = styled.div<{ $isOpen: boolean; $burgerVariant: BorderColor }>`
+  width: 2rem;
+  height: 0.25rem;
+  background-color: ${props => colors.border[props.$burgerVariant]};
+  border-radius: 10px;
+  transition: all 0.3s linear;
+  position: relative;
+  transform-origin: 1px;
+
+  &:first-child {
+    transform: ${({ $isOpen }) => $isOpen ? 'rotate(45deg)' : 'rotate(0)'};
+  }
+
+  &:nth-child(2) {
+    opacity: ${({ $isOpen }) => $isOpen ? '0' : '1'};
+    transform: ${({ $isOpen }) => $isOpen ? 'translateX(20px)' : 'translateX(0)'};
+  }
+
+  &:nth-child(3) {
+    transform: ${({ $isOpen }) => $isOpen ? 'rotate(-45deg)' : 'rotate(0)'};
+  }
 `;
 
 interface HeaderProps {
@@ -31,6 +84,11 @@ interface HeaderProps {
   secondaryButtonText: string;
   onPrimaryClick?: () => void;
   onSecondaryClick?: () => void;
+  // Mobile menu props
+  isMobileMenuOpen?: boolean;
+  onMobileMenuToggle?: () => void;
+  burgerVariant?: BorderColor;
+  // Button variants
   primaryArrowVariant?: 'brand' | 'teal' | 'blue';
   primaryTextBgVariant?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'blue' | 'brand' | 'light' | 'transparent';
   primaryTextVariant?: 'brand' | 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'light' | 'error' | 'blue';
@@ -44,6 +102,9 @@ export const Header = ({
   secondaryButtonText,
   onPrimaryClick,
   onSecondaryClick,
+  isMobileMenuOpen = false,
+  onMobileMenuToggle,
+  burgerVariant = 'primary',
   primaryArrowVariant = 'blue',
   primaryTextBgVariant = 'brand',
   primaryTextVariant = 'secondary',
@@ -55,6 +116,8 @@ export const Header = ({
       <LogoWrapper>
         <img src={logo} alt="Logo" />
       </LogoWrapper>
+      
+      {/* Desktop buttons - hidden on mobile */}
       <ButtonGroup>
         <ExtendedButton
           text={primaryButtonText}
@@ -71,6 +134,13 @@ export const Header = ({
           uppercase={true}
         />
       </ButtonGroup>
+      
+      {/* Mobile burger - shown only on mobile */}
+      <BurgerButton onClick={onMobileMenuToggle} $burgerVariant={burgerVariant}>
+        <BurgerLine $isOpen={isMobileMenuOpen} $burgerVariant={burgerVariant} />
+        <BurgerLine $isOpen={isMobileMenuOpen} $burgerVariant={burgerVariant} />
+        <BurgerLine $isOpen={isMobileMenuOpen} $burgerVariant={burgerVariant} />
+      </BurgerButton>
     </HeaderContainer>
   );
 };

package/src/templates/AboutUs/AboutUs.tsx

@@ -9,10 +9,9 @@ const AboutUsContainer = styled.section`
   grid-template-columns: 35% 65%;
   gap: 3rem;
   padding: 4rem 2rem;
-  max-width: 1200px;
   margin: 0 auto;
   align-items: start;
-  background-color: ${colors.background?.light || '#000'};
+  background-color: ${colors.background?.secondary || '#000'};
 
   @media (max-width: 768px) {
     grid-template-columns: 1fr;
@@ -38,6 +37,7 @@ const ContentWrapper = styled.div`
   flex-direction: column;
   gap: 1.5rem;
   align-items: flex-start;
+  padding: 1rem 4rem 1rem 1rem;
 `;
 
 interface AboutUsProps {

package/src/templates/Contact/Contact.tsx

@@ -1,4 +1,3 @@
-import { ComponentProps } from 'react';
 import styled from 'styled-components';
 import { ExtendedButton, Header, TermsCheckbox } from '../../atoms';
 import { ContactForm } from '../../organism';
@@ -13,7 +12,12 @@ const ContactSection = styled.section`
   align-items: center;
   padding: 4rem 2rem;
   min-height: 100vh;
-  background-color: ${colors.background?.light || '#f9fafb'};
+  background-color: ${colors.background?.secondary || '#f9fafb'};
+  
+  /* Mobile adjustments */
+  @media (max-width: 767px) {
+    padding: 2rem 1rem;
+  }
 `;
 
 const ContentWrapper = styled.div`
@@ -41,8 +45,9 @@ const ImageWrapper = styled.div`
     display: block;
   }
 
-  @media (max-width: 768px) {
-    min-height: 400px;
+  /* Hide on mobile */
+  @media (max-width: 767px) {
+    display: none;
   }
 `;
 
@@ -52,6 +57,11 @@ const FormContainer = styled.div`
   gap: 2rem;
   padding: 4rem 3rem;
   background-color: #ffffff;
+  
+  /* Mobile adjustments */
+  @media (max-width: 767px) {
+    padding: 2rem 1.5rem;
+  }
 `;
 
 const FormWrapper = styled.div`
@@ -63,6 +73,11 @@ const FormWrapper = styled.div`
 const ButtonWrapper = styled.div`
   display: flex;
   justify-content: flex-start;
+  
+  /* Mobile: full width button */
+  @media (max-width: 767px) {
+    width: 100%;
+  }
 `;
 
 interface ContactProps {
@@ -76,7 +91,7 @@ interface ContactProps {
   termsVariant?: 'primary' | 'secondary' | 'subtle';
   buttonArrowVariant?: 'brand' | 'teal' | 'blue';
   buttonTextBgVariant?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'blue' | 'brand' | 'light' | 'transparent';
-  buttonTextVariant?: ComponentProps<typeof ExtendedButton>['textVariant'];
+  buttonTextVariant?: "brand" | "blue" | "primary" | "secondary" | "tertiary" | "subtle" | "light" ;
 }
 
 export const Contact = ({
@@ -90,7 +105,7 @@ export const Contact = ({
   termsVariant = 'primary',
   buttonArrowVariant = 'teal',
   buttonTextBgVariant = 'brand',
-  buttonTextVariant = 'secondary',
+  buttonTextVariant = 'primary',
 }: ContactProps) => {
   return (
     <ContactSection>

package/src/templates/FAQ/FAQ.tsx

@@ -24,7 +24,6 @@ const HeaderSection = styled.div`
 const AccordionList = styled.div`
   display: flex;
   flex-direction: column;
-  max-width: 900px;
   width: 100%;
 `;
 

package/src/templates/Features/Features.tsx

@@ -14,7 +14,12 @@ const FeaturesContainer = styled.section`
   gap: 2rem;
   padding: 4rem 2rem;
   min-height: 100vh;
-  background-color: ${colors.background?.light || '#000'};
+  background-color: ${colors.background?.secondary || '#000'};
+`;
+
+const InnerWrapper = styled.div`
+  width: 100%;
+  margin: 0 auto;
 `;
 
 const HeaderWrapper = styled.div`
@@ -57,23 +62,26 @@ export const Features = ({
 }: FeaturesProps) => {
   return (
     <FeaturesContainer>
-      <Pill variant={pillVariant} inverse={true}>
-        {pillText}
-      </Pill>
-      <HeaderWrapper>
-        <Header variant="h1" color={headerColor}>
-          {headerText}
-        </Header>
-      </HeaderWrapper>
-      <FeatureCarousel
-        cards={cards}
-        cardTitleColor={cardTitleColor}
-        cardDescriptionVariant={cardDescriptionVariant}
-        cardArrowVariant={cardArrowVariant}
-        cardThumbnailBgColor={cardThumbnailBgColor}
-        navButtonColor={navButtonColor}
-        indicatorColor={indicatorColor}
-      />
+      <InnerWrapper>
+
+        <Pill variant={pillVariant} inverse={true}>
+          {pillText}
+        </Pill>
+        <HeaderWrapper>
+          <Header variant="h1" color={headerColor}>
+            {headerText}
+          </Header>
+        </HeaderWrapper>
+        <FeatureCarousel
+          cards={cards}
+          cardTitleColor={cardTitleColor}
+          cardDescriptionVariant={cardDescriptionVariant}
+          cardArrowVariant={cardArrowVariant}
+          cardThumbnailBgColor={cardThumbnailBgColor}
+          navButtonColor={navButtonColor}
+          indicatorColor={indicatorColor}
+        />
+      </InnerWrapper>
     </FeaturesContainer>
   );
 };

package/src/templates/Hero/Hero.tsx

@@ -29,27 +29,53 @@ const HeroContainer = styled.section<{ $bgImage?: string; $overlayColor?: string
     right: 0;
     bottom: 0;
     background-color: ${props => props.$overlayColor || 'rgba(30, 64, 175, 0.7)'};
-    z-index: 1;
   }
 
-  /* Mobile/Tablet: Single column, hide features */
+
+  /* Mobile/Tablet: Single column, features below CTA */
   @media (max-width: 1024px) {
     grid-template-columns: 1fr;
-    padding: 2rem;
+    grid-template-rows: auto auto;
+    padding: 2rem 1rem;
+    gap: 3rem;
+  }
+  
+  /* Very small mobile */
+  @media (max-width: 480px) {
+    padding: 1.5rem 1rem;
   }
 `;
 
 const Column = styled.div`
   position: relative;
-  z-index: 2;
   display: flex;
   align-items: center;
+  
+  /* Constrain text width on mobile */
+  @media (max-width: 1024px) {
+    max-width: 100%;
+    width: 100%;
+  }
 `;
 
 const FeaturesColumn = styled(Column)`
-  /* Hide on mobile and tablet */
+  /* On desktop: normal column */
+  @media (min-width: 1025px) {
+    display: flex;
+  }
+  
+  /* On mobile: show below CTA, order it second */
+  @media (max-width: 1024px) {
+    display: flex;
+    order: 2;
+    align-items: flex-start;
+  }
+`;
+
+const CTAColumn = styled(Column)`
+  /* Ensure CTA comes first on mobile */
   @media (max-width: 1024px) {
-    display: none;
+    order: 1;
   }
 `;
 
@@ -107,7 +133,7 @@ export const Hero = ({
 }: HeroProps) => {
   return (
     <HeroContainer $bgImage={bgImage} $overlayColor={overlayColor}>
-      <Column>
+      <CTAColumn>
         <CTAContainer
           header={ctaHeader}
           description={ctaDescription}
@@ -125,7 +151,7 @@ export const Hero = ({
           primaryTextBgVariant={primaryTextBgVariant}
           primaryTextVariant={primaryTextVariant}
         />
-      </Column>
+      </CTAColumn>
       <FeaturesColumn>
         <FeatureContainer 
           items={featureItems}

package/src/templates/OtherProducts/OtherProducts.tsx

@@ -1,4 +1,3 @@
-import { ComponentProps } from 'react';
 import styled from 'styled-components';
 import { Header } from '../../atoms';
 import { ProductInfo } from '../../molecules';
@@ -13,19 +12,69 @@ const SectionContainer = styled.section`
   padding: 4rem 2rem;
   max-width: 1200px;
   margin: 0 auto;
+  
+  /* Mobile adjustments */
+  @media (max-width: 767px) {
+    padding: 2rem 1rem;
+  }
 `;
 
 const SectionHeader = styled.div`
   padding-bottom: 2rem;
   border-bottom: 1px solid ${colors.text.light || '#d1d5db'};
+  
+  /* Mobile: remove border, adjust padding */
+  @media (max-width: 767px) {
+    border-bottom: none;
+    padding-bottom: 1rem;
+  }
+`;
+
+const ProductsWrapper = styled.div`
+  /* Desktop: normal vertical stack */
+  @media (min-width: 768px) {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  /* Mobile: horizontal scroll carousel */
+  @media (max-width: 767px) {
+    display: flex;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    gap: 1rem;
+    padding: 1rem 0;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none; /* Firefox */
+    
+    &::-webkit-scrollbar {
+      display: none; /* Chrome, Safari */
+    }
+  }
 `;
 
 const ProductItem = styled.div`
-  padding: 2rem 0;
-  border-bottom: 1px solid ${colors.text.light || '#d1d5db'};
+  /* Desktop: vertical stack with borders */
+  @media (min-width: 768px) {
+    padding: 2rem 0;
+    border-bottom: 1px solid ${colors.text.light || '#d1d5db'};
 
-  &:last-child {
-    border-bottom: none;
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+  
+  /* Mobile: carousel item */
+  @media (max-width: 767px) {
+    flex: 0 0 80%; /* CHANGED from 85% - shows more of next card */
+    scroll-snap-align: center;
+    padding: 0;
+    border: none;
+  }
+  
+  /* Very small mobile */
+  @media (max-width: 480px) {
+    flex: 0 0 85%; /* CHANGED from 90% */
   }
 `;
 
@@ -46,7 +95,7 @@ interface OtherProductsProps {
   productTitleColor?: ComponentTextColor;
   productButtonArrowVariant?: 'brand' | 'teal' | 'blue';
   productButtonTextBgVariant?: 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'blue' | 'brand' | 'light' | 'transparent';
-  productButtonTextVariant?: ComponentProps<typeof ProductInfo>['buttonTextVariant'];
+  productButtonTextVariant?: "brand" | "blue" | "primary" | "secondary" | "tertiary" | "subtle" | "light";
 }
 
 export const OtherProducts = ({
@@ -66,22 +115,24 @@ export const OtherProducts = ({
           {headerText}
         </Header>
       </SectionHeader>
-      {products.map((product, index) => (
-        <ProductItem key={index}>
-          <ProductInfo
-            image={product.image}
-            logoImage={product.logoImage}
-            title={product.title}
-            buttonText={product.buttonText}
-            onButtonClick={product.onButtonClick}
-            titleVariant={product.titleVariant}
-            titleColor={productTitleColor}
-            buttonArrowVariant={productButtonArrowVariant}
-            buttonTextBgVariant={productButtonTextBgVariant}
-            buttonTextVariant={productButtonTextVariant}
-          />
-        </ProductItem>
-      ))}
+      <ProductsWrapper>
+        {products.map((product, index) => (
+          <ProductItem key={index}>
+            <ProductInfo
+              image={product.image}
+              logoImage={product.logoImage}
+              title={product.title}
+              buttonText={product.buttonText}
+              onButtonClick={product.onButtonClick}
+              titleVariant={product.titleVariant}
+              titleColor={productTitleColor}
+              buttonArrowVariant={productButtonArrowVariant}
+              buttonTextBgVariant={productButtonTextBgVariant}
+              buttonTextVariant={productButtonTextVariant}
+            />
+          </ProductItem>
+        ))}
+      </ProductsWrapper>
     </SectionContainer>
   );
 };

package/src/tokens/colors.ts

@@ -39,6 +39,7 @@ export const colors: Record<Token, Partial<TokenVariant>> = {
     error: '#F87171',
     focus: '#3B82F6',
     brand: '#1D3C77',
+    light: '#f3f3f3',
   },
   text: {
     brand: '#1D3C77',