Skip to content

Commit 0e92069

Browse files
swarnavaswarnava
committed
initial commit
0 parents  commit 0e92069

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

71 files changed

+5849
-0
lines changed

‎app/globals.css

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
body {
6+
font-family: Arial, Helvetica, sans-serif;
7+
}
8+
9+
@layer utilities {
10+
.text-balance {
11+
text-wrap: balance;
12+
}
13+
}
14+
15+
@layer base {
16+
:root {
17+
--background: 0 0% 100%;
18+
--foreground: 0 0% 3.9%;
19+
--card: 0 0% 100%;
20+
--card-foreground: 0 0% 3.9%;
21+
--popover: 0 0% 100%;
22+
--popover-foreground: 0 0% 3.9%;
23+
--primary: 0 0% 9%;
24+
--primary-foreground: 0 0% 98%;
25+
--secondary: 0 0% 96.1%;
26+
--secondary-foreground: 0 0% 9%;
27+
--muted: 0 0% 96.1%;
28+
--muted-foreground: 0 0% 45.1%;
29+
--accent: 0 0% 96.1%;
30+
--accent-foreground: 0 0% 9%;
31+
--destructive: 0 84.2% 60.2%;
32+
--destructive-foreground: 0 0% 98%;
33+
--border: 0 0% 89.8%;
34+
--input: 0 0% 89.8%;
35+
--ring: 0 0% 3.9%;
36+
--chart-1: 12 76% 61%;
37+
--chart-2: 173 58% 39%;
38+
--chart-3: 197 37% 24%;
39+
--chart-4: 43 74% 66%;
40+
--chart-5: 27 87% 67%;
41+
--radius: 0.5rem;
42+
--sidebar-background: 0 0% 98%;
43+
--sidebar-foreground: 240 5.3% 26.1%;
44+
--sidebar-primary: 240 5.9% 10%;
45+
--sidebar-primary-foreground: 0 0% 98%;
46+
--sidebar-accent: 240 4.8% 95.9%;
47+
--sidebar-accent-foreground: 240 5.9% 10%;
48+
--sidebar-border: 220 13% 91%;
49+
--sidebar-ring: 217.2 91.2% 59.8%;
50+
}
51+
.dark {
52+
--background: 0 0% 3.9%;
53+
--foreground: 0 0% 98%;
54+
--card: 0 0% 3.9%;
55+
--card-foreground: 0 0% 98%;
56+
--popover: 0 0% 3.9%;
57+
--popover-foreground: 0 0% 98%;
58+
--primary: 0 0% 98%;
59+
--primary-foreground: 0 0% 9%;
60+
--secondary: 0 0% 14.9%;
61+
--secondary-foreground: 0 0% 98%;
62+
--muted: 0 0% 14.9%;
63+
--muted-foreground: 0 0% 63.9%;
64+
--accent: 0 0% 14.9%;
65+
--accent-foreground: 0 0% 98%;
66+
--destructive: 0 62.8% 30.6%;
67+
--destructive-foreground: 0 0% 98%;
68+
--border: 0 0% 14.9%;
69+
--input: 0 0% 14.9%;
70+
--ring: 0 0% 83.1%;
71+
--chart-1: 220 70% 50%;
72+
--chart-2: 160 60% 45%;
73+
--chart-3: 30 80% 55%;
74+
--chart-4: 280 65% 60%;
75+
--chart-5: 340 75% 55%;
76+
--sidebar-background: 240 5.9% 10%;
77+
--sidebar-foreground: 240 4.8% 95.9%;
78+
--sidebar-primary: 224.3 76.3% 48%;
79+
--sidebar-primary-foreground: 0 0% 100%;
80+
--sidebar-accent: 240 3.7% 15.9%;
81+
--sidebar-accent-foreground: 240 4.8% 95.9%;
82+
--sidebar-border: 240 3.7% 15.9%;
83+
--sidebar-ring: 217.2 91.2% 59.8%;
84+
}
85+
}
86+
87+
@layer base {
88+
* {
89+
@apply border-border;
90+
}
91+
body {
92+
@apply bg-background text-foreground;
93+
}
94+
}

‎app/layout.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import type React from "react"
2+
import "./globals.css"
3+
import type { Metadata } from "next"
4+
import { Inter } from "next/font/google"
5+
6+
const inter = Inter({ subsets: ["latin"] })
7+
8+
export const metadata: Metadata = {
9+
title: "Next.js Image Optimization Example",
10+
description: "Demonstrating image optimization with Next.js",
11+
generator: 'v0.dev'
12+
}
13+
14+
export default function RootLayout({
15+
children,
16+
}: {
17+
children: React.ReactNode
18+
}) {
19+
return (
20+
<html lang="en">
21+
<body className={inter.className}>{children}</body>
22+
</html>
23+
)
24+
}
25+
26+
27+
28+
import './globals.css'

‎app/page.tsx

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import Image from "next/image"
2+
import { Card, CardContent } from "@/components/ui/card"
3+
4+
export default function Home() {
5+
return (
6+
<main className="container mx-auto py-10 px-4">
7+
<h1 className="text-3xl font-bold mb-8 text-center">Image Optimization Example</h1>
8+
9+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
10+
<Card>
11+
<CardContent className="pt-6">
12+
<div className="relative aspect-square mb-4 overflow-hidden rounded-lg">
13+
<Image
14+
src="https://wear-it-web-v1-na.s3.amazonaws.com/stylist/STYLIST-McKenzie-Roth/Look3_McKenzie-Roth/subcover/Wear-It-AI-Stylist-McKenzie-Roth-Look3-Flat.png"
15+
alt="Stylist McKenzie Roth Look 3 Flat"
16+
fill
17+
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
18+
className="object-cover"
19+
priority
20+
/>
21+
</div>
22+
<h2 className="text-xl font-semibold mb-2">Look 3 Flat View</h2>
23+
<p className="text-gray-500">Optimized with next/image - using fill property with aspect ratio container</p>
24+
</CardContent>
25+
</Card>
26+
27+
<Card>
28+
<CardContent className="pt-6">
29+
<Image
30+
src="https://wear-it-web-v1-na.s3.amazonaws.com/stylist/STYLIST-McKenzie-Roth/Look3_McKenzie-Roth/subcover/Wear-It-AI-Stylist-McKenzie-Roth-Look3-Flat.png"
31+
alt="Stylist McKenzie Roth Look 3 Flat"
32+
width={500}
33+
height={500}
34+
className="rounded-lg mb-4 w-full h-auto"
35+
/>
36+
<h2 className="text-xl font-semibold mb-2">Look 3 Flat View</h2>
37+
<p className="text-gray-500">Optimized with next/image - using explicit width/height</p>
38+
</CardContent>
39+
</Card>
40+
41+
<Card>
42+
<CardContent className="pt-6">
43+
<div className="relative aspect-video mb-4 overflow-hidden rounded-lg">
44+
<Image
45+
src="https://wear-it-web-v1-na.s3.amazonaws.com/stylist/STYLIST-McKenzie-Roth/Look3_McKenzie-Roth/cover/Wear-It-AI-Stylist-McKenzie-Roth-Look3-Cover.png"
46+
alt="Stylist McKenzie Roth Look 3 Cover"
47+
fill
48+
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
49+
className="object-cover"
50+
placeholder="blur"
51+
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=="
52+
/>
53+
</div>
54+
<h2 className="text-xl font-semibold mb-2">Look 3 Cover</h2>
55+
<p className="text-gray-500">Optimized with blur placeholder for better loading experience</p>
56+
</CardContent>
57+
</Card>
58+
</div>
59+
60+
<div className="mt-12 bg-gray-50 p-6 rounded-lg">
61+
<h2 className="text-2xl font-bold mb-4">Image Optimization Benefits</h2>
62+
<ul className="list-disc pl-6 space-y-2">
63+
<li>Automatic size optimization - serving correctly sized images for each device</li>
64+
<li>Visual stability - preventing layout shift when images load</li>
65+
<li>Faster page loads - lazy loading images as they enter the viewport</li>
66+
<li>Modern formats - automatically serving WebP and AVIF when supported</li>
67+
<li>Responsive images - using the sizes attribute to load appropriate image sizes</li>
68+
</ul>
69+
</div>
70+
</main>
71+
)
72+
}
73+

‎components.json

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "default",
4+
"rsc": true,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.ts",
8+
"css": "app/globals.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils",
16+
"ui": "@/components/ui",
17+
"lib": "@/lib",
18+
"hooks": "@/hooks"
19+
},
20+
"iconLibrary": "lucide"
21+
}

‎components/theme-provider.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
'use client'
2+
3+
import * as React from 'react'
4+
import {
5+
ThemeProvider as NextThemesProvider,
6+
type ThemeProviderProps,
7+
} from 'next-themes'
8+
9+
export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
10+
return <NextThemesProvider {...props}>{children}</NextThemesProvider>
11+
}

‎components/ui/accordion.tsx

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
"use client"
2+
3+
import * as React from "react"
4+
import * as AccordionPrimitive from "@radix-ui/react-accordion"
5+
import { ChevronDown } from "lucide-react"
6+
7+
import { cn } from "@/lib/utils"
8+
9+
const Accordion = AccordionPrimitive.Root
10+
11+
const AccordionItem = React.forwardRef<
12+
React.ElementRef<typeof AccordionPrimitive.Item>,
13+
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
14+
>(({ className, ...props }, ref) => (
15+
<AccordionPrimitive.Item
16+
ref={ref}
17+
className={cn("border-b", className)}
18+
{...props}
19+
/>
20+
))
21+
AccordionItem.displayName = "AccordionItem"
22+
23+
const AccordionTrigger = React.forwardRef<
24+
React.ElementRef<typeof AccordionPrimitive.Trigger>,
25+
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
26+
>(({ className, children, ...props }, ref) => (
27+
<AccordionPrimitive.Header className="flex">
28+
<AccordionPrimitive.Trigger
29+
ref={ref}
30+
className={cn(
31+
"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
32+
className
33+
)}
34+
{...props}
35+
>
36+
{children}
37+
<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
38+
</AccordionPrimitive.Trigger>
39+
</AccordionPrimitive.Header>
40+
))
41+
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
42+
43+
const AccordionContent = React.forwardRef<
44+
React.ElementRef<typeof AccordionPrimitive.Content>,
45+
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
46+
>(({ className, children, ...props }, ref) => (
47+
<AccordionPrimitive.Content
48+
ref={ref}
49+
className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
50+
{...props}
51+
>
52+
<div className={cn("pb-4 pt-0", className)}>{children}</div>
53+
</AccordionPrimitive.Content>
54+
))
55+
56+
AccordionContent.displayName = AccordionPrimitive.Content.displayName
57+
58+
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

0 commit comments

Comments
 (0)