Merge version_1 into main #2

Merged
bender merged 2 commits from version_1 into main 2026-03-12 10:28:08 +00:00
2 changed files with 42 additions and 49 deletions

View File

@@ -20,7 +20,7 @@ export default function LandingPage() {
borderRadius="rounded"
contentWidth="compact"
sizing="largeSizeMediumTitles"
background="floatingGradient"
background="circleGradient"
cardStyle="glass-depth"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="radial-glow"
@@ -51,14 +51,14 @@ export default function LandingPage() {
{ text: "Läs mer", href: "#features" }
]}
buttonAnimation="slide-up"
background={{ variant: "floatingGradient" }}
background={{ variant: "plain" }}
carouselItems={[
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-outdoors-looking-smartphone-while-holing-shopping-bags_23-2148684507.jpg", imageAlt: "Produktrekommendation - Livsstil" },
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/two-slices-oranges-white-desk_23-2148283714.jpg?_wi=1", imageAlt: "Produktrekommendation - Elektronik" },
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/two-slices-oranges-white-desk_23-2148283714.jpg", imageAlt: "Produktrekommendation - Elektronik" },
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/teen-looking-card-library-catalog_23-2147846762.jpg", imageAlt: "Produktrekommendation - Hem" },
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/top-view-accessoires-travel-with-man-clothing-concept_1921-65.jpg", imageAlt: "Produktrekommendation - Mode" },
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/natural-perfume-with-scales-scented-oils-bottles_23-2148225548.jpg", imageAlt: "Produktrekommendation - Wellness" },
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/orange-yoga-mat-water-bottle-arrangement_23-2149442738.jpg?_wi=1", imageAlt: "Produktrekommendation - Sport" }
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/orange-yoga-mat-water-bottle-arrangement_23-2149442738.jpg", imageAlt: "Produktrekommendation - Sport" }
]}
autoPlay={true}
autoPlayInterval={4000}
@@ -77,19 +77,19 @@ export default function LandingPage() {
features={[
{
id: 1,
title: "Elektronik & Gadgets", description: "Senaste teknologi och smarta enheter rekommenderade av experter. Hitta den perfekta produkten för dina behov.", imageSrc: "http://img.b2bpic.net/free-photo/wireless-earbuds-with-neon-cyberpunk-style-lighting_23-2151074256.jpg?_wi=1", imageAlt: "Elektronik och gadgets"
title: "Elektronik & Gadgets", description: "Senaste teknologi och smarta enheter rekommenderade av experter. Hitta den perfekta produkten för dina behov.", imageSrc: "http://img.b2bpic.net/free-photo/wireless-earbuds-with-neon-cyberpunk-style-lighting_23-2151074256.jpg", imageAlt: "Elektronik och gadgets"
},
{
id: 2,
title: "Hem & Vardagsrum", description: "Möbler och hemtillbehör som kombinerar stil med funktionalitet. Skapa ditt drömhem med våra kurerade urval.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-vases-with-spring-flowers-living-room_169016-1546.jpg?_wi=1", imageAlt: "Hem och vardagsprodukter"
title: "Hem & Vardagsrum", description: "Möbler och hemtillbehör som kombinerar stil med funktionalitet. Skapa ditt drömhem med våra kurerade urval.", imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-vases-with-spring-flowers-living-room_169016-1546.jpg", imageAlt: "Hem och vardagsprodukter"
},
{
id: 3,
title: "Mode & Accessoarer", description: "Trendiga kläder och accessories för alla stilar och budgetar. Uppdatera din garderob med högkvalitativa val.", imageSrc: "http://img.b2bpic.net/free-photo/fashion-stylist-work_329181-14385.jpg?_wi=1", imageAlt: "Mode och accessoarer"
title: "Mode & Accessoarer", description: "Trendiga kläder och accessories för alla stilar och budgetar. Uppdatera din garderob med högkvalitativa val.", imageSrc: "http://img.b2bpic.net/free-photo/fashion-stylist-work_329181-14385.jpg", imageAlt: "Mode och accessoarer"
},
{
id: 4,
title: "Hälsa & Wellness", description: "Hudvård och välfärdsprodukter för din välmåga. Investera i produkter som tar hand om dig.", imageSrc: "http://img.b2bpic.net/free-photo/minimal-composition-beauty-products_23-2148961332.jpg?_wi=1", imageAlt: "Hälsa och wellness"
title: "Hälsa & Wellness", description: "Hudvård och välfärdsprodukter för din välmåga. Investera i produkter som tar hand om dig.", imageSrc: "http://img.b2bpic.net/free-photo/minimal-composition-beauty-products_23-2148961332.jpg", imageAlt: "Hälsa och wellness"
}
]}
/>
@@ -105,12 +105,12 @@ export default function LandingPage() {
gridVariant="bento-grid"
animationType="blur-reveal"
products={[
{ id: "1", name: "Premium Trådlös Hörlur", price: "1,299 SEK", imageSrc: "http://img.b2bpic.net/free-photo/two-slices-oranges-white-desk_23-2148283714.jpg?_wi=2", imageAlt: "Premium trådlös hörlur" },
{ id: "2", name: "Ergonomisk Kontorsstol", price: "2,499 SEK", imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-vases-with-spring-flowers-living-room_169016-1546.jpg?_wi=2", imageAlt: "Ergonomisk kontorsstol" },
{ id: "3", name: "Moderna Köksverktyg", price: "799 SEK", imageSrc: "http://img.b2bpic.net/free-photo/wireless-earbuds-with-neon-cyberpunk-style-lighting_23-2151074256.jpg?_wi=2", imageAlt: "Moderna köksverktyg" },
{ id: "4", name: "Design Skridbord", price: "3,999 SEK", imageSrc: "http://img.b2bpic.net/free-photo/fashion-stylist-work_329181-14385.jpg?_wi=2", imageAlt: "Design skridbord" },
{ id: "5", name: "Premium Hudvård Set", price: "599 SEK", imageSrc: "http://img.b2bpic.net/free-photo/minimal-composition-beauty-products_23-2148961332.jpg?_wi=2", imageAlt: "Premium hudvård set" },
{ id: "6", name: "Smart Fitness Tracker", price: "1,899 SEK", imageSrc: "http://img.b2bpic.net/free-photo/orange-yoga-mat-water-bottle-arrangement_23-2149442738.jpg?_wi=2", imageAlt: "Smart fitness tracker" }
{ id: "1", name: "Premium Trådlös Hörlur", price: "1,299 SEK", imageSrc: "http://img.b2bpic.net/free-photo/two-slices-oranges-white-desk_23-2148283714.jpg", imageAlt: "Premium trådlös hörlur" },
{ id: "2", name: "Ergonomisk Kontorsstol", price: "2,499 SEK", imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-vases-with-spring-flowers-living-room_169016-1546.jpg", imageAlt: "Ergonomisk kontorsstol" },
{ id: "3", name: "Moderna Köksverktyg", price: "799 SEK", imageSrc: "http://img.b2bpic.net/free-photo/wireless-earbuds-with-neon-cyberpunk-style-lighting_23-2151074256.jpg", imageAlt: "Moderna köksverktyg" },
{ id: "4", name: "Design Skridbord", price: "3,999 SEK", imageSrc: "http://img.b2bpic.net/free-photo/fashion-stylist-work_329181-14385.jpg", imageAlt: "Design skridbord" },
{ id: "5", name: "Premium Hudvård Set", price: "599 SEK", imageSrc: "http://img.b2bpic.net/free-photo/minimal-composition-beauty-products_23-2148961332.jpg", imageAlt: "Premium hudvård set" },
{ id: "6", name: "Smart Fitness Tracker", price: "1,899 SEK", imageSrc: "http://img.b2bpic.net/free-photo/orange-yoga-mat-water-bottle-arrangement_23-2149442738.jpg", imageAlt: "Smart fitness tracker" }
]}
/>
</div>

View File

@@ -1,51 +1,44 @@
"use client";
import { memo } from "react";
import useSvgTextLogo from "./useSvgTextLogo";
import { cls } from "@/lib/utils";
import React from 'react';
interface SvgTextLogoProps {
logoText: string;
adjustHeightFactor?: number;
verticalAlign?: "top" | "center";
text: string;
className?: string;
dominantBaseline?: DominantBaseline;
}
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
logoText,
adjustHeightFactor,
verticalAlign = "top",
className = "",
}) {
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
type DominantBaseline =
| 'auto'
| 'baseline'
| 'before-edge'
| 'after-edge'
| 'central'
| 'middle'
| 'mathematical'
| 'text-after-edge'
| 'text-before-edge';
export const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
text,
className,
dominantBaseline = 'middle',
}) => {
return (
<svg
ref={svgRef}
viewBox={viewBox}
className={cls("w-full", className)}
style={{ aspectRatio: aspectRatio }}
preserveAspectRatio="none"
role="img"
aria-label={`${logoText} logo`}
viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<text
ref={textRef}
x="0"
y={verticalAlign === "center" ? "50%" : "0"}
className="font-bold fill-current"
style={{
fontSize: "20px",
letterSpacing: "-0.02em",
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
}}
x="100"
y="100"
textAnchor="middle"
dominantBaseline={dominantBaseline}
className="text-lg font-bold"
>
{logoText}
{text}
</text>
</svg>
);
});
SvgTextLogo.displayName = "SvgTextLogo";
};
export default SvgTextLogo;