Betrem

Grafisk profil
❮ 1/4 ❯
import React, { useState } from "react";
import styled, { css } from "styled-components";

const data = [
  {
    title: "Marketing Design & Experience",
    text:
      "Skap engasjerende opplevelser på tvers av digitale og fysiske flater som styrker kundereisen og maksimerer konvertering. Med datadrevet innsikt og kreativt design får merkevaren din å skinne i hvert møtepunkt.",
  },
  {
    title: "Brand Design",
    text:
      "Utvikler visuelle identiteter som formidler din unike merkevarehistorie – fra logo og fargepalett til typografi og ikondesign. Hvert element er skreddersydd for å bygge gjenkjennelse og tillit hos målgruppen.",
  },
  {
    title: "Brand Development",
    text:
      "Strategisk arbeid for å forme og forankre merkevaren i markedet, inkludert merkevareplattform, posisjonering og tone of voice. Vi sikrer langsiktig vekst med klare mål og en helhetlig merkevarestrategi.",
  },
];

const Container = styled.div`
  display: flex;
  gap: 32px;
  justify-content: center;
  align-items: flex-start;
  margin: 40px 0;
  flex-wrap: wrap;
`;

const Block = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 260px;
`;

const AnimatedButton = styled.button`
  background: #fff;
  color: #222;
  border: 2px solid #9fd29c;
  border-radius: 8px;
  padding: 18px 32px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, transform 0.2s;
  margin-bottom: 0;
  outline: none;
  ${(props) =>
    props.active &&
    css`
      background: #9fd29c;
      color: #fff;
      transform: translateY(4px) scale(1.04);
    `}
  &:hover,
  &:focus {
    background: #9fd29c;
    color: #fff;
    transform: translateY(2px) scale(1.02);
  }
`;

const Reveal = styled.div`
  max-height: ${(props) => (props.active ? "500px" : "0")};
  opacity: ${(props) => (props.active ? 1 : 0)};
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  width: 100%;
  margin-top: ${(props) => (props.active ? "18px" : "0")};
`;

const RevealText = styled.div`
  background: #f7f7f7;
  border-radius: 8px;
  padding: 18px 16px 10px 16px;
  font-size: 1rem;
  color: #333;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(159, 210, 156, 0.08);
  animation: ${(props) =>
    props.active
      ? "slideDown 0.5s cubic-bezier(0.4, 0, 0.2, 1)"
      : "none"};
  @keyframes slideDown {
    from {
      transform: translateY(-20px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
`;

const LearnMoreButton = styled.a`
  display: inline-block;
  background: #9fd29c;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 22px;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  box-shadow: 0 2px 8px rgba(159, 210, 156, 0.12);
  &:hover,
  &:focus {
    background: #7fc87a;
    transform: translateY(-2px) scale(1.04);
  }
`;

export default function AnimatedButtonsBlock() {
  const [openIndex, setOpenIndex] = useState(null);

  const handleToggle = (idx) => {
    setOpenIndex(openIndex === idx ? null : idx);
  };

  return (
    
      {data.map((item, idx) => (
        
           handleToggle(idx)}
            aria-expanded={openIndex === idx}
            aria-controls={`reveal-${idx}`}
          >
            {item.title}
          
          
            {item.text}
            Learn more
          
        
      ))}
    
  );
}
Betrem

Kontakt oss
