alaguraj/sky-and-soil
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement initial website structure with core pages, components, and assets.

Browse Source
This commit is contained in:
Alaguraj0361 2025-11-22 23:15:42 +05:30
parent 2e0d87a5cf
commit 355762fdff
15 changed files with 34 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/images/aerial-view.mov Normal file
View File

Binary file not shown.

BIN
public/assets/images/blue-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
public/assets/images/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
public/assets/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
public/assets/images/white-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

2
src/app/about/page.tsx
View File

@ -13,7 +13,7 @@ export const metadata: Metadata = {
export default function AboutPage() {
return (
<main className="min-h-screen bg-white">
<main className="min-h-screen bg-white dark:bg-black">
<Header />
<InnerBanner
title="About Us"

2
src/app/contact/page.tsx
View File

@ -11,7 +11,7 @@ export const metadata: Metadata = {
export default function ContactPage() {
return (
<main className="min-h-screen bg-white">
<main className="min-h-screen bg-white dark:bg-black">
<Header />
<InnerBanner
title="Contact Us"

BIN
src/app/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
src/app/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

2
src/app/lifestyle/page.tsx
View File

@ -11,7 +11,7 @@ export const metadata: Metadata = {
export default function LifestylePage() {
return (
<main className="min-h-screen bg-white">
<main className="min-h-screen bg-white dark:bg-black">
<Header />
<InnerBanner
title="Lifestyle"

2
src/app/page.tsx
View File

@ -18,7 +18,7 @@ export const metadata: Metadata = {
export default function Home() {
return (
<main className="min-h-screen bg-white">
<main className="min-h-screen bg-white dark:bg-black">
<Header />
<Hero />
<About />

11
src/components/Footer.tsx
View File

@ -1,13 +1,20 @@
import Link from "next/link";
import Image from "next/image";
export default function Footer() {
return (
<footer className="bg-gray-50 dark:bg-black pt-16 pb-8 border-t border-gray-200 dark:border-gray-800">
<div className="max-w-7xl mx-auto px-6">
<div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-12">
<div className="col-span-1 md:col-span-1">
<Link href="/" className="text-xl font-bold tracking-tight text-foreground">
Sky and Soil
<Link href="/" className="inline-block relative w-48 h-16">
<Image
src="/assets/images/blue-logo.png"
alt="Sky and Soil Logo"
fill
className="object-contain"
/>
</Link>
<p className="mt-4 text-sm text-gray-500 dark:text-gray-400">
Premium real estate in Bangalore. We connect you with nature and luxury.

16
src/components/Header.tsx
View File

@ -28,26 +28,22 @@ export default function Header() {
>
<div className="max-w-7xl mx-auto px-6 flex items-center justify-between">
<Link href="/" className="flex items-center gap-3 group">
<div className="relative w-10 h-10 overflow-hidden rounded-full bg-white/10 backdrop-blur-sm border border-white/20 shadow-sm group-hover:scale-105 transition-transform">
<div className="relative w-60 h-20 transition-transform group-hover:scale-105">
<Image
src="/logo.png"
src={isScrolled ? "/assets/images/blue-logo.png" : "/assets/images/white-logo.png"}
alt="Sky and Soil Logo"
fill
className="object-contain p-1"
className="object-contain"
/>
</div>
<span className={`text-2xl font-semibold tracking-tight group-hover:text-primary transition-colors ${isScrolled ? "text-foreground" : "text-white"
{/* <span className={`text-2xl font-semibold tracking-tight group-hover:text-primary transition-colors ${isScrolled ? "text-foreground" : "text-white"
}`}>
Sky and Soil
</span>
</span> */}
</Link>
<div className="flex items-center gap-4">
<Link href="/contact">
<button className="hidden md:block px-5 py-2 text-sm font-medium text-white bg-primary rounded-full hover:bg-blue-600 transition-colors shadow-sm hover:shadow-md active:scale-95 transform duration-200">
Book a Visit
</button>
</Link>
<button
className={`p-2 -mr-2 transition-colors ${isScrolled ? "text-foreground" : "text-white"

24
src/components/Hero.tsx
View File

@ -11,9 +11,9 @@ export default function Hero() {
muted
playsInline
className="absolute inset-0 w-full h-full object-cover"
poster="/assets/images/banglore-nit-view.mp4" // Fallback image
poster="/assets/images/aerial-view.mov" // Fallback image
>
<source src="/assets/images/banglore-nit-view.mp4" type="video/mp4" />
<source src="/assets/images/aerial-view.mov" type="video/mp4" />
{/* Note: This is a placeholder video. Replace with your Bangalore drone shot. */}
</video>
{/* Overlay */}
@ -70,25 +70,11 @@ export default function Hero() {
</span>
</h1>
<p className="text-xl md:text-2xl text-gray-100 max-w-2xl mx-auto mb-10 animate-slide-up opacity-0 drop-shadow-md" style={{ animationDelay: "0.2s" }}>
{/* <p className="text-xl md:text-2xl text-gray-100 max-w-2xl mx-auto mb-10 animate-slide-up opacity-0 drop-shadow-md" style={{ animationDelay: "0.2s" }}>
Premium properties in North Bengaluru. Experience the perfect blend of nature and luxury.
</p>
</p> */}
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-slide-up opacity-0" style={{ animationDelay: "0.4s" }}>
<Link
href="/projects"
className="px-8 py-4 text-base font-medium text-primary bg-white rounded-full hover:bg-gray-100 transition-all shadow-lg hover:shadow-xl hover:-translate-y-0.5 active:scale-95"
>
Explore Projects
</Link>
<button
className="px-8 py-4 text-base font-medium text-white border border-white/30 bg-white/10 backdrop-blur-sm rounded-full hover:bg-white/20 transition-all shadow-sm hover:shadow-md active:scale-95"
>
<Link href="/contact">
Book a Site Visit
</Link>
</button>
</div>
</div>
{/* Scroll Indicator */}

16
src/components/Sidebar.tsx
View File

@ -2,6 +2,7 @@
import Link from "next/link";
import { useEffect } from "react";
import Image from "next/image";
import { ThemeToggle } from "@/components/ThemeToggle";
interface SidebarProps {
@ -38,7 +39,14 @@ export default function Sidebar({ isOpen, onClose }: SidebarProps) {
>
<div className="flex flex-col h-full p-6">
<div className="flex items-center justify-between mb-8">
<h2 className="text-xl font-bold text-foreground">Menu</h2>
<div className="relative w-40 h-12">
<Image
src="/assets/images/blue-logo.png"
alt="Sky and Soil Logo"
fill
className="object-contain"
/>
</div>
<button
onClick={onClose}
className="p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
@ -98,11 +106,7 @@ export default function Sidebar({ isOpen, onClose }: SidebarProps) {
</span>
<ThemeToggle />
</div>
<Link href="/contact" onClick={onClose}>
<button className="w-full py-3 text-base font-medium text-white bg-primary rounded-xl hover:bg-blue-600 transition-colors shadow-lg hover:shadow-xl active:scale-95 transform duration-200">
Book a Visit
</button>
</Link>
</div>
</div>
</div>