Skip to content

Commit

Permalink
Vira
Browse files Browse the repository at this point in the history
  • Loading branch information
@gregweg
gregweg committed Nov 23, 2024
1 parent 706ca71 commit 5c8a26f
Show file tree
Hide file tree
Showing 6 changed files with 201 additions and 137 deletions.
10 changes: 10 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

11 changes: 6 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,15 @@
"lint": "next lint"
},
"dependencies": {
"lucide-react": "^0.460.0",
"next": "15.0.3",
"react": "19.0.0-rc-66855b96-20241106",
"react-dom": "19.0.0-rc-66855b96-20241106",
"next": "15.0.3"
"react-dom": "19.0.0-rc-66855b96-20241106"
},
"devDependencies": {
"postcss": "^8",
"tailwindcss": "^3.4.1",
"eslint": "^8",
"eslint-config-next": "15.0.3"
"eslint-config-next": "15.0.3",
"postcss": "^8",
"tailwindcss": "^3.4.1"
}
}
30 changes: 7 additions & 23 deletions src/app/layout.js
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,14 @@
import localFont from "next/font/local";
import "./globals.css";

const geistSans = localFont({
src: "./fonts/GeistVF.woff",
variable: "--font-geist-sans",
weight: "100 900",
});
const geistMono = localFont({
src: "./fonts/GeistMonoVF.woff",
variable: "--font-geist-mono",
weight: "100 900",
});
import './globals.css'

export const metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
title: 'Vira Yoga',
description: 'Premium yoga wear for men',
}

export default function RootLayout({ children }) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
<body>{children}</body>
</html>
);
}
)
}
102 changes: 3 additions & 99 deletions src/app/page.js
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1,5 @@
import Image from "next/image";
import ViraWebsite from '@/components/ViraWebsite';

export default function Home() {
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
<li className="mb-2">
Get started by editing{" "}
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
src/app/page.js
</code>
.
</li>
<li>Save and see your changes instantly.</li>
</ol>

<div className="flex gap-4 items-center flex-col sm:flex-row">
<a
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Read our docs
</a>
</div>
</main>
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org →
</a>
</footer>
</div>
);
}
return <ViraWebsite />;
}
170 changes: 170 additions & 0 deletions src/components/ViraWebsite.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
'use client';

import React from 'react';
import { Menu, X, Instagram, Facebook, Twitter, ShoppingBag, ChevronRight } from 'lucide-react';

const ViraWebsite = () => {
const [isMenuOpen, setIsMenuOpen] = React.useState(false);

const NavLink = ({ href, children }) => (
<a href={href} className="hover:text-orange-600 transition-colors">
{children}
</a>
);

const ProductCard = ({ title, price, imageSrc }) => (
<div className="group cursor-pointer">
<div className="aspect-w-1 aspect-h-1 w-full overflow-hidden rounded-lg bg-gray-200">
<img
src={imageSrc}
alt={title}
className="h-64 w-full object-cover object-center"
/>
</div>
<div className="mt-4 flex justify-between">
<div>
<h3 className="text-sm text-gray-800">{title}</h3>
<p className="mt-1 text-sm text-orange-600 font-medium">${price}</p>
</div>
</div>
</div>
);

return (
<div className="min-h-screen bg-stone-50">
{/* Navigation */}
<nav className="border-b border-stone-200 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16 items-center">
<div className="flex-shrink-0">
<h1 className="text-2xl font-bold text-orange-700">VIRA</h1>
</div>

{/* Desktop Navigation */}
<div className="hidden md:flex items-center space-x-8 text-gray-800">
<NavLink href="/">Home</NavLink>
<NavLink href="/shop">Shop</NavLink>
<NavLink href="/about">About</NavLink>
<NavLink href="/contact">Contact</NavLink>
<ShoppingBag className="h-6 w-6 cursor-pointer hover:text-orange-600 transition-colors" />
</div>

{/* Mobile menu button */}
<div className="md:hidden">
<button onClick={() => setIsMenuOpen(!isMenuOpen)} className="text-gray-800">
{isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
</button>
</div>
</div>
</div>

{/* Mobile Navigation */}
{isMenuOpen && (
<div className="md:hidden bg-white">
<div className="px-2 pt-2 pb-3 space-y-1">
<a href="/" className="block px-3 py-2 text-base font-medium text-gray-800 hover:text-orange-600">Home</a>
<a href="/shop" className="block px-3 py-2 text-base font-medium text-gray-800 hover:text-orange-600">Shop</a>
<a href="/about" className="block px-3 py-2 text-base font-medium text-gray-800 hover:text-orange-600">About</a>
<a href="/contact" className="block px-3 py-2 text-base font-medium text-gray-800 hover:text-orange-600">Contact</a>
</div>
</div>
)}
</nav>

{/* Hero Section */}
<div className="relative">
<div className="absolute inset-0">
<img
src="/api/placeholder/1920/1080"
alt="Hero"
className="w-full h-[600px] object-cover"
/>
<div className="absolute inset-0 bg-gradient-to-r from-orange-900/80 to-orange-700/50"></div>
</div>
<div className="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
<h1 className="text-4xl font-bold tracking-tight text-white sm:text-5xl lg:text-6xl">
Strength Through Balance
</h1>
<p className="mt-6 text-xl text-stone-100 max-w-3xl">
Premium yoga wear designed for men who embrace both power and flexibility.
</p>
<div className="mt-10">
<a href="/shop" className="inline-flex items-center px-6 py-3 border-2 border-white text-base font-medium rounded-md text-white hover:bg-white hover:text-orange-700 transition-colors">
Shop Collection
<ChevronRight className="ml-2 h-5 w-5" />
</a>
</div>
</div>
</div>

{/* Featured Products */}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<h2 className="text-2xl font-bold mb-8 text-gray-800">Featured Products</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
<ProductCard
title="Performance Yoga Shorts"
price="68"
imageSrc="/api/placeholder/400/400"
/>
<ProductCard
title="Breathable Tank Top"
price="45"
imageSrc="/api/placeholder/400/400"
/>
<ProductCard
title="Flex Pants"
price="85"
imageSrc="/api/placeholder/400/400"
/>
</div>
</div>

{/* Footer */}
<footer className="bg-stone-900 text-stone-100">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 className="text-lg font-bold mb-4 text-orange-500">Shop</h3>
<ul className="space-y-2">
<li><a href="/shop/new-arrivals" className="hover:text-orange-400">New Arrivals</a></li>
<li><a href="/shop/bestsellers" className="hover:text-orange-400">Bestsellers</a></li>
<li><a href="/shop/pants" className="hover:text-orange-400">Pants</a></li>
<li><a href="/shop/shorts" className="hover:text-orange-400">Shorts</a></li>
</ul>
</div>
<div>
<h3 className="text-lg font-bold mb-4 text-orange-500">About</h3>
<ul className="space-y-2">
<li><a href="/about" className="hover:text-orange-400">Our Story</a></li>
<li><a href="/sustainability" className="hover:text-orange-400">Sustainability</a></li>
<li><a href="/blog" className="hover:text-orange-400">Blog</a></li>
</ul>
</div>
<div>
<h3 className="text-lg font-bold mb-4 text-orange-500">Customer Service</h3>
<ul className="space-y-2">
<li><a href="/contact" className="hover:text-orange-400">Contact Us</a></li>
<li><a href="/shipping" className="hover:text-orange-400">Shipping</a></li>
<li><a href="/returns" className="hover:text-orange-400">Returns</a></li>
<li><a href="/size-guide" className="hover:text-orange-400">Size Guide</a></li>
</ul>
</div>
<div>
<h3 className="text-lg font-bold mb-4 text-orange-500">Connect</h3>
<div className="flex space-x-4">
<Instagram className="h-6 w-6 cursor-pointer hover:text-orange-400" />
<Facebook className="h-6 w-6 cursor-pointer hover:text-orange-400" />
<Twitter className="h-6 w-6 cursor-pointer hover:text-orange-400" />
</div>
</div>
</div>
<div className="mt-8 pt-8 border-t border-stone-700">
<p className="text-sm text-stone-400">© 2024 Vira. All rights reserved.</p>
</div>
</div>
</footer>
</div>
);
};

export default ViraWebsite;
15 changes: 5 additions & 10 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
extend: {
colors: {
background: "var(--background)",
foreground: "var(--foreground)",
},
},
extend: {},
},
plugins: [],
};
}

0 comments on commit 5c8a26f

Please sign in to comment.