Photography Website using React

// src/App.js

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Navbar from '../src/Components/Navbar';
import Introduction from "../src/Components/Introduction"
import PhotoGallery from "../src/Components/PhotoGallery"
import '../src/App.css';

function App() {
return (
	<Router>
	<div>
		<Navbar />
		<Routes>
		<Route path="/" element={<Introduction />} />
		<Route path="/gallery" element={<PhotoGallery />} />

		</Routes>
	</div>
	</Router>
);
}

export default App;

// src/components/Introduction.js
import React from "react";

const Introduction = () => {
	return (
		<>
			<div className="introduction">
				<div className="text">
					<h1>
						Your Photography
						Journey Begins Here
					</h1>
					<p>
						Discover the beauty
						through our lens...
					</p>
					<p>
						Capture moments, tell stories,
						and create memories that last a
						lifetime.
					</p>
					<button className="explore-button">
						Explore Now
					</button>
				</div>
				<div className="image">
					<img
						src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240122102536/1-(3).jpg"
						alt="Introduction"
					/>
				</div>
			</div>
			<div className="buy-plans">
				<h2>Buy Plans and Subscriptions</h2>
				<p>
					Unlock premium features and exclusive
					content with our subscription
					plans.
				</p>
				<div className="subscription-options">
					{/* Placeholder content for subscription options */}
					<div className="subscription-option">
						<h3>Basic Plan</h3>
						<p>Access to a limited set of features</p>
						<p>$9.99/month</p>
						<button className="subscribe-button">
							Subscribe
						</button>
					</div>
					<div className="subscription-option">
						<h3>Pro Plan</h3>
						<p>
							Full access to all features
							and exclusive content
						</p>
						<p>$19.99/month</p>
						<button className="subscribe-button">
							Subscribe
						</button>
					</div>
				</div>
			</div>
		</>
	);
};

export default Introduction;

// src/components/Navbar.js
import React from 'react';
import { Link } 
	from 'react-router-dom';
// Import the external CSS file for Navbar styles
import './Navbar.css'; 

const Navbar = () => {
	return (
		<nav className="navbar-container">
			<div className="logo">
				<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240122102711/2.png"
					alt="Logo" />
			</div>
			<ul className="nav-links">
				<li><Link to="/">
					Home
				</Link></li>
				<li>
					<Link to="/gallery">
					Gallery
					</Link>
				</li>
				{/* Add more navigation items as needed */}
			</ul>
		</nav>
	);
};

export default Navbar;

// src/components/PhotoGallery.js
import React, { useState } from 'react';
import { Link } from 'react-router-dom';

const PhotoGallery = () => {
	// Assuming photos is an array of image URLs
	const photos = [
'https://media.geeksforgeeks.org/wp-content/uploads/20240122102942/1a-(2).jpg',
'https://media.geeksforgeeks.org/wp-content/uploads/20240122102942/2b.jpg',
'https://media.geeksforgeeks.org/wp-content/uploads/20240122103211/13.jpg',
'https://media.geeksforgeeks.org/wp-content/uploads/20240122103211/15.jpg',
'https://media.geeksforgeeks.org/wp-content/uploads/20240122103210/12.jpg',
'https://media.geeksforgeeks.org/wp-content/uploads/20240122103210/14.jpg'
	];

	return (
		<div className="photo-gallery">
			{photos.map(
				(photo, index) => (
					<Link to={`/photo/${index}`}
						key={index}>
						<img src={photo}
							alt={`Photo ${index + 1}`} />
					</Link>
				))}
		</div>
	);
};

export default PhotoGallery;