Learn How Stuff is Built

import React, { 
  useState, 
  useEffect } from 'react';
import styled from 'styled-components';
import { 
  motion, 
  AnimatePresence } from 'framer-motion';

const Container = styled.div`
  width: 100%;
  background: ${props => 
    props.background};
  border-radius: 14px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  color: white;
  transition: background 0.8s ease;
`;

const ProductGrid = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  height: 100%;
  
  @media (max-width: 768px) {
    grid-template-columns: 1fr;
  }
`;

const ProductInfo = styled(motion.div)`
  display: flex;
  flex-direction: column;
  justify-content: center;
`;

const ProductName = styled.h2`
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
`;

const ProductPrice = styled.div`
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
`;

const FeatureList = styled.div`
  margin-bottom: 1.5rem;
`;

const Feature = styled.div`
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  
  span:first-child {
    color: ${props => 
      props.accentColor};
  }
`;

const ProductImage = styled(motion.div)`
  height: 250px;
  background: ${props => 
    props.background};
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 10px 30px rgba(0,0,0,0.3);
`;

const ProductSelector = styled.div`
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  display: flex;
  gap: 0.5rem;
`;

const Dot = styled.div`
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: ${props => 
    props.active 
      ? 'white' 
      : 'rgba(255,255,255,0.4)'};
  cursor: pointer;
  transition: all 0.3s ease;
`;

const Button = styled.button`
  background: white;
  color: black;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 2rem;
  font-weight: 600;
  marginTop: '20px';
  cursor: pointer;
  display: flex;
  alignItems: center;
  gap: 0.5rem;
  box-shadow: 
    0 5px 15px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 
      0 8px 20px rgba(0,0,0,0.3);
  }
`;

const ProductShowcase = () => {
  const [activeProduct, setActiveProduct] = 
    useState(0);
  
  // Auto-slide functionality
  useEffect(() => {
    const interval = setInterval(() => {
      const nextIndex = 
        (activeProduct + 1) % products.length;
      changeProduct(nextIndex);
    }, 5000);
    
    return () => clearInterval(interval);
  }, [activeProduct]);
  
  // Product data would be defined here
  
  return (
    <Container 
      background={
        products[activeProduct]
          .background
      }
    >
      <ProductGrid>
        <AnimatePresence mode="wait">
          <ProductInfo
            key={activeProduct}
            initial={{ 
              opacity: 0, 
              y: 20 
            }}
            animate={{ 
              opacity: 1, 
              y: 0 
            }}
            exit={{ 
              opacity: 0, 
              y: -20 
            }}
            transition={{ 
              duration: 0.4 
            }}
          >
            {/* Product information would 
                be rendered here */}
          </ProductInfo>
        </AnimatePresence>
        
        <AnimatePresence mode="wait">
          <ProductImage
            key={activeProduct}
            initial={{ 
              opacity: 0, 
              rotateY: 90 
            }}
            animate={{ 
              opacity: 1, 
              rotateY: 0 
            }}
            exit={{ 
              opacity: 0, 
              rotateY: -90 
            }}
            transition={{ 
              duration: 0.4 
            }}
          >
            {/* Product image would 
                be rendered here */}
          </ProductImage>
        </AnimatePresence>
      </ProductGrid>
      
      <ProductSelector>
        {products.map((_, index) => (
          <Dot
            key={index}
            active={index === activeProduct}
            onClick={() => 
              changeProduct(index)
            }
          />
        ))}
      </ProductSelector>
    </Container>
  );
};

export default ProductShowcase;

import React, { useState, useRef } from 'react';
import styled from 'styled-components';

const Container = styled.div`
  width: 100%;
  height: 100vh;
  background: #FAFAFA;
  color: #333;
  
  @media (max-width: 768px) {
    height: auto;
    min-height: 100vh;
  }
`;

const Header = styled.header`
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid #EAEAEA;
  position: sticky;
  top: 0;
  background: white;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
  z-index: 10;
  
  @media (max-width: 768px) {
    padding: 1rem;
  }
`;

const Logo = styled.div`
  font-weight: 700;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #222;
`;

const Nav = styled.nav`
  display: flex;
  gap: 2rem;
  
  @media (max-width: 768px) {
    gap: 1rem;
  }
`;

const NavItem = styled.div`
  cursor: pointer;
  position: relative;
  color: ${props => 
    props.active ? '#222' : '#777'};
  font-weight: ${props => 
    props.active ? '600' : '500'};
  transition: all 0.3s ease;
  padding: 6px 0;
  
  &::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: ${props => 
      props.active ? '100%' : '0'};
    height: 2px;
    background: #222;
    transition: width 0.3s ease;
  }
  
  &:hover {
    color: ${props => 
      props.active ? '#222' : '#444'};
    
    &::after {
      width: 100%;
    }
  }
`;

const ShapeElement = styled.div`
  position: absolute;
  width: ${props => props.size || '40px'};
  height: ${props => {
    if (props.type === 'circle' || props.type === 'square') {
      return props.size || '40px';
    } else if (props.type === 'triangle') {
      const size = parseInt(props.size) || 40;
      return `${size / 2}px`;
    }
    return props.size || '40px';
  }};
  background: ${props => props.color};
  border-radius: ${props => 
    props.type === 'circle' ? '50%' : '4px'};
  clip-path: ${props => 
    props.type === 'triangle' 
      ? 'polygon(50% 0%, 0% 100%, 100% 100%)' 
      : 'none'};
  z-index: 1;
`;

const ProjectCard = styled.div`
  height: 170px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: white;
  border: 1px solid #EAEAEA;
  transition: all 0.4s ease;
  position: relative;
  
  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  }
`;

const Portfolio = () => {
  const [activeSection, setActiveSection] = 
    useState('work');
  const [shapesVisible, setShapesVisible] = 
    useState(true);
  
  return (
    <Container>
      <Header>
        <Logo>◮ Portfolio</Logo>
        <Nav>
          <NavItem 
            active={activeSection === 'work'} 
            onClick={() => 
              setActiveSection('work')
            }
          >
            Work
          </NavItem>
          <NavItem 
            active={activeSection === 'about'} 
            onClick={() => 
              setActiveSection('about')
            }
          >
            About
          </NavItem>
          <NavItem 
            active={
              activeSection === 'contact'
            } 
            onClick={() => 
              setActiveSection('contact')
            }
          >
            Contact
          </NavItem>
        </Nav>
      </Header>
      
      {/* Background shapes */}
      <ShapeElement 
        size="60px" 
        top="15%" 
        left="10%" 
        type="circle" 
        color="#FFE8D2" 
      />
      <ShapeElement 
        size="40px" 
        top="70%" 
        left="8%" 
        type="square" 
        color="#D1E9FF" 
      />
      <ShapeElement 
        size="30px" 
        top="40%" 
        left="85%" 
        type="circle" 
        color="#E4FFED" 
      />
      
      {/* Content would be conditionally 
          rendered here */}
    </Container>
  );
};

export default Portfolio;