-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
ui: Update Photo-Reels & Landing Page UI
- Loading branch information
Showing
13 changed files
with
847 additions
and
339 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import PropTypes from 'prop-types' | ||
|
|
||
| const Button = ({ | ||
| children, | ||
| onClick, | ||
| className = "", | ||
| variant = "primary", | ||
| icon = null, | ||
| size = "md" | ||
| }) => { | ||
| const baseStyles = "flex items-center justify-center gap-2 font-medium transition-all duration-300 rounded-full" | ||
|
|
||
| const variants = { | ||
| primary: "bg-black/80 backdrop-blur-sm text-white hover:bg-black", | ||
| secondary: "bg-white/80 backdrop-blur-sm text-black hover:bg-gray-50", | ||
| outline: "border-2 border-black text-black hover:bg-black hover:text-white" | ||
| } | ||
|
|
||
| const sizes = { | ||
| sm: "px-5 py-2 text-sm", | ||
| md: "px-7 py-3 text-[14px]", | ||
| lg: "px-9 py-4 text-base" | ||
| } | ||
|
|
||
| return ( | ||
| <button | ||
| onClick={onClick} | ||
| className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`} | ||
| > | ||
| {children} | ||
| {icon && <span className="text-lg">{icon}</span>} | ||
| </button> | ||
| ) | ||
| } | ||
|
|
||
| Button.propTypes = { | ||
| children: PropTypes.node.isRequired, | ||
| onClick: PropTypes.func, | ||
| className: PropTypes.string, | ||
| variant: PropTypes.oneOf(['primary', 'secondary', 'outline']), | ||
| icon: PropTypes.node, | ||
| size: PropTypes.oneOf(['sm', 'md', 'lg']) | ||
| } | ||
|
|
||
| export default Button |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,67 @@ | ||
| export default function Footer () { | ||
| import { Link } from "react-router" | ||
| import { FiCamera, FiInstagram, FiTwitter, FiYoutube } from "react-icons/fi" | ||
|
|
||
| export default function Footer() { | ||
| return ( | ||
| <h1>Footer!</h1> | ||
| <footer className="bg-white border-t border-gray-100"> | ||
| <div className="max-w-7xl mx-auto px-6 py-12"> | ||
| <div className="grid grid-cols-1 md:grid-cols-4 gap-8"> | ||
| {/* Brand */} | ||
| <div className="col-span-1"> | ||
| <div className="flex items-center gap-2"> | ||
| <FiCamera size={24} /> | ||
| <span className="font-playfair text-xl">Photography Club NITK</span> | ||
| </div> | ||
| <p className="mt-4 text-sm text-gray-600"> | ||
| Capturing moments, creating memories, and fostering a community of passionate photographers. | ||
| </p> | ||
| </div> | ||
|
|
||
| {/* Quick Links */} | ||
| <div className="col-span-1"> | ||
| <h3 className="font-medium mb-4">Quick Links</h3> | ||
| <div className="flex flex-col gap-2 text-sm text-gray-600"> | ||
| <Link to="/" className="hover:text-red-500 transition-colors">Events</Link> | ||
| <Link to="/portfolio" className="hover:text-red-500 transition-colors">Members</Link> | ||
| <Link to="/" className="hover:text-red-500 transition-colors">Blogs</Link> | ||
| <Link to="/photo-reels" className="hover:text-red-500 transition-colors">Photo Reel</Link> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Resources */} | ||
| <div className="col-span-1"> | ||
| <h3 className="font-medium mb-4">Resources</h3> | ||
| <div className="flex flex-col gap-2 text-sm text-gray-600"> | ||
| <Link to="/" className="hover:text-red-500 transition-colors">Photography Tips</Link> | ||
| <Link to="/" className="hover:text-red-500 transition-colors">Equipment Guide</Link> | ||
| <Link to="/" className="hover:text-red-500 transition-colors">Join the Club</Link> | ||
| <Link to="/" className="hover:text-red-500 transition-colors">Contact Us</Link> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Social */} | ||
| <div className="col-span-1"> | ||
| <h3 className="font-medium mb-4">Follow Us</h3> | ||
| <div className="flex gap-4"> | ||
| <a href="#" className="text-gray-600 hover:text-red-500 transition-colors"> | ||
| <FiInstagram size={20} /> | ||
| </a> | ||
| <a href="#" className="text-gray-600 hover:text-red-500 transition-colors"> | ||
| <FiTwitter size={20} /> | ||
| </a> | ||
| <a href="#" className="text-gray-600 hover:text-red-500 transition-colors"> | ||
| <FiYoutube size={20} /> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className="mt-12 pt-8 border-t border-gray-100"> | ||
| <p className="text-center text-sm text-gray-600"> | ||
| © {new Date().getFullYear()} Photography Club NITK. All rights reserved. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.