[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import HeroSection from "./components/hero-section" import CollectionSection from "./components/collection-section" import AboutSection from "./components/about-section" export default function Home() { return (

) } [V0_FILE]css:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer utilities { .scrollbar-hide::-webkit-scrollbar { display: none; } .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; } } /* その他の既存のスタイル */ [V0_FILE]typescriptreact:file="app/components/category-carousel.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useRef, useEffect } from "react" import { motion } from "framer-motion" import { SaladIcon as Dress, ShoppingBag, Shirt, FootprintsIcon as Shoe, Watch } from "lucide-react" export const categories = [ { name: "Dresses", icon: Dress, color: "#FFD1DC", image: "https://picsum.photos/id/1011/600/400", subtitle: "Elegance in Every Stitch", }, { name: "Bags", icon: ShoppingBag, color: "#FFDAB9", image: "https://picsum.photos/id/1012/600/400", subtitle: "Carry Your Style", }, { name: "Tops", icon: Shirt, color: "#E6E6FA", image: "https://picsum.photos/id/1013/600/400", subtitle: "Express Your Essence", }, { name: "Shoes", icon: Shoe, color: "#F0FFF0", image: "https://picsum.photos/id/1014/600/400", subtitle: "Walk in Confidence", }, { name: "Accessories", icon: Watch, color: "#F0F8FF", image: "https://picsum.photos/id/1015/600/400", subtitle: "Details that Dazzle", }, ] interface CategoryCarouselProps { activeIndex: number setActiveIndex: (index: number) => void } export default function CategoryCarousel({ activeIndex, setActiveIndex }: CategoryCarouselProps) { const carouselRef = useRef(null) useEffect(() => { if (carouselRef.current) { const scrollPosition = activeIndex * (carouselRef.current.offsetWidth / 5) carouselRef.current.scrollTo({ left: scrollPosition, behavior: "smooth" }) } }, [activeIndex]) const handleClick = (index: number) => { setActiveIndex(index) } return (

{categories.map((category, index) => (

handleClick(index)} > {category.name}

))}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import { Noto_Serif, Noto_Serif_JP } from "next/font/google" import "./globals.css" const notoSerif = Noto_Serif({ weight: "300", style: "italic", subsets: ["latin"], }) const notoSerifJP = Noto_Serif_JP({ weight: "200", subsets: ["latin"], }) export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/components/collection-section.tsx" isEdit="true" "use client" import { useRef, useState } from "react" import { motion, useScroll, useTransform, useInView } from "framer-motion" import Image from "next/image" import { Card, CardContent } from "@/components/ui/card" import { ChevronLeft, ChevronRight } from "lucide-react" import CategoryCarousel, { categories } from "./category-carousel" const collectionItems = [ { id: 1, name: "Summer Dress", price: "$129", image: "https://picsum.photos/id/1011/300/400" }, { id: 2, name: "Leather Jacket", price: "$249", image: "https://picsum.photos/id/1015/300/400" }, { id: 3, name: "Silk Blouse", price: "$89", image: "https://picsum.photos/id/1016/300/400" }, { id: 4, name: "Denim Jeans", price: "$79", image: "https://picsum.photos/id/1019/300/400" }, { id: 5, name: "Cashmere Sweater", price: "$159", image: "https://picsum.photos/id/1021/300/400" }, { id: 6, name: "Floral Skirt", price: "$69", image: "https://picsum.photos/id/1024/300/400" }, ] export default function CollectionSection() { const [activeIndex, setActiveIndex] = useState(2) const carouselRef = useRef(null) const sectionRef = useRef(null) const isInView = useInView(sectionRef, { once: false, amount: 0.3 }) const { scrollX } = useScroll({ container: carouselRef }) const opacity = useTransform(scrollX, [0, 100], [1, 0]) const handleScroll = (direction: "left" | "right") => { if (carouselRef.current) { const scrollAmount = direction === "left" ? -300 : 300 carouselRef.current.scrollBy({ left: scrollAmount, behavior: "smooth" }) } } return (

{categories[activeIndex].subtitle} 私たちのコレクションは、細部まで丁寧に作り上げられた時代を超えた作品です。現代の女性のために、エレガンスと快適さを融合させ、力強さと創造性を引き出すデザインを心がけています。一つ一つのアイテムが、あなたの個性を輝かせる特別な存在となることでしょう。

{collectionItems.map((item, index) => (

{item.name}

{item.price}

))}

) } [V0_FILE]typescriptreact:file="app/components/about-section.tsx" isEdit="true" "use client" import { motion } from "framer-motion" import Image from "next/image" export default function AboutSection() { return (

ブランドについて

2010年に設立された私たちのブランドは、持続可能で倫理的なファッションの最前線に立ち続けています。美しさだけでなく、周囲の世界にポジティブな影響を与える、時代を超越したピースの創造を信念としています。品質の高い職人技と革新的なデザインへの私たちのコミットメントは、スタイルと実質の両方を大切にする方々から支持されています。コレクションの各ピースには、献身、創造性、そして地球への敬意が込められた物語があります。

持続可能性

100%エコフレンドリーな素材

倫理的

公正な賃金と安全な労働環境

革新

最先端のデザインと技術

) } [V0_FILE]typescriptreact:file="app/components/hero-section.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence, useScroll, useTransform } from "framer-motion" import Image from "next/image" const navigation = [ { name: "Home", href: "#" }, { name: "Collection", href: "#" }, { name: "About", href: "#" }, { name: "Contact", href: "#" }, ] const images = [ "https://picsum.photos/id/1011/1200/800", "https://picsum.photos/id/1012/1200/800", "https://picsum.photos/id/1013/1200/800", "https://picsum.photos/id/1014/1200/800", ] export default function HeroSection() { const [isMenuOpen, setIsMenuOpen] = useState(false) const [currentImageIndex, setCurrentImageIndex] = useState(0) const { scrollY } = useScroll() const imageScale = useTransform(scrollY, [0, 300], [1, 1.5]) const imagePosition = useTransform(scrollY, [0, 300], ["80%", "100%"]) const opacity = useTransform(scrollY, [0, 300], [1, 0]) useEffect(() => { const interval = setInterval(() => { setCurrentImageIndex((prevIndex) => (prevIndex + 1) % images.length) }, 5000) // Change image every 5 seconds return () => clearInterval(interval) }, []) return (

{/* Hamburger menu for mobile */} {/* Mobile menu */} {isMenuOpen && (

{navigation.map((item) => ( {item.name} ))}

studio veco )} {/* Desktop navigation */}

{item.name}

{/* Main content with image */} Fashion model

{/* Company name */} studio veco {/* Title overlay */} PEDAGOGY
FIRST

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This