Merge version_1 into main #2
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user