urpanels-ui-pack 0.0.2

package/dist/sections/ArticlesGrid/ArticlesGrid.svelte

@@ -0,0 +1,201 @@
+<script lang="ts">
+	/**
+	 * ArticlesGrid Component - Framework-agnostic article cards grid
+	 * Extracted from av-talha-web for reusability
+	 */
+
+	export interface Article {
+		slug: string;
+		title: string;
+		date?: string;
+		featuredImage?: string;
+		images?: string[];
+		summary?: string;
+		header?: string;
+		content?: string;
+	}
+
+	interface Props {
+		articles: Article[];
+		translations: {
+			articlesLabel: string;
+			title: string;
+			description: string;
+			readMore: string;
+			viewAll: string;
+		};
+		locale?: string;
+		onArticleClick?: (slug: string) => void;
+		onViewAllClick?: () => void;
+		imageResolver?: (path: string) => string;
+	}
+
+	let { 
+		articles = [],
+		translations,
+		locale = 'tr',
+		onArticleClick,
+		onViewAllClick,
+		imageResolver = (path: string) => path
+	}: Props = $props();
+
+	const formatDate = (dateStr: string, locale: string): string => {
+		const date = new Date(dateStr);
+		if (locale === 'tr') {
+			return date.toLocaleDateString('tr-TR', { 
+				year: 'numeric', 
+				month: 'long', 
+				day: 'numeric' 
+			});
+		}
+		return date.toLocaleDateString('en-US', { 
+			year: 'numeric', 
+			month: 'long', 
+			day: 'numeric' 
+		});
+	};
+
+	const handleArticleClick = (e: MouseEvent, slug: string) => {
+		if (onArticleClick) {
+			e.preventDefault();
+			onArticleClick(slug);
+		}
+	};
+
+	const handleViewAllClick = (e: MouseEvent) => {
+		if (onViewAllClick) {
+			e.preventDefault();
+			onViewAllClick();
+		}
+	};
+
+	const getArticleImage = (article: Article): string | null => {
+		return article.featuredImage || (article.images && article.images[0]) || null;
+	};
+
+	const getArticleExcerpt = (article: Article): string => {
+		const text = article.summary || article.header || article.content || '';
+		return text.replace(/<[^>]*>/g, '').substring(0, 150);
+	};
+</script>
+
+<section class="py-20 bg-gray-50">
+	<div class="container mx-auto px-4">
+		<div class="text-center mb-16">
+			<span class="text-primary-600 font-semibold text-sm uppercase tracking-wider mb-2 block">
+				{translations.articlesLabel}
+			</span>
+			<h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+				{translations.title}
+			</h2>
+			<p class="text-xl text-gray-600 max-w-2xl mx-auto">
+				{translations.description}
+			</p>
+		</div>
+		
+		<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-7xl mx-auto">
+			{#each articles as article}
+				<article class="group bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden transform hover:-translate-y-2">
+					{#if getArticleImage(article)}
+						<a 
+							href="#" 
+							onclick={(e) => handleArticleClick(e, article.slug)} 
+							class="block relative overflow-hidden aspect-[16/10]"
+						>
+							<div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10"></div>
+							<img 
+								src={imageResolver(getArticleImage(article)!)} 
+								alt={article.title}
+								class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"
+							/>
+						</a>
+					{:else}
+						<div class="aspect-[16/10] bg-gradient-to-br from-primary-100 to-primary-50 flex items-center justify-center">
+							<svg class="w-16 h-16 text-primary-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+							</svg>
+						</div>
+					{/if}
+					
+					<div class="p-8">
+						{#if article.date}
+							<div class="flex items-center text-sm text-gray-500 mb-4">
+								<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
+								</svg>
+								{formatDate(article.date, locale)}
+							</div>
+						{/if}
+						
+						<h3 class="text-2xl font-bold text-gray-900 mb-4 line-clamp-2 group-hover:text-primary-600 transition-colors">
+							<a href="#" onclick={(e) => handleArticleClick(e, article.slug)}>
+								{article.title}
+							</a>
+						</h3>
+						
+						{#if article.summary || article.header || article.content}
+							<p class="text-gray-600 mb-6 line-clamp-3 leading-relaxed">
+								{getArticleExcerpt(article)}...
+							</p>
+						{/if}
+						
+						<a 
+							href="#" 
+							onclick={(e) => handleArticleClick(e, article.slug)} 
+							class="inline-flex items-center text-primary-600 hover:text-primary-700 font-semibold group/link"
+						>
+							<span>{translations.readMore}</span>
+							<svg class="w-5 h-5 ml-2 transform group-hover/link:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+							</svg>
+						</a>
+					</div>
+				</article>
+			{/each}
+		</div>
+		
+		<div class="text-center mt-16">
+			<a 
+				href="#" 
+				onclick={handleViewAllClick}
+				class="inline-flex items-center px-8 py-4 bg-gradient-to-r from-[#d6bb6d] via-[#c9a858] to-[#b89544] text-white font-bold text-lg rounded-xl hover:from-[#e0c97d] hover:via-[#d4b868] hover:to-[#c9a858] transform hover:scale-105 transition-all shadow-xl hover:shadow-2xl"
+			>
+				<span>{translations.viewAll}</span>
+				<svg class="w-6 h-6 ml-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+				</svg>
+			</a>
+		</div>
+	</div>
+</section>
+
+<style>
+	/* Scoped Tailwind-like styles - framework agnostic */
+	section :global(.container) {
+		max-width: 1280px;
+	}
+
+	/* Line clamp utility classes */
+	:global(.line-clamp-2) {
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	:global(.line-clamp-3) {
+		display: -webkit-box;
+		-webkit-line-clamp: 3;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+	}
+
+	/* Primary color fallbacks if not defined in parent */
+	section {
+		--primary-50: #fef5e7;
+		--primary-100: #fce8c4;
+		--primary-300: #f5c76e;
+		--primary-600: #d6bb6d;
+		--primary-700: #c9a858;
+	}
+</style>

package/dist/sections/ArticlesGrid/ArticlesGrid.svelte.d.ts

@@ -0,0 +1,31 @@
+/**
+ * ArticlesGrid Component - Framework-agnostic article cards grid
+ * Extracted from av-talha-web for reusability
+ */
+export interface Article {
+    slug: string;
+    title: string;
+    date?: string;
+    featuredImage?: string;
+    images?: string[];
+    summary?: string;
+    header?: string;
+    content?: string;
+}
+interface Props {
+    articles: Article[];
+    translations: {
+        articlesLabel: string;
+        title: string;
+        description: string;
+        readMore: string;
+        viewAll: string;
+    };
+    locale?: string;
+    onArticleClick?: (slug: string) => void;
+    onViewAllClick?: () => void;
+    imageResolver?: (path: string) => string;
+}
+declare const ArticlesGrid: import("svelte").Component<Props, {}, "">;
+type ArticlesGrid = ReturnType<typeof ArticlesGrid>;
+export default ArticlesGrid;

package/dist/sections/ArticlesGrid/README.md

@@ -0,0 +1,229 @@
+# ArticlesGrid Component
+
+Framework-agnostic articles grid component extracted from av-talha-web project.
+
+## Features
+
+- ✅ Responsive 3-column grid (mobile: 1 column)
+- ✅ Article cards with image, date, title, excerpt
+- ✅ Hover animations & transitions
+- ✅ Framework-agnostic event handlers
+- ✅ Customizable translations
+- ✅ Optional image resolver
+- ✅ Fallback placeholder for articles without images
+- ✅ View all button with custom click handler
+
+## Usage
+
+```svelte
+<script>
+  import { ArticlesGrid } from '@urga-panel/urPanels-ui-pack/sections';
+
+  const articles = [
+    {
+      slug: 'article-1',
+      title: 'Article Title',
+      date: '2024-01-15',
+      featuredImage: '/images/article1.jpg',
+      summary: 'Article summary text...',
+    },
+    // ... more articles
+  ];
+
+  const translations = {
+    articlesLabel: 'ARTICLES',
+    title: 'Latest Articles',
+    description: 'Read our latest legal insights and updates',
+    readMore: 'Read More',
+    viewAll: 'View All Articles'
+  };
+
+  function handleArticleClick(slug: string) {
+    // Navigate to article detail page
+    window.location.href = `/articles/${slug}`;
+  }
+
+  function handleViewAllClick() {
+    // Navigate to articles list page
+    window.location.href = '/articles';
+  }
+</script>
+
+<ArticlesGrid 
+  {articles}
+  {translations}
+  locale="en"
+  onArticleClick={handleArticleClick}
+  onViewAllClick={handleViewAllClick}
+/>
+```
+
+## Props
+
+### `articles` (required)
+Type: `Article[]`
+
+Array of article objects:
+```typescript
+interface Article {
+  slug: string;          // Unique identifier
+  title: string;         // Article title
+  date?: string;         // ISO date string (e.g., '2024-01-15')
+  featuredImage?: string; // Primary image URL
+  images?: string[];     // Fallback images array
+  summary?: string;      // Article summary/excerpt
+  header?: string;       // Fallback excerpt source
+  content?: string;      // Fallback excerpt source (HTML stripped)
+}
+```
+
+### `translations` (required)
+Type: `object`
+
+Localized text content:
+```typescript
+{
+  articlesLabel: string;  // Small label above title
+  title: string;          // Main section heading
+  description: string;    // Subtitle/description
+  readMore: string;       // "Read More" link text
+  viewAll: string;        // "View All" button text
+}
+```
+
+### `locale` (optional)
+Type: `string`  
+Default: `'tr'`
+
+Locale for date formatting (`'tr'` or `'en'`).
+
+### `onArticleClick` (optional)
+Type: `(slug: string) => void`
+
+Click handler for article cards and "Read More" links.
+
+### `onViewAllClick` (optional)
+Type: `() => void`
+
+Click handler for "View All Articles" button.
+
+### `imageResolver` (optional)
+Type: `(path: string) => string`  
+Default: `(path) => path`
+
+Function to resolve/transform image paths (e.g., CDN URLs).
+
+## Examples
+
+### With SvelteKit
+
+```svelte
+<script lang="ts">
+  import { ArticlesGrid } from '@urga-panel/urPanels-ui-pack/sections';
+  import { goto } from '$app/navigation';
+  import { localizedPath, locale, t } from '$lib/i18n';
+
+  export let data;
+
+  const translations = {
+    articlesLabel: $t('nav.articles'),
+    title: $t('home.articles.title'),
+    description: $t('home.articles.description'),
+    readMore: $t('articles.readMore'),
+    viewAll: $t('home.articles.viewAll')
+  };
+
+  function handleArticleClick(slug: string) {
+    goto(localizedPath(`/articles/${slug}`, $locale));
+  }
+
+  function handleViewAllClick() {
+    goto(localizedPath('/articles', $locale));
+  }
+</script>
+
+<ArticlesGrid 
+  articles={data.featuredBlogs}
+  {translations}
+  locale={$locale}
+  onArticleClick={handleArticleClick}
+  onViewAllClick={handleViewAllClick}
+/>
+```
+
+### With Custom Image Resolver
+
+```svelte
+<script>
+  const imageResolver = (path) => {
+    // Add CDN prefix
+    if (path.startsWith('/')) {
+      return `https://cdn.example.com${path}`;
+    }
+    return path;
+  };
+</script>
+
+<ArticlesGrid 
+  {articles}
+  {translations}
+  {imageResolver}
+/>
+```
+
+### Turkish Locale
+
+```svelte
+<script>
+  const translationsTr = {
+    articlesLabel: 'MAKALELER',
+    title: 'Son Makaleler',
+    description: 'En güncel hukuki içeriklerimizi okuyun',
+    readMore: 'Devamını Oku',
+    viewAll: 'Tüm Makaleleri Görüntüle'
+  };
+</script>
+
+<ArticlesGrid 
+  {articles}
+  translations={translationsTr}
+  locale="tr"
+/>
+```
+
+## Styling
+
+Component uses Tailwind-like utility classes. Includes scoped CSS with fallback primary color variables:
+
+```css
+--primary-50: #fef5e7;
+--primary-100: #fce8c4;
+--primary-300: #f5c76e;
+--primary-600: #d6bb6d;
+--primary-700: #c9a858;
+```
+
+Override by defining these CSS variables in your parent component or global styles.
+
+## Layout
+
+- **Grid**: 1 column (mobile), 3 columns (md+)
+- **Card Aspect Ratio**: 16:10 for images
+- **Max Width**: 1280px (7xl container)
+- **Spacing**: py-20 section, gap-8 grid
+
+## Accessibility
+
+- Semantic `<article>` elements
+- Proper heading hierarchy
+- Alt text on images
+- SVG icons with proper viewBox
+- Keyboard-friendly links
+
+## Browser Support
+
+Works in all modern browsers with CSS Grid and Flexbox support.
+
+## Version
+
+Component extracted from av-talha-web (January 2025).

package/dist/sections/ArticlesGrid/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ArticlesGrid } from './ArticlesGrid.svelte';
+export type { Article } from './ArticlesGrid.svelte';

package/dist/sections/ArticlesGrid/index.js

@@ -0,0 +1 @@
+export { default as ArticlesGrid } from './ArticlesGrid.svelte';

package/dist/sections/FeaturedGalleryGrid/FeaturedGalleryGrid.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	/**
+	 * FeaturedGalleryGrid Component - Framework-agnostic gallery grid
+	 * Extracted from turk-cin-dernek-website
+	 * Layout: Large featured image on left, 3 smaller images stacked on right
+	 */
+
+	export interface GalleryItem {
+		image: string;
+		alt: string;
+		text?: string;
+		href?: string;
+	}
+
+	interface Props {
+		featuredItem: GalleryItem;
+		smallItems: GalleryItem[];
+		onItemClick?: (href: string) => void;
+		imageResolver?: (path: string) => string;
+		placeholderImage?: string;
+	}
+
+	let { 
+		featuredItem,
+		smallItems = [],
+		onItemClick,
+		imageResolver = (path: string) => path,
+		placeholderImage = 'https://placehold.co/800x500'
+	}: Props = $props();
+
+	const handleItemClick = (e: MouseEvent, href?: string) => {
+		if (onItemClick && href) {
+			e.preventDefault();
+			onItemClick(href);
+		}
+	};
+
+	const resolveImage = (image?: string): string => {
+		if (!image || !image.trim()) {
+			return placeholderImage;
+		}
+		return imageResolver(image);
+	};
+</script>
+
+<div class="container mx-auto">
+	<div class="mb-12 grid grid-cols-1 gap-y-4 md:grid-cols-3 md:gap-4">
+		<!-- Sol Büyük Resim (Featured) -->
+		<a
+			class="group relative col-span-2 block cursor-pointer overflow-hidden rounded-lg shadow-md max-h-[600px]"
+			href={featuredItem.href ?? '/'}
+			onclick={(e) => handleItemClick(e, featuredItem.href)}
+		>
+			<img
+				src={resolveImage(featuredItem.image)}
+				alt={featuredItem.alt}
+				class="h-auto w-full object-cover transition-transform duration-300 group-hover:scale-[1.01]"
+			/>
+			<div
+				class="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent"
+			></div>
+			{#if featuredItem.text}
+				<div class="pointer-events-none absolute inset-x-0 bottom-0 p-4 text-white md:p-6">
+					<h3 class="text-lg font-semibold drop-shadow md:text-2xl">
+						{featuredItem.text}
+					</h3>
+				</div>
+			{/if}
+		</a>
+
+		<!-- Sağdaki 3 Küçük Resim -->
+		<div class="flex flex-col justify-between gap-4 max-h-[600px]">
+			{#each smallItems.slice(0, 3) as item}
+				<a
+					class="group relative block max-h-[200px] cursor-pointer overflow-hidden rounded-lg shadow-md"
+					href={item.href ?? '/'}
+					onclick={(e) => handleItemClick(e, item.href)}
+				>
+					<img
+						src={resolveImage(item.image)}
+						alt={item.alt}
+						class="h-auto w-full object-cover transition-transform duration-300 group-hover:scale-105"
+					/>
+					<div
+						class="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent"
+					></div>
+					{#if item.text}
+						<div class="pointer-events-none absolute inset-x-0 bottom-0 p-3 text-white md:p-4">
+							<h4 class="text-base font-semibold drop-shadow md:text-lg">{item.text}</h4>
+						</div>
+					{/if}
+				</a>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	/* Container max-width */
+	.container {
+		max-width: 1280px;
+	}
+
+	/* Ensure proper aspect ratio and object-fit */
+	img {
+		display: block;
+	}
+
+	/* Drop shadow utility for text */
+	.drop-shadow {
+		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
+	}
+
+	/* Pointer events none utility */
+	.pointer-events-none {
+		pointer-events: none;
+	}
+</style>

package/dist/sections/FeaturedGalleryGrid/FeaturedGalleryGrid.svelte.d.ts

@@ -0,0 +1,21 @@
+/**
+ * FeaturedGalleryGrid Component - Framework-agnostic gallery grid
+ * Extracted from turk-cin-dernek-website
+ * Layout: Large featured image on left, 3 smaller images stacked on right
+ */
+export interface GalleryItem {
+    image: string;
+    alt: string;
+    text?: string;
+    href?: string;
+}
+interface Props {
+    featuredItem: GalleryItem;
+    smallItems: GalleryItem[];
+    onItemClick?: (href: string) => void;
+    imageResolver?: (path: string) => string;
+    placeholderImage?: string;
+}
+declare const FeaturedGalleryGrid: import("svelte").Component<Props, {}, "">;
+type FeaturedGalleryGrid = ReturnType<typeof FeaturedGalleryGrid>;
+export default FeaturedGalleryGrid;