View Details
ギャラリー
カルーセルギャラリー
#インタラクティブ#ミニマル+1
大きなフィーチャード画像と小さなグリッドを組み合わせた、注目プロジェクトを強調するギャラリーセクション
Source Code
tsx
183 lines
1export function GalleryFeatured001() {2 const featured = {3 title: "デジタルブランディング",4 category: "ブランディング",5 year: "2025",6 description:7 "統一されたビジュアル言語で、デジタル上のブランド体験を再構築しました。",8 };910 const projects = [11 {12 title: "SaaS ダッシュボード",13 category: "プロダクトデザイン",14 year: "2025",15 },16 {17 title: "建築ポートフォリオ",18 category: "ウェブデザイン",19 year: "2024",20 },21 {22 title: "モバイルコマース",23 category: "アプリデザイン",24 year: "2024",25 },26 {27 title: "メディアプラットフォーム",28 category: "プロダクトデザイン",29 year: "2025",30 },31 ];3233 return (34 <section className="bg-background py-28 border-t border-border">35 <div className="mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">36 {/* ヘッダー */}37 <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">38 <div>39 <p className="text-[10px] uppercase tracking-[0.3em] text-muted-foreground">40 Featured Work41 </p>42 <h2 className="mt-3 text-2xl font-medium tracking-wide text-foreground sm:text-3xl">43 注目のプロジェクト44 </h2>45 </div>46 <p className="max-w-sm text-sm font-light leading-relaxed text-muted-foreground">47 最新の制作実績をご紹介します。戦略からデザイン、実装までを一貫して手がけました。48 </p>49 </div>5051 <div className="mt-4 h-px bg-border/40" />5253 {/* フィーチャードプロジェクト */}54 <div className="mt-12 group">55 <div className="relative aspect-[16/9] overflow-hidden rounded-lg border border-border bg-muted">56 <div className="absolute inset-0 bg-gradient-to-br from-foreground/5 via-foreground/8 to-foreground/12 transition-all duration-700 group-hover:from-foreground/8 group-hover:via-foreground/12 group-hover:to-foreground/18" />57 {/* コーナードット */}58 <div className="absolute left-4 top-4 h-1.5 w-1.5 rounded-full bg-foreground/20" />59 <div className="absolute right-4 top-4 h-1.5 w-1.5 rounded-full bg-foreground/20" />60 <div className="absolute bottom-4 left-4 h-1.5 w-1.5 rounded-full bg-foreground/20" />61 <div className="absolute bottom-4 right-4 h-1.5 w-1.5 rounded-full bg-foreground/20" />62 {/* 中央の装飾 */}63 <div className="absolute inset-0 flex items-center justify-center">64 <div className="flex flex-col items-center gap-3">65 <div className="h-px w-12 bg-foreground/20" />66 <p className="text-[10px] uppercase tracking-[0.3em] text-foreground/40">67 Featured68 </p>69 <div className="h-px w-12 bg-foreground/20" />70 </div>71 </div>72 {/* ホバー時の矢印 */}73 <div className="absolute right-6 bottom-6 opacity-0 transition-opacity duration-300 group-hover:opacity-100">74 <div className="flex h-10 w-10 items-center justify-center rounded-full border border-border bg-background/90 backdrop-blur">75 <svg76 className="h-4 w-4 text-foreground"77 fill="none"78 stroke="currentColor"79 viewBox="0 0 24 24"80 >81 <path82 strokeLinecap="round"83 strokeLinejoin="round"84 strokeWidth={1.5}85 d="M17 8l4 4m0 0l-4 4m4-4H3"86 />87 </svg>88 </div>89 </div>90 </div>91 {/* フィーチャード情報 */}92 <div className="mt-5 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">93 <div>94 <h3 className="text-lg font-medium tracking-wide text-foreground transition-colors duration-200 group-hover:text-muted-foreground">95 {featured.title}96 </h3>97 <p className="mt-2 max-w-md text-sm font-light leading-relaxed text-muted-foreground">98 {featured.description}99 </p>100 </div>101 <div className="flex items-center gap-4">102 <span className="text-xs tracking-wide text-muted-foreground/70">103 {featured.category}104 </span>105 <span className="text-[10px] tracking-[0.2em] text-muted-foreground/50">106 {featured.year}107 </span>108 </div>109 </div>110 </div>111112 <div className="mt-12 h-px bg-border/40" />113114 {/* プロジェクトグリッド */}115 <div className="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2">116 {projects.map((project) => (117 <div key={project.title} className="group/card">118 <div className="relative aspect-[4/3] overflow-hidden rounded-lg border border-border bg-muted">119 <div className="absolute inset-0 bg-gradient-to-br from-foreground/3 to-foreground/8 transition-all duration-500 group-hover/card:from-foreground/8 group-hover/card:to-foreground/14" />120 {/* コーナードット */}121 <div className="absolute left-3 top-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />122 <div className="absolute right-3 top-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />123 <div className="absolute bottom-3 left-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />124 <div className="absolute bottom-3 right-3 h-1.5 w-1.5 rounded-full bg-foreground/20" />125 {/* ホバー時アイコン */}126 <div className="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 group-hover/card:opacity-100">127 <div className="flex h-10 w-10 items-center justify-center rounded-full border border-border bg-background/90 backdrop-blur">128 <svg129 className="h-4 w-4 text-foreground"130 fill="none"131 stroke="currentColor"132 viewBox="0 0 24 24"133 >134 <path135 strokeLinecap="round"136 strokeLinejoin="round"137 strokeWidth={1.5}138 d="M17 8l4 4m0 0l-4 4m4-4H3"139 />140 </svg>141 </div>142 </div>143 </div>144 <div className="mt-4 flex items-start justify-between">145 <div>146 <h3 className="text-sm font-medium tracking-wide text-foreground transition-colors duration-200 group-hover/card:text-muted-foreground">147 {project.title}148 </h3>149 <p className="mt-1 text-xs tracking-wide text-muted-foreground/70">150 {project.category}151 </p>152 </div>153 <span className="text-[10px] tracking-[0.2em] text-muted-foreground/50">154 {project.year}155 </span>156 </div>157 </div>158 ))}159 </div>160161 {/* もっと見る */}162 <div className="mt-14 flex justify-center">163 <button className="group/btn inline-flex items-center gap-3 text-sm font-medium tracking-wide text-foreground transition-colors duration-200 hover:text-muted-foreground">164 すべてのプロジェクトを見る165 <svg166 className="h-4 w-4 transition-transform duration-200 group-hover/btn:translate-x-1"167 fill="none"168 stroke="currentColor"169 viewBox="0 0 24 24"170 >171 <path172 strokeLinecap="round"173 strokeLinejoin="round"174 strokeWidth={1.5}175 d="M17 8l4 4m0 0l-4 4m4-4H3"176 />177 </svg>178 </button>179 </div>180 </div>181 </section>182 );183}
